新規サービスを打ち出して、WEBサイトを活用した企業の体質変換!!のサイト設計
| 題材とした企業のHP | |||
|---|---|---|---|
業種 |
サーバ |
地域特性 |
全国 |
規模 (従業員数) |
小さな会社(レッドオーシャン市場) |
サイトのゴール |
問合せ、見積り依頼 |
ビジネス観点の切り替えによって、巨大市場かつブルーオーシャンに!!
縮小傾向に歯止めがかからないこれまでのレッドオーシャン市場。しかしそこで培ってきた強みを活かすための新サービスを打ち出すことに!!
観点(ターゲット)を切り替えたことによって、巨大市場かつブルーオーシャンを創出!!
そこにWEBで切り込んでいく設計となっている。
TOPページファーストビューの超科学!!MVでの視線誘導
強烈に目に飛び込んでくる文字。
MV内で3つのポイントに、閲覧者の視線を瞬時に誘導し、我との関連性を確実に"知覚"させる。
そしてその直下のコンテンツに、確実に誘導する!
視線は、必ず誘導できる!!!勝負ポイントに確実に目を留めさせろ!!
デザイナーが、バランス悪くて気持ち悪い、思わず左寄せで揃えたくなるような見出し。
でも、そこに意図した計算が⭐絶対“見て”しまう視線の科学。
こんな経験してない?こんなお悩みない…?計算された我との関連性で、閲覧者の潜在的な不安感を突く
不安を自覚した瞬間に、いきなり落すのではなく、ハードルの低いところに"引っかける"!
デザインの科学。グラフの効果とアンダーラインの効かせ方
どうしたって目が追ってしまう右肩上がりのグラフ。それによって視線誘導される見出し。
コンバージョンボタンに添えられた、ロゴマークのサイズ感まで計算されてる…!!
アンダーラインの効かせ方も、計算しないともったいない。
いよいよ運用へ!戦略の肝は顧客視点!
実際にサイトを運用するに当たってどうサイトを育てていくのか、顧客の心理に立ってどういうコンテンツがあるべきかを意見を出し合いました。
様々なコンテンツが上がる中で、論理的にこれが最優先!と証明しなければなりません。
今回の顧客イメージは良く分かっていない人!そこにどうアプローチする?
今回の題材の顧客イメージは良くわかってないけど何となく困っていてどうしようという人たち。
良く分かってない人がこのサービスを受けようと決めるには権威性とここならちゃんと教えてくれそう!という気が利く感が大切。
この二つを顧客に感じさせるコンテンツを充実させていくことに全員が納得しました。
顧客の顧客の売上げUP!BtoBtoBサイトにおけるWEB設計&WEBデザイン評価
| 題材とした企業のHP | |||
|---|---|---|---|
業種 |
アミューズメント・レジャーその他 |
地域特性 |
東京23区 |
規模 (従業員数) |
小さな会社 |
サイトのゴール |
問合せ、TEL、公式LINE友達追加 |
まずは設計の意図を設計者が解説!
東京23区繁華街の小規模飲食店がターゲット。
飲食店オーナーや店長さんなど、いつお客さんが入ってくるか分からない営業時間のすき間時間で、スマホでサイトを閲覧することを想定。
夜営業の飲食店をイメージさせるデザインやエリア、使用する画像で「我との関連性(うちのことだ!)」を感じさせつつ、やったことはあるけど実際にはよく知らないダーツマシンを置こう!とりあえず問合せ(電話)してみよう!とアクションを起こさせるための設計をTOPページで行っている。
受講者でケチをつけてみよう!
・対象エリアが下の方にあるので、問合せた東京以外の方ががっかりするのでは・・?
⇒アクションしてもらったらよいので、気にしない!
・導入事例と導入実績の位置が逆では・・?
⇒事例コンテンツは、「うちと同業のところでどうやってるのかな?」と思った人が見てくれる。その下にエリアがあって、うちにも来てくれるんだ、と安心してくれればいい。実績で「うちみたいなところでも置いてるんだ」と思ってくれて、更に知りたければどうぞ!という導線になってる。
青山の目👀!!MVの直下がもったいない!!
ダーツは説明不要。MVのダーツの的は視認できるのでOK!
MVで月額2万円、税別とまで書いてるので頭の中に「1ゲーム100円として×月間200ゲームでペイか」⇒「200ゲームもするのかな?」と計算が働く。
そしてそんなに売上げ上がるの?初期費用はどうなの?と、頭が金の計算になってるのに、直下のコンテンツが「デッドスペース」。これはもったいない!!
直下に売上げUPと初期費用の概要が分かるコンテンツがあれば、納得(安心)感を持ってその下のコンテンツに行ける。
ガールズバーなら2万円余裕だろうが、食べ物出してる店はコストがギリギリ。 初期費用ゼロで安心させるべし。
儲かるのか儲からないのか、閲覧者の知りたいところを冒頭でちゃんとコンテンツ設置し、スペースに関するところはプランの下辺りに置いた方がストーリーがスムーズ!
*COMMENT*
河原田 ゆきえ
*コメント*
ファネル構造の型どおりにではないパターンもあるのだな!と納得。顧客と顧客のビジネスを本質的に理解していくことが、本当に重要だなと実感しました!
そして私的今回のハイライト、自分で4年ぶりに設計したサイトを題材にしていただき、内心めっちゃドキドキでした>v<💦
でも青山さんから直接評価いただけ、改善のアドバイスもいただけるということで、すごく楽しみにもしていました!
結果、全体にひっくり返されるようなダメダメではなくてホッとしました笑(設計前の時点でアドバイスいただいていたので当然といえば当然ですが)
いただいたアドバイスで、閲覧者心理になりきれていなかったな、と反省しつつ、今日もWEB設計の面白さを実感したWEB学校でした✨
*コメント*
宮城 わか
*コメント*
そしてマーケティング力をつけるためには制作コンセプトシートの情報を細部まで理解し、閲覧者のフェーズはどの段階にあるのかを認識すること、その上でどういうコンテンツを置いてCVに繋げる設計をしていくべきかを実際のWEBサイトで学ことができました。今回の題材サイトにあった会社は専門性が高く競合がないため、比較検討はなく決定をする顧客の心理を見抜いてコンテンツ順が考えられていることが分かり、今までのWEB学校を通して段階的に理解できてきたように思います。ありがとうございました!
*コメント*
岡部 ちよ
*コメント*
ターゲットに合わせて、「見やすく、わかりやすく、そして興味を引く」サイトを作ることが大切だと再認識しました!
今回紹介された2つの事例からは、Webサイトの設計とデザインの重要性を学びました。
特に、閲覧者の目線の先に、クリックしたくなるようなボタンの設置をされていて、
まさに”デザインの科学”だと思いました。
今後、自社サイトへのWebコンテンツ作成において、ボタンの設置場所を、科学的に考えてまいります。
*コメント*
百田 忠将
*コメント*
色々な方法で視線が誘導できるなど分かっているつもりで分かっていませんでした。
勝てるサイトを作るためにはどういったところを意識してデザインをしていくべきなのか。
自分の視点だけでは見えなくなってしまうものがあるので、
しっかりとお客様目線、お客様の顧客の目線など複数の視点にたって考えていけるように
色々なサイトを見て、科学されたデザインをできるようにしたいです。
*コメント*
下川 春樹
*コメント*
今回は、まず前回説明頂いたサイトを運用していく時にどんなコンテンツを増やしていくべきかという問いでしたが、思いついたのは皆さんが答えられていたのと同じお客様の声だったり実績のコンテンツでした。
が、今回はファネル構造の順番どうりではダメでFAQコンテンツがとても大切なのだというのには驚きました。
今までそう言った観点でFAQを見てなかったので、今後意識していきたいと思います。
2つ目は、前置きでどこか1つダメなところがあるとお聞きしていたので頑張って見つけようと思っていましたが、改善ポイントは見つけれませんでした。
まだまだサイトを見る目、見る観点が違っていたりするので今後もしっかり学んでいきたいと思います!
*コメント*
石川 航
*コメント*
前と後2つのサイトを見比べることで、「勝てるWEBサイトに求めらる要素」は月日と共に変化していることを、改めて実感しました
視線の誘導にもついても、制作に入っているタイミングでは点の視点になっているため見えにくいですが、
今回のように全体を俯瞰して広い視野でサイトをとらえることで、WEBサイトの全体のストーリーを読み取っていけます
*コメント*
小川 みき
*コメント*
「言われたらわかるレベル」でしかなく、引き続きWEB学校を経て理解を深めていきたい、と思う回となりました。
1サイト目
新規事業を始めるサイトで、そこに今後設置すべきコンテンツを考えました。
さらに新規事業だからこその設置する順番も論理的に教えていただき、ファネル構造の型通りではないパターンをひとつ学びました。
2サイト目
閲覧者の視点に立ち、全体を通して追加すればよくなるポイントをわかりやすく説明いただき、こちらも閲覧者心理として納得できる学びとなりました。
*コメント*
谷口 かなこ
*コメント*
表面上が勘では深いところに入っていけるはずもない為、引き続きWEB学校で学び・復習しながら、
日々意識するしないに関わらず目の中に入って来る情報をうまく脳内処理して糧としていきたいと思います。
*コメント*
児玉 尚哉
*コメント*
にフォーカスを当ててくださった内容でSCSCサービスのメインフェーズであるコンサル部分について詳しくご説明いただきました。
前提として設計を理解していないと未来を描くこともできないと再認識しました。
これまでの内容の復習にもなっていたため、日々意識し行動に移していきます。
*コメント*
黒川 かな
*コメント*
Case1の観点(ターゲット)を切り替えたことにより、レッドオーシャンから一転して、ブルーオーシャンの創出に繋がったことがとても興味深かったです。
さらにQ&Aをしっかりと充実させていくことで、とても強力なコンテンツとなり、パイオニアであればあるほど強くなる戦い方を教えていただき、非常に勉強になりました!
次回もよろしくお願いいたします!
*コメント*
加藤 良紀
*コメント*
WEBサイトは作って終わりではなく、運用していくことで、
顧客が成果に繋げていくものであるため、ガーディアンは顧客にどう運用してもらい、
成果を上げてもらうかまでを考えていく必要があり。最初のWEB戦略立て→サイト設計をし、
顧客が継続して運用していくイメージを持つことができ、実際にサイトを育ててもらうこと。ができるかどうか、ガーディアンメンバーが日々学習し、取り組んでいくことが必要だと実感できました。
これからも継続して学んでいきたいと思います。
次回も、よろしくお願いいたします!
*コメント*
諸隈 ゆきこ
*コメント*
「今後どんなコンテンツを増やしていくべきか?」という問いに対し、私はこの会社の知名度をあげないといけないからお客様の声のコンテンツを充実されればいいのではと思いました。しかし回答は「FAQの充実」でした。
まさにびっくりでしたが、納得でした!
これからはサイトを見る時にこのコンテンツはどういう狙いがあって作られてて、今後どういう風にサイトを活用していきたいものなのかという視点も持ちたいです。
*コメント*
鈴木 健太
*コメント*
サイト閲覧者の位置する顧客行動モデルの段階が一緒でも、同じコンテンツをおける訳ではなく、戦略によって適切なコンテンツがあるというのも大きな学びでした。病気になったときのWEBの閲覧の例が印象的であり、その場合、素早く権威性、信頼性を示して閲覧者をロックすべきということは極めて筋が通っていて、納得せずにはいられませんでした。イレギュラーパターンでも適切なWEB戦略を導き出せるにはまだまだ道のりは通りと感じました。
*コメント*
渡邉 大也
*コメント*
今回は、作ったホームページがどんなふうになっていればいいのかという切り口で始まり、作ったサイトをどう育てていくべきかという考え方を学ぶことができました。
今回を通して作る際も、運用していく際も重要なのはやはり閲覧者の心理を理解することだなと感じました!
閲覧者はどういう状態でホームページに入ってきて、何を求めているのかしっかりと考えて戦略を立てていきたいと思います!
*コメント*
徳原 ひろ
*コメント*
サイトは物語を読むように見る
常日頃から、サイトを見る時になんでこのコンテンツの次にこのコンテンツなんだろう?とサイトのストーリーを考えながら見ることでサイトの意味を読み解け、サイトの見方を知っている人になれるということを教えていただきました。
日々何百サイトとサイトを見ており、
意識すればすぐに実践できることなのですぐに業務に取り入れサイトの見方を知っている人になれるようにがんばろうと思いました!
あと、今の人は生きてるだけで1日に約1万くらいの数の広告を見ている、だから広告は意識にすら入らず1つ1つの効果が薄まってるというお話しで「見る」というレベルの高さを痛感しつつ面白いなと感じました。
*コメント*
森田 惟之
*コメント*
ビジネスの話を聞いているのか境界が曖昧となるような話で、
見栄えの良くコンテンツを並べる設計とは雲泥の差がある
設計思想を学び。
過去の内容として、視線誘導といった人の心理について
知っておかなければならない。学んだばかりなのに
今度はビジネスについて語れなければならない。
という新しい課題を提示されました。
また、そこまで考えて作られたモノが、完成形では無くここから育てていくモノ。
そもそも、
ホームページの寿命やリニューアルのタイミングと言った
ホームページは経年劣化し使い捨てにするものという価値観を
業界の中で感じることがありますが。
ホームページを育てるモノと捉えたとき
1年後のホームページをどのような姿に育てるのか
さらに3年後はどのようになっているのか。
時間がたつほどに育ち強くなることを前提とし、
ここからさらに価値が高まっていく、
ホームページの思想を改めて学びました。
*コメント*
山本 高広
*コメント*
印象に残ったのは「一つ一つの文字、文字の大きさ、言葉、キャッチ、説明文、写真、見出し、グラフ
全てに意味があり一瞬で読み解く」という言葉です。
WEBサイトの要素を見て、その意味を見いだし解説出来るようになりたいとおもいます。
またサイト制作後の運用フェーズの戦略ではどうサイトを育てていくのかを学びました。
顧客にどう運用してもらい成果を上げてもらうか。
サイト設計の前にWEB戦略を立て運用を見越したロードマップがなければ、
運用中の大改修に繋がる可能性もあり、運用イメージをしっかり持たなければならないと学びました。
*コメント*
齋藤 圭亮
*コメント*
ガーディアンでは基本の型があるのですが、型どおりにいくとは限らず、顧客を本気で勝たせるためにどうすべきか設計からサイト作成、コンサルフェーズまで一貫して顧客理解、顧客本位の姿勢が大切だと学びました!
ケース2では河原田さんと自分で設計したサイトのご評価とアドバイスをいただきました!めちゃくちゃ練ったつもりでしたが、青山さんからご指摘いただいた内容に納得しました。
自分の設計能力はまだまだまだまだまだであり、基礎からきちんと固めていかねば!と改めて頑張ろうと思えた回でした!
そして私的今回のハイライト、自分で4年ぶりに設計したサイトを題材にしていただき、内心めっちゃドキドキでした>v<💦
でも青山さんから直接評価いただけ、改善のアドバイスもいただけるということで、すごく楽しみにもしていました!
結果、全体にひっくり返されるようなダメダメではなくてホッとしました笑(設計前の時点でアドバイスいただいていたので当然といえば当然ですが)
いただいたアドバイスで、閲覧者心理になりきれていなかったな、と反省しつつ、今日もWEB設計の面白さを実感したWEB学校でした✨
*コメント*
鈴木 はるな
*コメント*
前回の視線誘導の復習からスタートしました。
ホームページを見る際にどこに視線がいくのか、色や形・配置を使ってどう見せるのかを戦略的に考えていくことが大切であることを学びました。
看板やSNSなど1日に何百もの広告を目にしているため、一発の広告の効き目が薄れてしまっています。
こういった【広告】に対することも、1人ひとりの生活や社会に目を向けながら物事を考えなければ、無意識に素通りしていたと思います。
数日前に、採用のチラシ作りをしました。どのワードを1番閲覧者に見せたいのか、そしてその次、またその次と今回の視線誘導のポイントを意識しながら作成したので、学びを活かすことができたと思います!
次回も楽しみです!
*コメント*
*コメント*