DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • webサイトデザイン時にボクがよく使うwebフォントを5つ選んで紹介します

webサイトデザイン時にボクがよく使うwebフォントを5つ選んで紹介します

design_thing

  • top
  • blog
  • webサイトデザイン時にボクがよく使うwebフォントを5つ選んで紹介します

webサイトデザイン時にボクがよく使うwebフォントを5つ選んで紹介します

2020.03.12.

スポンサーリンク

スポンサーリンク

いまやwebサイト制作には欠かせない「webフォント」。ボクがwebデザインをはじめた2007年当時などは英字フォントがwebサイトで使える時代ではなく、日本語フォントもwindowsならMSゴシック、macならヒラギノしかないような時代でした。

しかし今は英字フォントはgoogleが無料で提供してくれている「Google Fonts」の中から選ぶことができますし、有料にはなりますが「Adobe Fonts」や「FONT PLUS」などで日本語フォントも数ある中からイメージにあったフォントをwebページ上で表示できるようになりました。

昔を知ってる人からすると、本当にいい時代ですよ・・昔はいいデザインのフォントを使おうとすると、画像にしてwebページに表示するしかなかったですからね・・

BUROKIアイコン

webフォントを使えることでデザインの幅が格段に拡がりましたね。

しかし、そんなwebフォントも今では種類が豊富になりすぎていて、初めての人は「どれを使っていいのかわからない・・」といった状況になっているかもしれません。なので今回は、ボクがよくwebサイトを制作するときに使用している英字のwebフォントを5つ紹介したいと思います。webサイトの制作時にぜひ参考にしてみてください。

web font list

よく使うwebフォントリスト

1. Brandon Grotesque

ボクが好きでよく使っている「Brandon Grotesque(ブランドン・グロテスク)」という書体。数年前にはじめて目にしたときはその洗礼されたシンプルさと無駄のないディティールに衝撃を受けました・・(笑)。

Brandon Grotesqueのフォントページ
ロゴデザインにもよく使用されているフォントです

Brandon Grotesqueを使った制作実績

昨年制作したエルハウジングさんのイベント情報サイト「えるひろば」にて使用しました。フォントの角が丸くなっいて親しみやすさがあるフォントなので、えるひろばの家族で参加できるイベントの雰囲気にマッチすると思ったからです。

そんなBrandon Grotesqueもなんと、webフォントとして使える時代になりました。これは本当に個人的にすごいことだし嬉しいこと・・。印刷だけでなくweb上で表示させてもしっかりとした可読性を保ちつつ、webサイト全体のクオリティも上げてくれます。Adobe fontsにて使用することができますが、有料です。

Adobeと契約したあとなら使用できると思うので、気になる方はぜひ見てみてください。書体のバリエーションは幅広く、細いものから太いものまで合計12種類あるのも用途によって使い分けられるのでうれしいですね。

2. Lato

「Lato(ラト)」も先ほど紹介したBrandon Grotesqueに似たシンプルなディティールのフォントです。いや、Latoのほうがよりスッキリとしていてクセがないので使用できる用途も幅広いですね。

Latoのフォントページ
クセのないディティールなので使いやすい

LatoはGoogle Fontsにて無料で使用できます。バリエーションも豊富で極細から太めまで合計10種類展開されています。「Brandon Grotesqueのようなフォントを無料で使いたい」という人にはオススメだと思います。

3. Bebas Neue

「Bebas Neue(ベバス・ノイエ)」は縦長で力強く躍動感のあるフォントで、スポーツ関係でよく使用されています。文字に太さがあるので女性向けというよりは男性向けな印象を持つフォントです。インパクトもあるので印刷物との相性もいいです。

Bebas Neueのフォントページ
カフェ関係の制作物とも相性良さそう

Bebas Neueを使った制作実績

スポーツ関係と相性がいいフォントなので、昨年制作させていただいた「株式会社スポーツタカハシ」のコーポレートサイトにて使わせていただきました。ページのタイトルや数字など、要所要所に使うことでアクセントになりオリジナリティのある見せ方ができるフォントです。

Google Fontsにも「Oswald」という似たフォントがあるのですが、細かいディティールはBebas Neueのほうがしっかりしていてデザイン的にもクオリティが高いですね。

Bebas Neueも有料ですが「Adobe Fonts」にて使用可能です。文字のバリエーションは1種類のみ。

4. Arvo

「Arvo(アルボ)」はこのBUROKI designのwebサイトで使用しているwebフォントです。英字の部分を見てみると、日本語の書体とは少し違ったデザインの書体になっていることに気付きませんか?

Arvoは「スラブセリフ書体」と呼ばれるフォントで、「セリフ」とは「ひげ」を表す言葉で、「スラブ」は「石や金属など四角く幅の広い板」という意味があります。なのでこのスラブセリフ書体は「四角い髭がついている書体」という意味になるんですね。

Arvoのフォントページ
文字の節々に四角い板がついてますよね

スラブセリフ書体の特徴は可読性がいいのと、なんといっても力強い印象を与えるところ。確固たる意思を伝えやすいんです。だからボクは自分自身のデザインではよくスラフセリフ書体を使っています。フォントのテイストからは男性らしさを与えることもできるので、男性向けといった印象も持ちますね。

ちなみにBUROKI designのロゴデザインもスローガンで制作したタイポグラフィもスラブセリフが元の書体となっています。

ArvoはGoogle Fontsにて無料で使用できます。バリエーションは通常、斜体、太め、太め斜体の合計4種類です。

5. Libre Baskerville

最後は「セリフ体」、「ひげ」があるwebフォントをご紹介。「Libre Baskerville(リブレ・バスカービル)」というフォントです。

「セリフ体」はディティールに曲線が多く使われていることもあって、女性らしさや品質の良さを伝えることができる書体です。よく女性誌のロゴなんかにも使われているかと思います。

Libre Baskervilleのフォントページ
品の良さが漂っていますね

Libre Baskervilleを使った制作実績

最近制作・公開した「ALCO TRADING LTD.」さんのwebサイトのページタイトルに使用しています。モードでスタイリッシュな印象を与えることもできるのでアパレルやブランドサイトにも使いやすいフォントだと思います。

ただ、こういったセリフ体はwebとの相性はあまり良くなく、小さいサイズで使用すると可読性が落ちてしまうという問題があります。なので大きなサイズで使用するタイトルであったり、本文は別のフォントを使用してアクセントとして使い分けることがベストだと思います。

Libre BaskervilleはGoogle Fontsにて無料で使用できます。バリエーションは通常、斜体、太めの3種類です。

フォントそれぞれに形があるように、使い方がある

今回はボクがよく使うwebフォントを5つ、ピックアップしてみました。ここで挙げたものだけでなく、webフォントは今やかなりの数があるので、気になる人はwebフォントを扱うwebサイトでいろいろ見てみて、使ってみたいものは積極的に使ってみたらいいんじゃないかと思います。

意外と使ってみると自分が思っていたイメージと違っていたりして、なかなか奥が深いなーと思わされたり・・そのうちwebフォントの使い方を説明したブログも書いてみようと思います。

制作する上でいろんな手段が増えていますが、webフォントは制作するデザインに合う、最適なフォントを選ぶことが大切ですね。

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

スポンサーリンク

blog list

ブログ一覧

think

2020年3月の活動報告。3月はこんなデザイン制作をしていました

少し前のブログにも書いたことですが、3月19日でボクが会社に行かなくなって1年が経ちました。1年前の今ごろは引越しに向けての準備やフリーランスと…

2020.04.09.

design_thing

プロのデザイナーがpowerpointでの資料制作でよかったことを書いてみた

またまた資料デザイン関係のブログになりますが・・ 少し前にofficeのソフト「powerpoint(パワーポイント)」で資料を制作したときに「困ったこと」…

2020.04.07.

think

【祝】2020年3月の月間PV数が10,000ページビューを突破しました

2018年の11月からこのブログ更新をはじめ・・ それから1年と5ヶ月が経った2020年3月、ついに・・BUROKI design webサイトの月間のページビュー数が10…

2020.04.05.

private

コロナウイルスから身を守る!2020年マスク探しの旅 in 天王寺と寺田町

今年から登場して、いまや世界中に脅威をもたらしているコロナウイルス・・本当に毎日大変ですね。 ボク自身、予防は常に心がけていますが、予防する…

2020.04.03.

design_thing

デザインを無駄にしない!バナーを制作する前に把握しておきたいこと

instagramなんかでデザインを勉強している人たちがよく練習でつくったバナーのデザインを投稿されています。 例えばある商品を訴求したい場合、その…

2020.04.01.

design_thing

プロのデザイナーがpowerpointを使った資料作成で困ったこと5つ

今年の2月と3月の2ヶ月間、昨年末から決まっていたスケジュールどおり、powerpointでの資料制作に没頭していました。 制作したページ数は合計でなん…

2020.03.30.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル