Case1
新規サービスを打ち出して、WEBサイトを活用した企業の体質変換！！のサイト設計
| 題材とした企業のHP | |||
|---|---|---|---|
業種 |
サーバ |
地域特性 |
全国 |
規模 （従業員数） |
小さな会社（レッドオーシャン市場） |
サイトのゴール |
問合せ、見積り依頼 |
CHECK
01
ビジネス観点の切り替えによって、巨大市場かつブルーオーシャンに！！
縮小傾向に歯止めがかからないこれまでのレッドオーシャン市場。しかしそこで培ってきた強みを活かすための新サービスを打ち出すことに！！
観点（ターゲット）を切り替えたことによって、巨大市場かつブルーオーシャンを創出！！
そこにWEBで切り込んでいく設計となっている。
CHECK
02
TOPページファーストビューの超科学！！MVでの視線誘導
強烈に目に飛び込んでくる文字。
MV内で3つのポイントに、閲覧者の視線を瞬時に誘導し、我との関連性を確実に"知覚"させる。
そしてその直下のコンテンツに、確実に誘導する！
CHECK
03
視線は、必ず誘導できる！！！勝負ポイントに確実に目を留めさせろ！！
デザイナーが、バランス悪くて気持ち悪い、思わず左寄せで揃えたくなるような見出し。
でも、そこに意図した計算が⭐絶対“見て”しまう視線の科学。
CHECK
04
こんな経験してない？こんなお悩みない…？計算された我との関連性で、閲覧者の潜在的な不安感を突く
不安を自覚した瞬間に、いきなり落すのではなく、ハードルの低いところに"引っかける"！
CHECK
05
デザインの科学。グラフの効果とアンダーラインの効かせ方
どうしたって目が追ってしまう右肩上がりのグラフ。それによって視線誘導される見出し。
コンバージョンボタンに添えられた、ロゴマークのサイズ感まで計算されてる…！！
アンダーラインの効かせ方も、計算しないともったいない。
参加者の
コメント
岩見 ゆきな
＊コメント＊
今回は「人の視線」に関する観点からご指導いただいたところが印象に残りました。
例えば「人間は左から右に流れるように出来ている」「カタカナの方が強いから流れのままではなくこっちに視線が移る」など、具体的に視線のラインを引いて説明していただきました。
マーケティング部としてホットな話題である見慣れたサイトではありましたが、見慣れたサイトという観点ではなく、フラッとサイトに訪れた顧客に対し、「視線誘導」をするという観点からの説明だったので、他のサイトを見る際にも非常に有効な考え方だと感じました。
来週もよろしくお願い致します。
＊コメント＊
河原田 ゆきえ
＊コメント＊
想像していたよりもあらゆる箇所に科学された"仕掛け"があって、あらためて目から鱗👀✨でした！！
私のWEBサイト設計なんて、まだまだ思考が浅いな～と反省しつつ
次の機会では、今回学んだ青山さんの超絶テクニックを試してみよう！とこっそり思いました。
「視点が合わないところに知覚は無い」
「成果を上げるためのデザインとは、視線誘導」
確かにー！！と頷く参加メンバー。
人の目線を確実に誘導するテクニック、いろんなシーンで使えそうです👀♪
＊コメント＊
齋藤 圭亮
＊コメント＊
切り口を変えることで一気に市場を広げる目からうろこのマーケティング思考から始まり、それをいかにサイトに落とし込むのかを教えていただきました。
青山さんのWEBサイトは上から下に向かって見るしかないのだから必ず視線は誘導できるというお言葉が印象に残っています。
マーケティング思考に基づいた設計、デザインはどうあるべきか顧客の心理に沿って科学できることを証明していただきました。
今後のWEBサイトの設計に活かしまくれそうです！
＊コメント＊
紀井 斎
＊コメント＊
視線誘導の妙というか、わかっているからこそのデザインであるべきだと再認識しました。
また止めるテクニックについても実践にてアウトプットしないと身につかないと感じましたが、ぜひ身に着けたい概念でした。
部内スタッフからのコメント
主婦隊：吉田 けいこ
今回は、目の科学。とても楽しく興味深く勉強させて頂きました。HP上では、独自の強みをいろいろ文章に書きたくなりますが、明らかに少ない文章とシンプル画像だけで閲覧者に的確に誘導、興味を持たせることが出来るということを何度も実践しながら、説明して下さるので、本当に分かりやすく、ド素人には、本当に有難いです。
当時のインターネット電話回線時代のピーッヒョロロが本当に懐かしくてとても面白かったです！！(笑)( *´艸｀)
主婦隊：藤田 まりこ
今回の講義では２つのポイントを学びました。
①「目線の動きを逆算して着目して欲しい事を置く」
②「見る人の我との関連性から外れないように囲い込む設計、ストーリー性を持たせる」
初見でHPを見た後、青山さんが「こうやって目線を動かしたでしょ？」と解説なさった事が100%私の目の動きに当てはまっていて、科学的な配置の重要性を理解しました。
解説が伴うとユーザーの心を掴むのに合点がいくサイト設計であり、そこには計算された文字の配列、配色が存在していました。これを自分のものとする為にどのように学んで行けば良いのか、、、課題です。
アシスタント：川満さゆり
今回はHPのBefore-Afterで視線誘導の法則や科学的デザインについて学びました。
視線誘導の法則ではスーパーのチラシでよく使われているZの法則は知っていましたが、Fの法則等も存在することを学びました。
BeforeのHPは情報過多になり、ぱっと見、なんのHPかわかりませんでした。じっくり読んでも、何のHPかわかりませんでした。
AfterのHPはとても困っているわけではないけど、無くは無いことだから読んでみようかなと興味をそそられる、デザインで、HPに引きずり込まれました。
青山さんがどの部分が科学的にデザインされているかを解説してくださり、とてもわかりやすく、勉強になりました。
＊コメント＊
松村 えり
＊コメント＊
見る人の心理と、視線に合わせた仕掛けが随所にあり、
解説していただいてから見ると、その通りに自分の目も動いていることに気付かされました。
ただ整っているだけのデザインより、設計者の意図を反映した、確実に効果の出るデザインができるようになりたいと改めて思いました。
継続して学んでいきたいと思います。
次回もよろしくお願いいたします。
＊コメント＊
廣澤 あやな
＊コメント＊
WEB学校を受ける前は、主観的なデザインでダサいかダサくないかで判断してしまっていましたが、自分が思いもよらない微細なところまで設計者の意図が込められていることを学びました。今回のテクニックは今すぐ使えるものもあったので、まずは自分の業務の中で実践していこうと思います！
＊コメント＊
岡部 ちよ
＊コメント＊
事例で使われたホームページを閲覧し、
この言葉に目が行くな、この図が頭に残ったな、と考えていたところ...
青山さんの解説が、私の思考と一致しすぎていて、怖いなと思うくらい当たっていました！
自身でネット検索をするときには、
視線誘導の科学を使っているホームページかどうか
考えながら閲覧するようになったので、
今後のWEBコンテンツ作成に活かしていきたいと思います！
＊コメント＊
星 翼
＊コメント＊
WEB戦略をどのようにWEBサイトに反映するのかを、閲覧者の目線を分析しながら解説をして頂きました。
今回のWEB学校で解説された内容ほど、閲覧者の目線を考えられたサイトは無いんじゃないかと思えるほどでした。コンテンツを考えデザインを配置するときに、閲覧者の目線を考えているかいないかで成果に大きな違いが出るなと感じました。
ボタンの大きさや色、文字の装飾、背景色、コンテンツの形など細かい箇所にまで解説があり、自分がその通りの目線になってしまっていた事に驚きました。
今回のWEB学校でWEBサイトを見る時の目線の重要さを学ぶことができ、とても勉強になりました！
次回も参加させていただきたいと思います！
＊コメント＊
中澤 めぐみ
＊コメント＊
今回は、同じ会社のリニューアル前と後のサイトの違いを詳しく見比べるところから始まりました。
リニューアル前の状態では、その業界の知識の乏しい私では正直理解すらあまりできなかったのですが、
リニューアル後になると一転して、理解ができ、かつ関心を惹かれるものになっていて とても驚きました。
顧客本位という言葉の意味、その一端をリアルに感じられたような気がします。
また、視線誘導に関してのお話もとても興味深かったです。
私は、デザイン的に好ましくないとされるレイアウトは絶対にしてはいけないのだと思っていたので、
「デザインのルールに反してでも 必要な情報を閲覧者の目に届けることを最優先にすることもある」というのがとても衝撃でした。
次回以降もぜひ参加して、学びを深めていきたいと思います。
よろしくお願いいたします！
＊コメント＊
堀田 大渡
＊コメント＊
今回のWEB学校では視点に重きを置いた話となり、
人が閲覧する際にはどのような目線でどのようなコンテンツに目を向けるのかという所を細かく学びました。
普段何気なくサイトを閲覧していても、それはサイトの設計者の思惑通りに実は視点を動かされていたのかもしれないという新たな発見とともに、サイトを作る側としてもどのようにコンテンツを作ることで、閲覧者を誘導できるのかなどの駆け引きのような仕組みが必要なのだと感じました。
今後サイトを見ていく中ではただ見るだけでなく、このコンテンツはどのような意図があるのだろうかという所まで目を向けていこうと思います。
＊コメント＊
石川 航
＊コメント＊
サイトを見る人の興味の度合で視線の動き方も変わることを学びましたが、
今回学んだ視線誘導と以前の回で学んだ4つの型を組み合わせれば、
コンテンツの配置も、閲覧者の目を引きやすい構成にできそうです
自分はコーダーなのでサイトの設計に直接関わることは無いですが、
閲覧者の興味を惹きやすい配置を意識した構築を考慮すれば、今後のサイト制作に活用していけると感じました
＊コメント＊
鷲見 隆也
＊コメント＊
ありがとうございます！
本日は「視線の誘導」について多く学ぶ機会になりました。
視線のF型や、Z型など設計において活かせることばかりでした！
そして、こういう視線誘導をしているという内容を繰り返し頂き、
全くその通りに視線を動かしていたので自分の心の中を見透かされているのかという気持ちになりました！
途中から的中しすぎて心理学の何かのセミナーなのか、と思うほどでした（笑）
今回のWEB学校を通して、マーケティングの可能性を改めて感じることができました。
次回もよろしくお願い致します！
＊コメント＊
谷口 かなこ
＊コメント＊
これまで自分が無意識でその視線導線通りに動いていたこと、また、同じく無意識ながらその視線導線を作れていたことも気づけて非常に面白い回でした。
また見るレベルと読むレベルの戦略的な使い分けもとても面白かったです。
次回も楽しみです。
＊コメント＊
小川 みき
＊コメント＊
「デザインは科学」
一つのサイトを見ながら、人の心理と視線の動き方に加え、テキストの表現（ひらがな、カタカナ、漢字、色）や、グラフ、余白を適切に使うことで、閲覧者の視線誘導までできるというとても濃い内容です。
実サイトを見る自分の目線もその通りに動くことを生で体感し、閲覧者の無意識を巧みに操る、まさに「デザインは科学」であるという意味がすんなりと腹落ちしました。
優秀なサイトには至るところに設計者の意図がちりばめられていることを知り、普段のサイトを見る目も変わること間違いなしです。
＊コメント＊
下川 春樹
＊コメント＊
今回は視線誘導のテクニックを交えたHPの設計についてでしたが、無意識でもこんなに視線は誘導されるものかと改めて認識しました。
広告やチラシを見る時の目線のZ型は知っていましたが、左上かから右下に目線がいく「グーテンベルク・ダイヤグラム」は初めて知りました。
色々と調べて知識を深め、今後のサイト制作に活かせるようにしていきます！
＊コメント＊
田中 りな
＊コメント＊
実際に今回のサイトを見た時に、まさに青山さんが仰った部分を見ていたのでとても驚きました。
いくらおしゃれでかっこいいデザインだったとしても、顧客心理に基づいた設計になっていなければコンバージョンには繋がらないのだと、改めて勉強になりました。
毎回新しい学びを得ることができるので、その度に自身のWEBサイトの見方が変わっていくのが面白いです。
次回もよろしくお願いいたします。
＊コメント＊
黒川 かな
＊コメント＊
メインビジュアルなどのデザインの一連の視線誘導がすごく勉強になりました！
Z型とF型の視線誘導は知っていましたが、例を用いてこんなに詳細に視線誘導を解説していただけることはなかなかないと思うので、本当に楽しく、貴重な学びでした。
成果を上げるデザインとは、設計者の意図を汲み、視線を誘導させる先に見てほしい内容を置くことが大切だということをしっかりと念頭に置いていきたいです。
顧客行動モデルと視線誘導を組み合わせたサイト設計がいかに凄いか思い知らされました。
次回も楽しみにしております！
＊コメント＊
松本 まりこ
＊コメント＊
＊コメント＊
野村 健人
＊コメント＊
閲覧者の視線を止めるにはどうすれば良いのか。視線を止めたところにどんなコンテンツがあれば良いのか。文字はカタカナの方が強く印象に残る、といったような実際のサイトを見ながらデザインはただ見た目が良ければ良いわけではない、科学できるというのを実践の中で学べる回でした。
構築者として、設計者・デザイナーの意図を汲んで勝てるWEBサイトを作れるよう、今後のWEB学校を通じて成長していきたいです。
＊コメント＊
加藤 かのん
＊コメント＊
これから、サイトを見る時はどのうよに視線誘導しようとしているのか少し視点をかえて見てみたいと思います。
次回もどうぞよろしくお願いいたします！
＊コメント＊
山嵜 まい
＊コメント＊
また、計算されたサイトは凄く見やすいということに気づきました。バナーを張りつけただけのような古いサイトは目がチカチカして頭に入ってこないですし、デザインだけに拘ったようなサイトも目が迷子になりストレスを感じます。しかし、科学されたサイトはまるでストーリーを読み進めるかのようにスラスラと目が動き、ゴールに引き寄せられていくのです。
今まではサイトを見ていても、デザインやコーディングにばかり目がいってました。これからは製作者の意図にも注力したいとおもいます。今回も凄く勉強になるWEB学校でした！次回もよろしくお願いします！
＊コメント＊
加藤 良紀
＊コメント＊
顧客の成果に繋げるため、サイト閲覧者をどう誘導していくか、設計とデザインでゴールに辿りつけること、自分達が手がけたサイトの設計の意図、デザインの意図が力説できる状態であること、とても大事だな、と感じました。顧客が顧客を獲得する為の心理をしっかりと考えていくこと、日々の対応を考えていきます。
＊コメント＊
瀬戸 ゆうか
＊コメント＊
一つのWEBサイトにあらゆる仕掛けが施されており、目から鱗の内容でした！
閲覧者の目線を考えるだけで、コンテンツや画像の配置がスムーズに決まるのだと知り、科学されたデザインとはこのことをいうのか！と納得しました。
次回のWEB学校も積極的に参加し、学び取っていきます！
＊コメント＊
松本 玄
＊コメント＊
手書き仕様書を何度もダメ出し頂いていた頃を思い出します。
どこで閲覧者の目を止めさせたいか。
見るから読むに変えさせたいか。
そして動きをどうつけるか。
ヒトの行動心理・サイコロジーの観点で
WEBサイト設計しデザインしていくということが、
根拠であり科学であり効果を測定するための軸にも
なっていくことを意識し仕事に活かしてまいります。
＊コメント＊
有本 直樹
＊コメント＊
＊コメント＊
土清水 光琉
＊コメント＊
これまで、顧客の目線に立ってホームページを作らないといけないということは知っていたのですが、具体的に顧客の目線がどのようなものなのかを根拠を持って考えるということが出来ていませんでした。
しかし、WEB学校に参加してみて、顧客のホームページを見るときの目線は、その時の感情などから完璧に導き出されるものであり、このことを応用することで、明確な根拠を持って顧客のホームページを見る目線を考えることが出来ると知りました！
＊コメント＊
児玉 尚哉
＊コメント＊
Z型などいくつか勉強したものもありましたが、実際のサイトに落とし込まれた形を見ることでより「デザイン」の科学について理解が深まりました。
ただどこまで行っても根幹にあるのは成果(目的)に向けて設計・デザインが成り立っているため、根幹を忘れることなく顧客心理考えていくことをしっかりと日々の中で磨いていきます。
＊コメント＊
渡邉 大也
＊コメント＊
閲覧者の視線は誘導することができ、そこまで考え尽くしたサイト設計をしなければいけないなと思いました。
ホームページ設計の際は、コンテンツだけではなく、文字の配置、カタカナやひらがな、漢字の使い分けまで細かいところまで気を配っていきます！
＊コメント＊
久保 日向太
＊コメント＊
今回のWeb学校の学びです。
これまで「科学されたデザイン」をザックリと文字のサイズや色、画像だと考えWeb設計をしてきましたが今回のWeb学校を通して、細部にまで徹した科学されたデザインを学ぶことができました。
・見せたい箇所から視点を逆算して、デザインを強調する
・コンテンツごとに閲覧者がどのタイプになっているのか？を把握して、それにそったデザインをする。
緻密に計算されたデザインの先にこそ、勝てる資格を持ったWeb設計が存在するのだと改めてデザインの凄さ必須性を実感した回でした。
特に、今回のWeb学校で学んだ科学されたデザインの考え方は勿論、切り口を変えて市場規模を最大化させることやコピーライティングの考えた方は、直近のWeb設計にも確実に活かせる領域なので、しっかりと学びながら実践のトライ＆エラーを繰り返していきます!!
＊コメント＊
ZAW MIN OO
＊コメント＊
今回は視線のこと話しました。
人は見るとき、どこから始め、次どうのように動くかを実際に見ながら説明していただきました。それがWebサイトの設計や、デザイン直接関係するということです。
一瞬みて、頭に何が残るのがのも設計とデザインに大事にことがわかりました。日常やっていることですが、気づいていなかったことです。
今回のWeb学校を受け、今後の業務に活用していきます。
ありがとうございました。
＊コメント＊
諸隈 ゆきこ
＊コメント＊
えええ！っと思う事が多々あり、人間はサイトを見るときにこういう風な目線を描きながら見ていくんだという事を学びました。
いつもは全く知らないサイトを事前に予習して参加しますが、今回は何度も見たサイトでしたので答え合わせをしているような感覚でした。
また次回も楽しみです。ありがとうございます！
＊コメント＊
鈴木 健太
＊コメント＊
特に印象に残ったのが、同じ赤背景の文字でも、上下のキャッチの有無、またそれらとの意味の繋がりによって、目に入るか否かが決まってくるという例です。要素の関係性によっても視線をコントロールできることを学びました。
いかに誘導し、いかに視線を止めるか、この視点から制作をしていきたいと思います。
＊コメント＊
中川 あすみ
＊コメント＊
WEBサイトを設計において閲覧者の心理、視線がどのように動くのかを把握した上でデザインすることが成果につながっていると思いました。
背景や余白の使い方、コンテンツの大きさなど強弱をつけて「見せる」、「読ませる」の使い分けが重要だと学びました。
色や小さな大きさの違いでも閲覧者の視線が変わってしまうので細部まで根拠を持って設計しなければいけないと感じました。
自分がサイトを見るときも視線がどのようになっているのか意識してみようと思います！
＊コメント＊
森田 惟之
＊コメント＊
一見閲覧者が自由にWEBサイトを見ているようで、
設計者、デザイナーの意図通りに動かされてしまう、動かせてしまう。
ということを学びました。
それは騙しのテクニックでは無く、閲覧者が欲しい情報を欲しいときに
ストレスなく自然に受け入れてしまう。
という、根本は閲覧者本意の考え方で、
WEBに携わる人間の必須スキルだと思います。
＊コメント＊
石島 さやか
＊コメント＊
人の視線の動きは「Z型」が普通だと思っていたので、いつもデザインをする際はこの形ばかり考えていました。
人の視線が多く動くようなホームページは、見る人の心理をきちんと考えて戦略的にデザインしていくことの重要性を講義を通して理解しました。
＊コメント＊
野木 拓馬
＊コメント＊
後半ではHP設計について、視線誘導の観点から解説していただきました。
前半では、縮小する市場で戦う企業に対し、
どのようなサービスを展開していくかということについて解説いただきました。
私はターゲットとして、ニーズが顕在化している顧客へのアプローチを考えてしまっていましたが、
潜在顧客に対してアプローチすることで市場が最大化されるということを学ばせていただきました。
後半に関して
人の視線は誘導できるということを、その場で証明しながら解説していただき
HPにおいて、いかに読ませなければならない文字に目を止まらせるか
という工夫の余地について多くの学びを得ることが出来ました！
＊コメント＊
大橋 なな
＊コメント＊
目線の誘導など、気をつけて今後のデザインにも入ろうと思いました。
＊コメント＊
山本 高広
＊コメント＊
サイトを見ている人の視線をいかに誘導する設計・コンテンツしコントロールするのか。
実際に構築されたサイトを通して解説がなされ理解が深まりました。
「デザインは科学」と昔から聞いていた言葉の意味をの一つを理解できたと思います。
＊コメント＊
＊コメント＊