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関連

    ワンピースの『悪魔の実』専門ECサイトを構築しよう

    こんにちは、デザイナーの石塚です。ユーザーが目的の情報に迷わずたどり…

  2. Web関連

    e-Sportsのこれから

    eスポーツとは「エレクトロニック・スポーツ(electronic sp…

  3. Web関連

    「早い!安い!うまい!?」Twitter広告のあれこれ

     皆さんこんにちは。日頃から情報収集を欠かせないWeb業界ですが、ふ…

  4. Web関連

    ホームページ制作会社が解説する「Webシームレス化」

    突然ですが、Webサイトはどのデバイス、どの環境でも見れるようにしない…

  5. Web関連

    正しい言葉遣い、出来ていますか?

    社会人には、正しい言葉遣いの知識が必須です。同じ会社の先輩、上司に…

  6. Web関連

    スマホサイトにパララックスデザインは必要?

    こんにちはアンドロイドユーザーの池田です。最近、スマホの電子マネーを使…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    WEB接客と親和性の高そうなサービスを考えてみた
  2. Web関連

    顧客満足度向上ってどうすればいいの?仕事をとおして学んだこと
  3. DX関連

    DX(デジタルトランスフォーメーション)・デジタルシフトへの対応が必須となる理由…
  4. Web関連

    動画を使うサイトってかっこいいだけ?
  5. SEO関連

    あなたのサイトは大丈夫?リスクだらけのブラックハットSEO
PAGE TOP