ファーストビュー
ページが表示された際にスクロールせずに見える範囲の情報すべてをいいます。
概要
ファーストビューは、Webページを開いたときに全くスクロールせずに見える範囲の情報すべてをいいます。
ファーストビューに表示された情報によって、多くのユーザーが直帰するかサイトを回遊するかを判断します。
よって、このファーストビューの情報の使い方によっては直帰率の改善や改悪につながる要素が強いといっても良いでしょう。
デザイナーも、特にファーストビューにはこだわりや視認性などに気を遣わなければなりません。
トップページが値段が高く、デザインにおいても最も時間がかかる要因である理由です。
業界によってもトップページのファーストビューに様々な差や変化に富んでいるので、トップページのデザイン集を見るだけでもかなり面白いのと発見も多いのでお勧めです。
類似のものとして、広告から流入するタイプのランディングページも実に様々な「ファーストビュー」がそろっています。
この用語のメモ
ファーストビューを閲覧したことにより数秒で閲覧するかどうかが判断される世界です。
それゆえに、デザインも大事ですがキャッチ・コピーがサイトの良し悪しを最も左右します。
最近ではバックに動画を用いて真ん中に文章を大きく表示する手法であったり、文字が少しずつ表示されて読ませるように工夫をしているサイトも見受けられます。
特に、ここ最近の傾向としては極力不要な情報を省き、なるべく表示する情報量や色数を制限し視認性とトンマナを維持したサイトも多いです。
個人的には「数字に表れないSEO施策」という位置付けで考えています。
この用語の使いどころ
サイトの立ち上げ時やサイトのアクセス改善に取り組む際、またはランディングページ制作時においては頻繁に改善を要求される内容の一つです。
前述したように、キャッチ・コピーを変更してほしいとか、初めに見えるボタンの色を変えてほしいとか等のちょっとした修正から動画や画像・又はレイアウトなどを全替えするなど、トレンドによって大きく変えることもあります。
せっかく中身が優れたページを作っても、トップページや閲覧開始ページからすぐ直帰してしまっては単なる宝の持ち腐れになってしまいます。
作ったものがしっかり脚光を浴びるためにもファーストビュー、もとい画面に表示される情報の見え方にも気を配ることが肝要です。
また、こういった施策はユーザビリティの向上にもつながります。
デザイナーも含め「SEOが全員でチームで取り組むべき理由」と考える一つのシーンだと思います。
関連用語
- ヒートマップツール
- アクセス解析
- ABテスト
Web担当・運営・解析・SEO問題集の例題問題
ファーストビューに関連するジャンルの練習問題を掲載しています。Web担当・運営・解析・SEO問題集一覧から各ジャンルの問題にチャレンジできます。
クリックすると問題の答えと解説が見れます。
Q:pタグの入れ子(直下に入るタグ)で不適切なものを選んでください。
- imgタグ
- marqueeタグ
- spanタグ
- aタグ
- divタグ
この答えの解説
pタグはインラインタイプのタグなので、ブロックレベルタイプのdivタグやulタグは構文上入れ込むことができません。
Q:次のタグのうち、tableタグの入れ子に含まれないものを選んでください。
- tbodyタグ
- dtタグ
- thタグ
- trタグ
- tdタグ
この答えの解説
dtタグは、dl(定義リスト)タグの入れ子になります。dlタグの入れ子にdtタグとddタグを使用します。
dtタグとddタグは、「質問と答え」の関係のような人まとまりの意味を持つ表現をしたいときに使うため、Q&Aなどのサイトに多用されます。
Q:次のタグのうちHTML5で使用できないタグを選んでください。
- blockquoteタグ
- emタグ
- centerタグ
- labelタグ
この答えの解説
centerタグは、HTML5では廃止されました。
CSSのmargin属性(左右auto指定)や、text-align属性でcenter指定(IEではmargin属性だけでは反応しない)する形でセンタリングします。
Q:コーダーの説明として正しいものを選んでください。
- 制作全般のとりまとめを行う人、またはその人員
- Excelなどの関数やVBAなどの記述を行う人、またはその人員
- PhotoshopやIllustratorなどのデザインを行う人、またはその人員
- HTMLやPHPなどの言語の記述を行う人、またはその人員
この答えの解説
コーディングとは、プログラミングとかなり近い性質を持っていますが、実際には指定の言語(ここではHTMLやPHP等)のソースコードを用いてクライアント側(コンピューター側)が理解できる記述を行うことをいいます。
HTMLは、本で言う「タイトル」「段落」等がタグとして記載ができます。
その記載すべき部分に文章や画像を表示させることで、Webページを構成していきます。
そういったソースコード制作業務を行う人を「コーダー」といいます。
Q:ユーザーエクスペリエンスの説明として正しいものを選んでください。
- ユーザーが体験したサイトの情報を公開すること
- ユーザーのために技術者やデザイナーが経験を得ること
- ユーザーがWebサイトなどのサービスや情報を利用することで得られる経験のこと
- 閲覧されたユーザー数に応じて技術者が得られる経験を数値化したもの
この答えの解説
ユーザーエクスペリエンスは、製品やサービスを使用することで得られる経験のことを言います。
Web分野においては、如何にしてWeb内におけるサービスやコンテンツに満足できるサイト構築を達成できるかが大切で、マーケティング担当やディレクター担当、特にサイト構成を作るメンバーにおいて最も要求される要素になります。
Q:運用における目標達成までの流れの順序で正しいものを選んでください。
- KPI設定→改善・PDCA→数値分析→KGI設定
- 改善・PDCA→数値分析→KGI設定→KPI設定
- KGI設定→数値分析→KPI設定→改善・PDCA
- KGI設定→KPI設定→改善・PDCA→数値分析
この答えの解説
KGI(Key Goal Indicator)は「最終目標」なので、その最終目標に到達する根拠を設定する必要があります。
そのため、数値分析を行ったうえで導き出されたKPI(Key Performance Indicator)を設定します。
設定したKPIを達成するためにどんな施策が必要かを熟考し、PDCAを回していく流れが一般的に正しいとされています。
Q:ユーザーエクスプローラで解ることを選んでください。
- ある特定のユーザーの行動履歴から、コンバージョンに至ったルートを解析できる
- ある特定のユーザーが購入などをしてコンバージョンをし、目標に寄与した割合を見ることができる
- ある特定のユーザーの年齢や性別などのパーソナルデータを見ることができる
- ある特定のユーザーの入力フォームの内容を辿ることができる
この答えの解説
ユーザーエクスプローラはあるCookie情報を持ったユーザーの閲覧履歴を追跡できる機能です。
コンバージョンに至るまでの中間ページや滞在時間等から、なんの情報記載を元に行動に移したのかの推測や仮説が立てられるようになります。
Q:直帰率と離脱率を分析したもので反映すべき改善内容を選んでください。(対象はトップページのみとする。)
- 直帰率が高いが離脱率は低いので特に改善しない
- 離脱率は高いが直帰率は低いので特に改善しない
- 離脱率が高いので直帰率が低くても改善が必要
- 直帰率が高いので離脱率が低くても改善が必要
この答えの解説
トップページのみを対象としているため、直帰率改善は最優先事項になります。
直帰率を抑えることはサイト全体における回遊にも繋がります。
ファーストビューや下層リンクへのナビゲーションがうまく機能させることが重要です。
Q:セッション数とユーザー数の違いの説明で適切なものを選んでください。
- セッション数とユーザー数は、一日のアクセスにおけるカウントが異なる
- セッション数とユーザー数は、一日にたくさんページを回遊したユーザーかどうかを判別するもの
- セッション数とユーザー数は、違いは特に無い
- セッション数とユーザー数は、コンバージョンを行ったユーザーとそうでないユーザーの違い
この答えの解説
セッション数は1日を基準とし、その日のうちに断続的にサイトに訪れた場合、都度カウントされます。(ブラウザを閉じて再度立ち上げる、など)
ユーザー数は1日を基準とし、Cookieを参照しその日のうちに断続的にサイトを訪れても同一ユーザーと判断されるため都度カウントはしません。
セッション数とユーザー数に差があるのはこのカウントのしかたが異なるためです。
ファーストビューに関わるよくある質問
CSSの最大の利点を教えてください。
何より少ない容量で「ある程度の動的動作」や「サイトの整形」が出来る点だと思います。
また、手軽にスマホサイト対応ができる「メディアクエリ」が使用できるのも大きな利点で、こんにちのモバイル対応を支えているものになります。
CSSは、手段を覚えておけば覚えておくほど、レイアウトの調整手段が増えてくるため、容量を抑えつつ動作を行えるソースが作れます。
Web制作って具体的には何をしますか?
全体的な工程としては、「打ち合わせ」「納期・見積」「サイトマップ」「構成案(ワイヤフレーム)作成」「デザインカンプ」「デザイン制作」「コーディング」「校正・テスト・品質管理」「公開」「運営・運用」をトータルとした工程になります。
これだけでもかなりの工程数になるかと思います。
各工程には普通、「納期」を設定しているため、各工程が遅れてくると、他の工程のスケジュールが圧迫されてしまい、タイトなスケジュールをこなさなくてはならなくなります。
ディレクターは主に前半の「打ち合わせ」から「構成案(ワイヤフレーム)作成」までを担い、あとは品質チェックや進行管理を中心に行います。
デザイナーは「デザインカンプ」及び「デザイン制作」、コーダーは「コーディング」と「校正・テスト」をそれぞれ担う形となり、Web制作の分業化が進んだ今、ざっくりですがこういった形で業務が行われています。
Web制作に必要なソフトを教えてください。
製作工程に応じて使いやすいソフトが大筋決まっていることが多いです。
構成案やサイトマップを作る際はMicrosoftの「Excel」や「PowerPoint」が鉄板です。
大まかなデザイン枠を作る分にはPowerPointがあれば十分作れますし、サイトマップやスケジュール・見積もりなどの情報は、Excelがほとんど使われることが多いです。
いずれもPDFに手軽に変換できる点も非常に使いやすい要因となっています。
デザイン面では、Adobeの「Illustrator」か「Photoshop」が鉄板で、まれに「Fireworks」を使用しているユーザーもいます。
一般的に紙媒体もやっている企業では、「Illustrator」を使用してサイトデザインを制作しているケースが非常に多いです。
コーディング等ではAdobeの「Dreamweaver」がもっとも有名ですが、テキストエディタでコードを作成できる力があれば、ワードパットソフトの「Terapad」やGithubが提供している「Atom」も非常に使いやすいです。
コーディング面においてはファイルのエンコードとHTMLやCSS記載のエンコードをあわせないと文字化けも起こしてしまうので、個人的には「Terapad」が使いやすいと感じています。
運用面、特にアクセス解析などにおいてはこちらもMicrosoftの「Excel」や「PowerPoint」が非常に使われます。ツールとしては「Googleアナリティクス」と「Googleサーチコンソール」を使います。
Excelはうまく使えば得られたアクセス情報からさらに様々な視点でのアクセス情報を拾い出すこともできるため、Excelを使いこなせることができれば大きな武器になります。
アクセス解析等はディレクターが兼任しているケースも多いです。
ざっと上げましたが、全てを担当する場合は「Excel」「PowerPoint」「Illustrator」「Photoshop」「Dreamwerver」「Googleアナリティクス」「Googleサーチコンソール」の7つをマスターすることで大半の業務が行える形になります。
浅く広く習得するか、深く狭く習得するかは得手不得手で決めればよいのではと思います。
急激にインデックス数が減ってしまいました。どうしたらよいですか?
長く情報が更新されていない場合、インデックスのクロール頻度が下がり、インデックスから外れる可能性があります。
単一ごとのページを一つ一つ更新する必要はありませんが、文章を変更したり、ページを追加したりなど、サイトを常に成長し続けられる状態を保ちましょう。
そして更新したら、常にsitemap.xmlを作成し最新の情報をGoogle側に届けるようにしてください。
サイトを大きくしていくのにどれくらいかかりますか?
運営は一日でうまく行くわけがありません。スタートがいくら良くても放置してしまえば廃れていきます。
サイトを大きくすることは、よりお客さん(クライアントやエンドユーザー)の実態に近づくことになるため、繰り返しユーザーの分析を続け、満足の行くサイトにするには最低1年~1年半の長期戦になることを想定しましょう。
この期間をトータルで見て「プロジェクト」として取り組むことが大事です。
専門知識が薄く困っています。何から覚えればよいですか?
現在実務で行っている方は、専門知識よりも自社・自社サービス知識を覚える方が最も良いです。
なぜならば、自社サービスに興味を持ってもらうためにどのような言い回しが良いか、伝わるかの基準を持てるからです。いわば、営業担当と同じです。
一個人の考えではありますが、これからマーケティングやWebサイト運営の勉強をされる場合においては、「正しい情報の集め方」を覚えることが近道かと考えています。
自身の「提供したい情報」がどんな検索キーワードで来てくれるのか、またそういった「検索してくれた人をどうさせたいか」ということを考えることがWebでのマーケティングや運営の第一歩になるのではないかと思っています。
出た数字をもって改善場所を伝える際どのように伝えると伝わりやすいですか?
大前提として「Webを大して知らない人でも分かりやすい」ものである必要があります。
数字を伝えるのももちろん大事ですが、何より「専門用語」をいかに使わずに説明や例えばなしができるかにかかります。
その場にいるメンバーの理解・共有が進めば改善にむけたスピードは早まり、決済決断は早まり、サイトの改善は早く進められます。
ひいてはビジネスチャンスのタイミングを増やすことにも繋がります。
マーケティングでまず大事なことは何ですか?
競合他社のベンチマークがまず挙げられると考えています。
Webサイトのデザインを作成するときもテーマ別に参考になるサイトを見てデザインを起こすことが多いです。
もちろんマーケティングにおいてもできるだけ同じか、似た商材を扱う競合他社をしっかり知る事が自社サービスの醸成につながる近道です。
アクセス解析レポートを作るうえで大切なことは何ですか?
まずは必要以上に情報を入れすぎないようにした方がよいでしょう。
沢山記載することは大切ではありますが、数値を見てもらい理解してもらうには沢山の情報は邪魔になります。
具体的には、資料のボリュームと話するボリュームが同じ位に量を調整すると伝わりやすいです。
年齢別や地域別のアクセスはどんな時に使いますか?
一例ですが、特定の地域や年齢層、それから男女どちらかまたは両方に大きく支持されているのであれば、支持された層のトレンドを狙ったコンテンツや広告ワード、閲覧されてる時間帯に広告費用をかけるなどといった費用投資判断の指標に使えます。
カスタムレポートは使用されますか?
出力が必要な指標が多いサイト(ランキングやある特定の状況下でのアクセス等)であれば、基本的なサマリーを表示するために使用することはあります。
とくに、広告を扱うようなサイトであれば多視点から情報を集めなければならないため、短時間での状況把握をするべく使用することがあります。
一般的な企業サイトや個人サイトであれば、ユーザーサマリーの概要をしっかりつかんでおけば十分だと思います。
Googleアナリティクスの情報でこれだけは見ておいたほうがいいものは何ですか?
まずはサイト全体のアクセス概況がわかるユーザーサマリーを見るようにしましょう。
また、最低でも月単位で数字を比較する必要があります。
見る指標については、セッション数、平均セッション時間、セッション/ページビュー、直帰率はチェックした方が、時系列毎でのサイトの反応が分かりやすくなります。
次にレポートを注視するタイミングについては、何らかのサイトの更新時や、いつでも良いので一週間のうち必ず見る曜日を決めて見るなど、タイミングを予め決めることが変化に気づきやすいです。
Googleのアカウントをとった後、何をすればよいですか?
Googleアナリティクスのサイトに移動し、ログインしてアカウントに入場してください。
なお、アカウント登録した直後であれば、なにも登録されていないはずです。
サイトのアクセス状況を見るにはどうすればよいですか?
すでにGoogleアナリティクスのアカウントがあることが前提ですが、Webサイトを運営している担当者もしくは担当部署にお手持ちのGoogleのメールアドレスをお知らせください。
担当者もしくは担当部署にてアカウント設定を行い、設定完了すればご自身のGoogleアナリティクスのアカウントにWebサイトが追加され、様々な情報が閲覧できます。
権限の状態によっては細かい設定もできるようになります。
記事元のページへ移動その他カテゴリー
- GAレポート作成ツール
面倒なアクセス解析レポート作りはもうやめよう!
- Web担当・運営・解析・SEO問題集
GoogleアナリティクスやSEOに関する問題集を作っています。
- Web担当・運営・解析・SEO用語集
Webや解析などでよく使う単語辞典ページを用意いたしました!
- よくあるご質問
よくいただくお問い合わせ内容の一覧になります。
- お問合せ・情報
当Webサイトについてのお問合せや様々な情報をこちらにまとめております。
- 新着情報・更新情報
当サイトの新着情報・更新情報はこちらから。