見出し画像

戦略を理解して制作できるデザイナーを目指して。

挨拶

こんにちは。Web&グラフィックデザイナーの木下舞子です。

株式会社baigieさんが主宰する「戦略的Web制作集中講座」( #ベイジの集中講座 )も5回目です。戦略を立てる段階を終え、先週から制作段階の講座がはじまりました。

今日書きたいことは、

  • 戦略フェーズは制作フェーズの基盤であり、制作時のあらゆる判断は戦略にもとづいて行われます。

  • 戦略は常に依頼主企業の顧客の目線である必要があります。

  • だから戦略フェーズで顧客理解・企業理解・商材理解をすることがめちゃくちゃ大切だったんですね。

  • 講座自体はto B向けに展開されていますが、to C制作(木下の主戦場)にも活かせる点が多々あり、特に商材と顧客に沿って表現を作りこむ力は分野を問わずデザイナーに求められる素養ですよね。

  • 商材と顧客に沿って表現を作りこむ技術を得るには、デザイン目線でものを観察することがその第一歩ではないでしょうか。

  • 商材と顧客に沿ったデザインを提供するために他社サイトを調査した際、「講座で言ってたことだなー」と感じた事例に出会ったので紹介します。

  • 他の人が作った制作物に打ちのめされ、自分が作った制作物に内省する日々ですが、地道に手を動かしていきたいと思いを新たにしました。

です。
あとは長くなってしまったので読みたい人だけ読んでもらえれば🙆‍♀️

前回の復習

木下が前回noteを書かせていただいたのは2回目の講座後でした。

前回までの講座内容をめちゃくちゃ簡単にまとめると

  • 企業(依頼主)は利益を上げることを目的としている

  • 利益を上げる活動の一部にWebサイト制作がある

  • そのため、我々制作者は利益を上げられるWebサイトを作らなければいけない

  • それには綿密な調査・分析・戦略設計が必要

ということでした。

たしかに、普段の案件を意識して覗いてみると、成果を出してバリバリやられている企業さんほどこういう目に見えない調査・分析がすごいなーと感じます。制作に入るときにもらう資料の量に「うわあ」ってなる。
その分燃えますね🔥

で、前回の4回目からはいよいよ制作フェーズのお話です。
1~3回目で作られた戦略を、制作にどう取り入れるのか。デザイナーである木下が一番気になっていた部分です。

受講した結果、「あらゆることが戦略によるので一概に言えないし、制作前の戦略超大事、戦略を元にデザインできる力も超大事」です。

戦略は制作の基盤

公式はない

制作中、検討するべき項目って無限に湧いてきますよね。

・フォームの項目数は事前に多くして事前情報を得るべき?少なくしてハードルを下げるべき?
・料金はサイト内に載せるべき?問い合わせ後に伝えるべき?
・ホワイトペーパーのダウンロード施策をするべき?ブログにするべき?
・アニメーションを使ってかっこよくするべき?淡々とするべき?
・色を多めに使ってにぎやかに見せるべき?シンプルな色使いでスマートに見せるべき?

などなど。

どの案件でも「これをやれば大丈夫!」なんてたったひとつの成功の公式は存在しません。案件が持つ性格を踏まえ、前段階で作った戦略をもとに、論理や感性を用いて判断するしかないです。

より良い判断をするために

では、より良い判断をするためにはどうすれば良いのでしょうか。

(株)baigiさんの発信を見ていると、ウェビナーにしろブログにしろかなり頻繁に「ユーザーが」「顧客が」とおっしゃいます。

何かを判断する際、必ず顧客の存在を第一に考えて判断されていることが伺えますし、今回の講座でも常に「顧客」を主語にして話を展開されています。

なぜなら、顧客が使いやすく理解しやすいサイトでなければCVする(=依頼主の利益が生まれる)ことはまずないからです。
忙しい顧客が、読みづらく理解しづらく操作もしづらいサイトの商品を買うことはほとんどありません。

そのように顧客にとって良い判断をしようとすると、
①戦略フェーズで顧客自身についてよく知る
②戦略フェーズで商材についてよく知り、顧客にとってのメリットを理解する
③制作フェーズで顧客目線を常に持つ、または顧客目線を持ってチーム内でレビューする
ことが必須だと感じました。

制作していると制作者目線で良いと思えるデザインにしてしまいがちです。けれど、よりよい判断は顧客目線でいるからこそできるものだと痛感しました。

実案件中の例

これまでに起きた実案件での例を挙げてみます。

「文字は小さい方がスタイリッシュでかっこいいな
「色はコントラストが低い方が雰囲気があって良い感じだな
「写真があった方がなんとなくかっこよく見えるな
「グロナビは表示せずにハンバーガーに隠す方が見た目がきれいだな

こう言う状況で一歩引いて、「果たしてそれは顧客と商材に合った表現方法か?」と考え直せるか。
また、チームが同じ目線でその判断基準を運用できるか。
(その判断軸を担ってくれているのがディレクターさんですね。いつもありがとうございます🙏)

そのため、戦略フェーズはチーム全員を顧客の目線に合わせる作業とも取れます。
各々が好きな方向を向いていれば船は進みませんしチームは瓦解します。
無数の判断を、同じ基準で判断するためにも戦略フェーズは非常に重要だと感じています。

上の例ならば、文字を小さくして可読性を多少損なってでもスタイリッシュでかっこいいことが依頼主の利益につながるならばその方がいい。
実際そのようなサイトもたくさんありますし、それが求められる案件もたくさんあります。

例えば、美容室に卸すための業務用カラー剤のブランドサイトは「ブランドのスタイルに近い感性を持っているオーナーさん」向けに作ったので見た目がイケていなければならなかったことがあります。

問い合わせが来たら担当営業が店を訪問し、サイトを見せながら営業トークするのがそのサイトの利用目的でした。
情報は営業がしゃべってくれます。だから、サイトでは言語では伝わらないブランドのスタイリッシュさが伝わることが優先でした。当然、文字情報は少なく、控えめに表示した案が通りました。

ですが、理由なく可読性を損ねるのは良い判断とは言えないことは自明です。
作りながら「〇〇の方がかっこいいよね〜」なんて思考についつい陥りがちですが、本当にその〇〇は正しい判断か?と、顧客目線で考えたいと改めて感じました。それができるデザイナーが、戦略を理解して制作できるデザイナーという理解でいます。

また、そうできるためにも、やはり前段階の戦略フェーズは非常に重要だと認識しています。

おまけ

誰に、何を、どのように売るのかトレーニング

いきなり戦略を理解してデザインしよう!と言われても難しいですが、「誰に、何を、どのように売るのか」の3つだけを意識してデザインすることなら今日からでもできそうです。

そのトレーニングに最適なのが、サロンでもたびたびお伝えしているデザイン目線でものを見ることかと思います。

(株)baigiさんの講座内容はto Bですが、普段自分が手がけている案件がto Cが多めなので例もto Cになります。
知ったばかりのto Bの知識を使いこなせる日はまだまだ遠い〜。

誰に=顧客
何を=商材
どのように売る=販路・販売手段
と言い換えられそうです。

たとえば、先日の仕事のリサーチ中に見つけたこのカラコンの販売サイト。

めちゃくちゃかわいい〜🥹

このLPを例にとって、先ほどの「誰に、何を、どのように売る」を意識したアウトプットとはどのようなものかを観察してみたいと思います。

「誰に=顧客」
は、カラコンをつけておしゃれしたい10代〜20代半ばくらいの女の子。古川優香さんがモデルなあたり、よくあるきゅるんとおめめでうるうるした量産型…ではなさそうです🥺
商材の色名にも個性的な世界観が出ています。ViViか、もうちょっと個性強めにZipperっぽい層。Candy Stripperとか着てそ〜(と思ったらモデルしてた、まだあるんだね🍬)。

「何を=商材」は、度なしのマンスリーカラコン
商材自体も着色直径は狭くてナチュラルめ。日本人の茶目・黒目には薄めのグラデーションがアクセントになって印象的な瞳にしてくれそうな商品です。「誰に」にも関わりますが、嗜好するファッションも自然とカジュアルで強めになりそう。

「どのように売る=販路」は、見える部分でしかわからないので超ざっくり簡単ですが、古川優香さんを旗印にして

  • ECサイトで広告配信→認知・販売ページへ遷移→購買

  • 大手バラエティショップで什器展開→認知→購買

  • ご本人のSNS発信→認知・販売ページへ遷移→購買

  • ターゲティング広告配信→認知・販売ページへ遷移→購買

  • コスメレビューアプリ、インフルエンサーのレビュー→認知→販売ページへ遷移→購買

想像なのでこんなもんにしときます。

太字がこのLPが関わりそうなところです。「よし、カラコンを買うために情報収集するぞ!💪」という姿勢ではなく、友達とだらだらしながらとか、通学の電車で他のアプリを開きながらとか、割となんとなくなテンションで見られそうです。

これらを踏まえて、再度実際のデザインを見てみます。

リンク先を見ていただくとわかるように細部の細部まで最高にかわいい100%なページなのですが、私が「これが顧客と商材に合わせて表現を作り込むってことか…!」と思ったのはこちら。

説明コンテンツなのにかわいさが爆発している


酸素透過率をみたらしだんごで表現すると」…???

酸素透過率をみたらし団子に例えたことがあったでしょうか。私はない。


ですが、イメージモデルの古川優香さんのキャラクターを考えればこれも自然な表現だと思えます。

ともすれば堅苦しいデータが並ぶコンテンツになりそうなところを、かわいい色とあしらいで装飾した上、みたらしだんごで表現するゆるさを加える。
そうすることでページ全体が”古川優香さんっぽい”雰囲気になるよう調整されています。顧客と商材に合わせてデザインされてる。

顧客はTikTokを見ていたり、家でごろごろしていたりするときに「カラコンほしいかも〜」「ゆうかちゃんかわいい〜」くらいの熱量でページをのぞいてそうだし、つまらなければさっさと別のページやアプリを開いて離脱していそうです。友達からDMが来たらすぐさま離脱して、カラコンのLPを見ていたことなど思い出しもしないでしょう。

しかも、カラコンは顧客ごとの嗜好性が非常に強い商材です。自分の好きな雰囲気と異なるものを感じただけでも、すぐさま読むのをやめるでしょう。


そのため、他のカラコンとは嗜好が明確に異なることを伝えて、「あ、この感じ好きだな、こうなりたいな」と思ってもらう必要があります。ファッション雑誌みたいですね。


ですから、デザイナーは細部の細部の細部まで「古川優香さんのような雰囲気が好きな子が好む世界観を作り」「なおかつ機能面も優れていること(つまらない話)を伝えて安心してもらい」CV(購入)につながるデザインを作らなければいけません。

その結果がみたらしだんご18個
🍡🍡🍡🍡🍡🍡

ここでは古川優香さん的なスタイルが感じられることがCVへの最重要事項だと思われます。とにかくかわいくセンスよく面白くなければ!!!
だからこのような判断になったのだと考えます。

魅力的なグラフィックを作る力と情報整理の力、両方を高いレベルで求められるデザインだな〜難しそうだな〜という印象。だけどそういう仕事ほど燃えるよね。

まとめ

今回はみたらし団子に焦点を当てすぎてしまったけど、これもアイディアのひとつだなー、もっと頭柔らかくしよう…!と思った例でした。

これが、
「家族のように大切なペットの保険」だったら?
「SNSマーケティングの分析ツール」だったら?
「地域に密着した小規模事業者向けのレンタルスペース」だったら?

…おそらく判断基準も変わってくるでしょう。
多様な案件の判断基準に対応し、適切なアウトプットが出せるデザイナーでありたいなと改めて思いました。

長くなったのでここらへんにします。
ではまた🍡

この記事が気に入ったらサポートをしてみませんか?