Web関連

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

0

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

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

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

極端に大きくする

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

逆に、極端に小さくする

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

 

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

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

img_font02.jpg

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    休息 ~Web担当者のためになるサイト特集~

    コラムを書き続けていると色々なところから情報収集をするため、「ため」に…

  2. Web関連

    正月太りもこれで解消!?スマート家電を活用してスマートな生活に!

    年末年始に美味しいものを食べてゆっくり過ごして、年明けには新年会。…

  3. Web関連

    Webサイトメンテナンスの重要性

    今年のプロ野球は、松坂投手や黒田投手が戻ってくることもあり、とても楽し…

  4. Web関連

    Webアプリに対する攻撃手法とその対策

    こんにちは。昨今、WEBセキュリティ関連の問題が浮上してきています…

  5. Web関連

    Web業界だけじゃない。KPIの使い方

    気が付いたらもう3月。1年の6分の1が終わってしまいました。時…

  6. Web関連

    webの歴史と未来

    今まではできなかったことも、Webでできることが多くなってきていま…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    これでパソコン用メガネも必要ない?目が疲れにくいWebデザインとは
  2. Web関連

    SNSを活用せよ。SNSを使った成功事例
  3. Web関連

    お土産の購入もECサイトを有効活用
  4. Web関連

    企業の信頼性向上をCSRにより図りたい
  5. Web関連

    顧客ロイヤリティを上げる為に…信頼されるWebサイトを 作るのに必要…
PAGE TOP