メインコンテンツにスキップ

ヘッダー画像を編集する

ウェブサイトの上部にある大きなバナー画像を変更して、サイト全体のビジュアルトーンを設定します。

対応者:Brian
今日アップデートされました

ヘッダー画像を編集する

ウェブサイトの上部にある大きなバナー画像を変更して、サイト全体のビジュアルトーンを設定します。

ヘッダー画像はウェブサイトの上部に表示され、訪問した瞬間にゲストを迎えます。人々が最初に見るものの1つなので、大切にしましょう。

ヘッダー画像とは?

ヘッダー画像(ヒーロー画像またはバナーとも呼ばれる)は、ウェブサイトの一番上にある大きな画像です。通常、ページの全幅を占め、サイト全体のビジュアルトーンを設定します。

以下とは異なります:
- ページヘッダー画像: 特定のページ用の個別画像
- 背景画像: コンテンツの背後にある画像
- ロゴ: サイトのロゴまたは名前

重要な理由

第一印象。 ゲストが最初に見るビジュアルです。

雰囲気を作る。 ビーチウェディング用のビーチ写真、フォーマルな結婚式用の優雅な会場ショット。

パーソナルタッチ。 お二人を一緒に写したり、結婚式の場所をハイライトしたりします。

ビジュアルインパクト。 美しい画像はサイトを思い出深いものにします。

ヘッダー画像を編集する手順

  1. ウェブサイト > ビルダーに移動します

  2. サイト設定をクリックします

  3. ヘッダータブを選択します

  4. ヘッダー画像をアップロードをクリックして、デバイスから新しい画像を選択します

  5. 保存をクリックします

新しいヘッダー画像がサイトの上部に表示されます。

適切な画像を選ぶ

高解像度。 ヘッダー画像は大きいです!少なくとも1920x1080ピクセルを使用してください。

横長の向き。 横向き(ランドスケープ)の画像が最適です。

明確な焦点。 異なる画面サイズでも写真の重要な部分が見えるようにします。

高品質。 ぼやけたりピクセル化された写真は使わないでください。

適切なトリミング。 ヘッダーは画像をフィットするようにトリミングすることがよくあります。重要な部分が切り取られないようにします。

画像のアイデア

お気に入りのエンゲージメント写真。 お二人が素敵に写ったもの!

会場の外観または内装。 結婚式を挙げる場所。

景色の良い場所。 ビーチ、山、意味のある都市のスカイライン。

クローズアップの詳細。 リング、花、その他のウェディング要素(これらは小さなサイズで機能する方が良いです)。

アクションショット。 踊る、笑う、一緒に歩く。

デザインの考慮事項

テキストオーバーレイ。 多くのテーマはヘッダー画像上にお二人の名前やサイトタイトルを配置します。テキスト用のスペースがある画像を選んでください。

コントラスト。 テキストが画像上に載る場合、読みやすいように十分なコントラストがあるか確認してください。

モバイルトリミング。 ヘッダーはスマートフォンで異なって見えます。重要な要素は中央に配置してください。

テーマスタイル。 テーマによってはヘッダーをフルスクリーンで表示したり、含めたりします。プレビューしてどのように動作するか確認してください。

ファイルサイズとフォーマット

フォーマット: JPGまたはPNG(写真は通常JPGの方が良い)

ファイルサイズ: 可能なら2MB未満(大きな画像はアップロード前に圧縮してください)

サイズ: 少なくとも1920x1080、高解像度ディスプレイには2560x1440がさらに良い

大きなファイルはサイトを遅くするので、品質を大きく損なわずに圧縮してください。

ヘッダー画像のテスト

アップロード後:

  1. ライブサイトを表示して見え方を確認します

  2. モバイルで確認して、スマートフォンでのトリミングを確認します

  3. 意見を求める! 別の視点を得ましょう

  4. テーマが画像上にテキストを重ねる場合はテキストの読みやすさを確認します

ヘッダー画像の削除

ヘッダー画像が必要ない場合:

  1. サイト設定ヘッダータブに移動します

  2. ヘッダー画像プレビューの上にある削除をクリックします

  3. 変更を保存をクリックします

サイトはヘッダー画像なしで表示されます(通常、サイトタイトルまたはロゴのみ)。

季節ごとの更新

時間とともにヘッダー画像を変更するカップルもいます:

エンゲージメント期: エンゲージメント写真

結婚式前: 会場の写真や日程のお知らせ画像に切り替え

結婚式後: 結婚式当日の写真

好きなだけ頻繁に更新できます。

ヘッダー画像と背景画像

ヘッダー画像: サイトの上部に表示されます。

背景画像: すべてのコンテンツの背後に表示されます。

これらは異なる設定です!両方、どちらか一方、またはどちらも使わないことができます。

複数のヘッダー画像

サイトには1つのメインヘッダー画像があります。ただし、以下も設定できる場合があります:

ページごとのヘッダー: ページごとに異なるヘッダー画像

ヘッダースライドショー: 複数の画像を回転(テーマがサポートする場合)

テーマの機能を確認してください。

画像の権利

自分の写真を使いましょう! オンラインで見つけた画像は、許可がある場合や無料のストック写真でない限り使用しないでください。

カメラマンの著作権: エンゲージメント写真を使用する場合は、カメラマンが問題ないか確認してください(通常は大丈夫です)。

圧縮ツール

品質を損なわずに大きな画像を小さくするには:

オンラインツール: TinyPNG、Compressor.io、Squoosh

組み込み: 一部のプラットフォームはアップロード時に自動的に画像を圧縮します

高速読み込みのために500KB未満を目指してください。

ヘッダー画像は本の表紙のようなものです。魅力的で美しくしましょう。

こちらの回答で解決しましたか?