🌟✨design-s's diary📔📖

スマートフォンやタブレットなどの普及により、Webサイトのレイアウトにも変化が出てきた。
基本形のカラムレイアウトに加え、最近のよく見かけるレイアウトのパターンを６つに分けて見てみよう。
・シングルカラムCode Grid・・・リンク先です。
マルチデバイスに対応しやすく、訪問者が情報を読むことに集中できる大きなメリットあり。
・マルチカラムNewsweek・・・リンク先です。
よく見られるレイアウトパターン。情報量が多いサイトに向いていて、ナビゲートにも優れているためニュースサイトや企業サイトなどで多く採用されている。
・カード、1ページアプリケーション型Pinterest・・・リンク先です。
Facebook、google PlusやPinterestなどで採用され、最低限に抑えた情報をカプセルに詰めて並べるイメージだ。
１ページアプリケーション型は、Backbone.jsやAngularJSなどのライブラリを使用して、ページ遷移せずとも画面を切り替えて、表示・操作を単一のページ上で可能にするアプリケーションだ。
・フルスクリーン型CHANEL・・・リンク先です。
写真のギャラリーサイトやブランドイメージを全面に出したい各種プロダクトの紹介ページに使われるケースが多い。
・グリッドを利用したレイアウト手法Bootstrap・・・リンク先です。
縦横の格子(グリッド)をベースとして、ブロックごとにコンテンツを配置していく手法。Foundationも代表的例。
・レスポンシブなレイアウトパターンMedia Queries・・・リンク先です。
％で指定し常にウィンドウサイズに対して可変するレスポンシブWebデザインに対して、pxで指定し特定のウィンドウサイズでレイアウトを切り替えることは「アダプティブデザイン」というそうだ。

これ以外のパターンに一風変わったユニークなレイアウトを見かけることもあるが、作るサイトの目的に応じた適切なレイアウトを考え、ユーザーに情報を届けることが大切だ。

✨ 本-デザイン のカテゴリで新たに WEBデザインの大原則を見ていくことにする。原本を掻い摘んで 分かりやすいものにしていくつもりです。是非 参考にして下さい。