こんにちは！
ライブ配信セミナー『現場学校』レポート班のSカオリです。

2019年2月20日に開催された、角田 綾佳さんのセッション「デザイン制作の現場」のセミナーレポートをお届けします。

角田さんといえばイラストレーターとしても活躍されていて、わたしも角田さんのイラストがとっても好きなので超絶かわいらしいスライド資料に大興奮してしまいました！

今回のお話は、自分も同じような規模感の案件で仕事してるなっていう方も結構多かったんじゃないでしょうか？そういう意味でも、今すぐ使えるヒントがたくさん得られたんじゃないかなと思います。わたしもページデザインをする際にウーン…となることが多くて、もっと発想を広げるために角田さんのお話はなるほど！と思うとこがいくつもありました！

1. デザインで一番大事なこと

今回、角田さんにお話いただいたデザイン制作のお話は、デザインの技術やTipsではなく、デザイン制作する上での「考え方」についてです。

デザイン、と一口に言っても、ビジュアル面のデザインだけでなく、機能面のデザインや、目に見えないものもデザインに含まれることもありますが、その根底にあるのはすべて「デザインをする上で何を考えるか」です。

ここまでの現場学校での講義でも、「具体的にこうするんだよ」という話よりも「こういう考え方で仕事をしてるんだよ」という、手の動かし方じゃなく頭の動かし方についてのお話が多かったことはおわかりかと思います。
結局のところ、制作にしろ企画にしろ、クライアントの先にいるユーザーに、何をどう伝えるか、何をしたらユーザーがアクションしてくれるかということを考えて、それを形にしていくのが我々の仕事だということはどのテーマの講義でも共通していますよね。

デザイナーとは、「ユーザーがゴール（サイトの目的）にたどり着くための手助けをする人」「ゴールに迷わずたどり着けるように、あくまでユーザーが自分の足でたどり着いたなと思えるように、クライアントとユーザーの間をつなぐ役割」と角田さんがおっしゃっていましたが、これは素敵な考え方だと思います。自分の足で…とユーザーが思えるように、ゴールへの導線を工夫してあげることがデザインなんです。

2. ビジュアルで伝えるデザイン

ビジュアルというのは一気に視覚に訴える分、人によって好き嫌いがはっきりしてしまいます。ビジュアルは強いゆえに、しっかり考えて使わなければなりません。

ビジュアルを選ぶ・作るときに考えるポイント
1. ターゲット
2. 刺さるポイント
3. ポジション（自分で使うのか、人のために使うのか、会社で使うのか…など）

まずはこの3つを考えて、どのビジュアルを選ぼうか考えます。

ビジュアルの「視点」
・人あり＆視線あり（カメラ目線の人物写真）
　→印象が強いが、好き嫌いが分かれる。タレントを起用してる場合、弁護士など「この人」が主役である場合。ストックフォトでは難しい
・人あり＆視線なし（カメラ目線ではない人物写真）
　→自然な雰囲気、視線がないので緊張しない。採用サイトなどによくある。自分がそこに入り込める雰囲気が伝わってくる
・顔なし＆ポイント訴求（手アップ、商品アップの写真）
　→自分を投影しやすい、素材としても探しやすく、素材を足し引きできるので作りやすい
・人なし＆イメージ訴求（風景や背景など）
　→ターゲットを固定しない（だれにでもあてはまる）、その分印象は弱めなので、あえて印象を強くしたくない、背景として使いたい場合によい

抽象と詳細の深さ

このイラストの例では、
右はトイレのアイコンのように、誰が見ても女性に見える。これは抽象的。
真ん中はおさげ髪に赤いランドセルでスカートの小学生女子。昔から想像するいわゆる小学生。ただし、今の時代たぶんこういう小学生女子は少ない。
左は、今実際に多いのはこういう小学生女子。女の子でも髪は短いし、ズボンも履くし、ランドセルの色も自由に選べて青を持ってる女の子もいる。

ターゲットが上の年代の人たちの場合、真ん中のいわゆる小学生の姿が「小学生らしいな」と感じるけど、小学生本人たちにとっては真ん中は「こんな子今時いないよ」となってしまって、イマイチな印象を持ってしまうでしょう。

これは、見る対象が自分から遠いかどうかで使うビジュアルを変える、という必要があって、上の世代からすると小学生のイメージは真ん中のかんじですが、小学生に近い世代であるほど、リアルなのは左の方だよね、となります。

余談ですが…
この「いわゆる」なイメージ、わたしは無難でありながらもちょっと怖いなと思うところがあって…。この「いわゆる」っていわば固定観念的なところがあるので、ほんとこの辺は扱いが難しいな…と考えることが多いですね…。

ビジュアルのアイデアに困ったら？

モチーフがなかったりビジュアルがどうしても思いつかない！というとき、どうして突破するのか？

角田さんの場合、ストーリーと背景を勝手に想像して作っちゃう！という技を紹介していただきました。

例えばアプリのサイトのビジュアルだったら、そのアプリを使っているのはOLさんで、休日のカフェでお茶しながらそのアプリを見る…という設定を作って、カフェっぽい背景とスマホを操作する手をビジュアルに入れる…という感じ（先ほどの顔なし＆ポイント訴求ビジュアルですね）

なるほど！ついサイトの画像を作るときは、その商品だったりお店だったりを直接的に表そうとしすぎてあまり面白くない印象にしてしまうことが多いかも…と反省しました。こうやって発想を広げたほうが、むしろそのものを見せられるよりも「使っているイメージ」をユーザーに抱かせることができて訴求力が高いなと思いました！

ストックフォトのお話の段で出た、ストックフォトは抽象的なイメージを表現するアイデアの宝庫でもある、というのも参考にしたいですね。

ビジュアルを発想するには？

スタート地点から「●●と言ったら××」、「××と言ったら△△」…と連想していくことで、スタート地点から一発でたどり着けないものが発想できるという言葉です。

マンダラートやオズボーンのチェックリストなどの発想ツールを使ってビジュアルのヒントになるようなことをどんどん掘り下げていくことで、アイデアを広げていきます。

これは毎回ビジュアルを作るときにやらなければいけないわけではなく、どうしても思いつかない！といったところ打破するために、こういうものを使ってアイデア出しすればOK。

角田さんからの課題です。レポをご覧のみなさんもチャレンジしてみてくださいね！

わたしも考えてみました…！ありきたりかもしれませんがカフェインレスなのでお子さまにもいいかなと思って、親子でおやすみ前の一杯ってことで！

3.ストーリーで考えるデザイン

デザインの中には、ストーリーにすることで意味がわかりやすくなるものもあります。たとえば、

・時間経過で状態が変わるもの
・内容が専門的、なじみのないもの
→スクール、エステ、ダイエット、病気の治療など時間の経過とともに状態が良くなっていくはずのもの

こういったものは順を追ってストーリー仕立てにすることで、理解しやすくなります。また、エステやダイエット、病院など専門性の高い情報に本当なのか、騙されないか、損しないか、と自分では判別がつかず懐疑的になります。なので自分で詳しく知って納得して初めて情報が入ってくるものなので、ストーリーを使って情報を伝えるのが有効です。

人は、理由がわからないとうさんくさいなーと思ってしまいます。「理由もなくこんなに安いはずがない…」→「訳あり品だから安いのか」と納得できれば安心します。
ユーザーにも企業にも双方にメリットがあるということを示してあげることが大事になります。

ストーリーを使ったデザインの他の例としては、
「よくあるご質問をストーリー仕立てにして、質問者＝ユーザーの疑問を解決する」「ふきだしを使って会話形式にする」（LINEみたいな感じですね）
というのを紹介されました。
最近は漫画をメインコンテンツ的に説明や解説に使っているサイトも増えてるし、わたしも漫画を描くのですごくやってみたいですね！（ただ、角田さんがおっしゃったように漫画は修正がすごく大変なので、苦労と金額が見合わない懸念と、省力化できる絵柄であることが大事かも…）
日本人はとくに漫画を読み慣れているし、テキストの説明や写真だけが続いていくより目が止まってじっくり見てしまうという点では効果がありそうだと思います。

4. 「なんのため」のデザイン

サービスのデザインは提供する価値とジョブをつなぐもの。

デザインを作ることに集中しすぎたり、仕事が忙し過ぎたりすると、ワイヤーフレームに書かれているものが一体、なんのための機能なのか、その要素の本質がなんなのかを考えずに表層で思い込みのデザインをしてしまうことがあります。
そのサービスが提供したいことはなんだったのか、なんの目的でその要素があったのか、ということをきちんと考えれば、惑わされなかったかもしれないけど、こう…忙しさで視野が狭くなってしまっているとそういう部分が抜け落ちてしまうことがあるので気をつけたいですよね。
作ることに注力しすぎずに、目的を見失わないことをこころがけましょう！

わたしも提供されたワイヤーフレームそのままの文言を使って、あれ…？なんかおかしいぞ…？となることがあります。デザインで一番危険なのは、見栄えだけデザインして本質をデザインしていないときだなって思います…。

提案型のデザイナーでいること。

角田さんは、デザインをする際ワイヤーフレームを忘れてデザインする…自分で情報を再構築して価値を考え、自分なりに考えたデザインを出すようにしているとのことです。

その背景は、角田さんはデザイナーからスタートしたわけではなかったため、デザイナーになるには社内の別のデザイナーに勝たなければならなかった。そのためには他の人と違うことをしなければ…と思い提案型になっていったそうです。

この話は、「情報設計の現場」で坂本さんがお話されていた「PlanBを持つこと」に通じますよね。自分なりにこうした方がいいと思う！というものを作って提案していくことが自分の価値になっていく。

特に、フリーランスの場合、星の数ほどいるデザイナーの中であえて自分を選んでもらうには…という点において、提案ができるということはすごく大事なことだなと思うんですね。言われたとおりに作ることは誰にでもできるけど、その人にしかできないことがあるならその人に頼むしかないわけなので…「より良くなる余地」があるなら、わたしは提案をするべきだと思います。

最後に質問コーナー！

田口さんと角田さんの対談による質疑応答の時間、今回もたくさん質問が上がっていました！自分自身がデザイナーの方、または外注や社内のデザイナーに指示をする役割のディレクターの方などが気になる点が多かったようです。

受講者の質問コメントにもいくつも答えていただきましたが、今回本レポートでピックアップするのは、対談中に出た田口さんからの質問です！

A. ワイヤーフレームやディレクターからの指示で、違和感があるかどうかで考えたらいいと思う。ワイヤーも100％の状態でくると限らないので、ここにボタンがあるのがおかしいな…みたいなとこから提案してみたり。デザイナーとしての違和感だけでなくユーザーとしての違和感も感じ取りながら作っていく。

なるほど〜！100％ワイヤーフレームに従わなきゃ…と思って違和感を押し殺すのでなく、そういった引っかかりの是正から提案するのから始められそうですね（これ、ユーザーにとっても違和感になることを放置するのも…という気もしますし）。
逆に、常にクリエイティブな発想で提案しなきゃ！と考えなくても、全然提案しなくてもいけるようなしっかりしたワイヤーがきたらそれに沿ってデザインしていけばいいので、提案することにハードルを感じなくてもいいかもですね！

また、「方向性が違ってたとかで採用されないこともあっても、提案されること自体はうれしい！」とディレクターの受講者からもコメントが上がりました。田口さんも嬉しいですよねとおっしゃってますし、やはり提案してくれるデザイナーって決して多くないようです。

なので、デザイナーのみなさんも「どうせ提案しても蹴られるかスルーされるし…」と思わず、どんどん提案していくスタイルになっていったほうがいいと思います！意外とディレクターさんたちは提案してくれることを待ってるかもしれませんよ！

すごいぶっちゃけて言うと…わたし自身の体験談ですが、
デザインをもらってコーディングから担当する案件で「なんでこここうなってるんだろう…？？デザインするときにおかしいって思わなかったのかなぁ」と思ってしまったことがありまして。おそらくワイヤーがそうなってたからデザインもそうしてしまったんだろうなと想像してるんですが、コーディング時に「ここデザインだとこうなってますけど、こうしたほうが自然じゃないですか？」と提案したことがあります（で、「確かにそうだね」で提案通りました…）
デザインの段階でその違和感に気付けるっていうのは、ちゃんと考えてデザインしてくれてるなっていうことの証にもなるのかなって思います。

『現場学校』を体験しましょう！

ライブ配信セミナー『現場学校』は、生放送のライブ配信を見逃した場合でも、期間中「アーカイブ視聴」ができます。

ちなみに現場学校では講義中のスライドも配布されますので、受講者だけが見れるスライドも本当に価値が高いです！（※講師によって配布の有無は異なります）
講義のお話はもちろんですが、そのスライドにもアウトプットやデザインの参考になる点がすごくたくさんあります。レポート等で公開不可のページもあるしスクリーンショットもすべてをお見せしているわけではないので、ぜひ自らスライドの全貌と、講義の全貌を見てみてほしいなと思います！

参加チケットはこちらから
https://gbgk.jp/