Web デザインに CSS グリッドレイアウトは有効か | アドビ UX 道場 #UXDojo

画面サイズの多様化に伴い、デザイナーは、どんな解像度や画面サイズのデバイスでも効果的で、かつクリエイティブなレイアウトをデザインするというユニークな課題に直面しています。この問題に対しては、様々な画面に実装しやすいとされる、ブロックを組み合わせたデザインが広く採用されるようになりました。

この手法は、無数の画面サイズ向けにデザインするという問題解決のアプローチとして有効です。しかしその一方で、デザイナーに、テンプレートを扱うような考え方でウェブサイトをデザインすることを求めます。さらに、新たな課題も生まれました。どの画面でも美しくブランディングされたレイアウトを実現するには、どのように実装すればよいのでしょうか？

CSS グリッドレイアウトはその答えのひとつであり、デザイナーと開発者が共有できる基盤を提供します。デザイナーにとっての CSS グリッドは、インパクトのある形でクライアントが伝えたいメッセージを表現するために利用できるツールです。開発者にとっては、無限のスクリーンサイズ、ページの読み込み速度、コードの再利用性などに対応するために便利なフレームワークです。CSS グリッドがサイト構築のルールを提供してくれるため、開発者の労力が軽減されます。

ここからは、優れたアートやデザインにグリッドが与える影響と、デザイナー、開発者、ユーザーに CSS グリッドレイアウトが実現する体験を紹介します。

グリッドとは何か

グリッドは、互いに交差する複数の線の組み合わせで、一連の正方形や長方形から形成される列のことです。古くからビジュアルアーティストのツールとして使われてきました。

ウェブデザインにおいて、グリッドは要素同士の関係を定める制約になりますが、要素がグリッドを決定づけることも可能です。CSS グリッドは、『本質的にレスポンシブ』なレイアウトを作成できる点で、ウェブデザインにとって重要度の高いツールのひとつです。

CSS グリッドレイアウトは 2011 年に登場し、あるブラウザで実験的にサポートされました。そして 2017 年にはすべての主要ブラウザが対応しました。それ以前は、テーブルレイアウトを使って構築されたページが一般的で、アクセシブルかつインタラクティブにコンテンツを表示するには、あまりスマートではない手法が必要でした。その後、ユニバーサルマークアップの問題に対処するため、一次元のボックスモジュールとして Flexbox が生み出されました。しかし、それでも開発者は調整や回避策を必要とし、CSS フレームワークが発明されることになりました。

2018 年に CSS グリッドによるレイアウト新時代が始まりました。グリッドは、交差する水平および垂直方向の線の組み合わせです。従って、マークアップに影響を与えず、二次元レイアウトを変更できます。グリッドはページ上に要素を表示する枠を提供しますが、その際、表示される順序で記述する必要はありません。CSS を使い、画面サイズごとに決められた優先度に基づき、任意の順に配置することが可能です。

CSS グリッドレイアウトを活かしたデザイン

CSS グリッドが無ければ、モダンで柔軟性を持ったウェブサイトが構築できないというわけではありません。Flexbox で構築された ウェブサイトには一次元の柔軟性があり、画面サイズに応じた要素のサイズ変更が可能です。しかし、ウェブサイトのデザインは、単純に要素を配置する以上のものです。レイアウトは視覚的な表現を超えた意味を要素に付加することができます。レイアウトは知覚に影響するのです。

デザイナーが作成する構成は一連の原則に基づいています。洗練された原則であるほど、芸術的な効果が強くなります。もしレイアウトが、何らかの原理を再現できていなければ、その効果と潜在的なメリットは、ユーザーとブランドの双方から失われます。だからこそ、デザイナーにとって、柔軟で普遍的なレイアウト機能は欠かせないものと言えるわけです。

ウェブの黎明期には、これは問題ではありませんでした。デジタルメディアの魔法が、複雑で魅力に欠けるページの見た目をユーザーから隠していたのです。言い換えるなら、初期のインターネットでは、デザインが非凡である必要はなく、その存在だけで十分にインパクトがあったのです。ウェブサイト同士が注目を集めるために争ってはおらず、それ故、ユーザーとの関わり方による感情への影響を考慮する必要もありませんでした。

時の経過はインターネットをごく普通の場所に変え、やがて、より良いデザインを競うもうひとつの戦場へと変貌させました。デザイナーが本格的にデジタル領域に参加するようになってからは、従来のデザイン手法やレイアウトがオンラインでもよく見られるようになりました。

グリッドも、オンラインで比率の精度を高めるツールへと転用されました。グリッドは長い間、アーティストが商業的なファインアートを制作するために使用してきたフレームワークです。グラフィックデザイナーも同様に、「メッセージを読みやすくする組織的な仕組み」とグリッドを定義したスイス人デザイナー Josef Müller-Brockmann が示した道を歩んできました。

CSS グリッドのギャップと機会

CSS グリッドレイアウトは、デザイナーと開発者の間で起こるレイアウトの問題を解決するのに役立つ、初めての本格的なソリューションです。だとすれば、CSS グリッドがコミュニティで積極的に推進されるようになってから何年も経つというのに、未だに主力の技術として採用されていないのは何故でしょうか。moscowcss の主宰者である Sergey Popov は、その理由が 2 つあると言います。

1. デザイナーは、開発者に複雑なタスクを要求していない。
2. 開発者は、シンプルなデザインに CSS グリッドを適用する必要性を感じていない。

多くのウェブサイトは、単純なテーブルレイアウトで十分です。それは、時間も技術的なリソースも限られた中で、マーケティングのニーズに沿ってデザインが行われているためです。標準的でないグリッドや複雑なレイアウトはデザインアプローチから姿を消して、シンプルな構成のランディングページが主流となりました。開発ツールやブラウザが複雑なレイアウトに対応したことは、無駄な機会の提供になっています。

CSS グリッドは、複雑なレイアウトを可能にするだけではありません。UI の実装を容易にします。また、様々なコンテキストで利用できます。3 カラムのシンプルなレイアウト、どこまでも続く折り返し、さらには、レイアウト構造のレスポンシブな変更にも CSS グリッドが使えます。

CSS グリッドはウェブデザイナーの強い味方です。制約を超えて、魅力的なビジュアルレイアウトをつくり上げることができる力です。ウェブデザイナーの Andy Clarke は、彼の記事「Art Directing For The Web With CSS Grid Template Areas」の中で、CSS グリッドを使ったレイアウトの興味深い例と、その実装方法に関する実践的なヒントをいくつか紹介しています。この記事では、グリッドレイアウトを使ったウェブサイトのその他の例をいくつか紹介します。

おわりに

CSS グリッドは、デザイナーと開発者の仲をとりもちます。デザイナーはクリエイティブで美しいレイアウトをブランドのために作成でき、開発者はそのグリッドをレスポンシブ対応のレイアウトに変換できます。その際、デザイナーの美的な配慮や、開発者の意欲を犠牲にすることはありません。CSS グリッドは、より優れた最終成果物を得るために、2 つの哲学に歩み寄る場を与えます。

この記事は Benefits of Using CSS Grid Layout in Web Design（著者: Nick Babich）の抄訳です