ドキュメントはじめに

ストアフロントのブランディング

最終更新日： 2026年6月16日

作成対象：

  • {"id":"b5a62a22-46f7-4f0d-b151-3fc640bef588"},{"id":"e8ccd51f-da0d-4e3b-939b-e30d5ebb1ea5"}
  • {"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"c66ffd68-0f65-42bb-aa23-b4020f12e0bd"},{"id":"f8a45b24-4be7-4f1b-909b-60d06b483a20"}

最初にやりたいことの1つは、ヘッダーのロゴ 🔗を変更し、ブラウザー用に​ ファビコン ​をアップロードすることです。 次に、ようこそメッセージ ​を追加し、​ フッターで著作権通知を更新する必要があります。 これらのタスクは、いくつかのシンプルなデザイン要素であり、すぐに対応できます。 ストアの開発中は、​ ストアのデモ通知をオンにして、開始の準備ができたら削除できます。

​ ストアフロントのブランド要素 {width="600" modal="regular"}

ロゴをアップロード

ヘッダー内のロゴのサイズと場所は、ストアテーマによって決まります。 ロゴは、GIF、PNG、JPG（JPEG）のいずれかのファイル形式で保存し、ストアの管理者からアップロードできます。

ヘッダー 🔗 {width="600"}の ロゴ

ロゴ画像は、サーバー上の次の場所にあります。 logo.svgという名前の画像ファイルは、デフォルトのテーマロゴとして使用されます。

フルパス - app/design/frontend/[vendor]/[theme]/web/images/logo.svg

相対パス - images/logo.svg

テーマで使用されているロゴやその他の画像のサイズがわからない場合は、ブラウザーでページを開き、画像を右クリックして要素を調べます。

NOTE
ヘッダーのロゴに加えて、ロゴは​ メールテンプレート ​およびPDF請求書とその他の販売文書にも表示されます。 メールテンプレートや請求書に使用されるロゴのサイズ要件は異なるため、別途アップロードする必要があります。

サポートされているロゴファイル形式：

ファイル形式
説明
PNG
（Portable Network Graphics）GIFフォーマットに代わるこの新しい選択肢は、最大1,600万色（24 ビット）をサポートします。 可逆圧縮形式では、鮮明なテキストを含む高品質のビットマップ画像が生成されますが、一部の形式よりもファイルサイズが大きくなります。 PNG形式は透明レイヤーをサポートしており、オンラインでの表示とストリーミング用に設計されています。
GIF
（Graphics Interchange Format）広くサポートされている古いビットマップ形式で、256色（8 ビット）に制限されています。 GIFでは、シンプルなアニメーションと透明レイヤーをサポートしています。
JPG（JPEG）
（Joint Photographic Expert Group）ほとんどのデジタルカメラで使用される圧縮ビットマップ形式。 非可逆圧縮は、データの損失を引き起こし、テキストのぼやけた斑点として目立つことがあります。

  1. 管理者 サイドバーで、Content > Design>Configuration​に移動します。

    ​ デザイン設定ページ ​ {width="700"}

  2. 設定するストアビューを見つけ、Action​列の​ Edit ​をクリックします。

  3. Header セクションの 拡張セレクター を展開します。

    ​ ヘッダー設定 {width="600"}

  4. 新しいロゴをアップロードするには、Upload​をクリックし、システムからファイルを選択します。

  5. Logo Image Width​と​ Logo Image Height ​をピクセル単位で入力します。

  6. Logo Image Alt​の場合、誰かが画像の上にカーソルを置いたときに表示するテキストを入力します。

  7. 完了したら、Save Configuration​をクリックします。

ファビコンを追加

Favicon​は​ お気に入りアイコン ​の略で、各ブラウザーページのタブにある小さなアイコンを指します。 ブラウザーによっては、ファビコンはURLの直前のアドレスバーにも表示されます。

ファビコンのサイズは、一般的に16 x 16 ピクセルまたは32 x 32 ピクセルです。 Commerceは、ICO、PNG、APNG、GIF、JPG（JPEG）のファイル形式を受け入れますが、すべてのブラウザーがこれらの形式をサポートしているわけではありません。 ファビコンに使用する最も広くサポートされているファイル形式はICOです。 他の種類の画像ファイルを使用することもできますが、この形式は、すべてのブラウザーでサポートされていない場合があります。 ICO画像を生成したり、その形式に画像を変換したりするために使用できる無料ツールは、オンラインで利用できる多くあります。

ブラウザータブの お気に入り {width="600"}

Commerceは、次のファイル形式をfaviconとしてサポートしています。

ファイル形式
説明
ICO
この画像ファイル形式は、小さいサイズのコンピューターのアイコン画像を対象に設計されています。 主にMicrosoft® Windows OSで使用されるICO フォーマットは、最大256 x 256 ピクセルの画像と、8 ビットの透明度を持つ1,600万色（24 ビット）の画像を含むことができます。
PNG
（Portable Network Graphics）GIFフォーマットに代わるこの新しい選択肢は、最大1,600万色（24 ビット）をサポートします。 可逆圧縮形式では、鮮明なテキストを含む高品質のビットマップ画像が生成されますが、一部の形式よりもファイルサイズが大きくなります。 PNG形式は透明レイヤーをサポートしており、オンラインでの表示とストリーミング用に設計されています。
APNG
（Animated Portable Network Graphics）単純なアニメーションをサポートするPNGに似たファイル形式。
GIF
（Graphics Interchange Format）広くサポートされている古いビットマップ形式で、256色（8 ビット）に制限されています。 GIFでは、シンプルなアニメーションと透明レイヤーをサポートしています。
JPG（JPEG）
（Joint Photographic Expert Group）ほとんどのデジタルカメラで使用される圧縮ビットマップ形式。 非可逆圧縮は、データの損失を引き起こし、テキストのぼやけた斑点として目立つことがあります。

手順1：ファビコンの作成

  1. 任意の画像エディターを使用して、ロゴの16 x 16または32 x 32のグラフィック画像を作成します。

  2. （オプション）使用可能なオンラインツールのいずれかを使用して、ファイルを.ico形式に変換し、ファイルをコンピューターに保存します。

ステップ 2：お気に入りをストアにアップロードする

  1. 管理者 サイドバーで、Content > Design>Configuration​に移動します。

  2. グリッドで、設定するストアビューを見つけ、Action​列の​ Edit ​をクリックします。

  3. Other Settings​で、HTML Head​セクションの 拡張セレクター を展開します。

    HTML ヘッドの設定 {width="600"}

  4. 現在のファビコンを削除する場合は、画像の左下隅にある​削除 （ ごみ箱アイコン ​ ）アイコンをクリックします。

  5. Upload​をクリックし、準備したfavicon ファイルを開きます。

    ​ ファビコンをアップロードしました {width="400"}

  6. 完了したら、Save Configuration​をクリックします。

手順3：キャッシュを更新する

  1. キャッシュの更新を求めるメッセージが表示されたら、ワークスペースの上部にあるメッセージの​Cache Management リンクをクリックします。

  2. リストで、Invalidatedとマークされている​Page Cache チェックボックスを選択します。

  3. Actions​をRefreshに設定し、Submit​をクリックします。

  4. 新しいファビコンを表示するには、ストアフロントに戻り、ブラウザーを更新します。

ウェルカムメッセージの変更

ヘッダーのウェルカムメッセージが展開され、ログインしている顧客の名前が含まれます。 ストアを起動する前に、各ストアビューのデフォルトの​ようこそ テキストを変更してください。

​ ウェルカムメッセージ ​ {width="600"}

  1. 管理者 サイドバーで、Content > Design>Configuration​に移動します。

  2. グリッドで、設定するストアビューを見つけ、Action​列の​ Edit ​をクリックします。

  3. Other Settings​で、Header​セクションの 拡張セレクター を展開します。

  4. Welcome Text​の場合、店舗のヘッダーに表示するウェルカムメッセージのテキストを入力します。

    ​ ヘッダー設定 {width="600"}

  5. 完了したら、Save Configuration​をクリックします。

  6. ページキャッシュの更新を求めるメッセージが表示されたら、ワークスペースの上部にある​Cache Management リンクをクリックし、指示に従ってキャッシュを更新します。

著作権表示の変更

ストアでは、各ページのフッターに著作権通知が表示されます。 ベストプラクティスとして、著作権通知には今年度を含め、サイト上のコンテンツの法的な所有者としてあなたの会社を特定する必要があります。

著作権通知の例 {width="600"}

次の例に示すように、©文字コードを使用して著作権記号を挿入します。

  • ロングフォーマットの例

    Copyright © 2013-present Luma, Inc. All rights reserved.

  • 短い形式の例

    © 2021 Luma, Inc. All rights reserved.

著作権通知を更新するには:

  1. 管理者 サイドバーで、Content > Design>Configuration​に移動します。

  2. グリッドで、設定するストアビューを見つけ、Action​列の​ Edit ​をクリックします。

  3. その他の設定​で、 拡張セレクター 「Footer」セクションを展開します。

    ​ フッターデザイン設定 {width="600"}

  4. Copyright​には、各ページのフッターに表示する著作権通知を入力します。

    ©文字コードを使用して著作権記号を挿入します。

  5. 完了したら、Save Configuration​をクリックします。

ストアのデモ通知を設定する

オンラインストアがオンラインであっても、まだ建設中の場合は、ページの上部にストアデモ通知を表示して、そのストアがまだ営業していないことを知らせることができます。 運用開始​の準備ができたら、メッセージを削除するだけです。 ウィンドウに表示されている記号を​ 閉じる ​から​ 開く ​に切り替えるのと同じです。 デモ通知の形式は、ストアのテーマによって決まります。

​ ストアフロントのデモ通知 {width="600"}

  1. 管理者 サイドバーで、Content > Design>Configuration​に移動します。

  2. グリッドで、設定するストアビューを見つけ、Action​列の​ Edit ​をクリックします。

  3. Other Settings​で、HTML Head​セクションの 拡張セレクター を展開します。

    HTML ヘッド ​ {width="600"}

  4. 一番下までスクロールして、Display Demo Store Notice​を好みに合わせて設定します。

  5. 完了したら、Save Configuration​をクリックします。

  6. キャッシュの更新を求めるメッセージが表示された場合は、システムメッセージの「Cache Management」をクリックし、指示に従ってキャッシュを更新します。

recommendation-more-help
commerce-admin-help-getting-started