読者です 読者をやめる 読者になる 読者になる

【今年の個人的にトレンドだったデザインやWeb制作のあれこれ】フォント編

【今年の個人的にトレンドだったデザインやWeb制作のあれこれ】フォント編

 

今年もあと少しですね。
というわけで、一年の振り返りをしてみたいと思います。 こういうのするの初めてだなー。
全3回(4回かも)に分けて執筆します。

  • 1.今年個人的にトレンドだったフリーフォント
  • 2.今年個人的にトレンドだったデザイン
  • 3.今週のイコール君振り返り
  • (4.今年よく実装したコーディング・マークアップ)

ってな感じで執筆していきます。 4に関しては書けたら書きたいところですが。大丈夫かな…
では、今回は「今年の個人的にトレンドだったフリーフォント」について

 

源柔ゴシック

源柔ゴシック
ではでは、まず日本語フォントから。今年よく使った、と書きましたが通年でよく使うフォントです。
有名すぎるフォントで今更感ありますが、今年は改めてこのフォントの良さを感じました。タイトルなんかをデザインする際にかなり役に立ちます。 紙媒体制作時は1番このフォントを使っています。
web制作の際はどうしてもfont-familyでメイリオヒラギノ角ゴ辺りの設定になってくるので、 1番というわけにはいきませんが、タイトルを画像にする時なんかはよく使います。

そして、少しカッチリした感じやビジネス色を出したい時は源柔ゴシックとセットの源真ゴシックを使用します。(厳密にいうとセットではないですが) こちらは源柔ゴシックの角が丸い感じに対し、ベーシックなゴシック体の見た目をしています。

 

Axis

Axis
そしてここからは英文フォントについて。こちらのAxisは文字間にかなりバラつきがあるので、カーニング必須、って感じではありますが、その手書き感が気に入っています。 カッチリしたデザインには合いませんが、ポップなデザインや可愛いイメージにはピッタリです。 Axisの数字もよく使いました。

 

f:id:logequal:20161223223403j:plain

AQUINO
AQUINOもよく使いました。 上記のAxisと似ていますが、AQUINOの方がちょっと太めです。 こちらは大文字しか使えないので、小文字を使いたい時はAxisにして、使い分けていました。 数字もありませんので、使いたい時はAxisを使っています。
このフォントの面白いところは、Oだけ泡のようなものが付いいる点です。もちろん付いていないバージョンもあります。 海のイメージがあるからだとは思いますが、こういうユーモアがあるのって面白いですね。Qも特徴的でカワイイです。

 

Montserrat

Montserrat
そして最後に、後半の方でよく使ったなーと思うフォントです。
Montserratはgoogleフォントですので、webフォントが使えます。
このフォントを見つけたきっかけは、サイトの制作時に、チェックボックスにチェックを入れたら数字がカウントする、というスクリプトを実装したのですが、 その際に表示される数字で何か分かりやすいwebフォントないかなーと検索した時に見つけたものです。

可読性もよく、そのままフォントをダウンロードしてその後のデザインにも取り入れました。 webフォントがあると、サイトの大見出しや中見出しに画像ではなくテキストを入れることができるのでありがたいです。

 

以下、上記のフォントを組み合わせて作ったタイトル集です。
log=の人気曲「もぐらくん」を使って適当にタイトルを付けました(笑)

f:id:logequal:20161223213418p:plain

全部テキストとcssでできるタイトルです。
レスポンシブサイトの制作時に使用しました。 横線は確かボーダーに疑似要素を用いて整えた気がします。 しかしその時は可変ではなかったので、1つずつチマチマサイズを変えていました。 つい最近コリスさんかどこかで可変タイプのスニペットを公開されていたので、 今後可変にしたい時はそれを参考にしようと思います。

 

f:id:logequal:20161223221818p:plain

画像で制作したパターン。
英字の部分をAxisで入力し、境界線を付けました。

 

f:id:logequal:20161223213420p:plain

少しのポップさと、若いこ向けのターゲット層だったので、装飾を足しました。 横の◯が雲だったりウサギの耳だったり色々言われましたが、言われるものが可愛かったのが面白かったです。 (特に何というわけではない)

 

f:id:logequal:20161223213424p:plain

少し幅を取るので、1ページが長めの縦長のサイトになると邪魔と言われました(笑)確かに。 なので短めのページでタイトルも1つ2つしかない時には目立って良いかな?と思います。

 

さて、フォントについて書きましたが、 今回選んだフォントたちは今年新たに出てきたフォント、というわけでもなく、 ほんとに個人的に今年よく使った、というだけです。
その時々でデザインのトレンドだったり、ページのデザインのイメージによって使用フォントは変化します。
私は所謂インハウスデザイナーというやつで、なかなか極端にイメージの異なるデザインをやることはないのですが、 それでも自分の中でのトレンドというものがあって、色んなデザインに挑戦してみたい、というのもあります。 また来年もステキなフォントに出会えるといいな、と思っています。