schoo授業感想「WEBデザインの命：ファーストビュー制作」

オンライン動画学習サービスの「schoo（スクー）」。
授業の受講感想記です。

今回の授業は、
＊Webデザイン実践 デザインの命ファーストビュー制作：サイト例
＊Webデザイン実践 デザインの命ファーストビュー制作：実演編
https://schoo.jp/class/2190

全8回シリーズの3回目と4回目、田中先生の録画授業です。

WEBデザインで一番大事な部分、ファーストビューの制作についてです。

ファーストビューとは？

「ファーストビュー」とは、ブラウザでWEBサイトを開いたときに、一番最初に目に飛び込んでくる領域のことです。
ヘッダーやトップ画像の部分が該当します。

閲覧者が何らかの意図でWEBサイトを開いて、ファーストビューに求めるものが見当たらない場合、即離脱してしまう可能性が高いとのこと。

同種のサイトなんて世の中には幾らでもありますからね。
「ここ駄目だ。次行こ」みたいな感じです。
即Uターンです。

授業では、このファーストビューの必要構成要素や、良いサイトの実例などを解説しています。

良いファーストビュー

良いファーストビューの基準は、

◇そのサイトの概要がパッと見て伝わるか？
◇１秒以内で理解できるか？
◇具体的であるか？

こういう基準で、過去の自分が制作したサイトを振り返ってみると、ちょっと忸怩たるものがあります。

制作する側は、出来るだけサイトを格好良いものしたいわけですが、どうしても主観的になってしまいがちです。
閲覧者目線を忘れがちになりますね。

よく言われるのが、サイト閲覧者がそのサイトをじっくり見るか即離脱するか、決める時間は７秒以内だということです。
第一印象が大事です。

ファーストビューの必要構成要素

ファーストビューの必要構成要素は、

◇サイトのメリット
◇ナビゲーション
◇SNSボタン

一番大きいのは「サイトのメリット」でしょうか。
パッと見て、このサイトを見ることに何のメリットがあるのか、
概要が一瞬で伝わらないと駄目だということですね。

「SNSボタン」の設置は、地味なように見えて意外に効果があるようです。
こういうブログ記事もあります↓

＊バズるサイトの６割はファーストビューにSNSボタンを設置していた！

求められる技術

良いファーストビューサイト制作に求められる技術は、

◇視覚伝達技術
◇アクセシビリティ・ユーザビリティ
◇サイトの表示速度を上げる

WEBサイトの制作って、突き詰めれば「情報整理」だと思いますが、特にファーストビューではプロの腕の見せ所ってことでしょう。

あと、サイトの表示速度は大きいですね。
特に最近多いトップに背景動画が流れるサイトなどは、読み込みにモタモタしていると、即離脱されてしまいます。

閲覧者目線で検証する

授業では「実践編」ということで、某サイトを例にとって、ファーストビューの重要性について解説されてます。
これはとても分かりやすかったです。

ってか、大手のサイトであっても、こういう致命的なミスを犯しがちなんだなあと思いました。

お客さん目線、閲覧者目線でWEBサイトを見つめ直すのは大事ですね。

schoo授業感想：まとめページ