バンダイチャンネルが7月下旬から11月にかけて期間限定でiphone,ipad上で無料動画を配信していたことをご存じでしょうか？
公開中にこの記事を書けば良かったのですがいつのまにやらこんなに日にちが経っていました…。このまま記事を下書きにしておくのももったいないので公開してみようと思います。
UI、デザイン、マークアップディレクションを担当
UI及びサイトデザイン、及びマークアップ関連のディレクションを担当させていただきました。実際のマークアップやAJAXの部分はチームまめこの優秀なマークアップエンジニャーさんによるものです。さすが! iPhone、iPadのような新しいデバイスでのデザインはPCと似ているようで非なる箇所が多く、本サイトをデザインするにあたり多く気付かされた事がありました。
iPhone版について
インターフェイス
情報を優先順位にのっとってメリハリがPCのそれよりも大袈裟になりました。表示領域が少ないため必然的な流れではありますね。メインである動画コンテンツの前にくるロゴやお知らせなどは極力高さをとらないようにする工夫がありました。
余白
上記でもふれた表示領域の影響で、余白で情報を分けるのは得策でない事が分かりました。当初10px～20px程度の余白で情報を切り分けていましたが最近リニューアルされたiphone版youtubeは極力余白をとらず、罫線やグラデーションの変化で情報を分けていますね。思った以上に薄くて良いようです。PCの感覚そのままに作っていたのが一番顕著にでたところです。
余白を少なめに罫線で情報を分けている
一覧表示
「次の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)
【"iPad"】 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/bfzE0g #ipadjp #iphonejp
iPad サイト制作者の気持ち。 RT @cold_blaze: 【"iPad"】 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/bfzE0g #ipadjp #iphonejp
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) – http://goo.gl/9pRU4
[iphone] 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/aUhBRW
ページ遷移は今後極力無くしていってもらいたいね/ 「iPhoneにはトップへ一気に戻れる機能がついている」メニューバーをタップすればいいのか、知らなかった… / 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウ… http://htn.to/Gjst7K
みた 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/bhhcEA
[hatena antenna] 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/bGF6hr
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブロ…: http://ipad.headline-jp.info/2010/11/19/124819 http://bit.ly/bfzE0g
[link] / 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/R8Vdio
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/dlTI1R
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス …: UI及びサイトデザイン、及びマークアップ関連のディレクションを担当させていただき ました。実際のマークアップやAJAXの部分はチームま… http://bit.ly/aGxMGD
ウープスデザインブログ (デザイナーまめこ) – 今さらだけどiphone,ipadサイト制作をしてみて感じたこと http://bit.ly/aiNUEt
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス … http://dlvr.it/8p4tM
ウープスデザインブログ (デザイナーまめこ) – 今さらだけどiphone,ipadサイト制作をして… 1人が登録 http://bit.ly/9eQuUd
[GoogleAlert] 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス … http://bit.ly/dhDVZn
はてな: 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/cldkSX
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8pPBd
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8pPjx
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8pPpf
[IT] 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://30m.in/8pQXD
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8pRNj
iPhone 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス …: UI及びサイトデザイン、及びマークアップ関連のディレクションを担当させていただき… http://dlvr.it/8phGW
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス … http://dlvr.it/8pjZj
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/xdV6XJ
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/aEprtZ #iphonejp #iphone4jp #ipadjp #applejp
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/a7Gydq
[iPhone]今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://goo.gl/fb/E3gHd
昼間もツイートしたけど、再度ツイート。理想を追い求めるTipsもいいが、今の段階で実践したこういうレポートは貴重。→ 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ: http://bit.ly/bW0bgp
漫画向けの「めくる」インタフェースもいいけど、もうずっと横に続いてるページもありなのかなと思った "今さらだけどiphone,ipadサイト制作をしてみて感じたこと" http://bit.ly/cCTkz1
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8q5NW
『今さらだけどiphone,ipadサイト制作をしてみて感じたこと』 http://bit.ly/c1Rvwl UXを向上させる工夫
RT @LunarModule7: 『今さらだけどiphone,ipadサイト制作をしてみて感じたこと』 http://bit.ly/c1Rvwl UXを向上させる工夫
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://dlvr.it/8q8C9
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス … http://bit.ly/cpfQzE #ipadJP #iphoneJP
見てる: 『今さらだけどiphone,ipadサイト制作をしてみて感じたこと』 http://bit.ly/aVuVDz
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/P7kPv9
今さらだけどiphone,ipadサイト制作をしてみて感じたこと http://p.tl/B3AM
[iPhone][ipad] / 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/fmppE1
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープス http://goo.gl/9pRU4
某企画で似た事をやった。ほぼ同じような考えになった。→今さらだけどiphone,ipadサイト制作をしてみて感じたこと http://j.mp/90G5wP
20年後にはすべてのＰＣがiPadみたいになってたりしてｗ / 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/8tMaCZ
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/pfv9mN
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://htn.to/zdN5rH
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ) http://bit.ly/hjevFo #ipad #apple
今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイナーまめこ): 今さらだけどiphone,ipadサイト制作をしてみて感じたこと « ウープスデザインブログ (デザイ… http://bit.ly/nIUQhw
ふむーん：今さらだけどiphone,ipadサイト制作をしてみて感じたこと | ウープスデザインブログ (デザイナーまめこ)… http://t.co/Ed8ZkuyA