- 投稿日：2024/07/13
- 更新日：2025/11/06
前回の講座ではページの準備をしました。
ここからはホームページのコンテンツ部分を作り込んでいきます！
今までは設定ばかりで少し大変だったと思いますが、
ここからの作業は楽しい（はず）です！🙌
今回はこちらのファーストビュー（メインビジュアル）
と呼ばれる部分を作っていきます！
1．色の設定
ファーストビューの前に、まずサイトで使う色を設定しておきます。
どのような色を使えば良いかはデザインの前提によりますが、
今回はシンプルに、ロゴ画像と近いイメージの色を設定することにします。
※この色設定はホームページ全体に適用されます。
🔶手順🔶
①「外観」▶「カスタマイズ」▶「色」
②キーカラー「色を選択」▶「#789176」と入力
③カスタムカラー 1「色を選択」▶「#f38536」と入力
④「公開」
これで色設定は完了です！
少し分かりにくいですが、
ヘッダーメニューにある「ホーム」の下線も、
キーカラーのグリーンになっていますね！
使う色を決めて最初に設定しておくことで、
作業しやすくなりますし、サイト全体にも統一感が生まれます。
2．ファーストビュー（メインビジュアル）作成
それではファーストビューを編集していきます。
2-1．画像の反映
2-1-1．画像サイズ変更
LightningではPC版の推奨画像サイズが1900×600pxとなっているので、
こちらの無料ツールを使ってトリミングします。
https://www.iloveimg.com/ja/crop-image
（今回、スマホ版は750×1000pxとします）
💡Point
PC版とスマホ版でサイズを変える理由は、
PCは横長、スマホは縦長と画面幅が異なるので、
それぞれの画面サイズで無理なく表示できるようにするためです！
ここからはフリー画像を使用するので、
同じ画像を使って進めたい方は準備編をご覧いただき、
ダウンロードしてからこの先に進んでください。
🔶手順🔶
①「画像を選択」からアップロード
②トリミングオプションに以下の数値を入力 ▶「画像の切り抜き」
幅 (px)：1900
高さ (px)：600
X位置 (px)：20
Y位置 (px)：568
③「切り抜かれた画像をダウンロード」
これでPC版画像の切り抜きが完了しました！
同じ手順で、スマホ版の切り抜きを行ってください。
スマホ版の切り抜きの数値は以下のようにしてください。
幅 (px)：750
高さ (px)：1000
X位置 (px)：340
Y位置 (px)：280
2-1-2．トリミングした画像の反映
🔶手順🔶
④「外観」▶「カスタマイズ」
▶「Lightning トップページスライドショー」
⑤「画像を変更」（ [1] スライド画像のものを変更）
⑥「ファイルをアップロード」▶「ファイルを選択」
⑦「代替テキスト」を入力 ▶「画像を選択」
これでPC版の画像が反映されました！
続いてスマホ版を反映していきます。
⑧「画像を選択」
※PC版と同じ方法で画像を反映してください。
⑨「[1] スライド画像の代替テキスト」を入力 ▶「公開」
これでファーストビュー画像の反映が完了しました！
さらに下部にある「[2] スライド画像」は必要ないので、
「削除」をクリックして消しておきましょう。
⑩「削除」▶「公開」
これで1枚の画像だけを表示することができます！
もし2枚以上の画像を表示したい場合は、
「画像の選択」から1枚目と同じように設定してください。
（最大3枚まで設定でき、スライドショーで表示されます）
2-2．テキストの反映
次に画像の上に表示するテキストを変更します。
デフォルトでは英文が入っているので、こちらを編集していきます。
🔶手順🔶
⑪「スライド [1]」を以下のように設定⇒「公開」
[1] スライドタイトル：体も心もふわふわに
[1] スライドテキスト：あきらめていたそのツラさ、当院におまかせください。
[1] ボタンのテキスト：予約する
[1] スライド画像リンク先URL：https://beauty.hotpepper.jp/
リンク先を別ウィンドウで開く：チェックを入れる
[1] 位置：右
[1] スライド上の文字色：「色を選択」⇒「#ffffff」と入力
文字に影をつける：チェックを外す
これでテキストの反映が完了しました！
設定する前より文字も見やすくなりましたね！
もしちがう画像を使っている場合は、
配置や文字色など見やすいように設定を変えてください。
💡Point
この「外観」⇒「カスタマイズ」内では、
画面下のPC・タブレット・スマホのアイコンから、
それぞれのデバイスでの表示を確認することができます！
デバイスごとの表示を確認したいときに使ってみてください✨
まとめ
お疲れさまでした！
これでファーストビューが完成しました。
次回は「こんなお悩みありませんか？」のセクションを作っていきます！
