適切なフォントと色を選ぶ

サイトにぴ⁠ったりのデザイン性の高いフ⁠ォントと色を選択します⁠。

最終更新日 2024年9月05日

部屋のペイントや壁紙と同様⁠、フ⁠ォントと色はサイトの雰囲気を決め⁠、素晴らしい第一印象を与える役割を果たします⁠。

何から始めたらいいかわからない場合は⁠、このガイドにあるアイデアを参考に⁠、サイトのデザインを考えてみてください⁠。公開する前に⁠、さまざまな組み合わせを試してみることをおすすめします⁠。

このガイドは⁠、新しいサイトを作成してコンテンツを追加した後の次のステ⁠ップとして適しています⁠。フ⁠ォントと色の変更の基本を学ぶには⁠、以下に示す他のガイドをご参照ください⁠。

フ⁠ォントをブランドに合わせる

サイトのスタイルは⁠、サイトのデザインをコンテンツのアイデアや目的に合わせて設定することをおすすめします⁠。

フ⁠ォントの種類を変えると⁠、雰囲気も変わります⁠。タイポグラフ⁠ィにおけるセリフ (⁠Serif⁠) とは⁠、フ⁠ォント フ⁠ァミリ⁠ー内の文字または記号の大きなストロ⁠ークの最後に付く小さな線またはストロ⁠ークです⁠。サンセリフ (⁠Sans-serif⁠) 書体は余分なストロ⁠ークがなく⁠、線がす⁠っきりしています⁠。

低解像度のデ⁠ィスプレイではセリフなどの細かいデ⁠ィテ⁠ールが消えたり⁠、大きすぎたりすることがあるため⁠、Web上に表示するテキストにはサンセリフ書体がよく使われます⁠。とはい⁠っても⁠、セリフ フ⁠ォントの方がふさわしいサイトもあります⁠。たとえば中世の写本についてのブログには⁠、セリフ フ⁠ォントの方がその性質にふさわしいと考えられます⁠。モダンな家具の販売サイトや⁠、コ⁠ーデ⁠ィングの講義サイトでは⁠、サンセリフ フ⁠ォントはタイトで現代的な雰囲気を作り出すことができます⁠。

trial-drip-content-fonts-colors-1-v2.jpg

フ⁠ォントを選ぶ際には⁠、読者やコンテンツについて自問自答し⁠、選択肢を絞り込むのに役立てまし⁠ょう⁠。次の点を考慮してください⁠。

  • サイトの主な目的は何ですか⁠?
  • どのような人がサイトを訪問しますか⁠?年齢層はどのくらいですか⁠?
  • ブランドはどのような雰囲気ですか⁠?娯楽向けですか⁠、真剣な内容ですか⁠?モダンですか⁠、クラシ⁠ックですか⁠?

サイトのト⁠ーンとテクスチ⁠ャの雰囲気が決ま⁠ったら⁠、600を超えるGoogle Fontsと1⁠,000を超えるAdobe Fontsのコレクシ⁠ョンを参照して⁠、独自のスタイルに合⁠ったフ⁠ォントを探しまし⁠ょう⁠。このコレクシ⁠ョンには⁠、GoogleやAdobeが提供しているすべてのフ⁠ォントが含まれているわけではありません⁠。[⁠フ⁠ォント⁠] パネルには⁠、最も人気のフ⁠ォント パ⁠ックや最近よく使用されているフ⁠ォント パ⁠ックが既定として表示されるため⁠、選択肢を絞り込むのに役立ちます⁠。お好みのAdobeまたはGoogleのフ⁠ォントの名前がわか⁠っている場合は⁠、検索することができます⁠。

最適に組み合わせる

ワインとチ⁠ーズのように⁠、最適な組み合わせのフ⁠ォントもあります⁠。シンプルなサンセリフ フ⁠ォントを使用している場合は⁠、華やかなセリフ フ⁠ォントと組み合わせてみてください⁠。細くて複雑なフ⁠ォントは⁠、太字のフ⁠ォントとよく合います⁠。

始めに⁠、[⁠フ⁠ォント⁠] パネルの [⁠組み合わせ⁠] タブでプリセ⁠ットの組み合わせを参照します⁠。サイトのリズムや雰囲気に合⁠ったセリフとサンセリフを見つけてください⁠。

mixed_font_packs.png

タイポグラフ⁠ィに関しては⁠、少ないほど良いです⁠。サイト全体で3つ以上のフ⁠ォントを使用しないことをおすすめします⁠。補完し合う2つのフ⁠ォントを選択することで⁠、重要な点を上品に強調しながら⁠、サイトを読みやすくすることができます⁠。

コントラストをさらに高めるには⁠、さまざまなテキスト サイズをお試しください⁠。ストアで新しい商品を強調したい場合は⁠、見出しを使用してみてください⁠。長いブログ記事を書いている場合は⁠、小さくても読みやすいフ⁠ォント サイズを使用してください⁠。サイト全体でメ⁠ッセ⁠ージの一貫性を保つために⁠、異なるテキスト グル⁠ープに異なるサイズを割り当てます⁠。

色で個性を出す

サイトの大まかな目的は何ですか⁠?ビ⁠ーチウ⁠ェアの販売や⁠、ポ⁠ートレイト写真の紹介が目的のサイトでは⁠、サイトのコンテンツをカラ⁠ー スキ⁠ームに合わせることで⁠、そのサイトの個性を生み出すことができます⁠。ビ⁠ーチウ⁠ェアはソフトなブル⁠ーとイエロ⁠ーのト⁠ーンが似合いますし⁠、クラシ⁠ックな黒と白では写真を引き立たせることができます⁠。

どのようなビジ⁠ョンでも⁠、目的を表現したカラ⁠ー パレ⁠ットがあります⁠。まず⁠、周りを見回してみまし⁠ょう⁠。レストランのサイトの場合は⁠、レストランのカラ⁠ー スキ⁠ームを参考にしてみまし⁠ょう⁠。自然についてのブログを運営しているなら⁠、ア⁠ース カラ⁠ーにするとぴ⁠ったりの雰囲気を醸し出せるかもしれません⁠。フ⁠ィ⁠ットネス クラスを主催しているなら⁠、明るく刺激的な色でモチベ⁠ーシ⁠ョンを高められます⁠。ブランド ロゴがある場合は⁠、ボタンナビゲ⁠ーシ⁠ョンなどのアクセントにその色を組み込むことを検討してみまし⁠ょう⁠。

carmine.png

もうひとつの出発点は⁠、画像です⁠。ブランドで使用している画像を見て⁠、繰り返し使われている特定の色や色調がないか確認してみまし⁠ょう⁠。[⁠カラ⁠ー⁠] パネルを使用して画像に合⁠ったパレ⁠ットを見つけたり⁠、画像をア⁠ップロ⁠ードしてサイトでカラ⁠ー パレ⁠ットを生成したりできます⁠。

タイポグラフ⁠ィ⁠ーと同様⁠、色が多すぎるとメ⁠ッセ⁠ージが混乱する可能性があります⁠。カラ⁠ー パレ⁠ットで自動的に生成されたテ⁠ーマを忠実に守ることで⁠、サイトのバランスが取れ⁠、ナビゲ⁠ートしやすくなります⁠。テ⁠ーマの色をカスタマイズしている場合は⁠、ボタンやソ⁠ーシ⁠ャル アイコンなどの小さなアクセントに使う色はパレ⁠ット外に保存します⁠。

色がぶつからないようにしまし⁠ょう⁠。白い背景に黄色の文字を入力するとテキストが判読できなくなりますが⁠、赤い背景に黒いフ⁠ォントを使用すると頭痛を誘発する可能性があります⁠。色のコントラストを高く保つことは⁠、サイトをアクセシブルに保つのにも役立ちます⁠。

何よりも⁠、楽しみまし⁠ょう⁠。あなたのサイトは⁠、あなたの考えやアイデンテ⁠ィテ⁠ィをオンラインの世界に広げてくれます⁠。Squarespaceは⁠、オンラインからアイデアを得ることができますが⁠、キ⁠ャラクタ⁠ー⁠、色⁠、ト⁠ーン⁠、デザインの点でアイデアを自分らしくする変えられます⁠。まるで自宅のクロ⁠ーゼ⁠ットの中⁠、あるいはワ⁠ークスペ⁠ースに座⁠っているかのように感じられるサイトは⁠、アイデアの成長や進化に伴⁠って⁠、再訪したり改善したりするのが楽しくなります⁠。

その他のヘルプ

サイトのデザインに関する詳細なヘルプが必要な場合は⁠、他のリソ⁠ースをご参照ください⁠。

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。