ファーストビューのトレンド

webサイト制作がはじまりました。

こんにちは、ナカガワです。

先週の午後からwebサイト制作が始まりました。
お題は架空の接骨院「ふたば接骨院」のwebサイトを作る、です。

それを受けて本日は、HP作りに欠かせないキービジュアルの作成をしました。

実は土日にラフを書いて構成だけは練っていたのですが、やっぱり実際に作るとなるといろいろと予定通りにはいかないものです。

多分、場数を踏んで経験を積んでいけばこのようなつまづきはどんどん減らせると思うのですが、いかんせん私はグループ制作を含めたら数えるほどしか制作経験がありません。
なので、

「あれってどうだっけ？」
「これってどうでいいんだっけ？」

と、少し進んで壁に当たって、Google先生に教えてもらって解決して、また壁に当たってを繰り返して少しずつですが形にしていってる感じです。
実習中にせめて下層ページ1ページ分ぐらいは終わらせたいです！

そこで本日は私も悩みましたファーストビューのサイズについてお話させていただきます。

ファーストビューとは

ファーストビューとは、みなさんがブラウザを表示したときにスクロールをしないで画面に表示される範囲のことです。
一度印刷すれば、サイズは誰の手元でも変わらないDTP(紙媒体広告)とは違い、webはユーザーそれぞれのデバイスによってファーストビューは違います。
しかも、時代によってもどんどん変化してきます。

そして私が今回のサイト制作で一番最初に困ったのが、何を隠そうこのキービジュアルです。

といいますのも、最初に申し上げましたようにキービジュアルを現在制作しているのですが、このファーストビューが決まらないとキービジュアルのサイズがきまらなくて、キービジュアルのサイズが決まらないと、今度は写真集めでどのサイズを使おうか決められないのです。

だから、ファーストビュー設計をしないとなかなか前に進まないのです。ちなみに、実習担当の小薮さんのアドバイスでは、キービジュアル→ヘッダーの順で作ると後でぶれにくくなって制作しやすくなるというアドバイスを頂きました。

ファーストビューのトレンド(2019年2月4日現在)

そこで、今回私が参考にしたサイトは海外サイトの statcounter です。こちらには、デバイス、年代、国籍、と詳細なデータを保管していますので、必要な情報をとても分りやすく手に入れることができます。
以下には、そこに記載されている2019年2月4日の時点でのシェアを記します。

＜PC＞

1位 1920×1080

24.93%

2位 1366×768

13%

やはり大画面での表示がトレンドになっています。1920×1080とは、11～18型のノートパソコンや19～26型のPCモニターに採用されている解像度です。

＜スマートフォン＞

1位 375×667

41.93%

2位 375×812

12.64%

こちらも一昔前のスマートフォンに比べて大画面での表示がトレンドです。375×667とは、日本でシェアの高いiphoneですと 6、6s、7、8、あたりになります。
最近出たXやXsが2位と同じ375×812になります。

まとめ

全体的にどんどん大きくなってきているのが分ると思います、多分今後もこの傾向は変わらないと思います。どのメーカーも高精細、広ディスプレイをPCもスマホも搭載して絵作りを売りにしていますから、私たちつくる側もそれに十分配慮しないといけなくなるでしょう。
これが4k当たり前の時代になると、一体どれだけ長大な写真を使わないといけないのか。切り抜いて加工するだけで相当な労力が必要そうですね。

今回私は、1920×1080でいこうと思っていますが、なにぶん写真素材がなかなか見つからないので960というオーソドックスなサイズでキービジュアルを作っています。
ゆくゆくは、実力をつけて画面いっぱいにどーん！と広がる大きな一枚絵を扱ってみたいです。

そのためにも、今は日々精進です。実習も来週までとなっていますので、寸暇を惜しんで励みたいと思います。

お読み頂いてありがとうございました。