新刊ピックアップ

スマートフォンサイトのレイアウトパターン

この記事を読むのに必要な時間:およそ 1 分

Webサイトをスマートフォンに対応させることはもう当たり前のこととなりました。小さな画面にタッチ操作。この2点だけをとってもPCとは大きく異なるスマートフォンですから,Webサイトの作り方も当然,大きく異なります。それはビジュアルデザインやコーディングより前の段階,つまり設計やデザインの段階にも強くあてはまります。

では,具体的にどのように設計すればよいのかを,おもにIA(情報アーキテクチャ)とUI(ユーザーインターフェイス)設計の2つの側面から解説したのがスマートフォンサイト設計入門です。ここでは,その中からレイアウトパターンについてごく簡単に紹介してみましょう。

パターンとは,簡単にいえば「典型」のこと。広く繰り返し活用できる一定の型のことをいいます。長い歴史をもつPCサイトにはすでに多くのレイアウトパターンが確立されていますが,スマートフォンサイトにもすでにいくつかのパターンを発見することができます。

タブ・ボタン型レイアウト

タブやボタンによって表示を切り替えるレイアウトです。PCサイトと同様,切り替えメニューとしても使われますが,画面サイズの小さいスマートフォンサイトでは,とくにグローバルまたはローカルナビゲーションとしても多用されています。

ことりっぷ センチュリー21 ピザハット

アイコン型レイアウト

図を見ればわかるとおり,スマートフォンらしさを感じさせるレイアウトです。シンプルで見やすく理解しやすいのが特徴です。そのため,サイトのゴールが明確な場合や,直接あるコンテンツに誘導したい場合に有効です。

ケンタッキーフライドチキン ソフトバンクセレクション 三菱商事

リスト型のレイアウト

いちばんよく見かけるのは,このリスト型かもしれません。派手さはありませんが,汎用性の高さが魅力です。というのは,さきほどの2パターンとは異なり,メニューの数やラベルの文字数が多くなっても対応しやすいからです。ECサイトやニュースサイトの下層ページで,コンテンツ一覧などによく利用されています。

OZmall amazon.co.jp ローソン

ここまで読んでいただいただけでもわかるように,3つのレイアウトパターンに,単純な優劣はありません。しかし,用途によって向き/不向きはあります。ですから,1つのサイト内ではもちろん,1ページの中でもこの3つのパターンが併用されていることがあります。

「なんとなくかっこいいからアイコン型にしよう」⁠⁠なんでもたくさんぶちこめるし,作るのも簡単そうだからリスト型にしておこう」⁠そんなふうに安易に判断するのではなく,ユーザーのニーズをふまえて,場面ごとに適切なレイアウトパターンを採用したいものです。

コメント

コメントの記入