デザインの品質を上げるためには、どのような手段が有効でしょうか。組織や個人の状態に合わせて様々な観点から複合的に方法を選択し、戦略的にデザインの品質を上げることが重要です。本記事では、WEBデザイナーのデザインの品質を上げるために、スキルの観点からアウトプットの種類をUXデザイン5層で整理し、成長ステップごとの品質向上ポイントまでを解説します。
「品質の高いデザイン」と聞いて、どんなものをイメージしますか？見た目が美しく見映えの良いプロダクトや、ユーザーに支持されるサービスなど、環境や人によって「品質の高いデザイン」という言葉の捉え方は多様です。
デザインとは、プロダクトをきれいにしたり、見栄えをよくすることだけではありません。きれいな見た目や使いやすさの裏には、それを担保するための戦略や機能要件、情報の整理なども必要となります。ここでは「デザイン」を「WEBデザイナーのアウトプット」、「デザインの品質」を「本質的な課題(達成したいこと)を解決できるデザイン」と定義して解説をしていきます。
WEBデザイナーが関わる業務の種類は幅広く、それぞれの案件の中で生み出されるアウトプットも多岐にわたります。デザインの品質を考えるために、まずはWEBデザイナーのアウトプットの種類について整理をします。
WEBデザイナーのアウトプットをUXデザイン5層で整理すると、下記のような種類に分けられます。
「表層」にあたるデザインは、最終的にユーザーの目に触れる状態のデザイン領域で、配色や装飾表現などサービスの世界観に合わせて表現したものです。画面デザイン、バナー、イラストなどが該当します。カラーや装飾など、表面的で目に見える領域のため、デザイン基礎力が最もわかりやすく、クオリティ面でのジャッジもされやすいアウトプットです。同時に、課題が顕在化しやすいアウトプットであるとも言えます。
「骨格」にあたるデザインは、表層デザインの骨組みをささえるデザイン領域で、ユーザーの目的に合わせた操作手段を骨組みとして設計したものです。ワイヤーフレーム、デザインガイドライン、プロトタイプなどが該当します。こちらも表層デザインと同じく目に見える領域ですが、使いやすさ・わかりやすさといった操作性の観点での統一感や一貫性など、ユーザーがストレスなく操作できるかが重視されるアウトプットです。
「構造」にあたるデザインは、「要件」「戦略」の抽象レイヤーと「表層」「骨格」の具体レイヤーをつなぐデザイン領域で、ユーザーの目的や行動に合わせて必要な情報を見つけやすく、わかりやすく表現したものです。コンテンツ、サイト構造、ナビゲーションなどが該当します。目に見えないユーザー体験やサービスの提供価値を、目に見えるコンテンツやサイト構造で表現できるよう、抽象レイヤーの情報を具体レイヤーに適切に変換できているかが重視されるアウトプットです。
「要件」にあたるデザインは、ユーザー像やユーザーにとっての課題、理想の体験などを探索、特定していくデザイン領域で、サービスの価値やあるべき姿を表現したものです。ペルソナ、カスタマージャーニーマップ、価値仮説などが該当します。ユーザリサーチなどを実施して潜在的なユーザーのニーズを捉え、それを構造化・可視化し、概念や仕組みとして整理したうえでソリューションアイデアに収束させることが重視されるアウトプットです。
「戦略」にあたるデザインは、事業者側の目標とユーザーにとっての価値を言語化し、ビジネス視点とユーザー視点の両方を持って行うデザイン領域で、双方の視点から見て持続性のある事業戦略を表現したものです。ビジネスモデルキャンパス、ステークホルダーマップ、サービスブループリントなどが該当します。事業側の視点を持ちつつ、ユーザーにとってのサービスを使う意味や価値を探索し、関係者を巻き込みながら、事業としての持続性などを定義していくことが重視されるアウトプットです。
デザイナーの成長ステップは、一般的に下記のような種類に分けることができます。それぞれのステップで身につけるべきスキルや、品質向上のためのポイントについて解説します。
WEBデザイナーとしてキャリアを歩み始めたばかりで、デザインの基本的な知識はあるものの、それを実践として表現することはまだできていないWEBデザイナーを「導入期」とします。
導入期では、WEBデザイナーとしての基礎力を身につけることが重要です。デザインの基本原則や形作る要素などの基礎知識を学びながら、表層デザインのアウトプットの実践を繰り返します。この時期では、世の中にあるWEBサイトやアプリ他、業界を超えたデザインもとにかく観察して真似してみることがスキルアップに繋がります。デザインの良し悪しの判断と言語化ができ、実際に作ることができる状態を目指してみましょう。
デザインの基本原則やデザイン要素を意識しながらデザインを実践する際に、「なぜこの色なのだろうか」「この色にはどんな意味があり、どんな印象を与えるのだろうか」など、ひとつひとつの要素に「問い」を投げかけ、そこに自身の「答え」を持った上で、答え合わせのための「学習」を行うことを意識してみてください。この思考プロセスを繰り返すことで、感覚的にデザインを行うのではなく、論理的にデザインを行うことができるようになります。
デザインの基本的な知識・作業のフォローを受けつつ、進行ができるWEBデザイナーを「基礎構築期」とします。実際の案件や業務の中で一部のデザインを担当し、フィードバックやサポートを受けながら、デザイン作業の一連の流れの経験を積みます。
先輩WEBデザイナーのフォローのもと、実践の中でUIデザインの一部を担う基礎構築期では、表層デザインから骨格デザインのアウトプットを強化することが重要です。AppleやGoogleなどのソフトウェアが提供するガイドラインやアクセシビリティ、ユーザビリティの知識を学び、アプリやWEBサイトの骨格を意識しながら実践することを繰り返します。
世の中のアプリやWEBサイトのUIがどのような目的で選定されており、どのような意図を持って表層のデザインまで形作られているのか、実際のユーザーになって、観察・分析することを意識してみてください。基本のUIパーツを理解し、用途に応じて選定できる状態を目指しましょう。また、自身のデザインも実際のデバイスで操作ができる状態などにプロトタイプ化して使ってみることで、よりユーザー視点を持ってデザインすることができるようになります。
先輩WEBデザイナーのアシスタントして、画面デザインなどの複数のデザインの進行ができるWEBデザイナーを「アシスタント期」とします。実践の中でインプットとアウトプットを繰り返し、フィードバックを受けながら、自身でデザインの品質を引き上げるための行動ができるようになります。
画面デザイン他、広い範囲のデザイン業務を担当するアシスタント期では、情報設計や構造化などの構造デザインのアウトプットまで強化することが重要です。例えば、画面デザインではOOUIやIAの知識を学び、要件デザインで定義された内容をコンテンツやサイト構造として具体化します。また、情報を他者が理解できる状態に整理・構造化し、抽象的なテーマをチームで議論できるようリードすることができる状態を目指してみましょう。
要件デザインで定義されたユーザーストーリーやユースケースなどからオブジェクトを抽出し、表示情報の整理・情報の関連性の可視化をし、画面として設計していくOOUIのプロセスを実践することを意識してみてください。完璧なOOUIのプロセスでなくても、ユーザーはどのシーン(行動)でどんなことを頭に思い浮かべるのか(オブジェクト)を意識して、画面を設計していくことで、ユーザーのメンタルモデルに則ったデザインを行うことができるようになります。
メインWEBデザイナーとしてデザインフェーズの一連のステップをリードできるWEBデザイナーを「戦力化」期とします。WEBデザイナーとして高めたいスキルなどによりキャリアが分かれていく時期でもあります。
メインのWEBデザイナーとして高い視座を持ってデザインすることが求められる戦力化期では、抽象的な要件デザインのアウトプットを強化していくことが重要です。UXデザインの手法やプロセスを理解しながら、状況に合わせて手段を選択していき、ユーザーの課題やニーズを探索し、誰のために何を作るのかを発散・収束させていくスキルを身につけていきます。また、戦略デザイン領域についても理解を深めることで、事業側の視点を持って持続的なサービス体験を設計することができるようになります。
UIデザイナーとしてキャリアを目指していく場合でも、UXデザインの知識や理解は重視されます。ベースとなる要件を理解・整理できる状態を目指しましょう。
基本的なUXデザイン手法やプロセスをインプットした上で、実際の用途に応じて実践してみることを繰り返します。その際、なぜこのタイミングでこの手法を使うのか、次に何をするために今どんな情報を収集・仮説検証すべきなのかなど、全体のプロセスを意識しながら各ポイントで使用するフレームワークや手法の意味や用途を言語化することを意識してみてください。世の中にあるUX手法やフレームワークはあくまで手段です。その手段をどんな目的で使用するのか、目的によってどのようにカスタマイズするのか、それによってどんな結果を得たいのかを意識することでデザインのアウトプットのスキルアップに繋がります。
本記事では、WEBデザイナーのデザインの品質を上げるために、スキルの観点からアウトプットの種類をUXデザイン5層で整理し、成長ステップごとの品質向上ポイントまでを解説しました。WEBデザイナーとしての現在地を見極め、必要なスキルを意識的に身につけることで、戦略的にデザインの品質を上げることが可能になります。ぜひ、本記事を参考にWEBデザイナーのアウトプットの理解を深め、デザインの品質向上に役立ててください。
