スマートフォン用のWebデザイン
この前は、いろんな画面サイズに対応するレスポンシブWebデザインのページをいくつか取り上げて、ブラウザの画面サイズを広げたり、狭めたりしてあそんで 試してみました。
じゃあ、スマホ専用サイトはどんなことになっているのだろうと思い、いろいろなWebが集められているページを探してみました。
そこから、いくつかのパターンを取り上げてみます。
まずは、テキストばっかりのWeb。
文字だけでも、フォントの使い方やその情報をどこまで表示させるのかを工夫すれば、見やすくなりますね。
続いて、メインの画像はそのまま利用。
■niko and… magazine
具体的な記事の部分には写真を使わず、タイトルと簡単な説明ですっきりさせてあります。
それがさらに進んで、
■Bad Mergentheim
カテゴリー分けしっかりして、それぞれすっきりボタンになっているもの。
また、そこまで分類しなくても…
■MIT Mobile Web
項目分けが、細かいのだけど、アイコンなのでわかりやすくなっています。
このように、スマートフォンのサイトでは、どこをクリックするのかが、PC用のWebよりもわかりやすくなっているように感じました。
そして、スマートフォンでWebを見るとき、PCとちょっと違うところが、画面をどんどんスワイプさせるというところ。
そんな操作をうまく使っているなと思ったWebもありました。
■Care
PC用にはかなりの文字情報がありますが、スマホ用ではイラストがどんどん入れ替わります。
そして最後は…
■JINS PC | 1DAY SCROLL
これはもう、一種の映像ですね。
マウスホイールのスクロールでは、ちょっとしんどい。
情報の集め方が変われば、集められる情報の伝え方もどんどん進化していきます。
こんなことできるかなってことをいっぱいためておかないといけなさそうです。
【参考】
・優れたスマートフォンサイトデザイン集 - iPhoneデザインボックス
（iPhoneサイトということなので、Androidで見ると違うのですかね。）
（かんざわ）
