チュートリアル

チャットするだけでサイト全体のフォントを変更

フォントは、色と同じくらいサイトの雰囲気を左右します。上品なセリフ体のデザインが、モダンなお店に合わないこともありますし、小さな本文はスマートフォンでは読みにくいものです。WordPress では、Site Editor を開いて Styles を探し、フォントファイルを追加して、要素ごとに手作業で設定します。ShipPress なら、チャットでフォント名を伝えるだけで、AI がサイト全体を一度に変更します。このチュートリアルでは、Pier 7 Coffee のフォントを、クラシックなセリフ体から力強くモダンなサンセリフ体に切り替え、本文を読みやすくします。

1. まず現在のフォントを確認する

   ShipPress でサイトを開き、見出しと通常のテキストの両方がある部分までプレビューをスクロールします。Pier 7 Coffee では、見出しに細くてクラシックなセリフ体が使われていて、段落のテキストは小さめです。見出し、本文、またはその両方のうち何を変えたいか、そして文字を大きくしたいかどうかを決めておきましょう。

   

2. 1つのメッセージでフォントを指定する

   左下のチャットボックスをクリックして、変更内容を書きます。次の内容を同じメッセージに入れましょう。

   • 見出しのフォント：ここでは「Jost、太字」。
   • 本文のフォントとサイズ：ここでは「Inter、少し大きくして読みやすく」。
   • フォントの入手元：WordPress 標準の Twenty Twenty-Four テーマには、Jost と Inter がすでに含まれてサイトに入っているので、Google Fonts ではなくそのファイルを使うよう AI に頼みました。こうすると、サイトは自分自身からフォントを読み込みます。
   • 変えないもの：「色、写真、レイアウトはそのままにして」。
   • 適用範囲：「すべてのページ、メニュー、フッター」。

   Enter キーを押して送信します。

   

3. AI に作業を任せる

   AI はいくつかの手順でサイトのフォント設定を変更します。まず、テーマのフォント設定で見出しと本文の2つのフォントを設定し、次にサイトタイトル、メニュー、フッターなど、独自にフォントを指定している部分を更新します。手順はチャットで確認できます。Pier 7 Coffee の場合、約2分半かかりました。

   

4. 変更内容を読む

   作業が終わると、AI が変更内容をまとめてくれます。サイトタイトルやスマートフォン用メニューを含む見出しは Jost の太字に、本文、メニュー、フッターのリンクは Inter になりました。本文は15pxから17pxに、小さめの説明文は14pxから16pxになり、色、写真、レイアウトは変わっていません。その下には、Make body text even bigger など、次にできることのボタンが並びます。

   

5. 変更前と変更後を比べる

   ページの同じ部分をもう一度見てみましょう。見出しは力強くモダンなサンセリフ体になり、写真の上でもはっきり読めます。段落のテキストは大きくなり、行間も広がりました。写真、色、レイアウトはまったく同じ場所にあり、変わったのは文字だけです。

   

   

6. ほかのページと Phone を確認する

   フォントの変更はホームページだけでなく、すべてのページに反映されるはずです。プレビュー左上のページ一覧から、ほかのページをいくつか開いてみましょう。Bar Menu ページでは、ページタイトル、セクションタイトル、ドリンク名、価格のすべてに新しいフォントが使われています。

   次に、プレビュー右上の Phone をクリックします。大きめの本文は小さな画面でこそ重要なので、見出しが何行にも折り返されていないか、文字が楽に読めるかを確認しましょう。

   

   

7. Colors and fonts で手作業で微調整する

   AI は WordPress 本来のスタイル設定を変更しているので、自分で調整することもできます。プレビュー上のツールバーにある Colors and fonts をクリックしてください。WordPress の Site Editor で、テーマの Styles が開きます。Typography をクリックすると、フォント一覧に Heading (Jost) と Body (Inter) が表示されています。

   Elements の下にある Headings をクリックすると、見出しのフォントと、その行の高さ、字間、大文字・小文字の設定が表示されます。ここで何かを変更して Save をクリックするか、チャットで「見出しの太さを少しだけ控えめにして」のように頼み続けることもできます。

   

   

8. 気に入らなければ元に戻す

   AI が変更を行うたびに、復元ポイントが保存されます。上部バーの History をクリックすると、フォントの変更が時刻とサイズとともに表示されます。前のフォントのほうがよければ、その1つ前のステップの Restore をクリックするか、変更直後なら AI の返信の下にある Undo this change をクリックしてください。

   

9. ヒント

   • フォントは2つで十分です。見出し用に1つ、本文用に1つ選びましょう。
   • いちばん使いやすいのは、WordPress 標準テーマに含まれていて、すでにサイトに入っているフォントです。Twenty Twenty-Four には Jost、Inter、Instrument Sans、Cardo があり、Twenty Twenty-Five には Manrope、Literata、Fira Sans、Vollkorn などがあります。変更後も、そのテーマはインストールしたままにしておいてください。
   • 本文は「少し大きめ」にお願いしましょう。スマートフォンでは16〜18pxが読みやすいサイズです。
   • 変えてはいけないもの（色、写真、レイアウト）を伝えておくと、AI はフォントだけを変更します。
   • Go live をクリックする前に、いくつかのページと Phone を確認しましょう。