デザイナーと繋がる!WebJoyクリエイターブログ WebJoyコミュ

2017年02月25日 デザイン

今すぐ実践!誰でもできるプロっぽいデザイン技法

皆さんこんにちは!長崎のホームページ制作会社、合同会社WebJoyです。

今日中にデザインを仕上げなくては...

こんな時よくありますよね?

しかし、デザインとは残酷なものでどれだけの時間を費やしてもモチベーションが低い人には思いつかないものなのです。

だからこそ、デザインは好きじゃないと難しいものだと日々感じています。(私はデザインが好きな部類の人ですよ!)

特にここ数年流行りのフラットデザインは、シンプルな分簡単に見えて実は難しいのです。それはなぜかというと、要素が少ない分バランスでデザインの質が決まるためごまかしがきかないからです。だからこそ新人デザイナーにとって練習材料としてフラットデザインはかなりいい教材だと考えています。

そこで今日は、デザイナーの方はもちろん、そうではない方でもすぐ簡単に実践ができるちょっとしたフラットにも活かせるデザイン技法を紹介します!

この画像をみてあなたはどう思いますか?

多くの方は、「なんだこれ!?」と思いますよね?

しかし、デザインって見るとできそうでもいざ作ってみると思い通り行かないものなのです。

そしてそういったデザインを作りたいけどなかなかうまくいかない人は実はこの次の段階で既に間違っていることが多いのです。

なので今回はこのプレーンテキストの状態から説明をしていきたいと思います。

書体選びをしてみよう!

業務上ではよくモリサワパスポートの書体を使ったりするのですが、有料フォントのため、今回はフリーフォントで作っていきたいと思います。

以下の画像を見て下さい。

左上の書体がIllustratorのデフォルト書体小塚ゴシックです。それ以外が今回フリーフォントの中からピックアップした書体です。

どうですか?書体を変えるだけでも実はこんなに雰囲気が変わるのです。

実はこの“いくつかサンプルを作って一番イメージに近い書体を検討すること”

これができていない人が多いのです。

ここからが本番

次にコンセプトカラーを決めていきましょう。

今回はWebJoyのコーポレートカラーの花緑青系統の色で行きます。

しかし、デザインに自信がない人は恐らくこんな感じのデザインになってしまうのではないでしょうか?

実はここまでが準備運動なのです。これだけみたら満足かもしれませんが、じつはもっとメリハリを出すことでデザインの質を上げることができます。

実はこのメリハリをうまく出すことができるかどうかが、集客力に影響します。

それでは、デザインの質を上げる具体的手法をこれよりさらに紹介したいと思います。

四角で囲って文字を白抜き、メインタイトルを黒文字にしてメリハリアップ!

文字サイズの調整もしました!どうですか?メリハリが出たでしょう?

フラットを意識した今風な感じになりましたね!これだったらWord等しか持っていない方でもできると思いませんか?

ここで更にテクニックを紹介します。

それは、メインタイトルの黒文字を薄くするというものです。

薄くするだけで、優しい印象に変わった事がわかるでしょう。

色のコントラストを強くするほど印象として残りますが、このようにあえて色を薄めることで優しく温かみがあるデザインに変わります。

ただ、集客性を求めるのであれば、K100%の黒文字を採用したほうがいいと思います。

アクセントカラーを入れてみよう!

これでも十分だと思ったあなた、まだまだデザインは奥が深いのです。コンセプトカラーとは別にアクセントカラーというものを入れることで、活き活きとしたデザインにすることができるのです。

実際に以下の通りアクセントカラーを入れてみました。

たった黄色を一箇所に入れただけなんです!

なのに不思議とかなり明るくなった印象でしょう?

アクセントカラーの選び方のポイントとして、適当に色を選んでもいけません。大事なのはその色と相性がいいかです。

例えば以下の2つの色の組み合わせ。

緑と赤の組み合わせだと目が痛いですよね。

この例から、いかに色の組み合わせが重要なのかがわかります。

また、アクセントカラーは彩度が高い色を選択するようにしましょう。

この2つでどちらが印象に残るかというとY100%の方ですよね。

アクセントカラーは、モヤッとしたデザインにメリハリをつけて、より人を引きつけるデザインにするためのテクニックです。

控えめにしてしまってはアクセントカラーの意味がないのです。

実はデザイナーになりたての頃に一番苦戦するのはアクセントカラーを活かすという所なのかもしれませんね。

さらにいろいろとやってみよう!

デザインには明確な答えがありません。しかし、ルールがないわけではありません。デザインの唯一のルール、それは「閲覧者が違和感を感じないか」これだけなのです。

(もちろん、カーニングやジャンプ率(文字サイズの差の比率)等基本的な事はありますが。)

つまりデザインのテクニックを違和感ではなく、躍動感と感じてもらえることができればいいのです。例えば斜体にしてみたり

吹き出しにしてみたりして

上の隙間が気になるならルビを入れてバランスを調整する。これだって立派なデザインなんです!

すでになんかよくみるかっこいい感じになってきたでしょう?

 

今度は色面を逆にしてみた!しかし、しっくりこない…

この時にアクセントカラーとして有効なのはどこだと思いますか?

ダメな例

これでは、色の場所が分散してしまっていて、バラけた印象です。

それでは、これはどうでしょう?

「最初のアクセントカラーの例と同じような付け方だからいいんじゃない?」と思いますよね?

正解は×です。

なぜかというと、今すぐ実践の「今」につけるのとWebJoyの「W」につけるのではメッセージ性に大きな差が生まれるからです。

今という言葉を強調することで、すぐできるという印象が強くなりますが、Wという文字を強調して離して何か感じるものはあるのでしょうか?

それが答えなのです。

そこでこうしてみてはいかがでしょうか?

ちょっと文字サイズのバランスも整えましたが、このイメージであれば全体的にひとまとまりで躍動感があるデザインになりますね!

 

さらにここにシルエットを入れてみたり!

この場合はチェックマークもよく入れたりします!

実はこういったフラットなパーツは背景が白であればかなり活きるのですが、以下のようにローポリゴンといわれるテクスチャも相性がいいと言われています。

かっこいいでしょ?

まとめ

実はこのブログで触れているようで触れていなかったデザイン。

今回改めてデザインの基礎について触れてみましたが、いかがでしたか?

はい、それでは改めて最初の方の画像を見てみましょう。

もしあなたが「はじめはこれでいいと思っていたけど今あらためてみたらなんか寂しい」と感じた場合はこの記事を通してデザインスキルが向上した証拠なのです。

この自己満足のただただスッキリとしたデザインではなく、集客力を意識したデザインをできるようになった時、本当の意味での“商業デザイナー”になれたと認識していい時だと私は考えています。

※2017/12/03追記 ブログサークルに登録をしました。この記事からコメントを投稿できるようになりましたので、コメントをされる際には以下のコメントフォームよりよろしくお願いします。


WebJoyで使用しているサーバー情報

合同会社WebJoyでは、エックスサーバーを主に使用しています。その理由はWordpressを運営する上で重要なサーバースペックが高く、かかる費用も安いため個人でのご契約でもおすすめしています。会社経営をする前から約8年間お世話になっているサーバーです。ブログを始めたい方は是非ご契約ください!上記の画像をクリックすることでエックスサーバーの公式サイトに移動します。

この記事を書いた人

長崎のホームページ制作会社 合同会社WebJoy
代表社員 朝永祐太

長崎県にてホームページ制作を行っております。今の時代、Webを活用するためにはブログは必須だと感じ、最近ではブログ集客に力を注ぎ始めました。
実際に当ブログのアクセスを増加させることでよりよい提案ができればと考えております。
そして、近い将来、有益な情報配信を主とした企業を目指しております!

関連記事

2016年08月31日間違えたWEB知識その4「賑やかにしたいからPOP体で!」
2016年02月11日デザイナーになりたい方必見!?私のデザインに対する考え方
2015年12月16日デザイナーのパクリ問題
2015年11月30日デザインの必要性

コメント(ブログサークルアカウントが必要です。)

  • Facebookページ
  • 公式twitterアカウント