PLAN-Bの実績サイトが新しくなりました。「メッセージが伝わるデザイン作り方」制作の裏側を公開！

PLAN-Bクリエイティブ&ライティング（以下PB-CRW）実績サイトをリニューアルしました。
今回は、このリニューアルプロジェクトの背景と共に、Webサイトに込められた「メッセージ」を体現できるデザインについてお話したいと思います。

リニューアル経緯

リニューアル前の実績サイトは、ブランディングを目的としておらず、本のように実績をまとめ、閲覧できる環境をという目的で「BOOK」というサイトを運用していました。この段階ではコンテンツの内容、クレジットなどの詳細な情報は掲載しておらず、実績が着実に積み上がってきたタイミングで、イメージ刷新を含めたリニューアルをするという運びとなりました。

要望と課題の整理

まずは、プロジェクトチームでブレストし、ざっくばらんに今回の実績サイトへの要望を上げていきました。叶えたい要望、現状Webサイトの課題、CVの獲得や認知拡大などが様々な要望が上がります。
市場・競合調査と話し合いの結果、課題は「PB-CRWのイメージの訴求」と「より詳しい実績情報の掲載」の２点に絞られました。今回のこの記事では「メッセージ」に繋がる、イメージの訴求について、詳しく記載していきたいと思います。

伝えたい「コンセプト」を整理し、イメージを擦り合わせる。

– コンセプトの整理

次に、PB-CRWはどんなチームで、このサイトで何を伝えたいのか、核となるコンセプトを導き出します。

私たちは「クオリティにこだわるチーム」です。各職域の個人が最大限の力を発揮し、専門性を持った仕事をできるよう「完全分業制」を採用しています。そして、もうひとつが「顧客目線」です。決して自分たち本位にならず、お客様にとって良い制作物を妥協せずに作ることが、PB-CRWの強みでもあります。

以上をまとめると「PB-CRWは最高のクリエイティブを、お客様に寄り添いながら制作をします。」であり、今回はこれが「What you say（何を伝えたいか）＝ コンセプト」になると考えました。

– テイストの擦り合わせと、キーワード変換

続いて、イメージ刷新の為のデザインテイストの擦り合わせです。

「イメージ」とは、つまり「どう見られているか」です。人の見た目の第一印象に近いです。その印象の部分を「こう見られたい」と変えることが「イメージの刷新」です。デザインのテイストを導き出すために、ヒアリングした言葉をまとめます。

【イメージ：PB-CRWとはどんなチームか】

出てきた言葉をもう少し短い言葉で言い換え、キーワードに変換します。

【キーワード】

• ヒアリング　→　人の話を聞ける
• 主張を押し付けない　→　協調性がある
• 確信をつける　　　　→　冷静である

このキーワードをデザイン要素に結びつけます。例えば「色」には既存のイメージがあります。
赤は情熱、青は静寂、黄色は活発、紫は神秘的、緑は自然などです。そこまで単純な話でもないのですが、青＝「知的、冷静、協調性」などは当てはまると考え、作る上でのヒントにします。

出典：（株）日本カラーデザイン研究所

どう表現するか、「アイデア」を考える

何を伝えたいか「What you say＝ コンセプト」が決まったら、次はどんな風に伝えたいのか「How to Say＝伝え方の工夫」を考えます。そして、この切り口が「アイデア」になります。

– キャッチコピーのアイデア

「PB-CRWは最高のクリエイティブを、お客様に寄り添いながら制作をします。」

このコンセプトをより魅力的な言葉で言い換えたのが、「ヒラメキを編む」というキャッチコピー。お客様の課題を解決するためのヒラメキ達を集め・それらを編んでクリエイティブに仕上げます」という私達のものづくりへの姿勢を込めました。
私たちはライティングもできるチームなので、材料（文章・写真など）を集めて一つにまとめる作業を表す編集用語の「編む」という言葉も盛り込み、このキャッチコピーに決定しました。

– ビジュアルのアイデア①

キャッチコピーである「ヒラメキを編む」を、様々なアイデアでビジュアル表現したのが下記の画像です。
「ヒラメキを編む」を表現するにあたり、表現方法・テイスト違いのA、B、Cの簡易パターンを出しました。

A案の表現：ヒラメキの粒が繋がり、ひとつ形を作る。

B案の表現：消して、描いて、ヒラメキを描き続ける。

C案の表現：ワクワクするような、未知のヒラメキを探求する。

※このデザインに使用されている画像はダミーです。

いずれも青をベースに、「ヒラメキを編む」という言葉から着想を得て作成したデザインですが、テイストは大きく違います。今回はPB-CRWのイメージの訴求が課題なので、通常よりもテイストとアイデアの擦り合わせに、大きく時間をかけ、敢えて遠回りなやり方で進行しました。

結果、A案のヒラメキの粒子が繋がり、クジラを形作るアイデアに決定しました。
粒子が集まり一つの形を作る様は、考え抜いたヒラメキの粒子を、丁寧に編み上げることで生まれるクリエイティブへのPB-CRWの姿勢を表し、モチーフに選んだクジラは、優しく知性的で、寄り添い、向き合い、相手の良さを引き出せる存在、つまりPB-CRWの性格を象徴的に表しています。

– ビジュアルのアイデア②

サイトの中には、ヒラメキの粒子が散りばめられ、離れたりを繰り返しながらサイトの中に漂っています。 こういった細かい要素をデザインに盛り込むことで、サイトのどの位置であってもコンセプトを体現できるデザインにしています。

まとめ：「コンセプト」×「アイデア」によって伝わる「メッセージ」

「コンセプト」と「アイデア」が合わさり、やっとひとつの「メッセージ」になります。

今回であれば、PB-CRWが「最高のクリエイティブを、お客様に寄り添いながら制作をします」という思いを、「ヒラメキの粒子で編まれたクジラ」で表現するというアイデアにより、私達のものづくりへの姿勢というメッセージが伝わるのだと考えます。そのゴールに向かうため、デザイナーはサイトの本質を見抜き、コンセプトを整理して、最適なアイデアでビジュアルに落とし、やっと伝わるのがWebサイトの「メッセージ」という事になります。

最後になりましたが、PB-CRWの実績サイトがついに公開されました。 この記事で書いたようなメッセージが本当に伝わるのか、ぜひ、ご覧ください。

https://book.plan-b.co.jp/