【アイキャッチ添削015】アラサー現役看護師|フラットデザイン

アイキャッチ添削も15回を迎えました。

でもいまだに出ていないのが、パステルカラー統一のサイトのアイキャッチ。

洗練されたブログサイトでよくみかけますよね。

あのサイトとか。そのサイトとか。

今回はそういったパステルカラーで統一するサイトを作られているゆんさんの登場です!

コバッチさんの記事見て、是非お願いしたいと思ったので嬉しいです!

ゆんさん
ゆんさん
どんぐり
どんぐり

私も嬉しいです!よろしくおねがいします!

この記事でわかること
  • パステルカラーの注意点
  • パステルカラーの相性のいい選定方法
  • パステルカラーの応用

パステルカラーで統一する際の注意点や、配色を選ぶ方法までお話していきます。

ぜひ、最後まで読んでいってくださいね。

目次

今回の作品

作者   …ゆんさん
掲載サイト…アラサー現役看護師
掲載記事 …看護師さん!ポケットの中身教えて‼︎/どんなものを入れてるの?【看護師向け】

アラサー現役看護師では、看護師の赤裸々な実状やお得情報などを発信されています!

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

どんぐり
どんぐり

添削企画初の「パステルカラー」のアイキャッチです!

楽しみです。

ゆんさん
ゆんさん

ゆんさんの作品を添削開始!

どんぐり
どんぐり

すこしアイキャッチの文字が浮き出しているように感じませんか?

文の色はイラストの一部の色を使って浮かないように意識していました。
が、客観的に見ると違和感があるのだと新しい発見でした‼︎

ゆんさん
ゆんさん
どんぐり
どんぐり

背景がパステルカラーなのに、文字だけ鮮やかなカラーを使っているのが原因です。

客観的に見ると違和感があるのだと新しい発見でした‼︎

ゆんさん
ゆんさん
どんぐり
どんぐり

イラストの色も鮮やかなので、それにあわせちゃいましたね。

背景やイラスト、テキストの彩度が違いすぎると違和感が出てくる
特にパステルカラーを使う場合は彩度差がでやすいので注意

配色をブログサイト全体として考える

ブログにおけるパステルカラー

ブログサイトの色合い(タイトル、見出し、装飾など)や、イラスト・アイキャッチをパステルカラーで統一することにより、一体感や権威性を出せる。

パステルカラーで統一の例
どんぐり
どんぐり

ブログ全体で使う色を始めに決めてしまっておいたほうが統一感もでるし、作成も楽になります!

まず、自分が好きな色を背景色にしていたけどパステルカラーという分類を無意識に選んでいたことに気付けました‼︎

ゆんさん
ゆんさん
どんぐり
どんぐり

ゆんさんはどんな色がお好みですか?

好きな色はあるんですが…どうやって選んでいいかわからなくて。

ゆんさん
ゆんさん
どんぐり
どんぐり

良い無料サイトがありますのでご紹介しますね!

お願いします!

ゆんさん
ゆんさん
おすすめのカラー選定サイト

Palettable

Like(好き)かDislike(嫌い)で色を選んでべるサイト
相性の良い色が次々に提案されてくるので、気に入った色がでれば「Like」を押す。
2つ目以降の候補は必ず相性の良い色だけが表示されるようになります。
最大5色まで、あなた好みの相性のよい組み合わせが調べることができます。

Palettable

これなら選べそう!

ゆんさん
ゆんさん
どんぐり
どんぐり

今回はアイキャッチの色合いを元に、私が勝手に選んでみました。

palettableでとったカラーイメージ
今回のアイキャッチとゆんさんのサイトからとった候補カラー
どんぐり
どんぐり

ブログで使うアイキャッチの下地カラーもこれで始めて決めておくとよいですね!

簡単ですね!

ゆんさん
ゆんさん
どんぐり
どんぐり

アイキャッチのイラストで使うカラーもここから選びます。

気分で背景の色を選んでいましたが、palletableで下地カラーを決めておくことは取り入れていきます‼︎

ゆんさん
ゆんさん

相性が良い色を調べて使う事でサイト全体のイメージアップ!

テキストについて

どんぐり
どんぐり

上部の\スラッシュ/を使うのお好きですね?

強調したい時に結構使いますね。

ゆんさん
ゆんさん
どんぐり
どんぐり

私も好きなんですが、パステル調は落ち着いた感じなので、あまりあってないかもしれません。

今後気をつけていきたいです!

ゆんさん
ゆんさん
どんぐり
どんぐり

テキストを下部に集約させて、坦々と並べたほうが雰囲気がでます!

色調とテキストのイメージを合わせるようにしよう!

線を使ったデザインも上手に使えばオシャレになります!

線をつかったデザインはこちらの記事が詳しいので是非読んでみてくださいね。

添削完了!

どんぐり
どんぐり

では、添削で指摘した点を考慮して作品を修正していきます…!

お願いします!

ゆんさん
ゆんさん
どんぐり
どんぐり

テキストも彩度が近くなった事で画像になじんだと思います。

文字は目立てばよいと思ってました…!

ゆんさん
ゆんさん
どんぐり
どんぐり

文字を目立たせたいときはもっと鮮やかな文字を使ってもいいんですが、文字だけ目立っちゃいますね。

これからはpalettableで選んだもので使っていきたいです!

ゆんさん
ゆんさん
どんぐり
どんぐり

テキストについては、今回は幅を揃えずに中央揃えで同フォントサイズにしました。

横幅揃えなくてもいいんですね!

ゆんさん
ゆんさん
どんぐり
どんぐり

あとご自身が看護師をされているので、「さん」は除いてみました。

承知しました!

ゆんさん
ゆんさん
配色を入れ替えてみる①
配色を入れ替えてみる①
配色を入れ替えてみる②
配色を入れ替えてみる②
配色を入れ替えてみる③
配色を入れ替えてみる③
配色を入れ替えてみる④
配色を入れ替えてみる④
どんぐり
どんぐり

同じ5色を使うだけでも、これだけ作り分けできます!

これは便利ですね!

ゆんさん
ゆんさん
どんぐり
どんぐり

カラーの選定は好みが一番でるところなので、ゆんさんで是非選んでみてくださいね。

スラッシュを使わないとのことなんですが、強調したい時はどんぐり所長ならどうするのかな〜っ気になりました‼︎

ゆんさん
ゆんさん
どんぐり
どんぐり

優しいふきだしをつかってもいいですし、大事なキーワードだけ色を変えてもいいですよ!

ふきだしを使ってアクセントに
ふきだしを使ってアクセントに
ふちどり文字で協調
ふちどり文字で協調

やわらかく強調したらよいんですね!

ゆんさん
ゆんさん
どんぐり
どんぐり

当サイトでは常時アイキャッチ添削を募集しています!

目次
閉じる