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