こんにちは!大人になったら勝手に字が上手くなると信じていたのに
下手くそなまま大人になってしまったHIDEです!!(笑)

「今はスマホとパソコンがあるから字なんか書けなくてもいいんだぜ~☆」
って言ってる若者を「けしからん!!」と思っていましたが
いざ自分がパソコンを使い始めるとこれが非常に便利でありまして…
綺麗な字も独特な字もパソコン一つで書けちゃうんですよ!

綺麗な字を書く練習はまた追々やるとして
今回はフォントの重要性・フォント一つでこんなにもイメージが変わるんだ
っていう所を紹介していこうと思います。

標準フォント

新しくPCを購入すると、すでに標準のフォントとしていくつかの書体が導入されています。
ゴシック体明朝体游明朝行書体メイリオヒラギノなどなど
なんとなーくどこかで聞いたことがあるような基本の書体が使えるようになっています。
何かの書類を作ったりwordで文書を作成して提出しなくてはいけないときなど
基本的にこれだけあれば困らないだろうというフォントはすでに使用できます。

ただ、「WEBサイトを作って自分オリジナルのロゴを作成したい」「バナー作りに挑戦してみよう」「イベント用の少し派手なポスターを作ろう」
そのようなデザイン性の求められる物を作る際には標準フォントだけだと物足りなかったり、自分のイメージしているデザインには合わないという事も出てくるかと思います。

そのような場合、自分のイメージに合った自分好みのフォントをダウンロードして自由に使うこともできます。

Google Fonts

こちらはGoogleが提供しているWEBフォントで、数多くのフォントの中から好きなものを誰でも自由に無料でダウンロードし使うことができます。
会員登録など面倒な手続きも不要なため気軽に使うことができ、多くの人が利用しています。
ただ、提供しているフォントのほとんどが英語のフォントなので、そこだけ注意が必要です。

WEBフォントとは

サーバー上にフォントファイルを置くことで、ユーザーのデバイス環境などに左右されずにデザイナーが意図したフォントを表示できるようにしたもののことを指します。
例えば、若い女の子に人気の雑貨屋さんのホームページを作り、可愛いらしいポップな見出しやロゴを作ったとします。
しかし、この人のパソコンからこのフォントは対応していないので別のフォントに置き換えます
なんてことがあったらせっかく作った可愛いサイトも台無しですよね。
WEBフォントを使えば誰もが同じデザインでサイトを閲覧でき、制作側もわざわざ見出しだけデザインを別で作って画像として表示するなどの手間も省けるわけです。

Google Fontsの使い方

Google fontsで検索すると、このようなサイトが出てきます。

 

フォント名やどんなスタイルのフォントなのかサンプルが表示されています。
右上の+の部分をクリックしてあげると+が-に変わり
下から黒いバーが出てくるので、右上の-のマークをクリックします。

 

するとこんな感じでメニューのようなものが出てくるので必要に応じてスタイルをカスタマイズすることができます。

右上の矢印のマークがダウンロードのボタンです。

HTMLでフォントを読み込む場合

サイト構築を行い、自身で作ったサイトにWEBフォントを用いた場合、
コーティングを記述したファイル内にWEBフォントを読み込むための記述が必要です。
こちらも簡単に行うことができるのでやってみましょう。

先ほどフォントをダウンロードした時と同様にFamily Selectedのメニューを表示させます。
ダウンロードの際はCUSTOMIZE横のEMBEDをクリックし、画面中央のSTANDARDをクリックします。

するとHTMLの<link>タグが表示されるので、こちらをコピーして貼り付ければフォントの読み込みができます。

CSSから読み込む場合

HTMLをいじらずにCSSからWEBフォントを読み込む場合、先ほどのSTANDARDの右側@IMPORT
をクリックするとまたソースが出てくるので、こちらをCSSファイルに貼り付ければOKです。

フリーフォント素材の使用

「フリーフォント素材」等のキーワードで検索をしてみると
無料でダウンロードして利用できる素材がたくさんあります。
そこで僕もいくつかフリー素材のフォントをダウンロードしてみました。

※素材によってひらがな・カタカナのみの対応であったり、商用OKなものと個人利用に限るものなど様々あるので
利用の条件などしっかり目を通し、間違っても勝手に商用で利用してフォント泥棒にならないよう気を付ける必要があります。

フォントの使用方法

ただフォントをダウンロードしただけでは実際に使うことはできないので、自身のパソコンで使えるようにしなくてはなりません。
まずフリーフォントのダウンロードの仕方はものやサイトによって多少の違いはあるかもしれませんが
その多くがボタンクリック一つでできるようになっています。
ダウンロードしたファイルを解凍すると「.ttf」「.otf」などの拡張子のファイルがあります。
こちらがフォントのファイル形式になります。

パソコンのコントロールパネルを開くと中にフォントというファイルがあります。
このファイルの中に入っているものが今現在使用できるフォントになります。

 

ファイルを開いてみると、標準フォントだけでも結構な数のフォントが入っています。

こちらにダウンロードしたフォントのファイルをドラッグしてあげます。

これで完了です。こうすることでダウンロードしたフォントを自由に使うことができます。

フォントを変えてイメージの違いを見てみよう

ではフォントを変えるとどれくらいイメージが変わるのかを見てみます。
例えば、標準フォントで書いた文字を見てみましょう。

    

よく見かけるような一般的な書体と行書体。
ただ同じ文言を違う書体で書いただけで全く印象は異なります。

例えば、IT留学の広告を作るとします。
書体をまた別のものに変えてみます。
こちらではどうでしょう?

なんとなーくどこかの広告や看板などでありそうな感じですね。

ではこちらはどうでしょう?

 

間違いなく、可愛い女の子が書いた字に違いない!!
と男性諸君は勘違いするに違いない!!
そもそも文言が変わっとるやないか!!!って話ですけど(笑)

でも真面目な話、文字の書体が変わるだけで本当に全く違ったイメージになりますし
字を見ればどんな人が書いたのかやなんとなくそれを書いた背景みたいなのが想像できるところが面白いですね。

では最後がこちらです。

これはもう絶対に留学しないですね(笑)
留学しようと思っていた人が最後にこれを見たら行くのやめるレベルですね(笑)

ただ、書体だけでかわいいと思ったり怖いと思ったり見た人に字だけでそれがどんなものなのかを想像させれるというのが
字の凄いところですね。

最後のまとめ

・書体一つでデザインのイメージがゴロっと変わる
・フォントなんて何でもいいやと軽視してはいけない(フォント選びもデザインではかなり重要!)
・フォントは自分のイメージに合ったものを簡単にダウンロードできる

以上のことから使うフォント選びがデザインを考える上では非常に大事なことだとわかっていただければ幸いです。
IT留学ではデザインの基礎から学んで自分のサイトやロゴづくりなんかもできちゃいます!!

IT留学に関するお問い合わせ
セブ島IT留学生が送る|デザインに適した様々なフォントを使いこなそう

この記事が気に入ったら
いいね!をお願いします(^^)