ウェブデザインを体系化・言語化するにあたって、最初のハードルはその幅広さにあるでしょう。一言でウェブデザインといってもその実態は膨大かつ複雑で、そのような状況の下で視覚化されたものを言葉へ紐解いていくのはなかなか至難の技と言えます。
今回はそんな言語化の手がかりになるような、私なりにウェブデザインを分類した8つの要素をご紹介したいと思います。
配色
色。どのような色をどれくらいの分量でどこに配置するのか、その設計のこと。
タイポグラフィ
文字。あるいは文字情報の処理方法。
イメージ (写真・イラスト)
画像の選定・加工・編集。
アイコン
情報を絵柄で記号化して表現したもの。
シェイプ
エレメント・コンポーネントの矩形やその形状。
デコレーション
あしらい・意匠・飾り。
インタラクション・アニメーション
コンピュータやシステムによる、ユーザのアクションに対応するリアクション。
レイアウト
要素の配置、割り付け。
本来は色であれば色相、彩度など、ここからさらに細分化されますが、今回は細かくなりすぎてしまうので割愛します。このように分類してみれば意外にあっさりとしていますが、おおよそウェブデザインを網羅するのに妥当な分類になっていると思います。
ここでのポイントは、この8つはウェブデザインを構成している実際の「部品」であるエレメントやコンポーネントではなく、あくまで「概念」「要素」としての分類である、という点です。たとえばボタン・配色・見出し・レイアウト……といった区分でウェブデザインを整理している資料を時々見かけますが、これだと実際の「部品」としてのボタンと、そのボタンの「構成要素」である配色が並列に語られ、若干の収まりの悪さがあります。何よりMECE (重複なく・漏れなく) になっていません。
その点、この8要素は具体的なデザインエレメントやコンポーネントではなく、純粋なデザイン要素だけを抽出しています。デザインエレメントやコンポーネントはユーザインターフェイス上の具体的な「部品」であり、まずウェブデザインについて語るべきは「部品」の「原材料」である「要素」から、という訳です。
こちらの8要素ですが、以下のような形で業務に応用が可能です。
1.自分の成果物を解説してみる
デザイナーであれば自身の成果物を提案・解説する際、この8要素ごとに言語化してみると、自身の考えや行為が抜け漏れなく記述できると思います。配色について、タイポグラフィについて、イメージについてといった具合に順序立てて、それぞれ考慮したことや工夫したことを記載してみましょう。
2.他者の成果物を評価してみる
自分の評価のみならず他者を評価する場合にもつかえます。例えばデザイン的に優れていると感じたウェブサイトやアプリケーションを見つけたら、そこから更にこの8要素ごとに踏み込んで分析してみるとよいでしょう。表層的な印象ではなく、配色・レイアウト・タイポグラフィなど、要素ごとになぜそれを良いと思ったか深掘りしていく批評は、多くのことを発見できるはずです。
3.学習・教育に応用してみる
まだ経験の浅いデザイナーであればこの8要素を学習に活用してみてください。例えば今日は配色について、今日はアイコンについて、レイアウトについてといった具合に、ウェブ上の記事を調査してみるのもよいし、課題図書を読んでみるというのでもよいかもしれません。ウェブデザインのスキルを向上させるにあたってより効率的な学習・訓練が望めると思います。
このようにウェブデザインを分析・言語化する上で、この8要素は一種のフレームワークとして色々な使い方ができると思います。有効に活用いただけたら幸いです。
筆者の書籍紹介
本書はデザイナー、ディレクター、デベロッパー、クライアントなどなど、ウェブ制作に関わるステークホルダー間でウェブデザインに関わる「共通言語」を持ち、より成果物の質を高めるためのガイドブックです。
具体的にはウェブデザインを機能性と情緒性という2つの軸を中心に分析し、体系化することを試みています。
デザイナーの方には、デザインの方針策定や成果物の言語化のためのツールとして、企業のディレクターやウェブ担当者の方には、ウェブデザインを正しくディレクションし評価する上での「手引き」として、ぜひご活用ください。
https://amzn.to/30m4gxQ
