Web関連

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

0

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

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

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

極端に大きくする

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

逆に、極端に小さくする

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

 

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

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

img_font02.jpg

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    スマホゲームと家庭用ゲームの今

    こんにちは!ゲームも大好き、デザイナーの萌々子です!以前は植物…

  2. Web関連

    CD、買っていますか?ネットでやり取りされる音楽

    皆さんは、最近CDを買いましたか?ここ数年で音楽の販売方法も変化しまし…

  3. Web関連

    デジタルマーケティングに利用されるNoSQLとは

    こんにちはサーバーエンジニアの橋本です。昨今デジタルマーケティ…

  4. Web関連

    情報をうまく活かしてサービスレベルUP!デジタルマーケティングで変わる企業と顧客との距離

    インターネット元年といわれている1995年から20年がたち、私たちの生…

  5. Web関連

    スマホアプリとネット注文で追加オーダーをGET!

    皆さん!とうとうこの季節がやって来ましたね!そうです!「食欲の春」です…

  6. Web関連

    LPってどれもどこか似ていませんか?

    何回かコラムを書かせていただいていると、普段見ないようなサイトも見るの…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    健康の基本は睡眠から|AIで良質な睡眠を
  2. Web関連

    Webサービスで地域を盛り上げる!
  3. AI関連

    ECサイトの差別化・利便化にもAIが貢献
  4. SNS関連

    Facebookユーザー必見!10倍早く読み込めて、しかも感情も表現できる「イン…
  5. AI関連

    【人工知能(AI)×フィットネスクラブ】人工知能があなただけの専属トレーナーに
PAGE TOP