こんにちは！昨日、体調不良でノックダウンしていた小椋です！（笑）
最近、胃が痛くなるんですよね。昨日は吐き気もすごかったですが、
久々、そんなことになるとすげ～しんどい…。
本日は、レイアウトの話と共通してくるんですが、
気になることがあったのでお話しさせていただきます。
グリッド型デザイン
レイアウト手法の一つで、
前回説明した「タイル」と似ていますが、コンテンツ配置に特徴のある「グリッドレイアウト」です。
フォトグラファーがポートフォリオを載せるような、ギャラリーサイトで多く見られたスタイルですが、
現在では企業サイトなどでもトピックスを一覧で並べたり、
制作実績を一覧で表示したりするなど、整然とした印象の中に、
少し遊び心を感じさせるようなWEBサイトに使われているみたいです。
グリッドとは「格子状の」という意味がありますが、
画面を縦と横で分断した方眼のブロックを組み合わせて、
コンテンツを配置していく画面設計手法のひとつになります。
グリッドデザインのタイプ別
グリッド型デザインは大きく分けて2種類あるみたいです。
一つは、カード型グリッドデザイン。
もう一つは、可変グリッドデザイン。
あまり、聞きなれないですよね。
①カード型グリッドデザイン
これは、コンテンツをカードを並べたようなレイアウトにしたものです。
画像があって下にテキストが順よく並んでいるような感じですかね。
かなりすっきりしていて、見やすいと思います。
②可変グリッドデザイン
こちらは、ブラウザの幅に合わせてコンテンツの幅や一を変化させるデザインです。
カード型と違ってコンテンツが不規則に並んでいることが多いです。
ファッション系でよく見られるかな。
すっきり見やすいと言ったわけではないですが、
オシャレで一番見せたいコンテンツを目立たせることができます。
個人的には、可変型が好きなので、今回可変型のサイトに挑戦しています。
だからこそ、迷いがかなり生まれてるのかな
グリッド型の特徴はこれだけではなく、調べるとたくさんでてくるので、
皆さんも気になる方は調べてみて下さい！
メリットとデメリット
グリッドデザインのメリットとデメリットはというと、
メリット
・ 一瞬で多くの情報を見せることができる
・ サムネイル画像などを整列することでクリックがしやすい
・ 整列したコンテンツを配置することでサイト全体の統一感が出やすい
・ コンテンツの追加更新が効率的にできる
デメリット
・ 一度に入ってくる情報量が多くなるため、どこから見れば良いのか迷いやすくなる
・ 更新頻度高いWEBサイト程、過去に興味のあった記事を見つけにくい
・ 全体的な統一感があることにより、コンテンツごとの重要度に差をつけにくい
最後に…
ギャラリーや作品紹介などのように、
情報の優先度にそこまで差がないWEBサイトには向いているが、
コンテンツの内容によって、強弱をつけたい場合には、
色で区別したり、コンテンツの大きさに違いを出さないとその重要度の差を出しにくい。
写真とテキストを上手く使い分ければ、整ったサイトになるかと個人的に思います。
ただ規則的に並べれば良いということではなく、
コンテンツ間のスペースやテキストのサイズ、画像のトリミングなど、
様々な要素を組み合わせることにより、
それぞれのサイトごとに違った印象を持たせることが出来るというのも
グリッドレイアウトの良いところだと私は思います。
ogura takuya