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

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

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

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

• フォントを変更する
• 色を変更する

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

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

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

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

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

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

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

最適に組み合わせる

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

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

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

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

色で個性を出す

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

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

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

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

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

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

その他のヘルプ

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

• 優れたデザイン プラクティスに関する動画をご覧ください。
• Squarespace Forumで、コミュニティからアドバイスをもらうことができます。
• Squarespace Marketplaceを通じて第三者のデザイナーを採用し、サイトのデザインをカスタマイズできます。