# 売れるウェブサイトは戦略を映している【CSS Nite in Kobe】 URL: https://webrandum.net/cssnite-kobe-24/ 公開日: 2017-05-26 更新日: 2020-04-11 カテゴリー: セミナー・イベント タグ: CSS Nite 出典: Webrandum（著者: サイトウ マサカズ） CSS Nite in Kobe に参加してきました。今回は普段のCSS Niteとは違って少しマーケティング的な内容だったのですが、デザインにも応用できるお話。本来デザインを行う前にしっかり決めておかないといけない戦略の部分のお話だったので、勉強になりました。 ## 今回の登壇者 今回登壇してくださるのは2017年2月23日に発売された書籍「[なぜ、あなたのウェブには戦略がないのか?― 3Cで強化する5つのウェブマーケティング施策（技術評論社）](http://amzn.to/2qiGlkP)」の著者の中から、ゴンウェブコンサルティングの権 成俊さんと第６章の執筆を担当した佐藤 晶子さんと後藤 裕美子さんの3名です。 [amazonjs asin=”4774188050″ locale=”JP” title=”なぜ、あなたのウェブには戦略がないのか?―― 3Cで強化する5つのウェブマーケティング施策”] 権 成俊さんにはデザインする前に重要になる戦略についての部分を説明していただいて、佐藤 晶子さんと後藤 裕美子さんからは実際の例を見ながらどのように戦略をデザインに反映しているのか解説していただきました。 僕はWebデザイナーを目指して日々勉強しているのですが、PhotoshopでWebデザインする方法だったりコーディングでデザインを実装するための方法だったり、ついつい技術的な事ばかりしてしまいます。勿論技術を習得して実際に形にできるようになるのは重要な事ですが、その前にそもそも何を意識してデザインするべきなのか自分の中で決めれてないとデザインってきちんと成り立たなかったりします。 今回のセッションでは、そんな戦略を立ててデザインにそれを反映させる方法を学ぶことができたので貴重な経験になりました。 ## セッション内容 まず、先ほども言いましたが今回登壇してくださるのは2017年2月23日に発売された書籍「なぜ、あなたのウェブには戦略がないのか?― 3Cで強化する5つのウェブマーケティング施策（技術評論社）」の著者の内の3名です。という訳で今回CSS Nite前にこちらの本を購入して一度読ませていただきました。 今回のセッションはこの本の第1章と第6章にフォーカスした内容だったのですが、それ以外の章も目を通していたことでより理解する事ができました。 ### 権 成俊さんのセッション まず最初はゴンウェブコンサルティングの権さんのセッションです。権さんのセッションでは「ウェブコンサルティングって何？」という事や権さんが運営しているismという団体で利用される「3Cフレームワーク」と言うフレームワークについての解説をしていただきました。 #### ウェブコンサルティングってなに？ さて、そもそもウェブコンサルティングって何をするの？という事ですがその前に現在のインターネット社会の特徴を幾つかあげてみると… - 超競争環境 - 消費者主導の情報発信 - モバイル環境の普及による24時間ネットへのアクセス - 通販による距離の消滅 と、このような感じで数年前のインターネット環境とは変わってきました。今後も競争のルールがどんどん変わっていきます。こうした新しいルールへの対応を支援するのがウェブコンサルティングという仕事のようです。 #### ウェブ業界は変化が激しい ウェブ業界は変化が激しくその変化にウェブコンサルティングとして対応するのが物凄く大変だったみたいです。 - SEOは死んだ - リスティング広告は死んだ - コンテンツはキリがない - ウェブ解析もキリがない - モバイル対応しても売れない 結局何をやってもほとんど意味がない。 僕も少し前にSEOに関して色々と調べてみたのですが、本当に大変そうですよね。結果が順位として明確に出てしまいますし、でもだからと言ってSEO対策してサイトが上位に来たから売り上げが必ず上がるかといえばそれはまた別の話な気もしますし… じゃあ売れるサイトと売れないサイトの違いを考えた時に「選ばれる理由の有無」という答えが出てきたと。 #### 長期的利益に投資しよう 長期的利益と短期的利益のどちらが重要かと聞くとおそらく大抵の人が長期的利益の方が重要だと答えると思います。しかし実際に長期的利益のために行動している企業は少ないとのこと（その年の決算に加わるなら短期・その年の決算に加わらないなら長期とします。） 長期的に利益を生むにはどうすれば良いのでしょうか？ まずは「人材育成と変革」、次に「業務改革」、「顧客満足」「財務の改善」といった手順が必要になって来ます。 そして長期的利益を生もうとする時に覚えておかない重要な事は「長期利益と短期利益は対立する」ということ。両立する事はできないので必ず片方に偏りが出る事になってしまいます。 それでも選ぶなら長期利益。そして長期利益を生むために「戦略」が必要になって来ます。 #### 戦略＝地図 長期利益を生むためには戦略が必要になって来るとの事ですが、戦略というのは「地図」。短期的な計画ならまだしも、長期的な計画を立てる際に何も見通しが無いのにスタートしては目的地(目標)にたどり着くことはできません。 しっかり目標を達成するためにはしっかりした戦略が必要になってきます。 #### 「3C」という考え方 ![3Cのイメージ図](http://webrandum.net/wp/wp-content/uploads/2017/05/3c-1.jpg) 戦略を立てる際に権さん達ismでは3Cフレームワークというものを利用するそうです。 3Cというのは「Customor(顧客)」「Company(自社)」「Competitor(競合他社)」の3つのCの事でこれら3つの視点から自分たちの強みは何か考える方法の事です。 誰しも「顧客」と「自社」の事は考えても「競合他社」の事は少し忘れてしまいがちです。しかし今の時代競合他社の事も考えなければ本当の自社の強みは見えてきません。 ##### ベネフィット – 顧客が本当に求めているもの 例えばあなたが飲食店を経営していて、お客さんに「ビールをください」と言われた時、残念なことにビールを切らしていたとします。 さて、この時お客さんがただ単純に喉が乾いているのであれば「水」でもOKという事になります。 しかし、アルコールが欲しいのであれば「ワイン」でもOKという事になります。 このようにお客さんが本当に求めているものの事を「ベネフィット」と言います。 ##### 差別的優位点 お次は「差別的優位点」についてです。差別的優位点は競合(同じベネフィットを共有している会社)に対しての優位的な差別化の事です。重要なのはただ単に差別化するだけではなく、それが優位的であるかどうかです。 ベネフィットと差別的優位点があり、3Cのフレームワークが綺麗に成り立つという事は、選ばれる理由がある。という事になります。 そして更に言えば、このベネフィットと差別的優位点をサイトで表現することができればお客様に商品を買ってもらえる→売れるWebサイトになるということです。そしてそういうWebサイトには必ず統一感がでます。 #### ismフレームワーク ![ismフレームワーク](http://webrandum.net/wp/wp-content/uploads/2017/05/ism-framework.jpg) ismフレームワークというのは、5階層に分割された概念モデルのことです。実際の図を見てみると分かりやすいのですが、戦略から表層までの流れをうまく5階層に分割しています。そして戦略をうまく反映したウェブサイトを作成するためにはこのモデルが一気通貫になっている必要があります。 #### まとめ - 戦略でマーケティングの全てが変わる - ウェブマーケティングのUXデザインフレームワークであるismフレームワークを利用する。 ### 佐藤 晶子さんのセッション お次は佐藤さんのセッションです。まず初めに権さんの運営しているismに入るきっかけからお話ししてくださいました。 佐藤さんはデザイナーとして仕事をしていく上で「デザインは問題解決のための手段である」とお考えのようですが、しかしデザインの表面だけで何かが変わるとは思えなかったそうなんです。 例えばお花屋さんのサイトを作る時に「花屋さんっぽいデザイン」にするというだけでは成果に繋がりにくい。ただ花屋さんっぽくするだけではなく、サイトを回遊してもらう必要がある。 そこでユーザーが見ているのは表層のデザインよりもその先のメッセージであるという事に気がつきます。 そして「表層的デザイン」よりも「戦略的デザイン」を重視するようになったようです。 佐藤さんのセッションでは主に実際に関わったリニューアル案件でどのような考え方・手順でリニューアルを進めていったのか解説していただきました。 #### 5階層概念モデル 権さんの時にも説明があった5階層概念モデルですが、実際の戦略から表層までデザインに反映させていく手順を詳しく話していただきました。 このモデルの良いところは抽象的なものを具体的にしているその最中もきちんと戦略に乗っ取って進めていくことができるのでブレがありません。 ##### (1)戦略 まず戦略のフェーズでは市場・顧客・競合他社の分析を行ったり顧客分析を行ったり、逆に非顧客分析を行ったり、ヒアリングをしたりして調査・分析を行います。 顧客分析ではGoogleアナリティクスのデータから既存客を分析します。主に「キーワード分析」「サイト行動分析」「トランザクションのデータを見る」といった事をしているようです。こうして分析する事によってユーザーのイメージを確率させます。 競合分析では対象のWebサイトの比較を行ったり、メーカーの環境や価格比較を行います。こうする事で会社の立ち位置を明確にすることができます。 そしてこれらが完了したら、見込みが高い順にユーザーを絞ります。 ##### (2)要件 お次はユーザーモデル別に訴求点を出していきます。 カテゴリやどんなキーワードで検索するか？どんなメッセージなら喰いつくか？どんなサイトコンテンツがあると選んでもらえるのか？そういった事を考えていきます。 そしてユーザーモデルを考える時に必要な事が顧客の「ニーズ」と「ウォンツ」の違いをはっきりさせておくという事です。 ニーズというのはその商品(サービス)自体をまだ欲しいと決めていない状態、ウォンツというのは商品は欲しいと決めたが同商品の中から比較して検討している人。という違いです。 要は何か喉が乾いたから自販機でジュースを買おうとした時、特に何を買うか決めていなくて「お茶」にしようか「ジュース」にしようか「コーヒー」にしようか迷っている人の状態をニーズ。 「お茶」を買おうと決めたけど「お〜いお茶」にしようか「綾鷹」にしようか「伊右衛門」にしようか迷っている人の状態がウォンツ。という感じです。 ニーズの顧客とウォンツの顧客では、検索するキーワードや喰いつくメッセージも違いますよね。 例えばニーズの状態の顧客なら「お茶は健康的！」といったお茶そのものがいいよねといったキーワードに喰いつくかもしれませんし、検索するキーワードも何かと何かの比較になってきます。一方ウォンツの状態の顧客ならそのお茶自体にどんな良さがあるのか書いた方が喰いついてきますよね。 訴求点が上がったらカスタマージャーニーの作成を行います。カスタマージャーニーというのは顧客がどのようにして行動するのかを考えまとめたものの事で、これを作成する事によって訴求点が本当に会っているのかより明確にする事が可能です。 カスタマージャーニーマップの流れとしては… - 悩み - 検索 - サイト訪問 - 比較 - 購入 これらをそれぞれ具体的にしてどんなユーザーがどのように行動するか分かるようにしておきます。 そして今度はコンテンツの詳細を考えます。 考えたコンテンツに重要度を付け、必要な素材(写真・図版・イラスト・テキスト)を考え、費用やスケジュールを考えます。 ##### (3)構造 ここから戦略と要件をデザインへ反映させていきます。 まずはユーザーモデル別に必要なコンテンツとそうでないコンテンツに分類していきます。 - 全てのユーザーに見せたいコンテンツ - 複数のユーザーに見せたいコンテンツ→これが難しい - 特定のユーザーに見せたいコンテンツ やってはいけない事として「トップページで全てを見せようとしてはいけない」と仰っていました。確かに情報が多くなりすぎて、自分の欲しい情報が探しづらくなってしまいますよね。 そしてユーザー視点で構造を設計していきます。 ##### (4)骨格 構造を設計したら今度は骨格(レイアウト)です。レイアウトには色々な種類がありますが、その中からどのレイアウトが合っているのか選別するために、ユーザーの回遊シナリオを作成します。 要はどんなユーザーがどこでどんな行動を取るのか考え、それに適したレイアウトを考えるという事ですね。 ##### (5)表層 最後は今まで考えてきた要素をデザインに反映させていきます。 そして快適なUXのために目指したいUIという事で、デザインでの具体的なポイントを5つ上げていました。 1. 文字サイズのジャンプ率を大きくする 2. コントラストを強く（曖昧な色をなくす） 3. ルールを統一させる 4. ユーザーに考えさせない（優先順位をはっきりさせ、ボタン等クリックできるものはクリックできるとすぐ分かるように） 5. 要素を絞りシンプルに伝える #### まとめ - 絞り込むもの、捨てるものをはっきりさせる（何を残して何を捨てるのか考える時にも戦略を中心に考える） - デザインは戦略を映すもの - ゴールは戦略の実現→一気通貫が最も重要 - Webサイトをデザインすると言うより、UXをデザインする ### 後藤 裕美子さんのセッション 最後は後藤さんのセッションです。後藤さんのセッションでは大きく2つのメッセージを伝えていただきました。1つが「戦略を中心にデザインしていく」という事、もう1つが「引き算する勇気を持つ」という事です。 佐藤さん同様、後藤さんのセッションでも実際に関わったリニューアル案件での流れを解説していただきました。 #### ターゲットが変わると戦略も変わる Webサイトのリニューアルを行うにあたって、まず「既存ユーザー」を伸ばすのか「新規ユーザー」の開拓を行うか検討した結果、新規ユーザーの開拓を行う事にしたようです。 そしてターゲットが変わると勿論ですが、その人の行動パターンも変わってくるので戦略も変わってきます。 戦略が変わるという事は、最終的にそのターゲットに伝えたいメッセージも変わってくるという事ですよね。新規ユーザーを開拓する場合はこのように根本的な部分から全て見直していかなければなりません。 #### キービジュアルも理由を明確に トップページのキービジュアルは、ユーザーがこのサイトで一体何を得られるのか分かるように作られている必要がありますよね。そしてその根底には戦略があり、配色や画像も戦略に基づいて考えていきます。 このように根底に戦略がちゃんとあると、何パターンも全然違うデザインが生まれることはあまりありませんし、理由も明確になってきますよね。 そして、デザインの判断基準は個人の好みよりも戦略が実現できるかどうかで考える必要があります。 個人の好みでの決定は商業デザインではしてはいけない事ですし、戦略が実現できるのかできないかで判断すると、そのデザインには一貫性が出てきます。 ですので、何かデザインで迷うことがあれば一度戦略に立ち戻って、どうすれば良いか考えるというわけですね。 逆に言えば戦略がしっかり出来ていないと、デザインもきちんと出来ないという事ですよね。 どんなユーザーに向けて何を伝えたいのかしっかり決めて初めてデザインは始められます。 #### 引き算する勇気 引き算（要素を絞る・削るという事）は、多すぎる情報量を減らす変わりにサイト回遊をしやすくする手段として有効ですよね。あれもこれも伝えようとするよりも、大きく削る事で訪問者の方はサイトを回遊しやすくなります。 そして、要素を削る時は削りすぎるくらいが丁度良いとの事です。人によっては「これくらい必要かな？」と思った量の半分位でも大丈夫なんだとか。サイトを作る時って「こういうのもあれば便利かな？親切かな？」と思って結構色々要素を足していってしまったりするんですよね。 でもそれが原因で回遊しづらいサイトになってしまっては元も子もありません。 あと要素をスッキリさせるコツに「余白」があります。 余白を取る事でスッキリしてまとまりのあるサイトになり読みやすくなりますし、全体の把握がしやすくなるので目的のページに辿り着きやすくなります。 これも凄く大事な事ですよね。製作者側はどこにどのページがあるのか知っているので忘れがちですが、訪問者は何らかの目的があってサイトに訪問してくるわけですから、全体の把握がすぐ出来て目的のページに飛んでもらうためにも余白を空けておく事は重要です。 最後に、デザインの本当のゴールはデザインの完成度ではなく「戦略の実現」なんだよという事で後藤さんのセッションは終了しました。 #### まとめ - トップのキービジュアルには、ユーザーがこのサイトで一体何を得られるのか分かるようにしておく。 - デザインする時は戦略を基準に判断する（迷ったら戦略を振り返る）。 - 要素は削りすぎるくらいが丁度良い。 - 余白をしっかり空ける事で回遊しやすいサイトになる。 ## 今回のセミナーの感想 僕は普段デザインの勉強をしているのですが、技術的な勉強ばかりをしてしまい根本的な戦略の部分を疎かにしてしまいがちです。しかし本来は戦略があって、それを基にデザインをしていくわけですから戦略なしにはデザインは出来ません。 今回のセミナーはそういった意味で言うとデザイナー向けの内容で、実際の制作事例を見せてもらいながら考えや戦略をたてる過程を見せてもらえたので大変勉強になりました。 [amazonjs asin=”4774188050″ locale=”JP” title=”なぜ、あなたのウェブには戦略がないのか?―― 3Cで強化する5つのウェブマーケティング施策”] [CSS-Nite]