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

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

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

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

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

アイコン型レイアウト

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

リスト型のレイアウト

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

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

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