LIGのメルマガ、はじめました!
LIGのメルマガ、はじめました!
#2
デザイナーズコラム

Webデザインが「どこかさみしい」と思ったとき、3分で試せるアイデア7つ

まきこ

3. フォントを変える

いつもなんとなくスタンダードなフォントを選んでしまいがちですが、遊べるときは遊んだ方が吉。フォントデザイナーの方々の偉大な作品の力を借りて、お手軽に雰囲気を変えてみましょう。

全体のフォントを変えてみる

3mindi-06

全体をポップでかわいいフォントに変えてみるだけで、一気に印象が変わりましたね。上記のような見出しの文章だけでなく、本文のフォントでも、読みづらくならない程度の変化球ならほどよいスパイスになります。
最近はクオリティーの高いフリーフォントも多いので、お気に入りのものをストックしておいて、いろいろ試してみるといいかもしれません。

飾りで入れる文字のフォントにこだわってみる

3mindi-07

全体のフォントを変更しつつ、「Design ideas」という文字を追加してみました! 読ませたい部分のフォントは読みやすさを優先することが多いですが、飾りとして入れる文字は、少しぐらい読みづらくてもあまり問題はないかな、とわたしは思います。
今回選んだ手描きのスクリプト体のように、使うだけで良い雰囲気にできる欧文書体はたくさんありますよね。いつか使ってみたかったあの個性的なフォントも、飾りとしてなら気軽に使えそうです。

4. メリハリをつける

要素の大きさや色にメリハリをつけると、ぼんやりとした印象のものも引き締まって見え、「なんかさみしい感じ」を払拭できることがあります。
では、内容に合わせて何を強調すべきかに気をつけながら、強弱をつけてみます!

文字のジャンプ率を高くし、キーワードだけを大きくしてみる

3mindi-08

ジャンプ率(フォントサイズの差)を大きくするとともに、強調したいワードを他の文字よりも大きくしてみました。これもバナーやLPでよくやる手法ですよね。ジャンプ率を上げると躍動感が出て、大人しい印象を軽減できます。
また、特に注目してほしいキーワードだけを大きくすれば、文字がもつ訴求力が上がり、大きい声で宣伝されているようなにぎやかさを醸成することができます。

色のコントラストをあげてみる

3mindi-09

グリーンをピンクに変えるだけで、にぎやかな印象になりました! 色のコントラストを出したいときは、明度の差や、色相の差を意識するとよさそうです。そして一般的に、彩度がより高い色で、寒色よりも暖色の方がにぎやかな印象にすることができます。
上記の例では、「にぎやかにしたいときに」の文字の白との明度差をつけるために、グリーンよりも明度が低い色で、かつ彩度が高くて暖色系の色にすればいいかな、ということでピンクを選びました。

5. 絵や写真を入れる、増やす

ページなどに対しての、絵や写真の割合である「図版率」。これを上げると、親しみやすい雰囲気にすることができます。Webデザインでいうと、テキストだけではなくてアイコンを入れてみたり、写真を大きめに使ってみたり、というような対応をよくしますよね。
制作物の内容に沿って、イメージが膨らむような絵や写真を使ってあげると、さみしさも軽減するし、内容も伝わりやすくなって一石二鳥。さっそくやってみます。

アイコンをいれてみる

3mindi-10

「アイデア」という言葉から電球を想起したので電球のアイコンを入れてみました。アイキャッチにもなるし、一気に親しみやすい印象になりましたね。
ちょっとアイコンを入れる場所をしくじった気もしますが……3分で試してみるだけだから、しくじることもありますよね! パパッと試してみてヒントを得たら、じっくり丁寧につくりこんでいくのがいいと思います

写真を入れてみる

3mindi-11

「3分で試せる」という言葉にちなんで、ストップウォッチの写真を入れてみました。さみしさがなくなり、見る人の興味を引くような、わくわく感があるデザインに近づいたのではないでしょうか。
内容に合う写真素材を用意する手間はかかりますが、とりあえず試してみるだけなら、写真を入れてみるのはかなりコスパのいい方法です。仮素材をあててみて、「これでいけるな」と思ったら、本番用の写真を手に入れましょう。

6.ホワイトスペースを白以外にする

要素そのものを変えるのではなく、余白に手を加えることで、全体の印象をガラッと変えることもできます。3分でできるので、難しく考えず、とにかくやってみましょう。

背景色をかえてみる

3mindi-12

白い背景色を、緑に変えてみました。色面が大きくなったことにより印象が強まって、さみしさが払拭されましたね。
背景全面に写真を配置しても、同じような効果が得られます。背景によって全体のイメージが左右されるため、どんな色や写真にするかは慎重に選ぶ必要がありますが、とりあえず試してみるだけなら、それっぽいものを選べば大丈夫。考え込みすぎずにまずはやってみると、意外にしっくりくるものが見つかったりしますよ。

背景に薄い模様を入れてみる

3mindi-13

背景全体にストライプの模様を入れてみました。こちらはわかりやすいようにちょっと濃いめの模様にしていますが、実際には、もっと色を薄くしてもいいと思います
見えるか見えないかくらいの変化でも、面積が大きいので、それなりににぎやかしの効果が期待できるはず。ストライプやドット、紙っぽいノイズなど、模様のバリエーションもさまざまなので、 いろいろ試してみるといいかもしれません。

7. アニメーションにする

最後に紹介するのが、「色も大きさも、入れられる要素も限られてる。っていうかあまりごちゃごちゃさせたくないし……」というときに使える、こちらのアイデア。Webサイトなどのデジタルコンテンツの制作物ならではのアイデアですね。
本番用のデザインとなると、機能との整合性をとったりタイミング調整をしたりなどけっこう大変ですが、ラフデザインとしてなら気軽にやってみてもいいかもしれません。ものは試しに、やってみましょう。

フェードインさせてみる

anime

はい。やってみました。簡単なフェードインです。
静止画のデザインは元のままでですが、このまま作り込めば、さみしさを払拭できそうな希望が湧いてきましたね!
実は、このアニメーションをつくるのに3分以上かかってしまいましたが、ただ想像するのよりも具体的なイメージを得られるので、静止画の方を直しつつ、アニメーションも調整するというフローの取り掛かりとしてはいいんじゃないでしょうか。

まとめ

今回は、デザインの「なんかさみしい感じ」を解決するために、すぐに試せるアイデアをご紹介しました。

デザインをしていると、ときには上手くいかなくて手が止まってしまうこともありますが、そんなときの突破口として役立てていただけるとうれしいです。案ずるより産むが易し。いたずらに迷うよりも、できるだけ早くヒントにたどりついて、クオリティーを高めていくことに時間を使いたいものですね。

それでは、また!

キャリアアップ
「Studio上野でWebクリエイターを目指す!」

  • 1
  • 2