Web業界で生き残る フリーランス Webデザイナーになる方法。

スキルチェック・自己分析シート無料配布中!
スキルチェック・自己分析シート無料配布中!

Webサイトのファーストビューとお客様へのデザイン提案に使えそうな解析サービスの使い方(動画あり5分)

Webサイトのファーストビューとお客様へのデザイン提案に使えそうな解析サービスの使い方

先週はスクール恒例のWebデザインZOOMグループ勉強会を開催しました。

テーマは「レスポンシブサイトにした場合のファーストビューとメインビジュアルの見せ方」について

ここでは、勉強会で使った解析サービスの使い方と共に勉強会の一部を動画で紹介します。

ファーストビューとは

ファーストビューとは、私たちがWebサイトを見ようとページを開いた時に、スクロールしないで視界に入る部分のことです。

ユーザーはそのページを開いた時にほんの数秒で、

そのサイトは誰に向けてどんな情報を掲載しているのか?
自分が探している情報は見つかるのか?

を判断して、スクロールしてページを読みすすめるか、ページを去るかを判断すると言われています。

だからファーストビューには伝えたいイメージ・メッセージ・問い合わせや登録ボタンなどの導線を配置しておくことが重要なんですね。

WebサイトをレスポンシブWebデザインにした場合、パソコン・タブレット・スマホ表示とそれぞれのデバイスで高さが違う。
では、どのサイズで制作すればよいかという話になりますが、このサイズをどこで判断すればよいのか?

レスポンシブ スマホ ファーストビュー サイズ

などのワードで検索すると、検証してくれているお役立ちブログがたくさん出てきます。

例えば、パソコン表示では高さ500~600px 、スマホ表示では高さ460px~600px程度がよいという情報が多いようです。

これらは適当に決めているわけではなく、その時のシェア率の高いモニターサイズ・ディスプレイ解像度を基準に決められます。

シェア率を調べるには、こんなサイトがあります。

このサイトでは、モバイルを含む検索エンジン、ブラウザ、およびオペレーティングシステムの使用率を調べることができます。

http://gs.statcounter.com/

このサイトの使い方と共に勉強会の一部を動画で紹介していますので、ぜひ、ご覧ください。
5分程度の動画です。

Webデザインをお客様にご提案する際にも、ただ、依頼されたことをそのままデザインに反映して見せるよりも、こういったデータを添えると説得力も上がりますし、目的を達成するための質の良いWebサイトにもなります。

特にフリーランスでWeb制作を受注していく場合、こういった細かいところまでカバーできることをしっかりアピールして、提案の引き出しとしてストックしておくと信頼度アップにもつながると思います。

ワタクシの最大の(?)弱点は数字に弱いところなのですが、これなら簡単に使えるので積極的に使っていこうと思います。

以上、本日は勉強会の一部をご紹介しました。

動画は5分ですが実際の勉強会は2時間、バッチリやりましたよ。

勉強会内容紹介

  •  ファーストビューとは
  •  ファーストビューの重要性
  • ファーストビューのサイズは何を基準に決めている?
  • デザイン制作サイズはどの順番で作っていく?
  • 効率よくPhotoshopでデザインする方法
  • Retinaディスプレイ対応のお話
  • コーディング
    HTMLの直接画像を配置した場合とCSSで背景画像として表示させる場合
    これらのメリット・デメリット・解決策
  • Flexboxの使いどころ
  • HTML5の新要素 picture 要素が便利!

・・・などなど。

ファーストビューはサイトの目的により、いろんなパターンがありますし、時には高度なJavascriptやCSSの知識が必要となります。
私も設計の時点で時間をかけるところでもあり、試行錯誤する部分。
Webの技術の進化も早いので、新しい技術も意識しつつ調べながら制作しているところでもあります。

みなさんと一緒に基本的なところを確認しながら、理解が深まる時間になりました。

この記事が気に入ったら
いいね ! しよう

Pocket
LINEで送る

関連記事

この記事を書いた人

Tomoko Fukumoto

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

無料メール講座

  • フリーランスWebデザイナーになるメール講座 スキルチェック・自己分析シート無料配布中!

体験型スクール&コミュニティ

  • Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ Webクリエイターズオンラインスクール

スキルチェック&自己分析シート 限定無料配布中!

Webデザインの実力をつけて仕事にする!
自分の力で生きて行きたいあなたへ

Webデザインのスキルを収入にするフリーランス向け無料メール講座。

リアルにどんな考えで、どんな情報を重点的に集め、
具体的にどう動けば、Web業界で生き残る、安定した収入を得られる、

フリーランスWebデザイナーになれるのか?

あなたが、その方法を得られる内容になっています。
登録された方には、スキルチェック&自己分析シートをプレゼント中です!

メール講座登録フォームはこちら