WCAN 2018/05「ブランディングを意識したWebデザイン、そのプロセスと方法について」に参加しました
5月21日にABO HALLにて行われたWCAN 2018/05「ブランディングを意識したWebデザイン、そのプロセスと方法について」に参加しました。毎度50人弱の規模で開催されていたWCANですが、今回の参加者はなんと90人。質疑応答を含めても会場全体が意欲的な回だったのではと感じています。 講師は(株) アンティー・ファクトリーの中川直樹さん。スピーディーな進行ということもあり自身のメモ帳も解読が必要なレベルになってしまいましたが(汗)やはり今回も大変ためになるお話を聞くことができました。それでは振り返っていきます！
デザイン開発の確認事項
デザインというものは数値などによる明確な答えがありません。そのため先方と打ち合わせをする際は「好みのデザイン/好みでないデザイン」というような判断基準に陥りがちです。 しかしその曖昧な方向性でプロジェクトを進めてしまうと、完成して公開する直前の段階でも大きな修正が入ったり、目指していたものとのギャップが生まれてしまったりと、双方においても「納得いかない成果物」ができあがってしまいます。 そのようなことを防ぐために、中川さんは以下の３つの確認事項を意識しているそうです。
- 共通言語…目指す方向が言語化されているか
- 判断基準…どの要素に軸を立てるか
- プロセス…開発過程は明確か
ブランドパーソナリティとサイトパーソナリティ
さて、お話は「ブランドパーソナリティ」と「サイトパーソナリティ」へ。今回のイベントタイトルに「ブランディングを意識したWebデザイン」とあるので、これらの言葉は本題の前提のものという認識でよいかと思います。でもそもそもこの2つの言葉、現場ではあまり使われていないような気がしませんか？それもそのはず。お話を聞いたところ、これらの言葉（特に「ブランドパーソナリティ」）においてはサイト開発をする前段階に着目しているものでした。
まずは言葉の意味から。「パーソナリティ」が人間性を表すように、「ブランドパーソナリティ」は企業ブランドを人に、「サイトパーソナリティ」はサイトを人に例えるものだそうです。そしてここでの例え方は4段階あります。
①コンテンツ：生い立ちなど事実を基にしたもの
例：「何歳」「男性」「田舎の○○村出身」「○○中学卒業」など
②コンテンツ：可能な機能的事項
例：「数学が得意」「絵が描ける」など
③ビジュアル：情緒的事項
例：「気性が激しい」「聞き上手」「努力家」など
④ビジュアル：考え、心理的事項
例：「ほがらか」「大人しい」「かわいらしい」など
特に「情緒的事項」と「考え、心理的事項」は混同してしまいがちですが、中川さん曰く前者は雰囲気など事実に対して印象付けられるもの、後者は総合して「すてきだな」など感じるものを指すのだそうです。（上の例は私が考えたので捉え違いがあるかのかもしれません…。）
そしてサイト制作においては、①②で表された言語を基にサイトのコンテンツを考え、③④で表された言語を基にビジュアルを整えていきます。全体像はピラミッドのイメージだそうです。
サイト制作のプロセス
本題です。今回お話されたサイト制作のプロセスには、以下の３つのステップが含まれていました。
- ブランド構築
- イメージボード開発
- Webサイト制作
そしてこのプロセスを経た成果物として取り上げれらていたのが、以下の２つのサイトです。
AVOCADO
株式会社サイバーエージェント
本編はこれらのサイト制作の裏話的なものも含みつつ説明してくださったのですが、やはり実例ということもあるので、この記事の中で具体的なワードを公表するのは控えておきますね。
ステップ①ブランド構築
それではサイト制作プロセスの詳細をまとめていきます。まずはブランド構成。ここではサイトを考える前に、まずは先方のビジネスの現状と理想からヒアリングするのだそうです。ここでのヒアリングはただ聞くだけでなくこちらから働きかけて聞き出すこと。現在は取引先にどんなイメージを持たれていて、ターゲット層はこのへん。今後はどのように同業他社との差別化したくて、商品の売りはここにしたい。先ほどのパーソナリティ表現の４つの例えを基に、先方の現在と理想の未来を「人」で例えていきます。
この時点で相当数のワードが浮き出てくるのですが、その全てを取り込んでしまってはパーソナリティが定まりません。そこで、浮き出てきたワードの一つ一つを「保全ワード」「意味変換ワード」「捨てるワード」のどこかに分類します。保全ワードはそのままプロセスで使い続けるワード、意味変換ワードは「ごちゃごちゃ」という言葉を「わくわく感」などに変えて維持するワード、捨てるワードは文字通りこのプロジェクトにおいては切り捨てるワードです。
そのようにして残った言葉たちを、さらに「mind」「visual」「action」の３種類に分類します。ここでは重きを置く言葉のほかに、取り違えてはいけない言葉・イメージとは違う言葉もまとめておきます。
だんだんとパーソナリティの全体像が見えてきました。最後にこれらの言葉を実在する「人」に置き換えます。有名人であればプロジェクトに関わる多くの人に共通認識が保たれるので、ここでは１～２人のタレントさんを候補として挙げていました。
ステップ②イメージボード開発
ブランドパーソナリティが定まったら、次にこれをサイトパーソナリティに落とし込むための準備作業をします。まずは集めたワードを基にイメージサンプリング。書店で本を買ったり、Webで調べたりと方法は問いません。またこの作業はデザイナー・非デザイナー問わずプロジェクトに関わっている人全員が参加します。そのようにすることで、より効率よく共通言語化ができるのだそうです。
ステップ③Webサイト制作
ここまでの段階を経て、やっとWeb会社の本命であるWebサイト制作に取り掛かります。ブランドパーソナリティをサイトパーソナリティに落とし込む作業です。本命にたどり着くまでの下ごしらえをここまで徹底していれば、デザイン開発にありがちなちゃぶ台返しも防ぐことができそうですよね。実際にのちの質疑応答でも、中川さんが「矛盾が起きたことは一切ないです！」と即答されており、非常に印象的でした。
また、ここではマイクロインタラクションの選定も行います。マイクロインタラクションとは、ビジュアルでは表現できないWeb独自の効果や動きなどを使ってUI/UX面にアプローチした演出をすること。今回は例としてこちらのサイトが取り上げられていました。中川さん、「この画面上に引っ張るとどらえもんのおなかみたいになるんです！ほらボヨンって！これ考えた人天才です！」とべた褒めでした。
サイト制作後
Web制作だけでなく、その基盤から先方を巻き込んでブランドを構築していくことは、先方にとっても制作側にとってもメリットしかないのだそうです。
まずは先方のメリットから。これは言うまでもなく、ブランドのアイデンティティが確立されることだそうです。ブランドの印象を練って完成させたイメージボードが一枚あるだけで、今後の商品開発・広報にもそのイメージが保たれ、逐一迷わなくなるのだとか。また下層の社員に対するアピールとしても役に立つので、企業全体の意志向上も狙えそうですよね。
そして制作側のメリットは、「違う仕事に発展すること」。ここでの違う仕事とは、店舗デザインや印刷物などWebに関わらないことも含まれるのだそうです。これに関しては切り口が違うので、最初はむしろ意外だなあという印象を持ちました。でも確かに振り返ると、ブランド確立・イメージボード作成までやってくれるWeb制作会社を先方が信頼しない理由がないんですよね。コンサル会社にはないデザインスキルを持ち合わせている制作会社だからこそ、Web意外の部分の戦略をも任せてみたくなる…そういったところでしょうか。Web制作会社でもこだわればここまでできるのだと、中川さんは証明してくださいました。
まとめ
今回のイベントで特に印象的だったのは、「Webは作ったら終わりではなく、むしろその時点がスタート」という考えです。Webを運営していくことを「育てる」と例えたりもしますが、今回教えていただいたプロセスを介せば、きっとWebを育てることで企業も育てることができます。
私はまだペーペーの新人なので、このプロセスを即座に仕事に反映するというのは難しいですが、基礎を養ってある程度の裁量を任せていただける日を迎えたら挑戦してみたい方法だなあと感じています。特に今回例えであげられていたワードが本当に多岐にわたっていたので、まずは語彙力からですかね。Twitterでもつぶやいてしまいましたが、元々言語化できない部分にデザインが介入している面もあるので、ビジュアルや表現の言語化は本当に難易度が高いのですよね…。だからこそそれらをビシッと言葉で説明できることも、デザイナーのスキルの一つになるのではと考えています。