<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=902661326467941&ev=PageView&noscript=1" />

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

まきこ


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

こんにちは、デザイナーのまきこです。
iPhone6のディスプレイがバキバキに割れてしまってから、心を無にしてずっと使っていましたが、iPhone6sの発売により、最近はちょっとウキウキしています。

ところで、デザイナーのみなさんは、普段作業をしているときに「このままのデザインだと、なんかさみしい」「もっとにぎやかにしたい」と思ったことはありませんか?
そんなときは、制作物に応じた「にぎやかし」をするのがもちろん良いのですが、いろいろ難しく考えるよりも、手を動かしてみたほうが早い、ということもありますよね。ということで今回は、デザインが「なんかさみしい」と思ったときに、だいたい3分あれば試せるデザインアイデアを7つご紹介します!

▼ デザインアイデアに詰まったときはこちらもどうぞ。

どこかさみしいデザインの例

3mondi-01

センター揃えにして、すっきり見えるようにレイアウトされたデザイン例です。
スタンダードなデザインではありますが、場合によっては、さみしく見えるかもしれません。今回はこちらをもとにして、3分でできるデザインアイデアを実際に試してみましょう。

1. 水平・垂直に揃えたラインを崩す

デザインの基本は、水平・垂直のラインをきれいに揃えること。
でも、きれいに揃いすぎたデザインは、まじめすぎたり、単調でつまらないものに見えてしまうことがあります。そんなときは堅くなりすぎないように、揃えたラインをちょっと崩してみるといいかもしれません。

全体を斜めに傾けてみる

3mindi-02

バナーなどでもよくみかける手法です。
回転させるだけでそれなりにスピード感や動きを感じさせることができます。さらに丁寧に、スイスデザインのように斜めのグリッドに沿って配置して、にぎやかさと整然とした美しさを同居させることも可能です。スタイリッシュな雰囲気にも合うため、汎用性の高いアイデアですね。

曲線を取り入れてみる

3mindi-03

文字を円弧に沿って配置してみました。
簡単ですが、ポップなにぎやかさがプラスされましたね。座布団のかたちを工夫すれば、打ち出したい世界観に合った、にぎやかなデザインが実現できるはずです。
そのほかにも、整えたラインから飛び出させたり、互い違いにしてみたり、ランダムにずらしたり。崩し方にはたくさんのパターンがあるので、いくつかを手早く試してみて、しっくりくるものを探してみるのもいいですね!

2. 版面率や密度を上げる

ページ全体の面積に対して、文字や写真などの要素がどれくらいを占めているかを示すのが「版面率」。版面率が高いほど、余白は少なくなります。
たっぷりと余白をとったレイアウトは、高級感やゆとりを感じさせますが、ときに大人しすぎることもありますよね。そこで、版面率や要素どうしの密度を上げることで、大人しくてさみしすぎるデザインの印象を変えてみましょう

文字間・行間を詰めて、周りの余白も小さくしてみる

3mindi-04

ぎゅっと中身が詰まったような、にぎやかな印象になりました! 文字間や行間を詰めると、ひといきに読みやすくなって文字全体の面積が小さくなるので、バナーなどサイズが限られた制作物のときにも役立ちます。

色面を増やしてみる

3mindi-05

緑色の部分の面積を増やしてみました。すっきりとした印象はそのままですが、全体の余白が少なくなり、大人しい雰囲気は軽減しましたね。色のイメージが強くなるため、どの色を増やすかは慎重に決める必要がありますが、とりあえず試してみるだけなら3分もかかりません

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分以上かかってしまいましたが、ただ想像するのよりも具体的なイメージを得られるので、静止画の方を直しつつ、アニメーションも調整するというフローの取り掛かりとしてはいいんじゃないでしょうか。

まとめ

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

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

それでは、また!

まきこ
この記事を書いた人
まきこ

デザイナー

おすすめ記事

  • 【検証】「愛してる」と言われるのと言うのでは女の子はどっちがトキメクのか?

  • なぜ「美女と野獣」カップルは世の中に存在するのか?渋谷女子20人に聞いてみた結果

    LIG PR

  • 出会って4ヶ月で婚約→入籍した夫婦が「結婚を迷わなかった理由」が超カッコいい

    LIG PR

  • 5股された女たち!ナッツに遊ばれた恋人たちの緊急座談会

    LIG PR

  • 恋愛のプロに聞く「絶対やれるデートコースを教えてください」

    LIG PR

  • 同僚(39歳独身)のデートに密着し、彼が結婚できない理由を探ろうとした結果…

    LIG PR

  • 40代が注目するオールインワンジェルとは?

    PR サラヤ株式会社

Recommended by