みなさん、こんにちは。
私はトライベックのクリエイティブ領域で、主にコーポレートサイトのデザインを担当しています。
今回は、社内の若手デザイナー向けに実施した、主にWebデザインにおける参考デザインの活かし方についての勉強会の内容をまとめたものになります。

本記事では、目的やコンセプトがある程度固まっている前提のもと、デザインの見た目に落とし込んでいく段階でのリサーチからアウトプットにフォーカスし、大まかな流れや各段階のポイント、Webデザイン制作におけるリファレンスの活かし方について整理しました。

大きく以下の3つの内容を取り上げます。
1,参考デザインを取り入れてアウトプットするまでの流れ
2,参考デザイン収集・分析のポイント
3,うまくアウトプットできない時の原因と対策

若手デザイナーの方はもちろん、普段デザイナーがどのように参考デザインをアウトプットへ活かしているのか気になる方や、クリエイティブ領域の発想方法に興味のある方におすすめの内容です。

それでは、ご紹介していきます。

1.参考デザインを取り入れてアウトプットするまでの流れ

参考を探してアウトプットするまでの大きな流れは、
「収集→分析→再構築」
の3段階になります。

各段階におけるポイントは、以下の通りです。
収集：目的に合わせて、幅広く集める
分析：よく観察して、分解→言語化する
再構築：目的に合わせて、再構築する

この3段階のうち、特にキーとなるステップは、「分析」です。
参考の「分析」が上手くなると、「収集」のコツが掴めてスピードが上がり、「再現」するための要素を把握でき、クオリティが上がるので、全体的にアウトプットの質を上げることができます。

次に、各段階におけるポイントを詳しく紹介していきます。

2.参考デザイン収集・分析のポイント

収集・分析段階でのポイントは以下の3点です。
①目的に合わせて収集する
②よく観察して、分解する
③日頃からストック・言語化する

①目的に合わせて収集する
参考デザインの収集・分析段階では、「今、何を目的に、どんな参考を探しているのか？」を意識することが必要です。
闇雲に「見た目が何となくかっこいいから」だけで参考を選定しても、実際に作っていく段階でコンセプトと噛み合わなかったり、参考にならなかったりします。
そのため、「何となくかっこいい」という直感で収集することが必要な場面もありますが、まずは「何を目的に、どんな参考を探しているのか？」ということを常に意識しておく必要があります。

Webデザインにおいて参考を収集する場面の具体例としては、大きく以下の3つのケースが考えられます。
目的ごとに、参考デザイン収集・分析の観点や、主な参考先（参考の収集元）が異なります。
A)デザインコンセプトを考えるため
B)トーン&マナー・世界観を作るため
C)UIパーツを考えるため

それぞれのケースにおける参考デザイン収集の観点と主な参考先は以下の通りです。

A)デザインコンセプトを考えるため
観点：サイト全体のユーザー体験、狙いをどうコンセプトに落とし込んでいるか？
主な参考先：社内事例（自社で見られる他の案件）、他社事例（制作事例紹介）など

B)トーン&マナー・世界観を作るため
観点：情緒＝かっこいい、信頼感、独自性、先進性など をどんな見た目で表現しているか？
主な参考先：参考サイト（競合他社→検索から、類似トーン&マナー→デザイン参考サイト集から）、Pinterest 、Dribbbleなど

C)UIパーツを考えるため
観点：機能＝使いやすさ（便利）、わかりやすさ（情報取得の容易さ）の工夫は？
主な参考先：UIライブラリ、Dribbble、Pinterestなど

収集・分析する際には、上記の他に、AIに壁打ちをするのも有効です。
参考デザインを収集したら、次は各参考の分析を行います。

②よく観察して、分解する
参考デザインの観察と分解では「モード切り替え」をすることがポイントです。
一つの視点に偏らず、以下のようにモードを行き来することで、より分解の精度が高くなります。

ここでは、3つのモードをご紹介します。

A)「発散」と「収束」
B)「右脳（直感）」と「左脳（論理）」
C)「集中」と「緩和」

A)「発散」と「収束」
質より量を重視して直感的に集める「発散」と、今回活用できる要素を考えながら具体的な枠組みでルールを抽出する「収束」を行き来することで、量と質の相乗効果により、作りたいデザインのヒントになる要素の精度が上がりやすくなります。

B)「右脳（直感）」と「左脳（論理）」
非言語的な情報をキャッチする「右脳（直感）」と、要素を数値や言葉に置き換えて整理する「左脳（論理）」を行き来することで、デザインのビジュアルや雰囲気のクオリティと論理的な意味づけの精度が上がりやすくなります。

C)「集中」と「緩和」
深く向き合う「集中」の時間だけでなく、あえて脳をリラックスさせる「緩和」の時間を作ることで、思考のネットワークが広がり、新しい気づきが得られやすくなります。

上記のモードを行き来しながら参考デザインを分解することで、自分が作ろうとしているデザインに取り入れると良さそうな要素が分かりやすくなったり、デザインのアイデアが出やすくなったりします。

例えばWebサイトを参考にする場合、以下のようにモードを行き来しながら分解していきます。

発散・右脳（直感）：「ぱっと見の印象は？」「配色の印象は？」「繰り返し同じ単語が入っていてキャッチー」
左脳（論理）：「角丸のrは何px？」「フォントは？」「線は？」「どんな画像が使われている？」
収束：「どんなコンセプトなんだろう…」など

③日頃からストック・言語化する
プロジェクトのためのリサーチの他に、日頃から事例をストックしておくことも一つの方法です。
例えば「サステナビリティ」や「インタラクション」といったカテゴリで参考を収集しておくことで、さまざまなプロジェクトで活用ができます。
その他にも、駅で見かけた広告や自分の好きなものを「なぜ良いと感じるのか？」と分解・言語化する習慣をつけることで、自分の中のデザインの引き出しを増やしていくことにつながります。

3.うまくアウトプットできない時の原因と対策

アウトプットが思うように進まない時は、以下の2つが要因であることが多いです。

①分解力が不足している（解像度が低い）
参考の観察が「何となくの雰囲気」やフィーリングだけで終わっている可能性があります。日頃から物事を言語化・分解する習慣を持ち、デザインの構成要素を細かく把握する力を養うことで、改善されます。

②再現力が不足している
分解した要素を形にするためのツールのスキル（IllustratorのパスやPhotoshopの画像加工など）が不足していることが考えられます。目的を持ったインプットを継続しながら、たくさん作る経験を積むことで、技術と引き出しを積み重ねていくことで改善されます。

まとめ

参考デザインを活かし、アウトプットを整えるためのポイントは以下のとおりです。
①目的を持って収集する
②モードを切り替えながら解像度を高めて分解する
③日頃から身の回りのものを見て、分解する

おわりに

勉強会の中で「3. うまくアウトプットできない時の原因と対策」について意見を募ったところ、「たくさん手を動かして作る」「上手なデザインを横に並べてみる」「参考デザインをパッチワークのように上手に組み合わせることで良いデザインができる」などの意見が出ました。

私自身、トライベックへ転職する前は社内にデザイナーの先輩がおらず困った経験もあるので、この記事が少しでも業務で行き詰まっている方の参考になれば嬉しいです。