ビズリーチのコミュニケーションデザイン室では、「明日から活用できる引き出し」をテーマに、デザイン業界の第一線で活躍されている様々な方を講師にお招きし、業務やキャリア開発に生かす勉強会をはじめました。今回は、その内容をお伝えします。

第1回目の勉強会は、インタラクティブ性に富んだサイトでたくさんの受賞実績があるAID-DCCで、アートディレクターとして活躍している田渕将吾さんをお招きしました。

講師紹介

田渕将吾　SHOGO TABUCHI

1982年生まれ、HAL・モード学園卒。クリエイティブカンパニーAID-DCCに所属。The FWA審査員。Webデザイナー/フロントエンドエンジニアとしてキャリアをスタートし、現在はアートディレクションや、動画やスチールのディレクション、UIデザイン、空間デザイン、フロントエンドエンジニアリングなど、多岐に活躍。自身が運営を務めるWebデザインギャラリー S5-Styleでは優れたWebデザインを日々キュレーションしている。

ポートフォリオ : www.s5-style.com
Twitter : @shogoTabuchi
AID-DCC : www.aid-dcc.com

ターゲットユーザーに関心を持ってもらえないデザインは、評価されるステージにすら立ててない

はじめまして、田渕です。今日はよろしくお願いいたします。

今日は「ターゲットユーザーが関心をもってくれるデザインを創ろう」というお話をしたいと思っていて、このタイトルには僕が日頃から気をつけていることが盛り込まれています。

デザイナーは日々、様々なデザインを生み出していますが、世の中に競合や類似のデザインが多数あるなか、自分のデザインの価値を成立させるには、ターゲットユーザーから高い評価をもらうことが必須だと考えています。そのためにもまずは関心をもってもらうことが大事で、関心すら持ってもらえてないデザインは、評価されるステージにすら立ってないのと同じだと思っています。

そこで、関心をもってもらえるデザインを創るための「明日から活用できる引き出し」を、次のような段階レベルに分けてお話していこうと思います。

初級スキル：そのデザインは、ベターか？
中級スキル：そのデザインは、斜め上か？
上級スキル：アイデアで、サイトは拡張する。

初級スキル：そのデザインは、ベターか？

基礎に沿い、既存のメソッドに倣ったベターなデザインを作れているか？

世の中にある多様な目的を達成したり課題を解決するために、デザインというものがあります。

例えば、ブランドサイトはブランドの価値を伝えることだったり、プロモーションサイトは商材の魅力を伝えることだったり、コーポレートサイトは企業姿勢を知ってもらうことだったり。

その目的を達成するためや課題を解決するための「価値」を創造することが、デザイナーのなすべきことである、と僕は思っています。

デザイナーが創造できる価値はいろんなやり方があって、そのメソッドは世の中にたくさん存在しています。

目的のものがすぐに見つかる「導線設計」にする
情報を正しく認識できる「UI」にする
商材を魅力的に表現するために「撮影」を行う

など。

このようなメソッドは書籍、セミナー、ネットや、先輩たちからのアドバイスなど様々なところで簡単にインプットが可能な時代になっています。過去の成功事例に倣い、自分のデザインに取り入れることで価値を高める。そうしてできるのが「ベターなデザイン」だと思っています。

つまり初級スキルでは、知識量、経験量、基礎技術が大事で、それはインプットとアウトプットを継続することで自然と身に付いてくるものだと思っています。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%20text-align%3Acenter%3B%22%3E%E8%AC%9B%E7%BE%A9%E4%B8%AD%E3%81%AB%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%81%9F%E3%82%BB%E3%83%9F%E3%83%8A%E3%83%BC%E3%81%AA%E3%81%A9%3C%2Fp%3E

これが欠けると良い仕事は絶対できない大事なスキルなのですが、最近よく思うのは、A.I.が発達してきたことで、もしかするとA.I.が過去の情報を解析してベターなデザインを作成してくれることが当たり前の時代が来るかもしれない。そうなると、ベターなものを提案するスキルは、機械に取って代わられるかもしれないですよね。実際、すでに最適なワイヤーフレームを作成してくれたり、テンプレートを作成してくれたりするツールもあります。

そこで次の中級スキルでは、トレンドやポジショニングを考慮することで、ベターなデザインを先鋭的なデザインにしましょうというお話をしようと思います。

中級スキル：そのデザインは、斜め上か？

トレンドやポジショニングを知り、ベターのポジションの斜め上のデザインを作れているか

僕は日々デザインをする中で、トレンドやポジショニングを知ることで自分のデザインを客観的に見るようにしています。
最初に言ったように、デザイナーは「ユーザーが強く関心を持ってくれるもの」を作ることが大事です。そのためには、普遍的なものではなく、先鋭的であることが大事だと思っています。

ここでの「先鋭的なデザイン」は、誰もが考えつかない、ぶっとんだ発想の、発明のようなデザインのことだと捉える人もいるかもしれませんが、それは半分正解で、半分違うかなと。
誰も考えつかないものではなく、気づいていないだけで潜在意識のなかにあるもの。ぶっとんだ発想でありつつも、時代背景や生活環境とマッチしているもの。発明のような唯一無二のものではなく、競合品があってこそその差に魅力が宿る。
つまり、人の深層心理、社会のニーズ、競合との差などを知り、そこから次の発想につなげたものが、先鋭的なものだと思っています。

例えば、2018年にとても流行った、僕が勝手に「シティポップ系」と呼んでいるビジュアルがあります。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%20text-align%3Acenter%3B%22%3E(c)%E3%81%82%E3%81%84%E3%81%BF%E3%82%87%E3%82%93%20%E6%84%9B%E3%82%92%E4%BC%9D%E3%81%88%E3%81%9F%E3%81%84%E3%81%A0%E3%81%A8%E3%81%8B%20%2F%20(c)DA%20PUMP%20USA%20-%20MV%20%2F%20(c)SIRUP%20Synapse%20-%20MV%20%2F%20(c)PENOMECO%20'COCO%20BOTTLE%E2%80%99%20-%20MV%3C%2Fp%3E

具体的にはブルーなどのメインカラーと、相反するピンクや紫色を組み合わせたグラデーションの、新しさもありつつ懐かしさも感じる絵作りのことを指しています。グラフィック、イラスト、照明演出などでこうゆう色彩を用いた表現は、ファッションや音楽だけでなくいろんなシーンで採用されていました。

そういうトレンドに敏感になっていると、自分の今後のデザインで生かせるシーンがいつかくると思っています。

僕は去年のクリスマス商戦の案件で、ハリー・ウィンストンのサイトデザインを2パターン提案しました。そのときのA案はピングとブルーのグラデーションを用いて、商品のコントラストも高めにしたもの。B案はグレーのワントーンで、商品のコントラストが低め、ハリー・ウィンストンのレギュレーションにも沿っているものでした。

老舗ブランドなのでレギュレーションが厳格です。最終的にはB案が採用されましたが、このときレギュレーションのことは知りつつも色彩や発色が全然違うA案もあえて一緒に提案しました。顧客は望んでいない提案かもしれないけど、若年層にも新たなファンになってもらいつつ、哀愁のある雰囲気もあるので、年齢が高めの層もカバーできそうと考えたからです。

このように自分の中で提案の余地を感じたら、どんどんチャレンジするようにしています。

逆に、トレンドを知り逆手を打つ判断をする場合もあります。
例えば、海外のファッションブランドのロゴがそうです。近年いくつかのブランドがリニューアルを行い、シンプルな装飾のないサンセリフのボールド体を採用したロゴに変わりました。

ファッションブランドがこぞってリニューアルをした意図はいくつかあると思っています。
まず一つ目はもちろん、ブランドの新たな方向性を示すリブランディング。
もう一つはユーザーとブランドとの接点がデジタル中心になってきたこと。サンセリフ体はデジタル上でも視認性が高く実用的な面を考慮したのかなと思います。

また、ロゴの変更はニュース性が強いので、新しいロゴに賛成でも反対でも人々の注目を集めて話題になります。SNSではバズることで多くのユーザーに宣伝できるので、新クリエイティブディレクターのデビューを印象づけるには特に効果的です。ブランドロゴの変更も、PRツールのひとつとして捉えることもできます。

でも、ロゴを一覧にしてみると気づくように、ラグジュアリーブランドのロゴが均質化してしまうリスクもあります。ユーザーにとっては、自分の好きなブランドが、他のブランドと似たロゴになることはポジティブではないですよね。
こういった流れを知ると、別の角度からチャンスが見えてくることもあります。

トレンドを逆手にとって流れから逆行した方が、ユーザーの関心が高まる場合もあるということです。
たとえばグッチが良い例だと思っています。他のブランドの流行に合わせず、ポジショニングを見極め、独自の世界観を作りだし、グラフィカルなビジュアルで目を引いています。ロゴもグラフィックに合わせて変形させたりしています。

どちらにしても、トレンドやポジショニングを敏感に察知してデザインに昇華させなければならないので、トレンドに沿う場合もそうでない場合も高いスキルは必要になります。世の中を注意深く観察して、その流れに気づくこと。それを自分なりに変換してデザインに取り入れられれば、ベターの斜め上の提案ができるのではないかと思います。

初級スキルと中級スキルの実践例

初級スキルと中級スキルを実践した事例としてPaymeをご紹介します。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%20text-align%3Acenter%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fpayme.tokyo%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EPayme%3C%2Fa%3E%3C%2Fp%3E

当初のオリエンテーションの際に、次のような要望をヒアリングしています。

ブランドとニュースの格納、信頼感の醸成、シェアしたくなる情報発信。
サービスの定着率向上、求人効率アップ、お給料を好きな時にもらえること。
ポップで簡単そうに見え、ただし安っぽかったりふざけてる感じに見えるものはNG。
常に動きがあるような印象を作りたい。

そのヒアリングした要件を踏まえて、リニューアル前のポジションを分析して、望んでるポジションへ導けるよういくつかのメソッドを用いて提案しました。

提案の内容を大雑把に紹介すると、

情報をどんどん読み進めていける情報の並び順
イメージスケールから最適なカラースキームの策定
イラスト・アイコンをトレンドマップに並べて最適なトーンマナーの策定
ミレニアル世代に合ったアニメーションやムービーのトーンマナーの提案
認識スピードの速い文章量のコントロールやファーストビューで閲覧する情報量のコントロール

などです。

例えば、カラースキームを策定する際には、配色イメージスケールという日本カラーデザイン研究所が開発した色彩戦略のマッピングシートを参考に、リニューアル前のカラーがどうしてターゲットユーザーに沿ってないのかを説明し、今回のターゲットに感じてもらいたい感情に合うようなカラーを選定し、提案しました。

イラスト、アイコンのトーンを決める際には、過去2年ほどのイラストのトレンドがわかる資料を作成し、その流れからどんなトーンがベンチマークになるのかを説明しました。そして今回のターゲットユーザーに沿ったイラストのテイストを選定し、最適なイラストレーターを提案しました。

その他のメソッドもそうですが、提案の中で活用したメソッドは、すべてネットを検索したり書籍を探せば参照することができるものです。自分自身がゼロからメソッドを生み出さなくても、既に確立されたものを参考にすれば、要望に沿った提案への近道もできるし、最適なものを提案できます。これが初級スキルで必要な引き出しです。

そこにミレニアル世代にウケそうな小気味のいいアニメーションを足すことで、斜め上のクリエイティブを目指しました。

基礎やメソッドを正しく理解すれば、簡単にベターなデザインは作れます。
そこにちょっとしたアイデアや自分なりのセンスが加えれば、基礎のしっかりとした斜め上のデザインができると思います。

ちなみに、基礎とメソッドの蓄積で完成したサイトは、別のサービスサイトにも簡単に複製することができちゃいます。ノウハウの塊ですから。

このPaymeがリリースされてから似たようなサイトをいくつか拝見しました。きっと中には本当にPaymeサイトをベンチマークにしてくれているのものもあるのだと思いますが、「サイト」をベンチマークにするプロジェクトは、模倣になりがちで、本当に伝えたいことが表現できてないケースをよく見ます。

メソッドを真似して取り入れるのは良いと思いますが、アウトプットを真似しても、最終的にはそれと似ているのになぜかクオリティが低いサイトができてしまいますので注意が必要です。

上級スキル：アイデアで、サイトは拡張する。

Webならではのアイデアでサイトを拡張すれば、真似することができないユニークなものになる

メソッドを用いて出来上がるデザインから次の段階に行くには、Webならではのアイデアでユニークなものに拡張しましょう。Webならではといっても、最新の技術をやみくもに取り入れましょうと言っているわけではありません。

例えばデザインをする際に、僕がいつも気をつけていることをいくつかご紹介します。

スクリーンには、奥があると想像してみる
サイトは、縦にしかスクロールできないというルールはありません。
縦、横、奥、そして時間変化もある4D的な感覚で考えてみると、まったく違うプレゼンテーションができるサイトになります。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%20text-align%3Acenter%3B%22%3E%E7%94%B0%E6%B8%95%E5%B0%86%E5%90%BE%E3%81%AE%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA%E3%82%B5%E3%82%A4%E3%83%88%E3%80%8C%3Ca%20href%3D%22http%3A%2F%2Fwww.s5-style.com%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ES5-Style%20Hello%20world.%3C%2Fa%3E%E3%80%8D%3C%2Fp%3E

このサイトは、サイトのツリー構造の上位階層や下位階層に移動する時には、コンテンツが奥や手前に移動するようなアニメーションで遷移させ、サイトの深部へ潜り込んだような印象を強めるためにBGMを篭ったような音質に変化させたりしています。同階層のページに遷移するときは左右へ移動するようなアニメーションで遷移します。これは、サイト全体が空間に物理的に存在していて、その空間を移動してサイトを巡っているような感覚になるようなイメージでデザインしました。

ビジュアルアイデンティティを考えてみる
サイトを、情報を掲載するただの器として捉えていたらビジュアルアイデンティティを作ろうという発想に至らないのではでしょうか。それにお客さんも「ビジュアルアイデンティティを作ってくれ」と言ってくる機会はなかなか希だと思います。自分で「ビジュアルアイデンティティを作ってみよう」と無理やり課題を作りデザインしてみると、この商材の顔は何だろうと考えられるようになり、いつものデザインするときよりももっと商材の深いことを知りたいなという行動につながり、普段と違った発想ができるのでおすすめです。

僕は、サイトもブランドの一部として捉えて、そのブランドを象徴する顔を作るという思いでトップのデザインをするようにしています。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%20text-align%3Acenter%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fwww.kindai.ac.jp%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%E8%BF%91%E7%95%BF%E5%A4%A7%E5%AD%A6%20OFFICIAL%20SITE%3C%2Fa%3E%3C%2Fp%3E

このサイトでは、大学の魅力である、広大なキャンパスと個の学生を対比させたムービーを作成し、そのコントラストからそれぞれの良さが引き立つようにしました。それから、ニュース性の尽きない大学なので、文字の印象を強めたデザインにして、発信力を見た目で表現しました。当初、大学のことを十分に理解できていなかった段階で作っていたデザインは、ことごとくダメだしをされ、なんども繰り返す中でようやく捻り出されたデザインです。

サイトは見るだけでなくて、体感できるもの
「Webデザイン」というと、いかにわかりやすく整理し、いかに美しいマージンでレイアウトするか、というカタログを作るような観点に焦点がいきがちです。そのときには商材を活かしたインタラクションを考えてみると良いと思います。サイトの中に世界が広がり、体感できるサイトに変わります。サイトを巡ることで気持ちの変化が起こるインスタレーションのようなサイトにすることができます。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%20text-align%3Acenter%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fwww.nhk.or.jp%2Fspecial%2Feizo%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ENHK%E3%82%B9%E3%83%9A%E3%82%B7%E3%83%A3%E3%83%AB%E3%80%8C%E6%96%B0%E3%83%BB%E6%98%A0%E5%83%8F%E3%81%AE%E4%B8%96%E7%B4%80%E3%80%8D%3C%2Fa%3E(c)%20NHK%20(Japan%20Broadcasting%20Corporation)%3C%2Fp%3E

このサイトでは、100年前の世界を記録してきたカメラの中に潜り込み、浮遊する映像の海を泳ぎ、回遊するうちにひとつの映像に偶然巡り合うような世界をイメージしてデザインしました。

最後に、もう少し詳しく、Webならではのアイデアでサイトを拡張した例をご紹介します。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%20text-align%3Acenter%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fc4cm.creativity-class.xyz%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ECLASS%20for%20CREATING%20MYSELF%3C%2Fa%3E%3C%2Fp%3E

人口減少の課題に悩んでいる埼玉県横瀬町で、住民の課題に対する当事者意識を醸成するプロジェクトがありました。このサイトの役割は、横瀬町にはどんな魅力があるのかを横瀬町の中学生たちが考え、自分たちで脚本と撮影をしたオンラインフィルムを紹介するためのものです。

とはいえ、動画を見てもらうことがゴールではなくて、取り組みそのものを見てもらって何かを感じてもらうことがゴール。だから、ただ動画を掲載して再生ボタンを押して観てもらうようなサイト構成ではなくて、制作してきた思いとか、中学生たちの自己表現とか、ワンシーンに込めた意図とか、そういう動画を見るだけでは伝わりきらないものを、Webならではのインタラクションや、動線設計や、デザインで、動画を、動画以上のものに拡張させています。

例えば、この動画の脚本は、10人の生徒に10本の脚本を作ってもらいました。そのうち3つの物語をピックアップして、コンテを作成してもらい撮影をし、最終的にその3本の映像をオムニバス形式のように1つにまとめて編集しています。そのため映像を再生すると3つの作品が並行して進行していくので、物語をすんなり理解することができません。

そこでWebサイトでは、各シーンをすべてチャプター化し、ワンシーンごとに視覚化して、気になったところで作品を静止することができる仕組みにしてあります。

静止した各チャプターからは、それぞれの作品のシナリオ・キャスト・スタッフ・ロケーションを知ってもらうことができます。並行して再生される物語の中で、直感的に気になった1シーンを触れると、それをきっかけに横瀬町の魅力を知ることができるような導線設計になっています。

つまり、Youtubeの埋め込みをしただけだと「見る」ことしかできませんが、Webによって「触れる映像」に拡張しているということです。

また、映像だけでなく、音楽も拡張することを考慮してあります。この楽曲は“刹那”と“切なさ”を掛け合わせたセツナというタイトルがついていて、刹那的に時間を過ごしその中で悩み決断し今を生きている人の様子を表現して制作してくれたものです。

そこで、刹那的に光っては消える日本の蛍をイメージしたアニメーションをとりいれたり、チャプターが時が止まったような描写からクリックすると記憶が呼び起こされ時が動き出すようなアニメーションをとりいれたりすることで、デザインやインタラクションで音楽の意図を拡張させています。

このようにして、コンテンツの内にある思いを、デザインやインタラクションでより強く伝達させたサイトを作りました。

初級スキルと中級スキルは真似ができるとお話ししましたが、上級になるとインタラクションやデザインひとつひとつが強く意味をもってきます。なので、他では真似できない、真似しても意味のないデザインが出来上がります。

みなさんの普段のお仕事にもこういった視点を取り入れてみると、いつもとはまた違ったアウトプットが出てくるかもしれませんので、ぜひ参考にしてみてください。

今日は20代、30代前半の若手のデザイナーが多いと聞いていたので、実務で活かせそうな、僕の引き出しをお話しました。以上で、僕からの話は終わりです。ありがとうございました。

メンバーからの質疑応答

最後に、田渕さんと、コミュニケーションデザイン室室長の三井と、勉強会企画運営を行なっているCDO室のミナベを交えて、質疑応答の時間を設けました。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%20text-align%3Acenter%3B%22%3E%EF%BC%88%E5%B7%A6%EF%BC%9A%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%AE%A4%E5%AE%A4%E9%95%B7%20%E4%B8%89%E4%BA%95%EF%BC%8F%E4%B8%AD%E5%A4%AE%EF%BC%9ACDO%E5%AE%A4%20%E3%83%9F%E3%83%8A%E3%83%99%EF%BC%8F%E5%8F%B3%EF%BC%9A%E7%94%B0%E6%B8%95%E3%81%95%E3%82%93%EF%BC%89%3C%2Fp%3E

アニメーションやインタラクションのモックはどうやって作っているのか？
ノンデザイナーとの合意形成のコツは？
案件が立て込んでいる際のプロジェクトマネジメントで気をつけていることは？
クライアントが望むものとアウトプットに乖離がある場合、どうやって立て直すのか？
自分のデザインの良し悪しを判断するには？
アイディア出しの方法は？

など、メンバーが普段直面している悩みについて、経験からのナレッジをお話いただきました。

田渕さんからビズリーチへメッセージ

今日はありがとうございました。

すごく真剣に話しを聞いてくれて、しかも質問もたくさんしてくれて、とてもポテンシャルの高い方が多くて驚きました。

僕も何社か転職していますが、自分の仕事やデザインのことを熱く話せる仲間は限られてるので、みなさんが羨ましいです。

それと僕が今の会社で思っていることなんですが、外から見るとキラキラしているけど、入社して中の人になるとそこまで特別な感じはありません。キラキラして見えてた案件とかも見慣れてきて、だんだんと凄みを感じなくなってきました。でもそれは一緒に働いてるみんなの意識が高く継続しつづけてるから、だんだんと自分もその環境にいて、視座が高いのが当たり前に感じるようになったのかなと思いました。

みなさんも、いつも一緒にいるから慣れてしまっているかもしれないけど、こんな意識の高い仲間がいることは、恵まれているし、羨ましいなと思います。そこに自覚をもって、その姿勢を続けて欲しいなと思いました。

おわりに

今回は、アートディレクターとして活躍されている田渕さんに、実務で生かせる考え方のメソッドをお話いただきました。質疑応答も含めて約2時間、とても濃密な勉強会となりました。
これからも定期的に勉強会の内容をお届けしてまいりますので、お楽しみに！