ホームページの見栄えを良くするちょっとしたコツ

チェックポイント

Point１．ホームページの顔、ヘッダーはスッキリしてますか？

ロゴやヘッドライン画像、メニューバーなどが表示されているホームページ最上部をヘッダーと言います。

ヘッダーをなるべくスッキリまとめて一覧性が良いページにすると、ビジュアルの印象も高まりますよ。

---

(１)ロゴが大きすぎてバランスが悪く、画面を占めてしまっている

ロゴの余白を取って、サイズを小さくするとヘッダーがスッキリします。

1. リウムスマイル！管理画面の左上の真ん中［PC版：プレビュー］をクリックして、プレビュー画面を開く
2. ロゴの右肩に表示されている赤い鉛筆マーク［編集］アイコンをクリック
3. 「ロゴ画像」の枠内、「ロゴ編集・キャンセル」の［画像編集］ボタンをクリック
4. ロゴの余白が大きい場合、「トリミング」で余白を切り取る
5. ロゴのサイズが大きい場合、「リサイズ」のバーをマウスで左クリックしながら左にスライドし、サイズを小さくする
6. 表示設定画面の左下の［保存］をクリック

(３)大きすぎる文字のせいでヘッダーの縦幅が大きくなってしまっている 

文字を大きくすると、縦幅を取ってしまうので、プレーンテキスト化してみましょう。

また、ヘッダーに表示する文章は簡潔に、最小限にすることをおススメします。

 

(４)メニューバーが２段になっており、スッキリしない印象

「ホーム」「当サロンの想い」と横に並ぶ上部メニューですが、こちらは1段に収めると、ホームページ全体がまとまりスッキリとした印象になります。

このメニューバーにどの項目を入れるかによってお客様が目にする情報は大きく異なってきます。

多すぎず、少なすぎず、載せたい項目を取捨選択して、６～９項目を目安に１行に収めるとよりきれいな見た目になりますよ！

解決の一例として、上部に表示しているメニューを別のエリア（サイドメニュー等）に移動する手順をご紹介します。

(５)ヘッドライン画像が大きすぎて、メインコンテンツにアクセスしづらい

大きすぎるヘッドライン画像は、それだけでページを占めてしまい、画面をスクロールしなければメインのコンテンツにアクセスできず、お客様にとって非常に使いづらいホームページになってしまいます。

ヘッドライン画像には適正サイズがあり、オススメサイズは　幅1200px・高さ320px　です。

また、ヘッドライン画像はPC版とスマホ版別々に設定できます。

縦長はスマホ用、横長はPC用に別々に設定すると良い感じになります。

スマホ用のヘッドライン画像は以下の手順で設定可能です。

1. リウムスマイル！ 管理画面の左上の真ん中  ［PC版プレビュー］をクリックし、プレビュー画面を開く
2. ヘッドライン画像の右肩にある赤い鉛筆［編集］アイコンをクリック
3. 画面を下にスクロールし、「ヘッドライン画像」欄の右側、PC用の画像が入っている枠の下にある「⇩スマホ版詳細設定項目を表示」をクリック