ホームページを開いて最初の3秒。
ここで「見続けるかどうか」が決まります。
今日はホームページのファーストビューの、
構造とデザインの話をさせてください。
3秒で判断される、という現実
インスタでも最初の数秒の「フック」が大事、といわれますよね。
ホームページのファーストビュー（FV）も同じです。
FVとは、サイトを開いたときに最初に映る画面のこと。
本でいえば表紙です。
ここで「なんかいい」「自分向けだ」と感じてもらえなければ、どれだけ下に良いコンテンツがあっても読まれません。
万人に刺さる必要はない。ターゲットに、確実に届けること。
それがFVの役割です。
よくある「もったいない」FVの例
先日、あるBtoB企業のサイトを見ていて気になったことがありました。
サイトを開いて一番、FVに大きくこう書いてあったんです。
We are your Concerge.
鉄鋼業界向けのサービス会社だったとします。
ターゲットは50〜60代の製造業の方々と思われます。
そのひとたちがサイトを開いて、最初に目にするのがこの一文。
「…？」 ってなると思いませんか？
何の会社？誰向け？何をしてくれるの？
心が遠のく...
英語使いたいのは、めーっちゃわかります！
なんとなく格好良くなりますしね。
でも、キャッチコピーとしては機能していない。
なんの会社かさっぱりわからない。
これがFVで損しているサイトの典型です。
このFVは、 例えばこうすると伝わります。
（大きな字）
”日本の鉄鋼事業の搬送をサポートする”
（小さな字）
We are your Concierge for global business
英語は「かっこよさ」の装飾として使う。
意味を伝えたいなら日本語で書く。
これだけで印象がぐっと変わります。
（↑先日お客様にご提案したFVです。日本語コピーでも工夫次第でかっこよくできます。）
もし英語をドンと載せるならこうします。
We are your concerge.
-日本の鉄鋼事業の搬送をサポートする-
日本語で事業説明をサブコピーとして入れるのです。
こうすれば、英字を使いつつも、何の会社かすぐにわかります。
それでもFVに日本語を入れたくなぁ～い！というこだわり屋さんは、
必ずFV直下に導入文を設けましょう。
そこで、短いながらもしっかりと事業を説明します。
「写真」か「コピー」か、主役を決める
FVのデザインで最初に決めるのは、「写真とコピーどちらを主役にするか」です。
主役が2つあると野暮ったくなる、というデザインの基本があります。
コピーを主役にする
思想・メッセージが強い事業
コンサル、教育、士業、ライター、サポート系など。
言葉でひきつける業種。
写真を主役にする
ビジュアルで世界観を伝える事業
美容、飲食、アパレル、施工、クリエイティブ系など。
見た目が商品に近い業種。
ただし、これは業種だけで決まるわけじゃないです。
以前、思想がとても深い美容室のFVを制作しました。
綺麗な写真素材をいただいたのですが、それよりもキャッチコピーを前面に出す構成を選びました。
その事業の「何が一番強いか」で判断します。
スマホ、9割時代のFV
いまはサイト閲覧の9割がスマホといわれています。
Nariaでは制作の優先順序をスマホファーストに切り替えました。
スマホの画面は小さい。
世界観の演出はどうしてもやりにくい。
でも、その制約の中でどこまで「なんかちがう」と感じてもらえるかにこだわっています。
具体的には、ほんの7mmの余白、細いラインひとつ、動きの少し違うアニメーション。小さな英字の装飾。
そういった積み重ねで「あ、おしゃれ」という印象が生まれます。
（↑スマホFVのレイアウト例 素材や内容によって使い分けます）
FVと下層は、一冊の本
表紙が気になる → 本を手に取る → 中身を読む。
サイトも同じ流れです。FVで興味を持ってもらって、下層でサービスの詳細や事業への想いを語り、信頼につなげていく。
ただし、FVの印象と下層の内容がちぐはぐだと、不信感になります。
表紙は機能的・堅実な雰囲気なのに、読み進めると型破りな内容だった、みたいなケース。
FVもTOPも、サブページも。
サイトはトータルで一貫している必要があります。
Nariaでは、その「全体の違和感のなさ」にこだわって制作しています。
雰囲気も、伝える力も。
Nariaでは、
FVは必ず2案ご提案しています。
何を主役にするか、どんなトーンが合うか、比較することで方向性が見えやすくなります。
「なんかいい。」も、
「ちゃんと伝わる。」も大事。
そのバランスをはかりながら、制作しています
ホームページ制作をご検討の方は、ぜひお気に入り登録してください☺
お問い合わせも、お待ちしております。
.png)
.png)
