Webサイトにおいて、来訪者に与える印象を大きく左右する要素といえば、何を思い浮かべますか。画像や色使い、フォントなどとともに、大きく影響する要素として「レイアウト」もあげられると思います。
「レイアウト」、すなわち「コンテンツの配置」は、ユーザエクスペリエンスとユーザビリティに直接関わるのは言うまでもありません。この「レイアウト」の作成に役立つツールの一つとして、「グリッド」があります。そしてこの「グリッド」を利用して作成したレイアウトを「グリッドレイアウト」と呼びます。今回はアイデア次第で様々な可能性を生み出せる「グリッドレイアウト」について考察します。
グリッドレイアウト（grid layout）は、グリッドシステム（grid system）、グリッドデザイン（grid design）とも呼ばれ、Webページなどを設計する際の手法の一つです。「グリッド（grid）」とは格子(状のもの)、方眼(状のもの)という意味で、グリッドレイアウトは画面やページを縦横に分断する直線で格子状に分割し、ブロックを組み合わせて各要素の大きさや配置、余白などの画面構成を決定していく手法です。
もともとは新聞や雑誌などの印刷物のレイアウトでよく使われてきた手法ですが、Webサイトのデザインにも応用ができます。文章や画像といった構成要素の境界線がグリッド線に合うように配置することで、マージンや余白の取り方などが統一され、大きさの異なるパーツがたくさんあっても整理された印象を与えられます。
グリッドレイアウトを使う場合、Webページのレイアウトをコンテンツに合わせて最適なグリッドに分割する、というオリジナルのグリッドを作成することはもちろん可能です。一方、グリッドレイアウト用のテンプレートも数多く存在していますので、直接ダウンロードして利用することもできます。その中でも有名なのは「960 GRID SYSTEM」という、ページの幅960px（ピクセル）を基準にするグリッドシステムサービスがあります。
影や質感等を排除し、シンプルで平面的な見た目にするデザイン手法のひとつで、単色・ベタ塗りで、鮮やかな色彩を用いることが多いです。昨今のWebサイトやモバイルOS、アプリ等で見かけるチャンスが増えてきました。少ない画像で表現可能なので、ページの読み込み時間を削減できたり、デザインの時間短縮も期待できます。反面、シンプルすぎてアイコンの意味が理解できなかったり、ボタンがクリックできるのかわからなかったり等、単純にフラットデザインを採用するとユーザーを混乱させがちなので注意が必要。
今のWebデザインにおいて最も特徴的な流行と言えば「フラットデザイン」でしょう。iPhoneの流行と同じく世界を席巻したスキューモーフィックデザインでしたが、現在はそれを塗り替えるかのようにフラットデザインがメインとなっています。何故このような変化がWebデザインの現場に起きたのでしょうか。大きな要因の一つとしてコストの問題が挙げられるのではないでしょうか。スキューモーフィックデザインでサイトを一通り作るとなるとボタン一つを制作するにも時間と労力がかかります。また現実にある楽器のツマミをスクリーン上で再現しても実際につまんで操作できるわけでもないように、リアリティのあるデザインがユーザビリティの向上に結びついていたのか疑わしい部分もあります。ボタンがボタンとしてユーザーに理解できるのであれば、スキンがリアルであれフラットであれ効果は変わらないはずなのです。
ではフラットデザインの利点とは何でしょうか。それは解像度にデザインが左右されないという点です。iPhoneの登場より後、ブラウザ内で拡大・縮小を行えることが当たり前になり、Retina解像度を持つスマホや、画面サイズの異なるタブレットの登場により、「ピクセルパーフェクトなデザイン」を行うことが理に適わなくなってきました。CSS上で再現できる、解像度に囚われないデザインとしてフラットデザインは非常に適しています。余白を使ったデザインであるところが情報の整理にもなり、そして自然とコンテンツを引き立てるデザインであることも話題に繋がった要因ではないでしょうか。
様々なデバイスや画面サイズに、ひとつのファイルで対応させるWebデザインの手法のひとつ。例示するとPCやMacでこのような記事を読んでいる方は、ブラウザーの横範囲のサイズを変更してみてください。横範囲によってデザインが変化します。デバイスごとに異なるファイルを用意する必須がないので、管理が楽になり、更改漏れ等を防止できます。逆にデバイスごとに細かい変更を指定するのが難しく、制作のはじめの段階で入念な計画・設計が求められます。
Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対処すること。
WebサイトやWebページをパソコンやスマートフォン、タブレット端末等複数の機器や画面サイズに対応させる際、詳細が同じでデザインや動作をそれぞれに最適化した複数のHTMLファイルやCSSファイルを用意し、HTTPリダイレクト等でアクセスを振り分ける手法がよく用いられます。
レスポンシブデザインではこのような対応はせず、表示された機器の種類やサイズに応じて表示詳細が最良な状態に変化するよう設定された単一のファイルを制作し、全部の機器に同じように送信します。複数のファイルを用意するケースに比べ、デザインや機能の自由度は下がるが、全部の機器に同じ詳細を表示でき、更改作業の簡略化や更改漏れの防止が期待できます。検索エンジンやアクセス解析に詳細が重複した複数の異なるURLが出現することも避けられます。
最近のWEBサイトでは情報を発信するメディアとしては、もはや王道と言ってもいいほどの成長を遂げています。ソーシャルメディアの勃興によって、特に個人が様々な情報を発信し伝播していける時代になったことからSEO中心の情報をただ、おいておくだけでなく、読み手を意識した情報が重視される世界へとなってきています。そんな中では、これまでのフリーペーパーや雑誌のようなコンテンツ製作の知識が必要となってきており、それによってこれまでウェブ制作には不要だったエディトリアルデザインに関する知識も必要になってきています。これにより今までではWeb上にいなかった人が流入してきたことで需要と供給が増え、コンテンツを魅力的に見せる競争はさらに激化しているのが現状です。
またただただ誌面を再現するだけでなく映像やインタラクティブな要素を加えることができるのもWebの強みです。ブラウザの進化やCSS、JSのノウハウの蓄積がこのようなレイアウトを可能にしています。今後もさらに魅力的なデザインのサイトが生まれてくるのではないでしょうか。