エステサロン 理美容 ホームページ ファーストビュー例

エステサロンのホームページを【Luxeritas】で作る

エステサロン 理美容 ホームページ ファーストビュー例をご紹介します。

何を隠そう、当社は製造業や学習塾関連だけではなく、ベルマン化粧品の通販を営んでいる老舗でもありまして、エステサロン様やヘアーサロン様に卸させていただいてお付き合いがあることもあって、女性向けのホームページにもちょっと長けています。

ヘッダー部のサイトロゴ画像やメイン画像だけをお作りになりたい場合もお請けいたしますのでお気軽にお問合せ下さい。

最上部 帯状メニューを表示させる場合

【Luxeritas】のスキームに「rosea-et-rubrum」を使い、画面全幅をワイドに利用するスタイルで作るファーストビューの例です。

最上部の帯状メニューのローズ色のラインが鮮やかです。
このローズ色はこのスキーム「rosea-et-rubrum」の基本色ですが、もちろん自由に変えることができます。

メニューも記事内からも選べますし、FaceBookやTwitterなどのSNSへのリンクボタンとしても使えます。
アイコンはFont Awesome からチョイスすることで、高速性が担保される上にオシャレ感も出ます。

詳しくは資料「106awesomeを使ってみよう」をご一読ください。

最上部 帯状メニューを非表示にする場合

最上部の帯状メニューを表示しないと、すっきりとしたオーソドックスな作りになります。
SNSに力を入れていなければ、こちらの方がシンプルでいいかもしれません。

ちなみに、いずれも柔らかい感じを出すためにヘッダー全体の背景には色ではなく画像を使っています。

基本的に背景色を設定する場合は、よほど色合いを考えないとダサくなりますから、柔らかい背景画像にするか、白のままが最適です。

ファーストビューのフレーム概略説明

基本的には、サイトロゴ（あるいはサイト名のテキスト）とメインビジュアル画像をこの配置で置くことが基本です。
ちなみに、SEO最強の【賢威】も全く同じ思想です。

もちろんメインビジュアル画像を背景画像にして、最上部から全面的に画像にし、その中にサイトロゴが存在する形にもできますが、SEO的にもレスポンシブ的にもおすすめはできません。

メインコピーとサブコピーをテキストの形で中央に入れていますが、位置も色も自由に変えることができますし、何も記述しないこともできます。

また、文字を散りばめた画像にすることもできますが、あまりごちゃごちゃ入れると、スマホでは画像として縮小されますので、文字が読めない場合が出てきます。

エステサロンの場合のファーストビューは、この程度がいいのではないかと思います。

いずれにしても、【Luxeritas】で作る以上、このフレームさえ守っていただければ、強く速いサイトの土台は出来上がります。

【賢威】で作った当社化粧品通販サイトのファーストビュー

基本構成はサロンのファーストビューと同じです。

違う点は、文字はメイン画像の中に埋め込んでいるという点です。

画像全体に文字が分散していますので、スマホでは文字が小さくなり、はっきりと読み取れなくなりますが、化粧品販売サイトでもあり、ビジュアルでさえあれば特に問題はないかと判断して、このようにしています。

次に、画像の高さは画面幅いっぱい表示でサロンよりも高さが100pxほど小さく、ファーストビューでコンテンツ部が見えます。（15インチPC）

そのため、高さがこれ以下の場合は、全ページにメイン画像を表示しても違和感がないと考えます。

一方、サロンの場合のように画面全体に画像が飛び込んでくるメイン画像であれば、トップページだけにしておいた方が無難です。