型A TOPページのおさらい
一人称視点で型ATOPページを説明する
<Y.Sさん>
「ヘッダー左上にロゴがあるのは一般の通例に合わせている。(わかりやすくするため)
あるべきところにあるべきものがあるようにするため。
Gナビはストーリーになっている。
MVはわかりやすく、領域は大きくとってわかりやすく
事業紹介はフロアマップになっている、見るレベルでわかるように
ぱっと読み飛ばしても「こんなんやってるんや」
USPは、ぱっと見でUSPがすぐにわかるように。
こんなお悩み そのまま、お悩みコンテンツ」
-----だめだめ!もっと流れるように。
<Y.Mさん>
「私がロゴをここに置く理由は、通例に従ってあるべきところに置いてわかりやすくするため
MVはわかりやすくしています
こんなお悩みでは、画像で訴求します
画像で訴求する意味 初めてあった人に言葉だけで「読め」は失礼だからです・・・"
"私はロゴ(社名)と申します。MVのような思いを持って仕事をしてます。
Gなびのようなことをお話していきたいと思います。
私はこんなことをてがけているもので、こんな強み(喜ばれていること)があります。
ところで、こんな悩みはありませんか?」
<S.Kさん>
「ところで、こんなお悩みはありませんか?
私たちは・・・」
-----主語が違っている。
「あなたが求めているのは、こういうことですよね?
実は私たちはこんなに凄いんです」
-----「それなら私達に任せて下さい」
「私ならこんな風に解決できるんです」
-----ここに解決策はないよ
・自己紹介
ところで、こんなお悩みはありませんか?
あなたはこういうことを望んでいるんですよね?
・お悩みとベネフィットで小さなイエスを二つとる、主語を相手に譲っている
それなら任せて
ほら、私たちのサービスでお客様もこんなに喜んでくれています
なにか聞きたいことがあればどうぞ?
・よくある質問
会話をするように、流れるように説明できるようになれ
そのトークを補完してくれるコンテンツってなんだろう?と考えたほうがいいんだよ
商売の流れってあるでしょ
トークに従ってコンテンツを配置したほうがうまくいくんだよ
WEB屋だからってコンテンツから入らなくていいんだよ
代替コンテンツ(型A TOP)でやってみる
<I.Tさん>
はじめまして、私はロゴです
私たちは、こういったプラン・サービスをおこなっています
こういった店舗があります
これらの実績が強みです
こういった選ばれる理由があります
-----あちこちいっちゃだめ、くどい
私たちはこういったプランがあります
選ばれる理由はこの3つです
-----選ばれる理由を選ばれる理由と言ってる時点で訴求力が落ちてきた
私たちのお客様は、こういった理由で選んでくださっています
あなたが求めていることはこういうことですよね?
それを叶えるために・・・
それには、あなたはこういう手順で進んでいけばいいんですよ
そうすると、ビフォーアフターでこんなふうになるんですよ
あなたのようなケースですと、こういう流れになるんです
ほかに聞きたいことある?
トークの抑揚がデザインでしょ、それがないと制作側も困るんだよ。
箇条書きを読み上げるようなトークじゃダメ!
よくある質問には代替コンテンツはないよね。
つまり「ここまでで勝負をきめろ」という設計なわけなんだよ。
本当に深い理解になれば、抑揚は出てくるはずなんだよ。
こうしなければいけない、っていうことじゃないんだよ。
「型Aではこうしています」っていうことなんだよ。
ちゃんと理解できていれば、型B、型Cと発展させていけるものなんだよ。
本気で理解した人が生み出していく、それが組織力。
型A下層ページ
事業紹介ページ
脳みそのメモリー機能だけを使う丸暗記はやめろ
なぜ?をちゃんと考えて辿り着けば、応用がいくらでもできる
問い:上はTOPとおなじ(一覧)で、下に事業コンセプトだけがあるのはなぜか?
事業紹介は、デパートのフロアマップだよね
いざそこに行った時のフロアマップが違うものだったらどう?同じじゃないといけないよね
それが理由です。
事業一覧に共通する信念がいくつもあったらおかしくない?
だからコンセプトを1個下に置く。
事業詳細ページ
ここからが本格的な営業フェーズ、それまでは仕掛け
コンテンツ:
USP
サービス一覧
特徴
具体的なソリューション
サービスの流れ
ケーススタディ
関連する情報
<S.Kさん>
「ここではプレゼンからクロージングをするページ
ここの下にはお問い合わせフォームがある
ラストのフォームまで、間のコンテンツでもっていくページ」
ニーズに合致させた強み
KWを含んだキャッチコピー」のところの3つでニーズとUSPをバチっとはめろ!
3発撃てるんだから当たるはずだ、当てろ
次に基準設定、これが仕様
そして詳しい説明
ここまででプレゼンテーションは終わり
購買心理サイクルの基準設定・測定までをやっている
<I.Tさん>
「親子でリンクコーデがしたい
USP、京都で一番リンクコーデで着る服を取り揃えています」
----フィッティングルームが広くて、親子で試着できる
「色々な系統の服を用意しています」
---ソリューション、サイズ展開が豊富
---しかもこんな料金で
---みんな喜んでくれている
<K.Nさん>
「かっこいいサッカーシューズのサイズがなかなかない・・・
どんなサイズでも取り揃えているサッカー専門店
大きいサイズのスパイクなら地域イチ取り揃えています」
練習すれば出来るようになるってわかる?
来てしょっぱなになんて声をかける?⇨まずニーズとマッチングさせる
これさえできれば、100%見るレベルから読むレベルに引き込める
「これ!」と思ったらハートにきて、一気に引き込めるんだよ
肯定されたい気持ちで読む
当社の強みページ
TOPで物語が一つ
わざと4隅のひとつを空けて、詳細ページに誘ってる
ネガティブ思考の人はお悩みの方に行くんですよ
下層、ここでも3つ。見せ方を変えてるだけ
アイコンの一覧で整理されている
次に各詳細、ここまできたら絶対に読むレベルでOKだから、
文章で詳しく強みを説明している
そしてこのUSPがこんなサービスに落とし込まれているんですよ
それでもまだ足りないなら、他社と比較してみるよ
方針、うちはこれらをこういう思いで磨いているんですよ
フォーム。申し込め
お困りごとページ
ここはネガティブな人が来る。だからポジティブでお迎えする
解決法3つ 具体的にどういうふうに解決していったかのお披露目
詳細、ビフォーアフター
あなたのお困りごとの本当の原因ってこういうことなんだよ
こうやってあなたとうちは解決に向かっていくんですよ
この問題を解決できるサービスがこれなんですよ
ここでまた詳細ページに
結局詳細ページに飛ぶように設計されている
どこからどういってもストーリーが成り立つようになっている
採用TOPページ
問い:採用なんて適当な場所でいいんですよ、なぜ?
求職者は自分で積極的に情報をとりにくるから
Gナビにある、それだけでいい。
採用は推して押してじゃない。包み込んで網羅してあげれば、採用は成り立ちます。
*COMMENT*
谷口 かなこ
*コメント*
すると前回納得だと思っていた理由がより分かりやすく見えてきました。
最後に聞いた話ですが、今回は参加者にデザイナーが多かったのでこの方法を取っていただいたとのこと。
主語をミスると画像選定をミスするのは本当に仰る通りだと思いました。
一方、前回代替コンテンツについても理由含めて納得・理解していたつもりでしたが、いざひとつのストーリーとして組み立てようとすると全く成立せずストーリー破綻してしまいました。
まだまだ本当に理解できていないので、コンテンツ意図を見て、きちんと前後のコンテンツとの橋渡し的役割もしっかり意識しながら紡いでいかないといけないと思いました。
実際に目の前にいる人に話す様に抑揚をつけてパシっと理解してもらうことの大切さと同時に、そうすることで同時に自分が理解できているか、自分が正しい設計組み立てをできるかの気づきにもなります。
たった一発の明確なアウトプットが強力な生産性に繋がるのは何においても言えることで、明日以降の業務や私生活でも意識していこうと決意しました。
また今回は下層の各ページや各コンテンツにも入りましたが、そこに置く理由も含め考えながらストーリーを進めることでストーリーを成立させ、導線も美しく成立すると思いましたが、今回はあくまで改めての発見にとどまってしまっていますので、多くのケースでのトレーニングが必要だと感じます。
とはいえ、基本にあるニーズとUSPの最強のマッチングを常に意識して意識していくことの大切さは実地として感じることができました。
*コメント*
宮城 わか
*コメント*
ストーリー調で分かりやすく説明するためには自分がきちんと深くまで理解していないと抑揚をもたせて伝えることができないということを体感しました。
後半では下層ページのコンテンツの意図やTOPページから下層ページに入ってくることを想定し、それぞれのページにどんな情報やコンテンツを置くべきかを学びました。まだ自分の言葉でうまく説明できないので、まず一つずつ理解して言語化していくように頑張ります。
今回の参加者は女性が多いということで、左脳ではなく右脳を使って一人称で「初めまして私は◯◯です...」からコミュニケーションをとるような流れでWEBサイトを説明する手法を学んだので、人に型Aについて教える際にはこの手法を活かして伝えていきたいと思います。
*コメント*
齋藤 圭亮
*コメント*
*コメント*
廣 みわこ
*コメント*
そして理解の仕方としてトークが成り立てばいいって教えていただきました。考えて試してみて慣れて理解して…これを繰り返して自分のものにしていきたいです。型Aの理解の道は私には険しい道のりですが自分なりの理解を少しずつできたらと思います。
*コメント*
鶴田 れな
*コメント*
前回「型A」について学び、少し理解ができた。
と思っていましたが、
一人称にして表現する。となると言葉が出ず・・・
「型A」を理解できていないことに気がつきました。
ストーリー性をもって、抑揚をつけ、見ている人がすぐに理解できるような構成にする。
コンテンツ一つひとつを自分の言葉で話せるように、「型A」やコンテンツの理解を深めていきたいと思います。
*コメント*
吉村 せいこ
*コメント*
先週から業務でも実践し、理解できてきたつもりでしたがまだ全然わかってない事に気づきました。
TOPのおさらいでは、一人称で相手に話しかけるかのようなストーリーが出来ているかを学びました。
HPは営業戦略の一つであり、相手に伝わるよう順序立てる必要があるという当たり前の事にやっと気づけました。
「話しかけるように」というのが自分はとてもしっくりきて理解が深まりました。
難しく型を考えていましたが、だいぶ頭がほぐれたように思います。
その調子で下層も考えれば、以前よりも柔軟に考えられるような気がしました。
*コメント*
芹原 まなみ
*コメント*
ストーリーで見ることで、
閲覧者に対して:サイトに引き込ませる
作り手に対して:サイトを作る上でコンテンツの主語を明確にすることで画像選定やコンテンツの設置意図が明確にできる
ということを学びました。ストーリーテリングだと何かを暗記するということより考えながら制作ができ、サイトの方向性もぶれにくいと感じました。
また、最後に起承転結の「転」は必ず必要で「人を前に進めるためには変化が必要」とのお話が今回特に印象に残りました。「転」もストーリーのどこにどうやって入れるか考え制作していきます。
*コメント*
阪本 めぐみ
*コメント*
土曜日回と水曜日回で分けて頂けるので、頭が整理されやすくてありがたいです!
前回のWEB学校で型Aを理解したつもりでしたが、やはり言語化してアウトプットするのはとても難しいです。
丸暗記では脳のメモリー機能を使うだけになってしまうというお話もとても勉強になりました。
まだまだ丸暗記に近いので、「なぜ?」と考え、理解していきたいと思います。
また、事業紹介ページにおいて、
・なぜTOPと同じ内容なのか
・なぜ事業コンセプト1つだけなのか
という問いに対し、自分の中では「TOPと同じ内容でなければ客が混乱する。コンセプトは、何個もあるのはおかしい」という答えを持っていたのですが、全く言語化出来ませんでした。
リアルタイム参加だからこそ、正しく言語化する練習にもなるので、なるべく参加していきたいです。
*コメント*
伊藤 ちはる
*コメント*
まずTOPページを一人称で表現してみようで私は躓きました><
下層ページでもどんな情報を置くべきなのか?
挑戦してみましたがまだダメダメでした。でもどんどんチャレンジしていきたいです!!
そしてどんどん業務に活かしていきたいなと思いました^^
*コメント*
森田 惟之
*コメント*
TOPページでストーリーが完結しても
コンバージョンに至るためにはTOPページのみでは足りず
下層ページにもそれぞれ役割があるため
それをこの度学び正しく理解することでコンバージョンに至るつまり成果の出るホームページの一つの完成形を学びました。
そのことにより、応用が利き他の学校での学びとリンクしてWEBサイト以外のマーケティング等の理解も進みました。
*コメント*
池内 大翔
*コメント*
コンテンツに沿い、一人称ストーリー調で説明していくことで、設計の仕方を体系的に学ぶことができました。
特に印象に残ったことは、抑揚をつけて話すことで、それがどのようにそのコンテンツを表現するのかというコーダーデザイナーへの指示となるということです。
今後、設計業務を行う上で、コンテンツの意図やコンセプトを、今回のように言語化して説明できるように取り組みたいと思います。
*コメント*
石川 航
*コメント*
前々回のはTOPページの構成についての内容で、今回は下層ページの構成です
個人的に印象に残ったのは、採用ページの構成です
未来の仲間が来てくれるかどうかという大事なページなので、
閲覧者を強く惹きつける必要があると思っていたのですが、そうではありませんでした
そもそも採用ページに来るような人は、自分から色々見て回る状態になっているので、
どこに何があるかを網羅してあげれば良いとのことです
それぞれのページに閲覧者が来る時にどんな心境で来るかが変わってくるので、
それに対応したページ作りが求められると学びました
*コメント*
石川 航
*コメント*
前々回のはTOPページの構成についての内容で、今回は下層ページの構成です
個人的に印象に残ったのは、採用ページの構成です
未来の仲間が来てくれるかどうかという大事なページなので、
閲覧者を強く惹きつける必要があると思っていたのですが、そうではありませんでした
そもそも採用ページに来るような人は、自分から色々見て回る状態になっているので、
どこに何があるかを網羅してあげれば良いとのことです
それぞれのページに閲覧者が来る時にどんな心境で来るかが変わってくるので、
それに対応したページ作りが求められると学びました
*コメント*
髙松 みすず
*コメント*
最初のTOPをストーリーテリングで説明するところに関しては、録画を見ながらやってみましたが、主語の設定が難しく、苦戦しました。しかし、日頃からおっしゃっていただいているように主語がバラバラだと一気に破綻したサイトになってしまいます。
ここは本当に気を付けなければいけないと感じました。
*コメント*
加藤 良紀
*コメント*
ホームページはWEB上にあるものですが、人が見るものなので、人に話すようにストーリー立てて、接客をするようにできれば、良い。相手に売り込むには自己紹介だけではなく、相手の危機感を煽ったりすることも必要で、対面ではできていることがホームページにも活かす。一人称で語ることの大事さを感じました。
*コメント*
熊谷 ゆか
*コメント*
今回は「型A」の下層ページについて教えていただきました。
下層ページに記載する情報やコンテンツについてもしっかりと考える必要があることが分かりました。
普段はTOPページについて学ぶことが多いので、下層ページについて学ぶ機会はとても貴重でした。
*コメント*
山本 高広
*コメント*
1人称でストーリー調で説明していく事を各々されていました。
「理解」という事はこういう事かとなるほどとなりました。
表面ずらだけで理解「した気になっている」というのが自覚できました。
流れるように説明ができる=アウトプット=理解度
自分の言葉で相手に伝えられるトークが出来てこそ理解したといえると学びました。
*コメント*
竹安 りこ
*コメント*
また、ホームページを「私」として説明していくのがとてわかりやすかったです。
今まで私は型Aは暗記するものだと思い込み、意図など考えず一生懸命覚えようとしていました。
しかしそれでは考える力が損なわれてしまうのだと気付かされました。
また、型Aは専門的なものと思っていましたが、今回のように会話ができるか、流れるようなストーリーになっているのかということを以前から意識できていたらもっととっつきやすかったのではないかなと思いました。
それぞれのコンテンツについてもきちんと意図があることがわかり、今後現場に張り付く際に活かしていきたいです。
*コメント*
伊藤 ゆきみ
*コメント*
デザイナーでも設計の流れや意図を理解した上で制作するのとしないのとでは、大きな差が出ると思いました。理解していないと効果的な画像選定も出来ませんし、流れの抑揚をデザインに落とし込んで表現することも出来ません。まずは型Aをしっかりと理解して色々なパターンで組み立てて行けるよう思考の練習をしていきます!
*コメント*
小川 みき
*コメント*
設計を理解する方法としてTOPページやそのコンテンツの下層ページを語り口調で説明することを教えていただき、その反復練習が効果的であるという学び方を知りました。
なぜ?の思考がより理解を定着させるためのポイントで、様々なシーンにおいて必要な要素です。
最後はサービス詳細コンテンツへたどり着くように設計されている理由は、
現実として商品を手に持ってレジへ向かうから=顧客行動モデルそのものであり、それに忠実なものが型Aということです。
これまでの学びからどれが欠けても成り立たないということを実感し、それぞれの理解が圧倒的に不足しているということを改めて実感しました。
*コメント*
恩田 かおり
*コメント*
WEBサイトが喋り出すという、とっても楽しい内容です。
ですが、1人称で表現した途端にとてもわかりやすく、
より身近に感じました。
人と人がコミュニケーションをするように、
一人の営業マンがお客様と商談するようにWEBサイトが設計されているということを感じとる回となりました。
*コメント*
児玉 尚哉
*コメント*
大まかなストーリーはわかっていたつもりになっていたものの、解説いただいたことで設計の深さを認識し、リアルでも活かせるからこそWEBでも成り立つことを理解いたしました。
完全な理解には及んでいないですが、出来ることを示してくださったため、実務の中で訓練していきます。
*コメント*
*コメント*