WEBサイトのメインビュジュアル

MotherHeadsのディレクションとデザインを担当しているDJKazuです。今回、自社WEBサイトのトップページのメインビュジュアルを自社制作した動画から静止画1枚に変更いたしました。WEBサイトをリニューアルして2ヶ月は動画にしていたのでサイト更新という意味もあり変更しました。またWEBサイトの離脱率の検証をするのが大きな理由になります。

検証材料（リサーチ）

自社調べになりますが、動画時間と離脱率は以下のような傾向があると思っています。

これを静止画にかえると、どのような結果になるかを試してみようと思います。
これは今後このページでリライトして書き足していきます。

メインビュジュアルとは

メインビュジュアル（別名：キービジュアル/ファーストビュー）はまさにWEBサイトの顔と言われる大切な部分です。ここはデザイナーの腕の見せ所と言わんばかりになります。大げさに言うとここでWEBサイトが決まってしまいます。
例えば、直帰率やコンバージョン率（成約率）に影響を及ぼすことにもなるかと思います。メインビジュアルはユーザーがサイトに訪問した時に最初に目にする要素なので、メインビジュアルの「発言力」や「インパクト」がないとWEBサイトの直帰率（そのページだけ見て離脱してしまう割合）やその後のページの回遊率を下げて、コンバージョン率に大きく影響してしますこともあります。WEBサイトのテーマとコンセプトを盛り込んだモノに仕上げることが重要な課題になります。

実際のフローの紹介

どのようにしているか

メインビュジュアルは、もちろんテーマがあってデザインしています。
今回のコンセプトは弊社のロゴは星なので、星が天空にあるか流れるというのをイメージしています。また京都の企業なので京都感と壮大さをテーマに素材選定の決定をしました。ここまでをコンセプトとしてもってくるのにポストイットにイメージの単語を書いて壁にはってテーマ出しをしています。いろいろなデザインキーワードをだして情報整理をしています。
相手になぜ？と聞かれたときにも理由を答えられるし、理由なき行動ではないことを実証するためにしています。
イメージができれば素材選定をしデザインをします。今回はSVGアニメーションで動きをつけた仕様にして、少しかわったようにしています。

どんなパターンがあるか

自社のメインビュジュアルのパターンを紹介します。ただ種類は紹介しますが、デザインはお見せいたしません。それは弊社のサイトに来ていただいた時のお楽しみにさせていただきたいからと考えているからです。
ただ、それでは見逃されるかたもおられるので下記に概要だけ記載しておきます。

1. 動画+SVGアニメーション=妻の実家の宮津で撮影。海を背景に自社のロゴの星を連想して流れ星からくる疾走感とかけて制作しています。（掲載期間は2019年11月から12月20日まで）
2. 静止画+SVGアニメーション=自社のロゴの星を連想して天空にある、もしくは流れ星、京都感+壮大な景色をテーマにしています。（掲載期間は2019年12月21日から12月31日までで2020年1月11日からまた戻します）
3. 静止画1枚=お正月という期間限定でテーマは、お正月という内容で制作しました。（掲載期間は2020年1月から1月10日までにしています）
4. カルーセル（3枚仕様）=公開していませんが掲載しました。（7/7日付）
5. フェード（3枚仕様）=公開していませんが掲載しました。（7/7日付）

といった内容で、すでに制作しています。
弊社では、PCverとスマホverとを必ず制作いたします。それはスマホ用に高さを持たす必要があります。PCverだとスマホverに対して高さが足りないからです。なので、1つの部分でも2パターン制作しています。ここをご理解いただいていないお客様がよくおられて説明をするたびに驚いておられます。
静止画1枚なら2パターン、カルーセルやフェードの3枚組なら合計6パターンとなります。あくまでも、自社のやり方となります。ご参考にしていただければと思います。

メインビュジュアルは、季節やそのときのTPOで変えていくので楽しみにしてください。変更した際にはMotherHeadsのFacebookページもしくはMotherHeadsのTwitterページで案内していますので、いいね！もしくはフォローをしていただけるとご案内が可能です。

むずしかったこと

自分でいうのはなんですけど、様々な業種のクライアント様のデザインはしてきて場数は踏んでいるつもりなんですがWEB制作という業種はコンセプトを考えるのに今までのクライアントワークと違って、ものすごく時間がかかりました。他業種はイメージがすぐに湧いて制作できるんですけど自分自身でも不思議に思っています。最大の問題は？と聞かれるとアイディア出しに苦戦しました。
なのでカルーセルとフェードの3枚組はアイディア合戦になっていました。このようなメインビュジュアル制作の過程やアイディア出しの捻出などは他のデザイナーさんとも意見交換したいなと常々思っております。そういう場があれば参加したいです。

まとめ

デザインはクライアントの要望を取り入れつつ、なおかつ綺麗に見せるというミッションであるため難しいと常々思っています。しかも判断や評価も自分ではなく相手がされることを念頭において制作にかかって納めます。特にメインビュジュアルは顔になるので難易度はあがってやっかいなところではありますが、やりごたえはあります。
弊社ではディレクションからデザイン、コーディング（プログラミング）、CMS構築まで一貫してやっておりますが、デザインだけやコーディングだけ、CMS構築だけという依頼も受けております。もしよろしければ、お問い合わせからお気軽にお問い合わせください。どうぞよろしくお願いいたします。