練習用@鍼灸院WPテンプレート【OASIS】

トップページの画像を作ろう2

トップページのイメージ画像は、院内の写真を載せたいです。私もそうですが、鍼灸院を探している患者さんは、治療院の中の雰囲気を知りたいんだと思います。

その通りです。あと、どんな先生が担当してくれるかを知りたいですね。恥ずかしがらずにご自身の写真を載せるのが良いと思います。

鍼灸院ホームページは、院の内装画像にキャッチコピーを重ねる形が多いと思います。また、チラシのPOPっぽい感じも演出できますので、文字の配列など工夫して、訴求力のあるが画像を作ってください。

例えば、画像作成の際にキャッチコピーも画像側に入れてしまえば、調整の手間が省けます。以下は実際に作ってみた画像です。

数枚の画像を並べると横長に良対応
文字入れや画像切込み
POPっぽく

次に、スマホ画面専用のトップスライド画像を作りましょう。サイズ比がやや正方形に近い形が良いです。PC画面用の画像をそのまま使うと細長すぎて、スマホで見たときに、いまいちなデザインとなってしまいます。
実は、今は多くの人がスマートフォン(アイフォン)でホームページを見ます。

ですから、スマホ画面の見え方を優先しましょう。これをモバイルファーストと言います。

トップスライダー画像の設定は「外観」→「カスタマイズ」→「トップスライダー」です。すでに入力されているダミー画像やテキストは削除して、画像を差し替えてください。

◆以下は、あまり使用しない機能です。
Lightningのトップスライドショーは、「背景画像」と「キャッチコピーテキスト」の二重構造になっています。そのため、画像と文字は、それぞれ別に修正が可能です。

この仕様で難しい点は、「画像の色合い」と「文字色」のコントラストを考える必要があることです。画像と文字を同色系にすると文字が殆ど見えないという不具合が生じます。

デオルトの設定

キャッチコピー(スライドテキスト)は「左寄せ」「中央寄せ」「右寄せ」の3タイプから選ぶことができます。PC画面やスマホ画面で確認しながら、画像と文字の配置バランスを調整する必要があります。

この記事を書いた人

目次