【アイキャッチ添削020】はるかわマップ|フラットデザイン

ついに大台20回目となりました、アイキャッチ添削。

今回のご依頼者は─応募フォームからご依頼いただきましたいちとさん!

よろしくお願いします!

いちとさん
いちとさん
どんぐり
どんぐり

こちらこそよろしくお願いします!

なんでも大学院で研究員生活をされているそう。

素晴らしいですね!

いちとさんのお悩みはこちら。

いちとさんのお悩み
  • 白と黒でシンプルに仕上げたいが、アイキャッチのパッとしない印象

さあ、早速アイキャッチ添削をはじめていきましょう~!

目次

今回の作品

今回ご依頼の画像|はるかわマップ

はるかわマップ」では、大学院の研究生活や就職活動、また交際に関しての情報を発信しておられます!

掲載サイト・記事・アイキャッチは掲載した時点でのものです。現在は変更されている可能性があります。

シンプルなデザインが好みなので、黒文字と黒シルエットイラストだけで構成してます。

いちとさん
いちとさん
どんぐり
どんぐり

なるほど!当サイトもモノクロが基本カラーなので同じ考え方ですね!

枠色はカテゴリー別に色分けしてるのがこだわりポイントです!

いちとさん
いちとさん
どんぐり
どんぐり

カテゴリーで色分けするのは良いですね!

いちとさんの作品の添削開始!

どんぐり
どんぐり

ではまず、いちとさんのサイトのトップページを見ていきましょう…。

アイキャッチ添削なのにトップページを見るんですか?

いちとさん
いちとさん
どんぐり
どんぐり

サイトのイメージに合うアイキャッチを作るのが大切です!

なるほど!

いちとさん
いちとさん

現状サイトのデザインで気になる所

添削前のはるかわマップのトップページ
どんぐり
どんぐり

メインカラーは「真っ白」と「真っ黒」ですね!

はい!

いちとさん
いちとさん
どんぐり
どんぐり

実は「真っ白」の上に「真っ黒」のテキストは目が疲れて読者が読むのやめてしまう配色になります。

そうなんですか!

いちとさん
いちとさん
どんぐり
どんぐり

記事の文字色はしっかり彩度を落としてあるので大丈夫そうです!

よかった~。

いちとさん
いちとさん
どんぐり
どんぐり

ただ、記事一覧で白黒のアイキャッチが並んでしまうと、目がちかちかして疲れる感じがするのでアイキャッチを変えていきましょうね!

わかりました!

いちとさん
いちとさん

どんなアイキャッチにしよう?

どんぐり
どんぐり

記事一覧のバックがライトブルー系になっているので、アイキャッチもあわせてパステル系のフラットデザインにしていきましょうか!

フラットデザインの利点ってなんでしょうか?

いちとさん
いちとさん
どんぐり
どんぐり

サイト全体の統一感が出しやすすいので、シンプルが好みのならピッタリですね!

ふむふむ。

いちとさん
いちとさん
どんぐり
どんぐり

もともと、いちとさんが作られているアイキャッチもフラットデザインに近い形なので作りやすいと思います!

わかりました!よろしくお願いします!

いちとさん
いちとさん

アイキャッチ添削完了!

もうできたんですか?

いちとさん
いちとさん
どんぐり
どんぐり

一応みてください!

いちとさんの作品
どんぐり
どんぐり

フラットデザイン用のイラストを入れるのではなく、いちとさん風にシルエットを取り入れました!

めっちゃ素敵です!

いちとさん
いちとさん
どんぐり
どんぐり

よかった!

質問いいですか?

いちとさん
いちとさん
どんぐり
どんぐり

なんでしょう?

キーワードなんですが「結婚観~」の部分を優先した理由は何故ですか?

いちとさん
いちとさん
どんぐり
どんぐり

それは、アイキャッチとタイトルでは読者が見る場所が違うからです!

と、いうと?

いちとさん
いちとさん
どんぐり
どんぐり

タイトルは検索表示で文字で見られるので、大学院生彼氏~の部分は必須キーワードですよね。

そう思ってました!

いちとさん
いちとさん
どんぐり
どんぐり

でも、アイキャッチってサイトに来てから見るので、読者はいちとさんが大学院生という事を知った状態の可能性が高いんです。

あっ!

いちとさん
いちとさん
どんぐり
どんぐり

なので記事一覧で「大学院生」のキーワードを繰り返しすぎるとしつこくなる可能性があるんです。

そこまで考えてられるんですね~!

いちとさん
いちとさん

タイトルとアイキャッチではキーワードの優先順位が変わる場合がある

カテゴリー別にアイキャッチを色分けする

どんぐり
どんぐり

今回はまだまだ終わりませんよ~。各カテゴリー1枚ずつ作ってみました!

ええっ!

いちとさん
いちとさん
就職カテゴリー用 カラー#7FBFFF
大学院カテゴリー カラー#ffbf7f
雑談カテゴリー カラー#89ffc4
どんぐり
どんぐり

試しに作ってみましたよ!

色分けも思い切ってするのもいいですね!

いちとさん
いちとさん

カテゴリーアイコンもフラットデザイン化

どんぐり
どんぐり

更にカテゴリーアイコンもフラットデザインに変更してみましょう。

アイコンまで変えるんですか?

いちとさん
いちとさん

カテゴリーアイコンまで…!

いちとさん
いちとさん
どんぐり
どんぐり

アイキャッチのと併せてカテゴリー別に同じ色にしてみました!

カテゴリー別に色を統一しているんですね!

いちとさん
いちとさん
どんぐり
どんぐり

サイトに当てはめてみるとこんな感じ。

作成したアイキャッチ・アイコンを張り付けたイメージ
どんぐり
どんぐり

貼り付けただけなので記事タイトルがそのままなのは許してください!

どんぐりさんの作ってくださったアイキャッチ、とてもオシャレで最高です!

いちとさん
いちとさん
どんぐり
どんぐり

ちょっとノウハウ系のサイトっぽくなりましたね!

色が多くても、色合いがあってるからか落ち着いた感じがしますね!

いちとさん
いちとさん
どんぐり
どんぐり

これはあくまで参考として、いちとさんのデザインのヒントにしていただけたらと思います。

ぜひ参考にさせて頂きます!

いちとさん
いちとさん
どんぐり
どんぐり

デザインは楽しいのでご自身でもいろいろチャレンジしてみてくださいね!

とても勉強になりました!これからも勉強させてもらいますね!!

いちとさん
いちとさん
どんぐり
どんぐり

ブログデザインラボではアイキャッチ添削を常時募集しています!

目次
閉じる