先週はスクール恒例のWebデザインZOOMグループ勉強会を開催しました。
テーマは「レスポンシブサイトにした場合のファーストビューとメインビジュアルの見せ方」について
ここでは、勉強会で使った解析サービスの使い方と共に勉強会の一部を動画で紹介します。
ファーストビューとは
ファーストビューとは、私たちがWebサイトを見ようとページを開いた時に、スクロールしないで視界に入る部分のことです。
ユーザーはそのページを開いた時にほんの数秒で、
「そのサイトは誰に向けてどんな情報を掲載しているのか？」
「自分が探している情報は見つかるのか？」
を判断して、スクロールしてページを読みすすめるか、ページを去るかを判断すると言われています。
だからファーストビューには伝えたいイメージ・メッセージ・問い合わせや登録ボタンなどの導線を配置しておくことが重要なんですね。
WebサイトをレスポンシブWebデザインにした場合、パソコン・タブレット・スマホ表示とそれぞれのデバイスで高さが違う。
では、どのサイズで制作すればよいかという話になりますが、このサイズをどこで判断すればよいのか？
レスポンシブ スマホ ファーストビュー サイズ
などのワードで検索すると、検証してくれているお役立ちブログがたくさん出てきます。
例えば、パソコン表示では高さ500～600px 、スマホ表示では高さ460px～600px程度がよいという情報が多いようです。
これらは適当に決めているわけではなく、その時のシェア率の高いモニターサイズ・ディスプレイ解像度を基準に決められます。
シェア率を調べるには、こんなサイトがあります。
このサイトでは、モバイルを含む検索エンジン、ブラウザ、およびオペレーティングシステムの使用率を調べることができます。
このサイトの使い方と共に勉強会の一部を動画で紹介していますので、ぜひ、ご覧ください。
5分程度の動画です。
Webデザインをお客様にご提案する際にも、ただ、依頼されたことをそのままデザインに反映して見せるよりも、こういったデータを添えると説得力も上がりますし、目的を達成するための質の良いWebサイトにもなります。
特にフリーランスでWeb制作を受注していく場合、こういった細かいところまでカバーできることをしっかりアピールして、提案の引き出しとしてストックしておくと信頼度アップにもつながると思います。
ワタクシの最大の（？）弱点は数字に弱いところなのですが、これなら簡単に使えるので積極的に使っていこうと思います。
以上、本日は勉強会の一部をご紹介しました。
動画は5分ですが実際の勉強会は2時間、バッチリやりましたよ。
【勉強会内容紹介】
- ファーストビューとは
- ファーストビューの重要性
- ファーストビューのサイズは何を基準に決めている？
- デザイン制作サイズはどの順番で作っていく？
- 効率よくPhotoshopでデザインする方法
- Retinaディスプレイ対応のお話
- コーディング
HTMLの直接画像を配置した場合とCSSで背景画像として表示させる場合
これらのメリット・デメリット・解決策- Flexboxの使いどころ
- HTML5の新要素 picture 要素が便利！
・・・などなど。
ファーストビューはサイトの目的により、いろんなパターンがありますし、時には高度なJavascriptやCSSの知識が必要となります。
私も設計の時点で時間をかけるところでもあり、試行錯誤する部分。
Webの技術の進化も早いので、新しい技術も意識しつつ調べながら制作しているところでもあります。
みなさんと一緒に基本的なところを確認しながら、理解が深まる時間になりました。
