左に飛ぶ飛行機
Blog

4/27 今日のSTUDIO千葉

2021.04.27

 

今日は、午前中は4人の受講生さんが一生懸命PCに向かっていました。

私はほとんど見守っておりました。

 

今日はクライアントワークのデザインを見せていただき、フォントについて話す機会がありました。

みなさん、どうややってフォントを選んでいますか?

 

 

デザインにおいてフォント選びはとても重要です

 

 

そのサイトの印象を左右するフォント選びはとっても大事。デザインスキルが高い人ほど、理由を持ってフォントを選びます。感覚で選ぶのではなく、なぜそれにしたのか言語化できると尚良いですね。

 
ここ千葉のスタジオでWebデザイナーコースを勉強している皆さんは、デザインだけじゃなくコーディングも勉強すると思います。そのときに、まずは定番Webフォントを知ってコーディングしやすいフォント選びをするのも大事ですよ!
 
 
 
Webフォントが何かわからない人はこちら
 ↓ ↓ ↓
 
 

世の中には様々なPCやスマホがあって、それぞれのバージョンも異なるので、同じホームページを見ても制作側が意図したフォントが反映されない事があるのですね。それを解消するためにあるのが「Webフォント」です。

Webページの読み込みと同時に、ネットワーク上にあるフォントデータをダウンロードすることができるため、どのデバイスで見ても制作サイドが意図したフォントで表示することが可能になる、画期的なシステムなんです!

 

Webフォントを利用すると、

 

① SEO効果を保ったままデザイン性も上げられる

Webフォントの最大のメリットは、ユーザー環境に寄らず、豊かなデザイン表現が可能であることです。作成者の意図する印象を与えることができたり、文章の可読性・視認性を高めることができます。従来は、デザイン性の高いサイトを構築する際、デザインフォントを含む箇所を画像としてWebサイトに配置しなければなりませんでした。でもそれだと、画像と判定されてしまい文字情報をクローラー(検索エンジンのロボット)に見つけてもらえないのです。Webフォントでデザイン性を高めて、SEO効果も高いWebサイトが構築できるのです!

 

② レスポンシブに適している

文字情報を画像でなくちゃんと文字として配置できることで、レスポンシブデザインで行の折り返しが自在になり、どのデバイスでも最適な表示ができます。

 

 

Webフォントは、有料だと

 

TypeSquare

Adobe Typekit

fonts.com



この辺りが有名ですが、

 

無料で使えるWebフォント

 

Google Fonts

 

 

私はここから選ぶ事が多いです。

 

 

 

本文には、視認性の高い定番フォントを使い、文字サイズは平均的に16が多いです。

 

見出しにはデザイン性の高いものをサイトの印象に合わせて選びます。

 

是非これらのサイトを参考にして、デザインの時からコーディングのしやすさを取り入れると、その後の作業効率がぐんとUPしますよ!

«

»

【オススメ書籍】HTML+CSS標準入門

4/8 今日のSTUDIO千葉

4/7 今日のSTUDIO千葉

経験値ゼロの私がWebデザイナーになったきっかけ

1/8 今日のSTUDIO千葉