ウープスデザイン ブログ

デザインのお話、レビュー、ノマドなワークスタイル、バイクや夏フェスなどの趣味のことを。

今さらだけどiphone,ipadサイト制作をしてみて感じたこと

2010年11月19日

バンダイチャンネルが7月下旬から11月にかけて期間限定でiphone,ipad上で無料動画を配信していたことをご存じでしょうか?
公開中にこの記事を書けば良かったのですがいつのまにやらこんなに日にちが経っていました…。このまま記事を下書きにしておくのももったいないので公開してみようと思います。

UI、デザイン、マークアップディレクションを担当

UI及びサイトデザイン、及びマークアップ関連のディレクションを担当させていただきました。実際のマークアップやAJAXの部分はチームまめこの優秀なマークアップエンジニャーさんによるものです。さすが! iPhone、iPadのような新しいデバイスでのデザインはPCと似ているようで非なる箇所が多く、本サイトをデザインするにあたり多く気付かされた事がありました。

iPhone版について

インターフェイス

情報を優先順位にのっとってメリハリがPCのそれよりも大袈裟になりました。表示領域が少ないため必然的な流れではありますね。メインである動画コンテンツの前にくるロゴやお知らせなどは極力高さをとらないようにする工夫がありました。

余白

上記でもふれた表示領域の影響で、余白で情報を分けるのは得策でない事が分かりました。当初10px~20px程度の余白で情報を切り分けていましたが最近リニューアルされたiphone版youtubeは極力余白をとらず、罫線やグラデーションの変化で情報を分けていますね。思った以上に薄くて良いようです。PCの感覚そのままに作っていたのが一番顕著にでたところです。

youtube
余白を少なめに罫線で情報を分けている

一覧表示

「次の10件を表示する」をクリックするとページ遷移せずに、続きが表示されるようにしました。やっぱりiPhoneの回線や処理速度から考えると遷移は少なくしてあげた方がストレスは少ないようですね。たくさん表示されると重くなるのでは?という懸念もありましたが100件近く表示してもさくさくなので問題なさそうです。

リンク、ボタン

タッチパネルで押しづらいことがあるので、テキストリンクは重要な遷移には使用しない方が良さそうです。十分にサイズをとる必要があるためボタンの見た目を多くとりました。単純にリンクの範囲を余白などで広げてあげるだけでも良いかもですね。

トップへ戻る

これはかなり頭を悩ませました。iPhoneにはトップへ一気に戻れる機能がついているので不要なのでは?と思いましたが意外に知らない人もいるのでサイト側でサポートした方が良いかなとつけました。フッター部分は上部での高さほど重要性がないので無理に削る必要もありませんでした。

フリックは一方向が良い?

まだまだ疑問な箇所です。関連する動画を表示させるのに「カルーセル」というiTunesで言えばCoverflowみたいなインターフェイスにしようとしたのですが、こんな小さな画面でちょこちょこと横スクロールするのは情報もちょっとしか見えないし操作もめんどうだし得策ではないのかな?と思っています。片手で親指フリック操作することばかり考えていたのですが、フリックをもう片方の人差し指で行う人もいるのでそうでもないのでしょうか。YahooのiPhoneサイトは日米どちらもカルーセルを採用しているのでアリなのかな?「写真で見るニュース」のようなコンテンツだからこそという気もします。コンテンツによるのかもですね。


写真で見るニュースがカルーセル表示になっている

iPad版について

iPad用サイトの必然性

十分な表示領域があるのでPCサイトでも快適に閲覧できます。iPad専用として作るのであれば「どう差別化するのか」というコンセプト作りがいりますね。1024×768は少し昔のモニタのサイズでもあるけどiPadと閲覧する距離や姿勢も異るのでそこら辺もポイントになるのかな?

スクロール方向

iPad発売時に話題になったiPad用マガジン wiredは上下左右にスクロールができました。さすがに全方向だとどこに進んでいいやら分からないので統一したいですがここら辺を上手く利用しておもしろい事してみたいですね。

版面あたりの情報量取捨選択

スクロールさせず1024×768ピッタリに収まるように作るのが美しいと感じました。AJAXなどでの動的な読み込みとページ遷移のみで作ってみたいです。

※ちなみに上下左右すきにスクロールさせて遊ぶブラウザでのRPGなど作ってみたらおもしろそう。PCでも楽しめそうだけど平置きするiPadならより新鮮さがでそうですね。

縦、横自在ならではのUI

縦と横の画面、二つのパターンが必要な時もあり、一つのhtmlでどこまで広げるか。というのもちょっとしたポイントな気がします。優れたサイトでは縦表示と横表示の時で一覧される数が変わったり、リスト表示からサムネイル表示になるものまであるようです(聞きかじり)。全ページで必要だとは思いませんが要所要所の使いどころが問われそうです。

まぁ、それをするとデザインするページが単純に倍になるのでいろいろ考えることがありますが。

全体のデザイン

iPhone,iPadのビジュアルが秀逸なだけにコンテンツの世界観を出すかAppleの世界観を踏襲するかも迷いました。ここは扱う内容によりますね。バンダイチャンネルのようにコンテンツに強い魅力があり快適に閲覧するという事が考えるとインターフェイスのビジュアルは極力シンプルなものが良いですね。「すぐ見たい」「しっかり見たい」「長時間滞在する」などの要素も検討して作る必要がありそうです。

追記:最後に私の参加している株式会社Mogicではスマートフォン対応もしています! お問い合わせはこちらまで〜。
info@mogic.jp

イシジマミキにインタビューをする (the interviews)

▲ ページ上部へ戻る

96 Responses 今さらだけどiphone,ipadサイト制作をしてみて感じたことto “”

  1. 【"iPad"】 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/bfzE0g #ipadjp #iphonejp

  2. iPad サイト制作者の気持ち。 RT @cold_blaze: 【"iPad"】 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/bfzE0g #ipadjp #iphonejp

  3. くろ より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) – http://goo.gl/9pRU4

  4. Kz より:

    [iphone] 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/aUhBRW

  5. ページ遷移は今後極力無くしていってもらいたいね/ 「iPhoneにはトップへ一気に戻れる機能がついている」メニューバーをタップすればいいのか、知らなかった… / 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウ… http://htn.to/Gjst7K

  6. みた 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/bhhcEA

  7. axcel_rss より:

    [hatena antenna] 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/bGF6hr

  8. 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブロ…: http://ipad.headline-jp.info/2010/11/19/124819 http://bit.ly/bfzE0g

  9. [link] / 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/R8Vdio

  10. akio yoshikawa より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/dlTI1R

  11. keysfeed より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス …: UI及びサイトデザイン、及びマークアップ関連のディレクションを担当させていただき ました。実際のマークアップやAJAXの部分はチームま… http://bit.ly/aGxMGD

  12. ウープスデザインブログ (デザイナーまめこ) – 今さらだけどiphone,ipadサイト制作をしてみて感じたこと http://bit.ly/aiNUEt

  13. 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス … http://dlvr.it/8p4tM

  14. webdesignStatio より:

    ウープスデザインブログ (デザイナーまめこ) – 今さらだけどiphone,ipadサイト制作をして… 1人が登録 http://bit.ly/9eQuUd

  15. R_atmark より:

    [GoogleAlert] 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス … http://bit.ly/dhDVZn

  16. はてな: 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/cldkSX

  17. MyGoogleReader より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8pPBd

  18. kyaro_os_2 より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8pPjx

  19. infokubo より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8pPpf

  20. Tomo Mars より:

    [IT] 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://30m.in/8pQXD

  21. My Rss Feed より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8pRNj

  22. iPhone 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス …: UI及びサイトデザイン、及びマークアップ関連のディレクションを担当させていただき… http://dlvr.it/8phGW

  23. 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス … http://dlvr.it/8pjZj

  24. fukuchi より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/xdV6XJ

  25. xedge2go より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/aEprtZ #iphonejp #iphone4jp #ipadjp #applejp

  26. 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/a7Gydq

  27. [iPhone]今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://goo.gl/fb/E3gHd

  28. robert32 より:

    昼間もツイートしたけど、再度ツイート。理想を追い求めるTipsもいいが、今の段階で実践したこういうレポートは貴重。→ 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ: http://bit.ly/bW0bgp

  29. Kaku Ito より:

    漫画向けの「めくる」インタフェースもいいけど、もうずっと横に続いてるページもありなのかなと思った "今さらだけどiphone,ipadサイト制作をしてみて感じたこと" http://bit.ly/cCTkz1

  30. GReader より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8q5NW

  31. LM-7 より:

    『今さらだけどiphone,ipadサイト制作をしてみて感じたこと』 http://bit.ly/c1Rvwl UXを向上させる工夫

  32. jun yamadera より:

    RT @LunarModule7: 『今さらだけどiphone,ipadサイト制作をしてみて感じたこと』 http://bit.ly/c1Rvwl UXを向上させる工夫

  33. feeeeeds より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8q8C9

  34. iP_BOT より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス … http://bit.ly/cpfQzE #ipadJP #iphoneJP

  35. hidehish より:

    見てる: 『今さらだけどiphone,ipadサイト制作をしてみて感じたこと』 http://bit.ly/aVuVDz

  36. line180 より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/P7kPv9

  37. しぶりび より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと http://p.tl/B3AM

  38. Horikiri Tetsuo より:

    [iPhone][ipad] / 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/fmppE1

  39. TA90EBISU より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス http://goo.gl/9pRU4

  40. maruyama ryuhei より:

    某企画で似た事をやった。ほぼ同じような考えになった。→今さらだけどiphone,ipadサイト制作をしてみて感じたこと http://j.mp/90G5wP

  41. 20年後にはすべてのPCがiPadみたいになってたりしてw / 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/8tMaCZ

  42. suVene より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/pfv9mN

  43. tsutomura より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/zdN5rH

  44. iPad Summary より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/hjevFo #ipad #apple

  45. taetae109 より:

    今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ): 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイ… http://bit.ly/nIUQhw

  46. マイカタとお酒を飲もう より:

    ふむーん:今さらだけどiphone,ipadサイト制作をしてみて感じたこと | ウープスデザインブログ (デザイナーまめこ)… http://t.co/Ed8ZkuyA

Leave a Reply