Web関連

webデザイナーなら知っておくべきwebフォントの使い方

皆さんはWebデザインをクライアントに見せた時に「なんか普通すぎるね……」「もっと派手にしてよ!」なんて言われてしまったこと、ありませんか?素材を新たに探す時間はないしどうしよう……。そんなときに、Webフォントに一工夫して切り抜けたことがあります。「メリハリがついて良いデザインになったね!」なんて言ってもらえるくらい一気に良いデザインになるんです!今回は、そのとき役立った、フォントに手を加えるだけでデザインを良くするテクニックを紹介します!

Webフォントのサイズを変えるだけで、見違える程良いデザインに!

Webデザインを急遽すぐに変更!というとき、素材を新たに探しなおして、フォントそのものから変えて試行錯誤……なんてことをしていませんか?実は、フォントサイズを変更するだけでもメリハリの効いた綺麗なデザインを作ることができるんです。

極端に大きくする

見出しから本文まで、見せたい情報から順番にバランス良くサイズを小さくすると安定したデザインになりますが、バランスが良すぎて目が止まらない……ということになりかねません。そんなときは、思い切って見せたい情報をどどんと大きくしてみましょう!字間やサイズを思い切り変更することがコツです。重要な情報順に目立つ、ということは大切ではありますが、そこから多少逸脱しても良いWebデザインというのはいくらでもあります。まずは試してみましょう!キャッチコピーなど、読んでみたらついつい気になってしまうような内容には特に有効です。

逆に、極端に小さくする

前述したように、見せたい情報から順番に小さくしていくとバランスがいいですが、ときにはそれを崩してみることが良いデザインを作る糸口になるんです!例えば、見出しを本文より小さくする変わりにカラーを変えるなど、別の部分で差別化をすれば問題ありません。また、フォントを小さくすることで余白が生まれ、綺麗で余裕を感じるデザインにもなりますね。

 

目立たせたい部分に違うフォントを使う!

目立たせたいけど、極端に文字のサイズを変えるのも難しいかも……なんてときは、フォントそのものを変えてみましょう。明朝体でデザインされているのであればゴシック体、ゴシック体でデザインされているのであれば明朝体を使うと、サイトの中でそこだけフォントから受ける印象が違うので目を引くことになります。差し色ならぬ差しフォントですね!

img_font02.jpg

いかがでしたか?ぜひ一度試してみると、デザインががらっと変わって面白いですし、クライアントにも満足していただけると思いますよ!フォントを変えるだけでも随分印象が変わって見えるので、まずは挑戦あるのみ!ですね。

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

UI/UXデザイン

ついつい読みたくなるwebサイトのコラムを書くコツ ~作文 3つの基本編 ~前のページ

ブログ・コラムを毎日更新するWebライティングの5つの秘訣次のページ

ピックアップ記事

  1. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  2. 新しい販売形態であるDtoCについて考えてみる
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    2016年はVR元年?WebにVRは来るか

    本格的なVR体験が出来るOculus Rift(オキュラス リフト)を…

  2. Web関連

    遊びながらスキルアップ?楽しくデザインのことを学ぶ!

    皆さんは学生時代、勉強することが好きなタイプでしたか?それとも苦手なタ…

  3. Web関連

    とっても効果的!Facebook広告の活用メリット

    超有名SNSのFacebook。ページを開設する企業側のメリッ…

  4. Web関連

    サイト設計で変化するサイトイメージ

    人間は思っているより変わりやすい生き物です。色や物によって大きく気…

  5. Web関連

    なぜ2MBなの!?ビジネスマナーの意外な理由

    私生活では使わなくなったメール機能ですが、実は送信できる容量の限界が決…

  6. Web関連

    最近話題のARとは?

    ARとはなにか? 近年、スマートフォンが普及し様々なアプリが開発され…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. Web関連

    デバイスでもっと快適にイラストライフを目指す!!
  2. Web関連

    情報を守ろう!はじめの一歩は机のお片付け!
  3. DX関連

    農業のデジタル化・デジタルシフトはどのように進んでいる?
  4. Web関連

    自動顧客育成!?マーケティングオートメーションのススメ
  5. Web関連

    改めて知っておこう!アドテクノロジーの種類と手法の説明
PAGE TOP