「カスケーディング・デザイン」なんてどうでしょう
こんにちは。BX部エンジニアのシノザキです。
これまでたくさんのWebサイトを作って来ましたが、理にかなったデザインを目指すうちに「カスケーディング・デザイン」という言葉を思いつきました。検索してみてもヒットしなかったので、どうやら勝手に思いついた言葉のようです。
思いつきの割には、エンジニアから見たデザインの成り立ちを上手く説明できているように思います。エンジニアとデザイナーの架け橋になれるかもしれないので、1本記事を書いてみようと思います。
カスケーディング・デザインとは
ブラウザを起点に、レイアウトルールを継承しながら構築していくデザイン概念です。
エンジニアがレイアウトを構築するときの技術的な法則を、デザインのフローに還元することで、デザイナーとエンジニアの考え方を揃えていく目的を持っています。
デザイナーと一緒に作業する時、できる・できないを個別に説明するよりも、デザインの流れ方を概念として共有してしまう方が手っ取り早いと思った結果、思いついたものです。
また最近では Adobe XD や figma など、ブラウザに近い状態で作業できるデザインツールが普及してきています。そうしたツールをこれから触るデザイナーの方にも役立つかもしれません。
カスケーディングってなんだっけ
この場合は「継承する」という意味合いで良いと思います。CSSの「C」ですね。
ブラウザ上では、あらゆるレイアウトは外から中に向かって継承されます。外枠に「文字色は赤で」と指定すると中の文字まで赤になります。
エンジニアはこの「継承する」という法則を利用しながら、HTMLとCSSを書いていきます。
継承の始まり
継承するということは、どこかに始まりがあります。Webサイトの場合、継承の始まりはどこでしょうか。そう、ブラウザですね。ブラウザが天と地を作ったのです。
ブラウザで表示されるHTML要素は、上から下に、左から右に流れます。見出しや段落には程よい余白が設定され、見出しは文字サイズの違いで重要度を表現しています。箇条書きのリストは先頭の点とインデントで表現されます。
要素の流れや余白・インデントは「ボックスモデル」という概念で構成されていて、その概念の中でレイアウトが変化します。
こうしてブラウザで表現されたHTMLは論文のような、Wikipediaのページの文章のような見た目になります。
ここがカスケーディング・デザインの出発点になります。
ちなみに「マシンリーダブル」（コンピュータが情報を認識できる）なのは大体この段階までになります。ここまでをいかに設計するかがアクセシビリティへの近道になります。
継承しながらデザインする
これ以降のデザインは、HTMLそのままの、論文のようなレイアウトがベースになります。
このベースレイアウトをオーバーライドするために、レイアウトルールを追加していく作業とも言えます。
CSSの特性は、外側のルールが内側まで引き継がれる「継承」です。この特性を意識しながらデザインを設計していくと、おおむね以下のような構造になると思います。
デザイントークン
コンポーネント
レイアウト
少し具体的に説明してみます。
1. デザイントークン
色やタイポグラフィなど、プロジェクトが持つデザインルールを定義します。
カスケーディング・デザインにおいては、ブラウザルールの直後に位置し、この後の全てのデザインフローに継承される重要なものです。
重要なだけに、デザイントークンを適切に決められれば、この後のフローで色やタイポグラフィの選択に時間が掛かることはありません。
CSS上ではほとんどCSS変数として定義してしまいます（モダンブラウザ最高ですね）。
2. コンポーネント
コンテンツの表現に必要な個別のモジュールを作っていきます。
見出しやボタンリンクなどといった最小限のパーツから、記事一覧リストのようにモジュールを組み合わせた複雑なものまでその単位は様々です。
一見大変な作業ですが、これまで継承したルールを合わせると、各要素はある程度適切な色・サイズ・タイポグラフィになっているはずです。
また、作業が進むほど継承できるものも増えていくので、やればやるほど楽になっていきます。
コンテンツの全てをコンポーネントとして再定義する必要はありません。ブラウザルール + デザイントークンだけで構成された要素が、そのままレイアウトされることももちろんあり得ます。
3. レイアウト
これまでの要素をレイアウトしてWebページを構成していきます。
ブラウザルールによって上から下、左から右、要素の余白というレイアウトは継承されているので、それ以外のレイアウトが必要な時にだけ、レイアウトを定義します。
これまでの歴史で様々なWebレイアウトが生まれましたが、CSSプロパティをハックしたりJavaScriptを使うなど、その実現方法は様々でした。
CSSはそうした状況に合わせて進化し、定番のレイアウト意図をそのまま実現したようなプロパティも存在します（Grid Layoutとかposition: sticky;とかですね）。自分はこうした意図を持つCSSをひそかに「セマンティックなCSS」と呼んでいます（モダンブラウザ最高ですね）。
クリエイティブ性とカスケーディング・デザイン
ブラウザルールありきのデザインでは、レイアウト的な美しさや直感的なクリエイティブと両立しないのでは、と考えたりもします。
ただ型を破るには型を知るというか、まずはその世界の成り立ちを理解した上で初めて超えていけるものもあると思うことにしました。
また、何かを作るときは材料の特性を知っておくと良いのでは、という思いもありました。家具を作るには木材の特性を。料理を作るときは食材の特性を。といった感じで、Webサイトを作るときはWeb要素の特性を取り込んでいくと、少しでも良いものが出来上がるんじゃないかなと感じます。
少し理想論っぽい感じもありますが、ブラウザのボックスモデルやCSSの継承する特性をカスケーディング・デザインという概念が簡潔に説明してくれています。
この言葉がエンジニアとデザイナーの橋渡しをしてくれると良いなと思います。
なおChatworkでは現在採用に力を入れています。一緒に新しい領域にチャレンジしてみたいという方はぜひ採用サイトをチェックしてみてください。
この記事が気に入ったらサポートをしてみませんか？