- ロゴやファビコンは訪問者の第一印象やその後のリピート率、サイトの信頼度を左右する重要な情報である
- ロゴの横幅は250px以上でサイト全体とのバランスを考慮して作成する
- ファビコンのサイズは16px × 16px以上でブラウザごとにサイズ調整が必要であり、画像の拡張子は『.png』か『.ico』がおすすめ
- Shopifyでロゴやファビコンを変えるにはどうすれば良いの？
- ロゴやファビコンはどういう画像を設定すれば良いかわからない
この記事では、Shopifyのカスタマイズでロゴとファビコンを設定する方法を紹介します。
ECサイトを構築する上で、ロゴとファビコンの設定は欠かせません。
ロゴ画像・ファビコンを最適化することで、サイト訪問者に与える印象が非常に良くなり、売上アップにも貢献します。
また最適なロゴ画像・ファビコンのサイズや、自分でロゴやファビコンを作成する方法についても触れています。
Shopifyでカスタマイズができるようになりたい方は、ぜひ最後までお読みください。
Shopifyでのロゴ画像サイズと設定方法
まずはShopifyでロゴ画像を設定する方法を解説します。
ロゴを画像で設定しない場合は、店舗名がそのままロゴになります。
Shopifyの場合、ロゴ画像のサイズは幅250px以上で作成することをおすすめします。
次の項目でも詳細を解説していますが、ロゴ画像の幅はテーマエディターでは50〜250pxで調整可能です。
幅50pxなどの小さい画像では、設定で250pxに引き伸ばすと解像度が荒い状態で表示されて、印象が良くありません。
ロゴ画像をアップロードして設定する方法は次のとおりです。
- テーマのカスタマイズからテーマエディターを起動する。
- 左メニューのセクションの中にある『ヘッダー』をクリックする。
- ロゴ画像の『変更』を選択して『画像を選択』をクリックすると、ロゴの画像をアップロードする。
- アップロードした画像を選び、画面下にある『選択する』ボタンをクリックする。
ロゴ画像の横幅と位置の調整
次に、ロゴ画像の横幅の設定方法を見ていきます。
ロゴ画像の横幅は、『ロゴの幅をカスタマイズする』でサイズを調整してください。
またサイズは幅50px〜250pxの間で設定をすることができます。
設定する際には、全体のバランスを見て調整するようにしましょう。
最後に、ロゴの表示位置を決めましょう。
ロゴの表示位置は『デスクトップのロゴ位置』をクリックして変更します。
ロゴ位置は以下の4パターンから選択可能です。
- 中央部左側（左側にロゴ、右側にメニュー）
- 左上（ロゴとメニューが上下に並んだうえで、左側に配置）
- 上部中央（ロゴとメニューが上下に並んだうえで、中央部に配置）
- 中央（ロゴが中央にきて他メニューは左側に並列して配置）
変更する際には、ロゴのイメージやページ全体の配置を考えて設定するようにしましょう。
Shopifyのファビコン設定方法
ファビコンの設定方法について説明します。
カスタマイズからテーマエディターを開きます。
左メニューの『テーマ設定』を選択して、『ファビコン』の項目を選択しましょう。
ファビコン画像をアップロードするフォームが表示されるため、ここで画像をアップロードします。
ファビコンは表示サイズが小さいため、複雑なデザインやカラフルなものだと、何を表現しているのかわからなくなります。
できるだけシンプルで、その店舗の特徴がわかりやすいものを設定するようにしてください。
ファビコンの推奨サイズは『16px × 16px』または『32px × 32px』です。
ブラウザごとのファビコンのサイズは以下の通りになります。
- 16×16px（IEブラウザ）
- 32×32px（Chrome,Firefox,Safari）
- 64×64px（Windowsデスクトップ）
- 180×180px（iPhone＆iPad）
- 256×256px（Android）
ファビコンを作成するときは『illustrator』や『Photoshop』、無料ツールなら『Figma』を使うのがよいでしょう。
画像の拡張子は『.png』や『.ico』がおすすめです。
ロゴとファビコンの重要性
ロゴやファビコンは第一印象、視覚的イメージに残りやすいものです。
サイトの訪問者は最初にロゴやファビコンを見て、何のサイトなのかを把握します。
ロゴやファビコンの設定がクリアなら、細部にも気を使うきちんとしたサイトであるという信頼性が得られます。
逆に、店舗の特徴がわかりにくく、目を惹くものでないとサイト自体から離れていってしまいます。
ロゴやファビコンの重要性は以下の通りです。
- ブランドらしさを覚えてもらうことができる
- 情報が定着し、購入時の意思決定を単純化できる
- ブランド力が高まり、価格での競争を回避できる
- リピーターを増やすことができる
- 大きく宣伝しなくてもブランドが顧客に定着し、プロモーションコストを削減できる
自分でロゴやファビコンを作成するなら、Shopifyが提供する無料のツール『Hatchful』を使うのも良いでしょう。
公式：https://www.shopify.com/jp/tools/logo-maker
『Hatchful』は、ロゴやファビコンを自分の好みに合わせて作成しカスタマイズできるツールです。
作成したらサイトやSNSでのマーケティングなど、幅広く使用することができます。
自分の理想とするアイコンやフォント、イメージに沿って編集し、簡単にダウンロード・使用が可能です。
まとめ
Shopifyでロゴ画像とファビコンの設定方法を解説しました。
ロゴとファビコンは、ブランドのイメージとして訪問者へ視覚的に与える印象が大きく、ECサイトにとって必要不可欠です。
Shopifyではどちらもテーマエディターから画像をアップロードして設定できます。
ブラウザで表示される際の解像度を保つために、ロゴ画像のサイズは幅250px以上で作成しましょう。
ロゴやファビコンなどの細部に気を配ると、顧客のブランドに対する信頼性が高まり、リピーターを増やすことにもつながります。デザインを外注することもできますが、『Figma』や『Hatchful』などのツールで自分で作ることも可能です。
Shopifyで売上を伸ばしたいなら、サイトのロゴとファビコンにもこだわりましょう。
