ワンステップでホームページの印象が変わる！フォントを変更してみよう

ホームページ作成サービス「グーペ」には「テンプレート」という選ぶだけで変更できるデザインのパターンがありますが、実はデザインだけではなくフォントも選ぶことができるんです。

最終更新日：2021/10/11

次の表は、同じテンプレート・同じ構成・同じ写真でフォントのみを変えた画像になります。
「游明朝」は少し重厚感が増す感じ、「M+ 1p」はポップな感じを受けませんか。
フォントひとつでホームページの印象が変わることを、ご理解いただけるのではないでしょうか。

游ゴシック	游明朝	M+ 1p

では「どのフォントを選ぶか」ですが、自分の好みのものを選ぶのではなく、扱う商品や見せたいイメージによって変わってきます。
本記事では、フォントを選ぶ際のヒントや各フォントの特徴、「グーペ」管理画面での変更方法をご紹介します。

業種・ジャンルごとに使い分けるフォント

フォントは業種やジャンルに合ったものを選び、ホームページを見る人にとって違和感のないものを選びます。
また、使用するフォントによって親近感や重厚感を表現できるといった効果的な使い方もあります。

次の表は、整骨院のサンプルホームページでフォントを変更した例になります。
右の「さわらび明朝」の方が落ち着いた丁寧な印象を受けませんか。
このように、フォントを選ぶことは伝えたいイメージを表現するひとつの手段になります。

整骨院：初期設定	整骨院：さわらび明朝

次の表は、あえて違和感のあるフォントを使用した例です。
もし左のフォント「Rounded M+ 1c」を使用するのであれば、テンプレートや写真もフォントに合ったものに統一すると違和感がない見た目になるでしょう。

旅館：Rounded M+ 1c	旅館：初期設定

以上をふまえて、さっそくフォントを変更してみましょう。
「グーペ」では、初期設定を除く7種類のフォントが用意されているので、ワンクリックで変更したり、元のフォントに戻したりできます。

4ステップでかんたん！フォントを変更してみよう

1.グーペの管理画面にログインする

まずは管理画面にログインしましょう。

2.「デザイン」をクリックする

管理画面にログインすると、左側にメニューが表示されます。

「各種設定」の中の「デザイン」をクリックしてください。
このページでは、テンプレートの選択・変更などデザインに関する設定も行うことができます。

3.フォントを変更したいテンプレートの「編集」をクリックする

デザイン一覧より、フォントを変更したいテンプレートの「編集」をクリックします。

4.変更したいフォントを選択し、「保存」をクリックする

ホームページに表示させたいフォントを選択します。7種類のフォントより選択できます。

【選択できるフォント】

• 游ゴシック
• 游明朝
• Noto Sans Japanese
• さわらびゴシック
• さわらび明朝
• M+1p
• Rounded M+1c

※2021年10月7日時点

※お使いのOSによっては適用されないものがございます。

※「游ゴシック／游明朝」はWindows8.1／macOS10.9以上の環境で表示されます。
はじめからテンプレートに設定されているフォントに戻したい場合は、「初期設定」を選択してください。

変更したいフォントを選択後、「保存」をクリックします。これでフォントの変更は完了です！

「サイトを確認」をクリックすると、変更したフォントがどのように表示されているかが確認できます。

選び方に迷ったら？フォントの特徴をご紹介

「どのフォントを選んだらいいか迷ってしまう」という方に、それぞれのフォントの特徴と使用例をご紹介します。フォント選びの参考にしてみてくださいね。

游ゴシック

すっきりとやわらかな印象のフォントです。

使用テンプレート：Simple2

游明朝

優美さと明るさを兼ね備えたフォントです。

使用テンプレート：Linen

Noto Sans Japanese

しなやかさと軽やかさのあるフォントです。

使用テンプレート：Pastel

さわらびゴシック

くっきりとして読みやすいフォントです。

使用テンプレート：Organic

さわらび明朝

艶めかしさを感じさせるフォントです。

使用テンプレート：Aroma

M+1p

丸みがありかわいらしい印象のフォントです。

使用テンプレート：Everyday

Rounded M+1c

M+1pより丸みの強いフォントです。

使用テンプレート：Spoon

フォントに合ったテンプレートを選ぶ、ふたつの方法

「業種・ジャンルごとに使い分けるフォント」の章で、テンプレートもフォントに合ったものに統一することをお伝えしましたが、テンプレートの選び方を紹介します。

「グーペ」では、テンプレートを選ぶ際に、次のふたつの方法があります。
それぞれメリット・デメリットをあげてはいますが、どちらも気軽にお試しいただけるので、ご自身に合った方法を選んでご活用ください。

	メリット	デメリット
プレビューで確認する	・有料テンプレートもプレビューできる ・タブレットやスマートフォン表示もワンクリックで確認できる	・フォントは各テンプレートの初期設定のものが表示
実際に適用して確認する	・選択したフォントも合わせて確認できる	・ホームページの公開設定を「工事中」「非公開」にしていると確認できない

次に、それぞれの操作手順をまとめました。

テンプレートをプレビューで確認する

管理画面のデザイン ＞ ダウンロード ＞ プレビューボタンをクリックすると、プレビュー画面が表示されます。左側に表示されてるテンプレートの画像をクリックすると、右の画面にプレビューが表示されます。

画面の右上には、有料テンプレートの場合は「このテンプレートを購入する」、無料テンプレートの場合は「このテンプレートにする」ボタンが表示されます。クリックすると有料テンプレートの場合は購入ページが表示され、無料テンプレートの場合はダウンロードされます。
この画面からも簡単にテンプレートを設定いただけるようになっています。

なお、プレビュー画面の上部に表示されているアイコンをクリックすると、左からPC表示・タブレット表示・スマートフォン表示をご確認いただけます。

また右の矢印のアイコンをクリックいただくと、全画面でプレビューを確認できます。
ホームページのメニューをクリックして各ページもプレビューできるので、実際にホームページを表示した時のイメージが掴めます。

実際にテンプレートを適用して確認する

管理画面のデザイン ＞ ダウンロードページで気になるテンプレートのダウンロードボタンをクリックすると、デザイン一覧ページの保持しているデザインにストックされます。

ご希望のテンプレートのこのデザインに変更ボタンをクリックしてホームページに適用したら、右上のホームページ表示ボタンで実際の表示を確認できます。

---

なお、テンプレートのキャプチャ右下に表示されている虫めがねアイコンをクリックすることでもプレビューをご確認いただけます。「プレビュー」ページと同様に、ホームページのメニューをクリックして各ページもプレビューできるので、実際にホームページを表示した時のイメージが掴めます。

実際に選択したフォントとのイメージを確認したい場合は、テンプレートをダウンロードして適用した上でご確認いただく方法をおすすめします。

まとめ

いかがでしたか。変えるだけで、読みやすさや印象ががらっと変わるフォント。ぜひいろいろ試してみて、自分のホームページにぴったりのフォントを見つけてくださいね。
実際に「グーペ」を試してみたい方はこちらから！