モバイルデザイン最前線

第10回 iPhoneサイトのデザイン（その6）-ポータルサイトの情報整理術-

「モバイルデザインアーカイブ」主宰 津田武

今回のiPhoneサイトは、ニュース・検索を中心としたポータルサイトにフォーカス。情報が多岐に渡る分野では、いかに情報を整理しながら「320×480ピクセル」という限られた画面サイズの制限をクリアしていくかがカギである。今回取り上げるサイトには、デザインやレイアウトだけでなくHTML5などの機能を上手く活用し、情報の見せ方を工夫しているものもある。
※なお、ここでのｉＰｈｏｎｅサイトの定義は「320×480ピクセルの端末で閲覧するのに不自由なく最適化されているサイト」とした。

▽HTML5活用
検索・ニュースサイトとしてお馴染みのYahoo! Japan。以前はアイコンを碁盤目状に並べたiPhone的なデザインだったが、リニューアル後はHTML5を活用したテキストが中心のサイトに変更された。

ニュース見出しが表示されているので、即時性ある情報がTOPページで把握できるのが特徴。日々利用することが想定される「メール」「占い」「天気」などはサイト最上位に配置し、スクロールをしなくても簡単にタップできる工夫もなされている。GPSで自分の位置を割り出し、近くのショップや路線を検索できる仕組みもありがたい。

▽視覚的に訴え
一方で、同社の運営する「Yahoo!きっず」はアイコンを配置し、アイコンひとつひとつにキャラクターや内容を連想させるアイコンを配置しているのが特徴。Yahoo! Japan公式サイトとは異なり、視覚的に分かりやすく使いやすいことをアピールしているのであろう。同じサイトでも、ターゲットに合わせてデザインを変えている好例と言える。

▽アプリ感覚で
ウェブサイトの"お気に入り"を他人と共有できる「はてなブックマーク」。文字が中心のシンプルな構造だが、それもそのはず、サイト左上のロゴタップに注目。ここにカテゴリや人気エントリー、さらにはページ設定情報などが網羅されているのである。

また、プルダウンのような感覚で降りてきて、その下のページが透けて見えるのでページが移動したような感覚もなく、迷わずに使いやすい構造。アプリケーションを触っているような感覚さえ覚える。情報整理の仕方にこだわりを感じさせるサイトである。

▽誤操作を防止
asahi.com のサイト。テキストが中心のシンプルなサイトであるが、基調である赤とモノトーンの装飾によりデザイン性を感じさせるサイトに仕上がっている。

記事の見出しは文字だけでなく周りの枠まで含めてタップでき、また記事間の間隔も取られていることから、誤操作をしにくく、見た目にも分かりやすい工夫がなされている。

「写真」「動画」などは、旬の情報がひと目で見られ、絵を見て直感的に興味を湧かせる構造だ。

▽簡潔にまとめる
カテゴリ別にニュース記事の見出しを並べたgoo。スペースを考え、見出しを1行で簡潔にまとめているのが特徴。すっきりしていて、かつ内容も理解しやすい。カテゴリも多すぎず、シンプルさを感じさせる。サービス一覧は、探しやすいように"あいうえお"検索ができる。

最新のiPhoneサイトデザインは、iPhoneデザイナーのためのiPhoneデザインリンク集「iPhoneデザインアーカイブ」（http://iphonedesignarchive.jp/）をぜひご覧ください。

津田武（つだ・たける）
1978年三重県生まれ、米University of DallasにてMBAを修了。
新日鉄ソリューションズを経て、ニューインデックス株式会社を設立、同社代表取締役社長。サイト「モバイルデザインアーカイブ」を主宰し、書籍「モバイルデザインアーカイブの本」（春日出版）シリーズに携わる
http://mobiledesignarchive.jp/