ホームページのデザイン:より美しいホームページを作るために、どんなフォントを選ぶべきか?

記事の概要:

  • フォントの重要性
  • いいフォントの特徴
  • Google Fontsの使い方
  • Strikinglyでフォントの使い方
  • フォントを選択するときの注意点

初心者でもセルフウェブサイト構築プラットフォームを通じって、簡単にサイトを立ち上げることができます。しかし、きちんとデザインしないで、勝手にスタンプやテキストを入れ替えて公開してしまっては、なかなか自分なりのデザインができません。どうやって訪問者を引き留めるブログサイトを作って、ホームページの訪問者数を増やしますか。この記事をチェックする必要があるかもしれません!

フォントはサイトの個性を表す重要な表現で、フォントが独特であれば、訪問者にも深い印象を残すことができます。なぜそう言ったのですか。

1.フォントはウェブサイトの重要な部分である

ウェブサイトをデザインするとき、画像のフォーマットも重要な要素です。

これはわかりやすいことですが、文字が担う情報量は膨大で、さまざまなパターンや形を組み合わせることで、非常に多くのコンテンツを生み出すことができます。ウェブサイトの中で、目にする要素は基本的に、文字、写真、メッセージ、動画です。一般的には、文字はより多くの情報を運ぶ必要があり、ウェブサイトの重要な部分だと言えます。

2.フォントの役割が大きい

フォントはウェブサイトの中での役割がとても大きいです。フォントはウェブサイトの中のあらゆる面にあります。ほとんどウェブサイトのすべての情報はフォントに離れられません。フォントは写真や動画などの目立つものではないかもしれませんが、知らず知らずのうちに、ウェブサイトが体現している精神、文化、中身などを表現しているのです。下の図はStrikinglyのユーザーのサイトから取ったもので、バナーのフォントはユーザーの要望に合った形でロゴの周りに展開されています。そして曲がったフォントはある意味でカッコイイを象徴して、背景図のロックのスタイルにもマッチしています。ウェブサイトの要素を適切に表現して、その役割を表しています。

Strikinglyで作ったウェブサイトのケースの画像

Strikinglyのユーザーのサイトから受けた画像

では、いいフォントの特徴は何ですか?簡単に言えば、次の2つの点があります。

  1. 簡潔明瞭にします。フォントを選ぶときは、むやみに華やかさを追求するのではなく、多くの人がフォントに気を取られずに閲覧できるように、ユーザーの視点に立って考えましょう。
  2. ホームページの内容にふさわしいにします。一般的にあまり目立つフォントは考えませんが、ウェブスタイルに合わせて選びましょう。たとえば、テクノロジー系のウェブサイトをデザインする場合、ウェブサイトのフォントは、テクノロジー系のスタイルに合わせて、はっきりとした線とまっすぐな線で設定することができます。もちろん、子供向けのサイトというなら、漫画のように太めのフォントを使うことをお勧めします。色の設定も子供向けのサイトに合わせて明るくすることをお勧めします。

フォントの重要性をある程度わかったと思いますが、では、どこでフォントを見つけられますか?ここではGoogle Fontsを紹介します。ここでフォントを選ぶことができます。インターネット時代に、インターネットマーケティングを上手く行うには?

Google FontsはGoogleが開発したフォントサイトで、もちろん日本語フォントも含まれています。プロのデザイナーやデベロッパーを含め、誰でもオンラインフォントを素早く簡単に使えるようにすることを目的としており、Google Fontsは素早く信頼性が高く、無料です。Googleフォントはすべてオープンソースです。つまり、自分のフォントを共有したり、それに基づいてカスタマイズしたりすることできます。もちろん、それを使うこともできます。個人用でもビジネス用でも、印刷用でも、パソコン用でも、ウェブサイト用でもかまいません。

Google Fonts

こちらの画像は、_Google Fontsから取っています_

Google Fontsはどう使うのでしょうか?方法は以下の通りです

まずGoogle Fonts:Early Accessページを開いて、Noto Sans TCを見つけたら、Google Fontsが提供するフォントコードが見えます。利用するときは、Google Fontsが提供するCSSプログラムをサイトに置くだけで、CSSを修正して「Noto Sans TC」を入れるとフォントにロードできる。

では、どうやってStrikinglyで独特のフォントを設定しますか?Strikinglyの「独自フォントをアップロードする」と「Googleフォントを探す」の機能を通してフォントを設定することができます。デザインするとき、見逃せないデザインサイトコレクションは?

Strikinglyのホームページの画像

Strikinglyの商品から受けた画像

Strikinglyを開いて、左上の「スタイル」>「フォント」をクリックして、いずれかのタイプ(タイトル、見出しまたはテキスト)をクリックすると、右側に展開されているフォントのリストの一番下に「独自フォントをアップロードする」が表示されます。それをクリックして、本機からフォントファイルをアップロードできます(使用できるファイルフォーマットはttf、otf、woff、woff2があります)。追加が完了すると、フォントリストにアップロードされたフォントが表示され、クリックすると有効になります。フォントの選択を更新し、新しいモダンフォントをたくさん追加しました。いま、 Strikinglyでグーグルフォントライブラリーで無料で検索することができます。

Strikinglyの編集画面

Strikinglyの商品から受けた画像

フォント選びは感性的、直観的な行為です。ただし、どんなフォントを選ぶにしても、そのページの全体像と閲覧者のニーズによります。以下の点はウェブフォント設定で注意する必要があります。スタイル詳細設定はこちらへ。

  1. 太体字は力強くて、機械、建築業などに適しています。
  2. 細体字は上品で繊細で、服装、化粧、文化娯楽などの業界に適しています。
  3. 同じページでは、フォントが少なく、レイアウトが上品で、安定感があります。フォントの種類が多いと、紙面が生き生きとして多彩になります。
  4. 字の大きさも重要です。異なる設備に表示する時に拡大縮小の問題を考慮して、あらかじめ設定しておく必要があります。
  5. 个性化を考えながら、パーソナライズも考えるべきです。サイトの受け手が大きいなら、できるだけレギュラータイプを選びましょう。
  6. フォントの設定は自分だけを考えてはいけません。このフォントを見た受け手の反応も考えてみてください。

もちろん、Strikinglyでは日本語のフォントが利用可能です。

以上、ウェブサイトのフォントについて紹介いたしました。フォントとテーマが一致していれば、ウェブサイトは調和して美しくなります。カスタマイズ機能を通して、サイトをより個性的にすることができます!そして、Strikinglyはたくさん美しいテンプレートを用意しているので、ぜひチェックしてみましょう。

バリアフリーのホームページはどのようにデザインするのか、こちらをご覧ください。

ちなみに、上記のStrikinglyはアカウントを登録するだけで、無料でサイトを作ることができます。有料コースも14日間の無料試用があります。もしあなたがタイプのデザイナーであれば、ウェブサイト上でフォントの効果を見たいなら、やってみましょう!もしwebサイトをつくる方法を知りたいなら、この記事をお勧めします。

ここをクリックして、モバイルウェブデザインについて調べよう!

マーケティングにおけるEDMの意味がわからない方は、これを見たらいかがでしょうか。

ご質問などございましたら、support@strikingly.comの方までお問い合わせください。