ファーストビュー作成

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

本日は先日のキービジュアルの修正とヘッダーの作成をしました。
今回私がつくるのは、架空の接骨院「ふたば接骨院」です。
阿波座近くにある、「むちうち施術」が得意な院長が、お客様のあらゆる不安を0にしてくれるという素晴らしい接骨院さんを想定しています。
しかも、整骨院・弁護士と連携しているといういたれりつくせりなところ！
もし存在してたらすごい人気がでそうですね。

それらの魅力が十二分に伝わるようなサイト作りができたらと思います。

制作順序について

では、実際に作るとして、具体的にどういう順番で作ればいいのかといいますと、制作に入る前に実習担当の小薮さんから制作の順番についてアドバイスをいただいていまして
基本的に

キービジュアル
↓
ヘッダー（←現在ココ）
↓
フッター
↓
メイン

の順番で作ると良いそうなので、私もそれに沿って現在制作しています。

ちなみになぜ、上から下につくらずにキービジュアルから作るのかといいますと、そのほうが制作過程においてブレにくくなるからだそうです。
昨日の「ファーストビューのトレンド」でもお話しましたが、ユーザーはシビアで一般的に「4秒」でそのサイトに留まるか離れるかを判断します。

なので、まずはサイトの顔とも言えるファーストビューを作りますが、ファーストビューとは基本的に「ヘッダー」と「キービジュアル」が中心的構成要素です。
さらに、ヘッダーとキービジュアルは、ほぼキービジュアルのほうが大きいので、キービジュアルから先に作ると、それに合わせてヘッダーのサイズや配色、フォントなどが決まるわけです。

つまり、サイトの「顔」ともいえる「キービジュアル」にあわせて他の要素も、配色やフォント、配置などを決めていけば日をまたいだりしても最初のイメージやコンセプトからブレずに制作する事ができるということです。

この辺は訓練校では習わなかったことだったので、多分こうして企業実習に来ていなかったら普通に上から下に作っていたと思います。

キービジュアル

キービジュアルをお見せする前に、まずは今回の制作に際してのコンセプトなどを少し紹介させていただきます。

サイズ：960×450
コンセプト：「ユーザーにベネフィットが一目で伝わる」
イメージカラー：柔らかい印象を持っていただきたいので、「ブライトイエロー」を基調にして、アクセントで温かさを感じてもらえるよう「オレンジ」を入れる

あとは、もろもろ詳しく設定しているのですが、字数の制限と、何より恥ずかしいので、割愛させていただきます。

ではまず、最初に作ったものを。

うーん、今見るとなんだかいろいろと突込みがわいてきますが、何よりも問題なのは左右でトーンが違うことです。左のベタッと塗ったいかにも「素人です！」という感じと、右の「ほっこり」落ち着いているお姉さんのリラックスした「大人」の感じがすごいミスマッチしています。

なので、まずは左右でばらばらになっている絵をもっと一体感をだします。
そして、もっと右のお姉さんの「大人」の印象に近づけていきます。左よりも、右のほうが最初に決めた設定に近いです。

ということで、実習の小薮さんにチェックバックしていただいた後がこちらです。

 

最初よりもだいぶ柔らかい感じがでたのではないでしょうか。
バナートレースで学んだグラデーションとぼかしをここぞとばかりに使っています。
あと、真ん中の「０」がちょっと割る目立ちしていたので、全体に色をなじませました。

さらに、院長の画像を載せて来院する方により安心していただこうとしました。

ですが、なんかこう、もろもろまだばらばらですね。特に「当院は～」から「～したいと考えています」がなんだかか一つの文に見えないです。

ということで、2回目のチェックバックを終えて、修正しましたのがこちらです。

問題だった「当院は～」の文章と「０」がより一体になったのではと思います。
さらに、院長を大きくして、より自信をもってお客様に接しているという感じがでているのではないでしょうか。

そして、ヘッダーと組み合わせたのがこちらです。

まだまだ文字詰めやレイアウトがどこかしっくりきませんが、ここで延々していますと後のパーツの制作が終わらなくて、最悪コーディング未実装なんてことになりかねません。
なので、ひとまずはこれでいってみたいと思います。

最後に

職業訓練を受けようかどうか悩んでいらっしゃる方、もしくはこれからwebを学ぼうと考えていらっしゃる方に少しでも役立てればいいかと思い、今回このように制作過程を載せています。
が！　いやはや恥ずかしいです。もう、穴に入りたいぐらいです。

もっと自分に実力があれば、、、そう思わざるを得ないです。
はやく、自信を持っていろいろな方に見てもらえるようなサイトを作れるようになりたいです。

そのためにも、日々精進です。

お読みいただきありがとうございました。