Web関連

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

0

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

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

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

極端に大きくする

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

逆に、極端に小さくする

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

 

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

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

img_font02.jpg

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    webに張り付きで疲れている担当者にオススメ!ドクターフィッシュに会いに行こう!

    美について考えることが多くなってきた、デザイナーの池田です。美とい…

  2. Web関連

    自前のサイトとプロのWeb制作会社が作ったサイト、どこが違う?

    Web制作会社ティファナが、「自前のサイトとweb制作会社が作ったサイ…

  3. Web関連

    アドラーの思想でSDGsについて考えてみる

    最近SDGsという言葉を聞くことが増えたと思います。SDGsとは、…

  4. Web関連

    ロボットも好みはやっぱりスリムでイケメン!

    こんにちはこの記事のタイトルと外見が似ても似つかないコーダーの須澤です…

  5. Web関連

    なるほど!気付けばそこにいる、ゲーミフィケーションについてまとめてみる

    「んん?...げーみふぃけーしょん?」と言う方もいれば、「ああ、ゲーミ…

  6. Web関連

    モバイルはPCの延長戦ではなかった

    Web業界の第一線で活躍するティファナがWeb関連情報をお届けしていま…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    SEOが辿ってきた激動の歴史とは? ~SEO誕生から現在までの歴史
  2. Web関連

    動眼(どうがん)でアーティスト気分に浸りたい!
  3. Web関連

    初めてのFintech
  4. Web関連

    富士山から習うサイトのモバイル対応の必要性
  5. サービス・新技術

    キャッシュレス決済により、財布ともさよなら・・・
PAGE TOP