目次

リニューアル成功のためにスパプラがしていること

スパプラでは、WEBサイトリニューアルをする際に以下の4つのポイントに重点を置いてヒアリングを行っています。

1. 目的が明確であるか

2. 問題提起が明確で本質的であるか

3. 目的を果たすための武器はあるか

4. ターゲットが具体的にイメージできているか

どれか一つでも欠けてしまうと、意味のあるデザインは作れないですし、そもそもプロジェクトのスタートラインにすら立てないからです。

見た目が良いだけのデザインになってしまっては、効果検証もできずに良し悪しの判断ができないプロジェクトで終わってしまいます。これでは意味のあるデザインとは言えません。

つまり、この4つのポイントを深掘りしてゆくことがWEBサイトのリニューアルを成功させる鍵になるのです。

さらに、4つのポイントを抑えたうえでターゲットの態度変容を設計し、期待するアクション（お問い合わせ、資料請求など）に導きます。
ターゲットがどんなキーワードで検索してWEBサイトに辿り着き、WEBサイトを見てどのように気持ちが変化して、どんなアクションにつながるのかを深く設計することが重要なのです。

この設計が深いほど、他社との差が大きくなり、より強いブランディングにもつながります。

しかし実際には、以下のようなデザインありきの目的を設定して走り出してしまい、リニューアルプロジェクトが失敗に終わるというケースも多いため、注意しなければなりません。

• 競合他社よりもスタイリッシュでカッコよくしたい

• イマドキのおしゃれな動画を入れたい

そういった失敗を起こさないためにも、スパプラではヒアリングやMTGで重要なポイントを深掘りしてゆくのです。こういった、目的の設定からターゲットの態度変容の設計までを行い、デザインを用いてターゲットユーザーを想定するアクションに導くことができるのが、介在価値だと考えています。
実際に、スパプラがどのようにWEBサイトを改善するのか、改善例を見ていきましょう。

リニューアルでの改善例

問題提起が不明確な金属加工部品メーカー

金属加工部品メーカーのウェブサイトのリニューアルをすることになりました。社長から「発注を増やすためにWEBサイトを作り直そう！」とだけ言われています。
社長の期待に応えるには、どのようにリニューアルを進めてゆけば良いのでしょうか？4つのポイントに沿って、改善点を深掘りしてゆきましょう。

4つのポイントを深掘る

まず、今わかっていることをまとめると以下のようになりました。

目的に対して「なぜ発注が増えないのか」が不明確な状態ですので、これは深掘りする必要がありそうです。
発注が増えないということは、サイトの訪問者がお問い合わせに辿り着く前に離脱している可能性が高いということです。明確な問題提起をするために、なぜ、そうなってしまうのかを考えてみましょう。

現状のWEBサイトでは、製品のクオリティやこだわりを商品ごとに文字で詳細に説明していて、読み込めば理解できるというユーザー体験になっています。

ターゲットの目線で見てみると、会社の最大の魅力である「少量生産が可能なこと」「顧客ごとのカスタムに対応していること」が伝わって来ません。これでは、商品の詳細を確認する前に離脱してしまいます。
以上のことから、「武器・強みがターゲットに刺さっていないこと」が、既存のWEBサイトの問題であると仮説を立てられそうです。

まとめるとこのようになります。

次に、4つのポイントをもとにターゲットの態度変容を設計してゆきます。

ターゲットの態度変容を設計する

ターゲットである「小ロットで発注したい、中小自動車メーカーの発注担当者」がWEBサイトを訪れる時、どんな課題があり、何を期待して来るのでしょうか？
ターゲットが抱える、現在の発注先（競合他社）への不満や課題に感じていることを洗い出してみましょう。

• 今の発注先は、決まったロットでしか発注できなくて余計な費用がかさむことが多い...

• 発注先を変えるにしても、大量生産品では品質が担保できないかもしれない...

• 自社の自動車に最適な部品を探すのが大変...

これらの課題に対してターゲットが期待することと、検索されるキーワードを考えてみると...

• 自動車の受注に合わせて小ロットで部品を発注して、必要最低限の費用に抑えたい
  → 検索キーワード：小ロット、費用、安い

• 安くてもクオリティは担保したい
  → 検索キーワード：高品質

• 自社の自動車に合うようにパーツをカスタムしたい
  → 検索キーワード：カスタム、オリジナル

こういった期待（キーワード）に対して、デザインを用いて自社の武器で切り込むことができれば、ターゲットが納得し、問い合わせにつながるWEBサイトが出来上がるはずです。
実際にWEBサイトに落とし込んでみましょう。

デザインテーマを定める

ターゲットをお問い合わせに導くために必要なことがわかったところで、WEBサイトのデザインテーマを定めます。4つのポイント、態度変容の設計を元に、WEBサイトで表現すべきことを考えます。
自社の強みでもあり、業界の負のイメージを払拭できる「カスタマイズ性の高さ」を軸に、今回は以下のようにデザインテーマを定めました。
「少量生産の強みとカスタマイズ性を表現する」

デザインコンセプトを定める

デザインテーマを表現するために、デザインコンセプトを固めます。これがデザインの素になり、全体のトンマナを整えるための型になります。

デザインコンセプトを元にしてデザインを考えることで、他社との差別化やブランディングが強化され、効果的なWEBサイトになっていきます。

デザインイメージを考える

コンセプトを元にデザインイメージを作成してみると、このようになりました。表現は無限にありますが、これを試行錯誤してデザインに落とし込むことで、自社の目的にあった意味のあるデザインに昇華されて行きます。

このように、4つのポイントを深掘り、ターゲットの態度変容を設計することで社長から降ってきた「発注を増やす」という目的を果たすWEBサイトを提案することができるのです。

実例から学ぶ

ここまで、架空の会社を例として改善の流れを見てきましたが、ここからは実際に世に出ているWEBサイトを見てみましょう。
「目的に対してのデザインコンセプト」が考えられたWEBサイトのデザインには、説得力があり、他社との差別化も感じられるはずです。ここまで見てきた例と重ねながら考えてみましょう。

郡家コンクリート工業株式会社 様

引用元：https://kooge.co/

コンクリートから建造物が出来上がってゆく光景がアニメーションとして表現されています。「コンクリート」と「柔らかい」という対極の造形をうまく組み合わしてアニメーションに落とし込まれていて見た目のインパクトも強く、他社のいわゆる堅いイメージとの差別化にも繋がっています。

Toyota Woven City 様

引用元：https://www.woven-city.global/jpn/

「未来」「紡ぐ」といった抽象的なコンセプトに対して、複数のラインが複雑かつ美しく交わってゆく様子をモチーフとして表現されています。スクロールして行くごとに、不規則な動きで視線を惹きつけるとても効果的なアニメーションが使われています。

三和ペイント株式会社 様

引用元：https://www.sanwa-paint.jp/

「塗り替える」という動作をダイナミックに表現したファーストビューが印象的です。未来を見渡すような爽やかなブルーの配色からも、会社の「明日を塗り替えてゆく」という強いブランディングを感じます。

株式会社Hubble 様

引用元：https://newgrads.hubble-docs.com/

「自ら道を拓く」というテーマを「道」をイメージさせるラインの装飾で表現しています。コンテンツに応じてラインが伸びて行く様は、まさに切り拓いていく「道」そのもので、閲覧者の期待感をくすぐる採用サイトならではの遊び心を感じます。

嘉瀬こどもの森 様

引用元：https://seigaku.jp/kase/

自然をイメージさせるディティールや、自由を感じさせる不規則なレイアウトが、保育園のコンセプトを視覚的に再現しています。グリーンの配色も、活発でありながら自然でクリーンな印象も与え、保護者が安心して我が子を預けられる心理にさせる効果がありそうです。

さいごに

ここまで、ウェブサイトリニューアルで本当に効果を出すためにスパプラが考えていること、そして具体的な改善例を見てきました。

曖昧な目的のまま進んでしまうリニューアルは、見た目の変化だけで終わり、本来の課題解決には繋がりません。しかし、本記事でお伝えした4つのポイントをしっかりと深掘りし、ターゲットユーザーの態度変容を設計することで、WEBサイトは集客や発信といった本来の目的を果たすことができます。