ホームページの基本的なデザインができたら、サイトの左上に表示する「ロゴ画像」と、ブラウザのタブなどに表示される「ファビコン」を設定します。
ロゴとファビコンを設定すると、ホームページの印象が整い、訪問した人にも覚えてもらいやすくなります。
ロゴ画像とは？
ロゴ画像とは、ホームページの名前やサービス名をデザインした画像です。
一般的には、ホームページの左上に表示されます。
今回は、ChatGPTやGeminiなどのAIを使って、サイトのタイトルが入った横長のロゴ画像を作ります。
AIにロゴ画像を作ってもらう
まず、ChatGPTやGeminiなどのAIに、ホームページのタイトルを伝えます。
次の文章をコピーして依頼してください。
「○○○○」
タイトル画像を作ってください。
サイトの左上に使うので、横長にしてください。
背景は白にしてください。
「○○○○」の部分には、自分のホームページのタイトルを入力します。
依頼例
「AIとホームページで『集客の仕組み』をつくる実践講座」
タイトル画像を作ってください。
サイトの左上に使うので、横長にしてください。
背景は白にしてください。
より魅力的なロゴにするための依頼方法
最初に作られた画像が少し物足りない場合は、追加の希望を伝えます。
例えば、次のように依頼できます。
魅力を感じて、講座に申し込みたくなるようなデザインにしてください。
もう少しかっこよくしたい場合は、次のように伝えます。
まだ魅力的に感じません。もっとかっこよくしてください。
ほかにも、希望に合わせて次のような指示を加えられます。
- 大手企業のような信頼感のあるデザイン
- シンプルで高級感のあるデザイン
- 明るく親しみやすいデザイン
- AIやインターネットをイメージできるデザイン
- 「集客の仕組み」という言葉を目立たせる
- 小さく表示しても文字を読めるようにする
- 背景を白にする
- 文字を大きくする
納得できない場合は、遠慮せずに修正を依頼してください。
一度で完成させようとせず、気になる部分をAIに伝えながら、希望に近いロゴへ調整していきます。
長いタイトルは途中で改行する
ホームページのタイトルが長い場合は、1行にすると文字が小さくなってしまいます。
その場合は、読みやすい位置で改行を入れます。
例えば、次のような2行にします。
AIとホームページで
「集客の仕組み」をつくる実践講座
AIに依頼するときは、次のように伝えます。
次の位置で改行し、2行にしてください。
AIとホームページで
「集客の仕組み」をつくる実践講座
改行する場所まで具体的に伝えることで、読みやすいタイトル画像を作りやすくなります。
ロゴ画像をWordPressに設置する
ロゴ画像が完成したら、画像をダウンロードしてWordPressに設定します。
設定手順
- WordPressの管理画面にログインします。
- 左側メニューの「外観」をクリックします。
- 「カスタマイズ」をクリックします。
- 「サイト基本情報」をクリックします。
- ロゴの「ロゴを選択」をクリックします。
- 「ファイルをアップロード」を選択します。
- AIで作成したロゴ画像をアップロードします。
- アップロードした画像を選択します。
- 必要に応じて画像を切り抜きます。
- 表示を確認して「公開」をクリックします。
テーマによっては、「サイト基本情報」ではなく「サイト情報」など、少し違う名称で表示される場合があります。
また、使用しているテーマによって、設定できるロゴの大きさや表示位置が異なることがあります。
ロゴ画像を切り抜くときのポイント
ロゴ画像の周囲に大きな空白があると、ホームページに設置したときにロゴが小さく表示されることがあります。
切り抜き画面では、文字やマークを切らないように注意しながら、上下左右の余白をできるだけ少なくします。
ただし、完全にギリギリまで切り抜くと窮屈に見える場合があります。文字やマークの周囲には、わずかな余白を残してください。
設定後は、パソコンとスマートフォンの両方で次の点を確認します。
- タイトルの文字が読める
- ロゴが小さすぎない
- 画像がぼやけていない
- 文字やマークが切れていない
- ヘッダーからはみ出していない
問題がなければ「公開」をクリックして、変更を反映します。
ファビコンとは？
ファビコンとは、ホームページを見分けるために表示される小さなマークです。
例えば、次のような場所に表示されます。
- ブラウザのタブに表示されるページタイトルの横
- ブックマークやお気に入りの一覧
- スマートフォンのホーム画面へ追加したとき
- ブラウザの履歴やショートカット
「URLの前に表示される画像」と考えると、初心者にも分かりやすいでしょう。ただし、使用するブラウザや画面によって、実際に表示される場所は異なります。
ファビコンは非常に小さく表示されるため、横長のロゴをそのまま縮小すると、文字を読めなくなります。
そのため、ロゴに使われているマークやアイコン部分だけを、正方形に切り抜いて使用するのがおすすめです。
ファビコン用の画像を準備する
ファビコンには、次のような画像が向いています。
- 正方形の画像
- シンプルなマーク
- 小さくしても形が分かる
- 背景とマークの色に差がある
- 細かい文字を入れていない
- ロゴ画像と同じ色やデザインを使っている
WordPressでは、縦横512px以上の正方形画像が推奨されています。PNG形式にしておくと使いやすいでしょう。
AIにファビコンを作ってもらう
ロゴ画像を作った後、その画像をもとにファビコン用の画像を作ってもらうこともできます。
次のように依頼します。
このロゴ画像をもとに、ファビコン用の画像を作ってください。
ロゴのマーク部分だけを使って、正方形にしてください。
小さく表示しても分かりやすい、シンプルなデザインにしてください。
サイズは512×512pxにしてください。
横長のタイトルや細かい文字は入れず、マークだけを使用するのがポイントです。
ファビコンをWordPressに設定する
WordPress 6.5以降では、管理画面の「設定」にある「一般」からサイトアイコンを設定できます。
設定手順
- WordPress管理画面の「設定」をクリックします。
- 「一般」をクリックします。
- 「サイトアイコン」を探します。
- 「サイトアイコンを選択」をクリックします。
- 「ファイルをアップロード」を選択します。
- ファビコン用の画像をアップロードします。
- アップロードした画像を選択します。
- 必要に応じて正方形に切り抜きます。
- 表示を確認します。
- 画面下部の「変更を保存」をクリックします。
「変更を保存」をクリックすると、設定が反映されます。
WordPress 6.4以前など、「設定」の「一般」にサイトアイコンが見つからない場合は、次の場所を確認してください。
- 「外観」をクリックします。
- 「カスタマイズ」をクリックします。
- 「サイト基本情報」をクリックします。
- 「サイトアイコンを選択」をクリックします。
- 画像を設定して「公開」をクリックします。
WordPressのバージョンや使用しているテーマによって、項目名や場所が変わる場合があります。
ファビコンが変わらない場合
ファビコンを設定しても、すぐに新しい画像が表示されないことがあります。
その場合は、次の方法を試してください。
- ページを再読み込みする
- ブラウザを一度閉じてから開き直す
- 別のブラウザでホームページを確認する
- シークレットモードで確認する
- ブラウザのキャッシュを削除する
- 少し時間を置いてから確認する
ブラウザに古いファビコンが保存されていると、設定が完了していても以前の画像が表示される場合があります。
最後に確認しましょう
ロゴ画像
- サイト名を正しく入力した
- 横長のロゴ画像を作成した
- 背景を白にした
- 文字が小さすぎない
- 不要な余白を切り抜いた
- WordPressの「サイト基本情報」で設定した
- 「公開」をクリックした
ファビコン
- 正方形の画像を準備した
- 小さく表示しても分かりやすい
- 横長の文字を入れていない
- 512×512px以上で作成した
- 「設定」の「一般」からサイトアイコンを設定した
- 「変更を保存」をクリックした
- ブラウザのタブなどで表示を確認した
ロゴ画像はホームページの名前を伝えるもの、ファビコンは小さなマークでホームページを見分けてもらうものです。
ロゴとファビコンのデザインをそろえることで、ホームページ全体に統一感が生まれます。