【スマホデザイン】ファーストビューの作り方を考える

もうすぐゴールデンウィークですね。

今年も出かけられそうにないのが悔やまれます、、、

こんにちは！アウトドア系引きこもりのオザワです！

サーフィン？好きですよ！ネットのね！

 

はい、このコロナ渦でWEBサイトをみる時間が増えた方も多いのではないでしょうか？

特に近年ではスマホファースト化が加速し、サイトによってはスマホ版のデザインのみなんてものもありますね。

WEBデザインをやる上で、特にこの「スマホファースト」の流れではスマートフォンでの表示で閲覧結果に大きく左右されるようになってきました。

その中でもデザイナーの腕を問われるのがファーストビュー(以下FV)です。

 

ユーザーがWEBサイトに到達して、次のアクションに移るまでの時間はおよそ３秒と言われています。

私がやっているLPOで計測した結果もおおよそこの数値でした。

 

この３秒がスクロールされるのか、ボタンを押されるのか、

単純に必要な要素を詰めればいいのか。見栄えをどう変えればいいのか。

サイトの形態によってどんなFVが使われているのか他社様の事例から考察してみました。

 

ランディングページ、コーポレートサイトでの違いは？

 

 

※ここでのランディングページは狭義の意味でのいわゆる商品LPとなります

 

 LPのスマホ用FVってどうなってるの？

 

 

パッとみた時、まるで広告のように画面いっぱいに商品のビジュアルとキャッチコピー、その他の強みだったり特徴が読み取れます。

 

先ほど書いたように、ユーザーがこのページを開いた時に【興味を持って読み進んでもらう=スクロールしてもらう】ことがLPでの最重要課題となります。

 

そのためにはまずちゃんとスマホでの画面いっぱいにビジュアルを作り、必要な情報が瞬時にわかるように配置する必要があります。

 

スマホのFVの大きさは？

 

この部分ははっきり言ってどんどん変わっています。

まず、iPhoneやandroidでも縦横比は違う上にiPhoneシリーズの中でも大きさは違います。

iOS（iPhone）の解像度
端末（iPhone）	サイズ（inch）	CSSピクセル（コーディング）	デバイスピクセル（画像作成）	縦横比
5・5s・SE(1)	4	320 x 568	640 x 1,136	1:1.775
6・6s・7・8・SE(2)	4.7	375 x 667	750 x 1,334	1:1.779
[6・6s・7・8] Plus	5.5	414 x 736	1,080 x 1,920	1:1.778 (9:16)
12 mini	5.4	414 x 780	1,080 x 2,340	1:2.167
X・XS・11 Pro	5.8	375 x 812	1,125 x 2,436	1:2.165
XR・11	6.1	414 x 896	828 x 1,792	1:2.164
12・12 Pro	6.1	390 x 844	1,170 x 2,532	1:2.164
XS Max・11 Pro Max	6.5	414 x 896	1,242 x 2,688	1:2.164
12 Pro Max	6.7	428 x 926	1,284 x 2,778	1:1.385

 

Android の解像度
端末	サイズ（inch）	dp解像度 （コーディング）	デバイスピクセル （画像作成）	縦横比
XPERIA	4.6	360 x 640	720 × 1,280	1:1.778 (9:16)
	5		1,080 × 1,920	1:1.778 (9:16)
	5.2
	5.5		2,160 × 3,840 (4K)	1:1.778 (9:16)
	5.7		1,080 × 2,160	1:2
	5.8		2,160 × 3,840 (4K)	1:1.778 (9:16)
	6		1,440 × 2,880	1:2
	6.5		1,644 × 3,840 (4K)	1:2.336

 

この中で最も使用されているものはiPhone6〜8、ついでXperiaとなります。

また、コーディングの際はピクセル数は幅320pxで作られる場合が多いですが、iPhoneなどレティーナディスプレイを採用していると320pxの画像では解像度が足りず、せっかく綺麗に作っても画像が荒れてしまうので３倍ほど大きくした画像を作成しておくと綺麗に表示されます。

 

ちなみに僕は幅960pxで作成しています(コーディングの３倍の大きさで作るとわかりやすいので)

縦幅に関しては、少し前までは横9:縦16、ここにバックボタンなどの要素が入るので1500pxで作成していましたが、

最近では徐々にiPhone11、12とさらに約1:2.1などさらに縦幅の長い機種が増えたこともあり、ビジュアルの全体としては縦1900pxで作るようになってきています。

(9:16なのか1:2なのか新たな論争が起きそうですよね、、、)

 

どんなデバイスが使われているかはスタットカウンターを確認してみたり、結構毎シーズン解像度の記事を上げてる方がいるので確認すると良いかと思います。

 

FVの要素ってどう配置すればいいの？

 

PC版では、人間の心理上【左上から見る】という統計があるため左上から【Z型】や【F型】で要素を配置していましたが、スマホ版での基本的な視線は【I型】になります。

そう、上から下に。です。

 

また、多くの人がスクロールの時に画面の下半分に指を当てて動かすため、キャッチコピーは真ん中よりも上に配置することで目に止まりやすくなります。

 

 ECやコーポレートサイトは違うの？

 

 

まずは、LPとECのユーザー導線の違いを考えてみましょう。

LPでは、【いかにそのページで購入に繋げるか】が焦点となりますが、ECでは【いかにスムーズに回遊させて購入に至るか】が焦点となります。

 

そのため、LPでは極力他のページへの遷移はさせず、その商品を主役として構成しますがECでは、FVのキービジュアルがイチ押し商品のバナーであったり、検索、商品一覧や、画面の下半分ではオススメ商品やランキングなど、ユーザーの興味を引き、下層ページへ遷移させる工夫がされています。

 

タイプ別にみてみよう

 

先ほどまではLPなのかECやコーポレートサイトなのか大きく２つに分けていましたが次はもう少し掘り下げてそれぞれの作りを考察してみます。

①健康食品LP

LPらしく最初に目が止まるポイント、画面の上半分にキャッチコピーと連想させるイメージを配置しています。

また、図を見てもらうとわかるように1:1.6の黄金比に沿った配置がされており、ビジュアル全体が自然に目に入るようになっています。

 

個人的なポイントとしては、この要素の中での優先順位の付け方で、パッケージがあまり目立たない(=邪魔をしない)配置になっていることです。

健康食品LPにおいては実はパッケージはそこまで重要な要素ではなく、それよりもベネフィットや成分など【これを飲むとこんなにメリットがある】と伝える部分が重要になります

※パッケージで高級感だったりライフスタイルに馴染ませるデザインを取り入れている場合はパッケージを強調させる場合も多分にあるので絶対ではありません。

 

②ヘアケアLP

こちらは最初に目が止まる位置に実績を並べています。

そこからキャッチコピー→特徴という流れになっています。

こちらも黄金比を当ててみると面白い結果が出てきました。

上の図を見ていただくとわかるように、それぞれの要素の高さは1:1.6の比率で構成されています。

偶然かもしれないし、もしくは試行錯誤の中で組み替えを行ったのかもしれませんが、各要素が自然と目に入る良いFVだと思います。

個人的なポイントとしては、これに限らずですが、モデル画像の視線に合わせてユーザーもそちらを見る傾向があるため、商品画像と特徴も紫山と印象づけられているなと感じます。(たぶんね。)

 

③飲料系LP

 こちらは先ほどまでのLPとは少し違い、ブランドサイトのような【イメージ】を重視したデザインになっています。

基本的にはこちらも黄金比に近い配置をしており【広告】に近いつくりとなっています。

要素を必要最低限に抑え、キャッチコピーと商品画像、特徴の3点に絞ることでビジュアルを大きく、ブランドイメージをより強く打ち出しています。

 

④コーポレートサイト/キュレーションサイト

某大手広告代理店様のサイトですね。仕事ください。

それはさておき、こちらも黄金比を当ててみると面白い結果が見れます。

まず、キービジュアルについては画面上部には会社名、メインコンテンツのバナーが設置。

このバナーは訪問者がよく見るページへ遷移するバナーにすることでユーザーが回遊しやすくなります。

また、黄金比を見ると要素が綺麗に1:1.6に分かれており、画面真ん中〜下では指でスライドさせてコンテンツが選びやすく、この画面からユーザーの求めている様々なコンテンツに遷移できるようになっています。

 

⑤ECサイト(モール)

ECサイトに関しては、商品を売っているサイトではあるものの、LPよりは先ほどのコーポレートサイトに近いつくりとなっています。

さらにECでは、よりユーザーの目的のページに誘導できるよう、検索窓やカテゴリーを最初に設置していたり、画面下部で商品のサムネイルがフリックで探せるような工夫がされています。

画面全体の配置としては、スマホを手で持ったときにを想定してUI設計がされており、先ほど書いたように検索やカテゴリーに目が止まるように配置し、メインビジュアルが指で隠れないように画面の真ん中、商品サムネイルは操作がしやすいように画面下部となります。

また、下層ページも同じような配慮がされており、画面上でサムネイルなどビジュアル、画面下部にアクションを起こすポイントを設置しています。

 

まとめ

様々なサイトがありますが、その多くは「黄金比」で説明がつくようなバランスになっています。

(これはデザイナーが意図しているかは別ですが)

以前ブログで書きましたが、

黄金比＝本能的に見やすいバランス=情報が伝えやすい

という観点で見ると、目的によって、どんな優先度で見せていくかによっておのずとFVは決まっていくのかもしれませんね。

LPとECでは「直接購入につなげるか」「回遊させて購入につなげるか」この部分がポイントになります。

 

FVの作成で迷ったらまず、【サイトの目的】【要素の優先度】を決めてあとは黄金比に当ててみるのも美しいFVを作る近道になるかもしれません。

それではまた！