統一感には○○がカギ！？初心者でも作れる見やすくて個性のあるメインビジュアルとは

• By robiii
• 2016年2月12日
• No Comments

 

 

(7日目まとめ)

こんにちは、robiiiです。
この2日間ほどメインビジュアルやバナーのデザインを勉強させていただいております。

というわけで、今回はメインビジュアルのお話。

 

メインビジュアルには統一感を持たせるべきか

メインビジュアルって、難しい！

 

複数ページのメインビジュアルを作成していると思うこと、

「メインビジュアルは統一感を持たせるべきなのか？？？」

という疑問が湧いてきます。

「ターゲットが絞られている以上、統一感があった方が良いんじゃないかな？」と思ったり、「統一させたらさせたで面白味のないメインビジュアルになるかも」とも思ったり……デザインには明確な答えがないので、初心者は困ってしまいます。

 

統一感のあるメインビジュアルを作成するポイント

実際に作ってみました

ということで、今回もサンプル(という名の試行錯誤)を作成してみます。
同一サイト内のコンテンツページごとのメインビジュアルを想定しました。

※あくまで私が作るときに考えていることをお話しするので、実際にはもっと異なる手順かもしれません、学べる立場の内にいろんな方にコツを聞いてみましょう！

 

その1.とりあえず並べてみる

 

とりあえず、キャッチコピーと写真を入れてみます。
この段階ではキャッチーだとは言えませんし面白みもないです。

作り始めのポイントは、「とりあえず思いついた要素を全部並べること」です。

本来であれば構成、ラフの段階である程度を考えられると良いのですが、初心者の方は手が止まってしまうことも多いので、考えに詰まったら作ってみるのがおすすめです。

 

その2.同じパーツを使ってみる

 

イラレで簡単なパーツをちょこちょこっと作成してみました。
今回は女性らしい手書き風の装飾です。
新たに文章を増やしてみましたが、メリハリがないためまだキャッチーさが足りません。

初心者の方が陥りやすいのが、「この文章って使ってもいいのかな……」と保守的になることです。
相手に良いイメージを与えるものであれば、どんどん入れてしまって良いと思います。
クライアントの好みにもよると思いますが、自分が「これはキャッチーだぞ」と思える提案はどんどんしていくのが上達のカギです！

 

その3.異なるパーツを使ってみる

 

少しパーツと装飾を増やしてみました。
良くなりましたが、構図がほとんど同じせいか新鮮さはありません。
ただし、安定感や定番を求られているのであれば、配置を変えずにこのまま色味の調整に入った方が良いと思います。

こういうときのために、普段から「これは使えそうだな」と思えるパーツや装飾を探しておきましょう。
以前も申し上げましたが、練習がてらに素材サイトを作ってみたり、メイキングをブログなどにあげておくと引き出しが広くなります。

 

その4.パーツの位置をバラバラにしてみる

 

下のメインビジュアルの配置や向きをバラしてみました。

色味などの調整もこの段階からで構いません。
色の調整は一度手を染めると気になって何度も修正してしまい、ふと我に返るとものすごく時間が経ってしまう悪魔の工程です。

ひとつ注意点として、慣れないうちは文字の段落は左揃えで統一しましょう。
右側に文字を持ってくるとついつい右揃えにしたくなってしまいますが、やはり左揃えのほうが読みやすさは断然高いです。
右揃えを活用するのはデザインに慣れてきてからでも良いと思います。

では、最初と最後を比べてみましょう。

 

 

 

 

どうでしょうか？最初と比べると統一感と個性が両立しているのではないでしょうか？

 

まとめ

統一感と個性のあるメインビジュアルに必要な3つのポイント

• メインのフォントは統一する！
• 最低でも1つ以上、オリジナルの装飾を入れる
• 配置で遊んでみる

 

メインのフォントは統一する

一般的にですが、メインで使用するフォントは統一しておいた方が良いです。
もちろん、与えたい印象によって複数使用することもあると思いますが、多くて2～3個、かつアクセントになる部分にのみ使用しましょう。
あまりにフォントが入り乱れていると、読みやすさが格段に落ちてしまいます。

 

最低でも1つ以上、オリジナルの装飾を入れる

それぞれの雰囲気にあった装飾を入れましょう。
同じ装飾を全く使い回すな、とは言いませんが、こちらも多用すると「また使い回しか」とユーザーを飽きさせてしまう恐れがあります。
使い回すのは、フキダシやハートなど、小さく汎用性のあるパーツにとどめておきましょう。

 

配置で遊んでみる

「面白みがない」と感じたら、読みやすさを下げない範囲で、配置で遊びましょう。
ちなみに、読みやすさのチェック方法はこんな感じでやってます。
「一度目を離して一呼吸置いたあとでもう一度メインビジュアルを見たとき、きちんと自然な視線移動（Z型）で読めるかどうか」

あと、複雑な文章やマークなどの場合は、私の場合「2秒以内に意味や伝えたいことがすんなり入ってくるか」を判断基準にしています。
作った本人が2秒以上考えてしまうような内容では、ユーザーには伝わりません。

 

「上達には慣れ」だけど、一旦止まってみることも大切！

最近、黙々とメインビジュアルを作成していたので、今の自分の理解度がいまいち分かっていませんでした。
説明に使用したメインビジュアルは、いつもだと1時間以内に作成する練習をしているのですが、これを読んでくれる皆さんにきちんと伝わるだろうか？と考えながら作った結果、結構時間がかかってしまいましたw
ですが、こうして言語化し、伝えることは自分の中に落としこむ手段として非常に有用です。

やみくもに作っていると、どうしても言語ではなく感覚で考えてしまい、なかなか冷静に立ち返る機会がないからです。
ふたっぱに来られるインターン生さんは、きっととてもやる気に満ちた方ばかりだと思います。

 

なので、「ひとつでも多くの作業を！」と突っ走りがちになりますが、そういうときこそ作業を休憩して、メモ帳に学んだことをブログのネタとして整理する時間を持って欲しいと思います。

それではまた、次の投稿で。