MENU

著者

どんぐり所長

Nobilista公認バッジ

当サイトはリンクフリーです

当ブログ内の記事本文や図解等は、以下の注意事項を守っていただければご自由にお使いいただいて結構です。

【注意事項】

  • 引用元として当サイト名を記載の上、対象記事へリンクしてください。
  • 添削記事などの紹介者のアイコンは転載不可です。

ご不明な点があれば、twitterのダイレクトメールまでお願い致します。

愛用 順位チェックツール

オリジナルグッズ購入

👉 今イチオシのクラウド型 順位検索ツール【Nobilista】愛用レビュー!

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

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

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

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

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

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

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

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

目次

今回の作品

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

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

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

どんぐり所長
どんぐり所長

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

楽しみです。

ゆんさん
ゆんさん

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

どんぐり所長
どんぐり所長

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

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

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

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

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

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

お願いします!

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

Palettable

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

Palettable

これなら選べそう!

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

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

簡単ですね!

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

ゆんさん
ゆんさん

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

テキストについて

どんぐり所長
どんぐり所長

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

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

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

添削完了!

どんぐり所長
どんぐり所長

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

お願いします!

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

承知しました!

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

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

これは便利ですね!

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

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

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

ゆんさん
ゆんさん
どんぐり所長
どんぐり所長

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

推奨ザインツール

当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。

Canvaを詳しく知る

おすすめWordpressテーマ

私は、導入するだけで一気にお洒落になるWordpressテーマ「SWELL」をおすすめします。デザイン性はもちろん、その操作性は特筆ものです。

SWELLを愛用する私が実際に使用してきた内容を加えた、詳しい記事を書いています。ぜひご参照ください。

SWELLを詳しく知る

トップページへ戻る

お気軽にコメントください

コメントする

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

目次