スライドバー

その他 レビュー

2020/5/8

鬼滅の刃から学ぶブロガーの個性の活かし方

この記事は約 9 分で読めます。 そんくん「鬼滅の刃」って漫画を知っとる? ぐりおもちろん知ってるよ!   「鬼滅の刃」(きめつのやいば)は週刊少年ジャンプに連載中の少年漫画です。 この鬼滅の刃は子供から大人まで社会現象化するほどの人気漫画です。 鬼滅の刃を読むと、人生に役立つだけではなく、ブロガーなどの自己鍛錬が必要な、フリーランスの精神にも非常に役立ちます。   この記事を読むと、現代に必要な自己鍛錬のマインドを学べますよ。 ぐりお少しネタバレがあるので注意してね!   ...

ReadMore

Canvaの切り抜きで簡単!お仕度ボードをつくろう!

Canva 子育て

2020/2/5

お仕度ボードをつくろう!Canvaの切り抜きで簡単!

この記事は約 10 分で読めます。 ぐりお息子が、朝のしたくに手間取ってイライラが止まらない!! そんくんあるあるやな。まあストレスたまるのは分かるわ ぐりお毎日毎日怒るのも疲れたわ…   そんなあなたのための記事です。 スポンサーリンク 目次 お仕度ボードを作ってみよう!お仕度ボードって何?お仕度ボードで準備するものお仕度ボートの作り方お仕度ボードをつくろう!Canvaの切り抜きで簡単!のまとめ お仕度ボードを作ってみよう!   息子がスムーズに行動するように、マグネットシートにやる ...

ReadMore

デザイン ブログ

2020/1/20

画像を自動切り抜きしてくれるすごいサイト

この記事は約 6 分で読めます。   そんくんキャラクターの背景を透明に切り抜きたい!でもどうやるのかわからへん ぐりおなんとAIが自動的に切り抜きしてくれるサイトがあるよ スポンサーリンク   目次 背景の切り抜きを自動でやるサイト背景切り抜きサイトの使い方背景切り抜きサイトの便利な使い方画像を縮小する前のようにきれいに大きくするサイト背景切り抜きを自動でやってくれるサイトのまとめ 背景の切り抜きを自動でやるサイト 写真や絵の背景を透明に抜きたいと思ったことはありませんか。 でも切り ...

ReadMore

Canva デザイン

2019/12/12

無料Twitterヘッダーテンプレートプレゼント【CANVAで簡単に使える!】

この記事は約 15 分で読めます。     ぐりお今回は、Canvaで使えるTwitterヘッダーテンプレートをプレゼントするよ! そんくんいよっ!日本一!   スポンサーリンク   目次 Twitterヘッダープレゼント!Twitterヘッダーはとても重要!Canvaは簡単に使えるソフトCanvaテンプレートはここがすごい!無料Twitterヘッダーテンプレートをプレゼント!無料Twitterヘッダーテンプレート お申込みフォームテンプレートの使い方 ※必ず以下の ...

ReadMore

その他 レビュー

2020/4/27

骨折で入院するときに必要なもの13選

この記事は約 10 分で読めます。   ぐりお足首を骨折しちゃった…! 入院だ! そんくんうひー大変や!入院に必要なものは何や!?( ゚Д゚)   ぐりお私の体験談から、入院中あって良かったものを紹介します     スポンサーリンク   目次 骨折入院中にあって良かったもの 欲しかったもの退院したらあるとよいもの骨折したときに必要なものまとめ 骨折入院中にあって良かったもの 欲しかったもの   ケガは突然やってきます。 思いもかけずに転んで骨折。 ...

ReadMore

Canva デザイン

2019/12/12

CANVAで意外と知らない基本機能3選!アイキャッチテンプレートでぜひ使ってほしい☆

この記事は約 9 分で読めます。 ぐりおあなたは、CANVA版アイキャッチテンプレート100!はうまく使えてる? 400人が使っている便利なテンプレートブログアイキャッチテンプレート100!第2弾もうすぐ発売!   そんくんためしに使ってみたいあんさんは、無料テンプレート10種を申し込んでや。       Canvaはこちら     使いこなすためには、CANVAの基本操作の知識が必要ですね。 わたしがぜひ使ってほしい機能をあげていきます。 &n ...

ReadMore

Canvaでずっと使える!無料アイキャッチテンプレートプレゼント

Canva デザイン

2019/12/12

Canvaでずっと使える!無料アイキャッチテンプレートプレゼント

この記事は約 17 分で読めます。     ぐりお今回は、Canvaのアイキャッチテンプレートをプレゼントするよ! そんくん待ってました!     スポンサーリンク   目次 アイキャッチテンプレートプレゼント!Canvaは簡単に使えるソフトCanvaテンプレートアイキャッチはここがすごい無料Canvaアイキャッチテンプレートをプレゼント!無料Canvaテンプレートお申込みフォームテンプレートの使い方 ※必ず以下の手順でコピーしてね画像サイズを変えたい場合 ...

ReadMore

デザイン ブログ レビュー

2020/3/25

Affinger5(WING)の主な機能一覧

この記事は約 28 分で読めます。 このブログのテーマ 「Affinger5 (WING)」のパーツを並べました。 主に ...

ReadMore

子どものほめ方叱り方 ~叱りすぎて疲れたあなたへ処方箋~

子育て

2019/1/7

子どものほめ方叱り方 ~叱りすぎて疲れたあなたへ処方箋~

この記事は約 17 分で読めます。 子育てって大変ですよね。 特に叱らないといけない時はストレスがたまります。 感情的に叱ったところで、子どもはいうことを聞かない。 叱りたくて叱ってるわけではないのに、毎日まいにち同じことで怒ってる… もっとうまい叱り方はないものかしら… そんなあなたのための記事です。   スポンサーリンク 目次 これだけはやってはいけない、しかり方こうやって叱らずにやらせよう子どもを叱る時の注意点子どもはこうやってほめよう子どものしかり方ほめ方 まとめ これだけはやってはいけ ...

ReadMore

13_チラシにイラストを入れる効果 ダサいチラシをかっこよく

ダサいチラシをかっこよく デザイン

2019/1/7

14_チラシにイラストを入れる効果 ダサいチラシをかっこよく

この記事は約 7 分で読めます。 ぐりお今回はチラシにイラストを入れていくよ   ※ここでいうイラストとは、地図などの図(インフォグラフィック)とは分けて考えています。   目次 チラシにイラストを入れる効果チラシのイラストの入れ方イラストでユーザーを逃さないように注意!チラシにイラストをいれるまとめ チラシにイラストを入れる効果   前回はチラシに写真を入れる効果についてやりました。 今回はイラストについてやっていきます。 イラストを入れる意味と効果には以下のものがあります ...

ReadMore

ダサいチラシをかっこよく12 デザインの考え方

ダサいチラシをかっこよく

2019/2/14

12_デザインの考え方を知ればあなたもデザインできる ダサいチラシをかっこよく

この記事は約 9 分で読めます。 ぐりお今回は、チラシを仕上げていく時に必要な考えを説明するね。   さて、デザインを作っていく際に、何を考えながらやったらいいのでしょうか? なんとなくかっこいい? とにかくいい感じに? なんだか漠然としてふわふわして、どう考えればよいか分かりませんね。   スポンサーリンク 目次 デザインをするとき何を考えている?連想(妄想)回路を全開にしてアイデアを出す細部にこだわりぬく 神は細部に宿る!煮詰まってきたら休憩客観的にチラシを見るには、他人になりきる ...

ReadMore

AffinityDesignerでのエクスポート(書き出し)方法

AffinityDesigner デザイン

2019/2/14

解説!AffinityDesignerでのエクスポート(書き出し)方法 2種類

この記事は約 6 分で読めます。   AffinityDesignerはとても使いやすい神ツールですが、ちょっと初心者は迷いそうだな~と思うところがあったので記事にします。   そんくんあんたが迷ったんやろ? ぐりお…ま、まあね   スポンサーリンク 目次 AffinityDesigner の画像書き出し方法 2つ描画ペルソナ、ピクセルペルソナでの書き出し手順書き出しペルソナの書き出し手順AffinityDesignerの書き出し方法 まとめ AffinityDesigner ...

ReadMore

差がつくおしゃれな年賀状アイデア2019

ダサいチラシをかっこよく デザイン レビュー

2020/1/2

差がつくおしゃれな年賀状アイデア!テンプレートでは満足できないあなたへ

この記事は約 6 分で読めます。 ぐりお今回は年賀状のアイデアを出してみたよ~ そんくんわい年賀状まいとし悩むねんなあ…   年賀状の季節ですね。 テンプレートを使うのもいいけど、オリジナルデザインで勝負したいあなた。 真似するだけでおしゃれになるおすすめアイデアを厳選しました。 自分で年賀状を作るこだわり派のあなた、ヒントにしてくださいね。   ぐりお今年はダサい年賀状から卒業だっ   写真入り年賀状がネットで簡単注文!自宅にお届け!   スポンサーリンク 目次 ...

ReadMore

ダサいチラシをかっこよく13 チラシに写真を入れよう

ダサいチラシをかっこよく

2019/2/14

13_チラシに写真を配置せよ! レイアウトまで解説。ダサいチラシをかっこよく

この記事は約 8 分で読めます。 今回は、チラシに写真やイラストを入れていきます。   ぐりおところで前回作ったこのチラシ、何か足りないと思わない? そんくん…絵や写真がない? ぐりおそのとおり☆   スポンサーリンク 業界最高品質の年賀状 【年賀家族2019】     目次 チラシに写真を配置するチラシに写真を入れる理由は「臨場感」90%の情報は視覚的なものであるチラシに写真を配置する まとめ チラシに写真を配置する   ぐりおさっそく写真を入れてみよう ...

ReadMore

センスが磨ける!デザイナーがいつも参考にしているサイト厳選5

ダサいチラシをかっこよく デザイン

2019/2/14

デザイナーが参考にするセンスの良いサイト5選

この記事は約 5 分で読めます。 さて、デザインはよく「センス」と言われます。 あなたは、どうやってその「センス」とやらを磨けると思いますか?   それは、良いデザインをたくさんみて目を肥やすことです。 すてきなデザインをたくさん見ると、「すてき」というのがどういうものなのか分かってくるのです。 画家は良い絵をたくさん見ろと言われます。 映画監督は良い映画をたくさん見ろと言われます。 漫画家は、良い映画や絵や小説をたくさん見ろと言われます。 みんな同じことですね。   ということで、今 ...

ReadMore

ダサいチラシをかっこよく11 小見出しのデザイン

ダサいチラシをかっこよく

2019/2/14

11_小見出しで分かるデザインの原則 ダサいチラシをかっこよく

この記事は約 7 分で読めます。   ぐりおさて、タイトルに前回作ったロゴを入れてみたよ そんくんおおー     ぐりおでも、まだ黄色い箇条書きの部分が読みにくいと思わない? そんくんたしかに… ぐりおこの部分(小見出し)をやっていこう   スポンサーリンク   目次 小見出しデザインのコツ小見出しデザインの原則3つ小見出しデザインのアイデア小見出しがなぜ必要なのか?小見出しのデザインまとめ 小見出しデザインのコツ   黄色い部分は箇条書きで横に ...

ReadMore

ダサいチラシをかっこよく06 色にセンスは必要ない

6_色にセンスは必要ない!知っておきたい色の基本 ダサいチラシをかっこよく

この記事は約 10 分で読めます。

 

ぐりお
つぎは色の基礎知識についてやっていくよ

センスはいらないから安心してね


そんくん
あんたもセンスはないからなw

 

配色は色のセンスがなくて難しいという人が多いですが、

センスがなくても知識さえあれば、ちゃんと配色できます。

スポンサーリンク

激安インク販売の【インクナビ】送料無料。

 

色の基本は 色相 彩度 明度

 

色には基本的な要素として、

・色相(しきそう)=色の種類

・明度(めいど)=色の明るさ

・彩度(さいど)=色の鮮やかさ

があります。

 

色相

 

色相はいわゆる色味のことです。(赤や青や緑や黄色といった色の種類)

英語ではHue(ヒュー)といい、画像ソフトなどでは、頭文字をとってHで表します。

 

上は色相をつなげた色相環というものです。

隣り合う色が近い色(類似色)、

向かい合う正面の色が最も遠い色(反対色または補色)となります。

 

上図は内側の環は、分かりやすく12色に分けてあります。

 

明度

 

 

明度は色の明るさのことです。

上の図が、明度を表した図です。

明度が高い=白に近い明るい色、

明度が低い=黒に近い暗い色です。

英語ではLightness(ライトネス)、画像ソフトなどでは、頭文字をとってLで表します。

上の孫くんで、明度が高いのはどちらでしょう。

答えは右です。

 

 

彩度

 

 

彩度は色の鮮やかさのことです。

英語ではSaturation(サチュレイション)、画像ソフトなどでは、頭文字をとってSで表します。

彩度が高い=色味の強い鮮やかな色

彩度が低い=グレーに近い鮮やかではない色(無彩色)といいます。

です。

彩度の最も高い色は、その色相の中の純色といいます。

上の孫くんで、彩度が低いのはどちらでしょう。

答えは左です。

 

 

3つを組み合わせてあらゆる色ができています。

色の3属性といいます。

上は明度と彩度を縦横軸にした図です。

色相は赤です。

明度と彩度の組み合わせで、おなじ赤でも無限に近い色があることがわかります。

さらに上の図が、色相別に存在します。

 

ぐりお
すべての色はこの3つの属性があるよ

そんくん
単純に赤といっても、ものすごくたくさんの色があるんやな

 

周りのものを見るときに、色の明度、彩度を意識してみましょう。

 

スポンサーリンク

 

【WebCampWoman】

色の組み合わせで読みやすさが変わる

 

チラシでは、目立たせたい文字を目立つ色にするのが基本です。

前回やった、重要な情報(タイトルや日付、場所など)を目立たせたいですね。

目立たせる色には、目立つ色を使いたいところですが、目立つ色とはどんな色でしょうか?

彩度が高い純色)と思いますが、それだけとは限りません。

 

 

 

例えば、鮮やかな赤は、白地にはとても目立ちます。

 

鮮やかなオレンジ色の中ではどうでしょうか。

そんくん
あれ?ちっとも目立ってないな

ぐりお
よく似た色同志では、同化して目立たないね

 

つまり、色の目立ち方は相対的なのです。

色の組み合わせによって、目立ったり目立たなかったりします。

 

逆に、鮮やかな緑色の中に置いたらどうでしょうか。

そんくん
目立ちすぎて目がチカチカするな

ぐりお
ハレーションというよ。

こういう場合は、間に彩度の低い色をはさむよ

 

 

 

目立つ色の組み合わせは、対比の激しい純色

 

目立つ色の組み合わせは、基本的に対比の激しい色です。

対比の激しいとは、まったく違った色という意味です。

3要素とも反対の組み合わせの色です。

 

究極の反対色は黄色と黒

 

非常に目立つ色の組み合わせは、危険を伝える色などに使われています。

例えば、ふみきりや立ち入り禁止に使われる、黄色と黒の組み合わせはとても目立ちます。

最も明度と彩度の高い色である黄色と、最も明度と彩度の低い色の黒の組み合わせは、最も対比の激しい組み合わせといえます。
救急車に使われる赤と白も、最も彩度が高く、明度が低めの赤と、最も彩度の低く明度の高い白の組み合わせです。

パトカーの白と黒は、言うまでもなく、最も明度の高い色と低い色の組み合わせです。

 

お店のテーマカラーなどの色もこうしたものが多いです。

黄色と青、赤と白、赤と緑、オレンジと緑、などなど…

黄色と青だけでも、IKEA、Tポイントカード、GUなどいろいろ浮かびますね。

赤と緑はセブンイレブンなど。間に無彩色の白を入れて、ハレーションをおこすのを防いでいます。

 

こうした組み合わせは、思わず目が行ってしまう最も目立つ色です。

国旗などにもこうした色の組み合わせはよく使われています。

 

スキルクラウド 得意やスキルの売買

 

読みやすい色の組み合わせ

 

ぐりお
目立つ色=読みやすい色というわけじゃないよ

そんくん
えっ?そうなん?

 

彩度の高い赤と緑の組み合わせはとても目立ちます。

しかし文字にすると目がチカチカして読みにくくなってしまいます。

 

あまりにも対比が激しい色は、国旗やマークなどには向きますが、じっくり読む文章などには向きません。

本文の小さい文字は、読みやすい白字に黒などを使うばあいが多いです。

WEBサイトの場合、文字色は真っ黒ではなく、グレーにしてハレーションを防いでいるものがほとんどです。

ぐりお
上のような対比の激しい色は、最も目立たせたい部分だけに使おう

 

 

スポンサーリンク

 

色の黄金比 70:25:5

 

実際に色を選んでいくときに、迷うと思いますが、簡単に使えるセオリーがあります。

色の黄金比といって、使いたい3色を、70%、25%、5%の比率で選びます。

この比率で配色すると、バランスよくまとまります。

 

上はその比率の図です。

ベースカラー 70%

メインカラー 25%

アクセントカラー 5%

まず、ベースカラーとは、そのチラシの一番面積の多い部分の色です。

多くの場合、紙の色そのものの白や薄い色です。上に文字がのりますね。

ぐりお
ベースカラーは広い面積の色(紙の色)だよ

 

メインカラーとは、ポイントになる一番目立つ色です。

タイトルや目立たせたい部分に使います。この色が最も目立ちます。

彩度を高くするのをお勧めします。

ぐりお
メインカラーは一番目立つ色

 

アクセントカラーとは、小さい面積ですが、メインカラーを引き立てる色です。

アクセントカラーは、メインカラーの反対色や、明度や彩度が反対の対比の大きい色を使うとメインカラーが引き立ちます。

ぐりお
アクセントカラーはメインカラーを引き立てるスパイスのような色だよ

 

上はこのサイトのカラーです。

ベースカラーは面積の大きい地の色、

メインカラーは最も目立つ色で、上下のバーの部分、

アクセントカラーは文字色の黒です。

 

他に色を使いたい場合でも、上の色と色相や明度、彩度を合わせるとうまくなじみます。

ぐりお
面積は厳密でなくてもOK

 

 

色を選ぶときの鉄則

 

色数はできるだけ少なく! 多くても上記に3色にしましょう。

色の3要素のどれかをそろえるとうまくいきます。

 

同じ色相でまとめる

同じ色相で3色をまとめると、きれいな配色になります。

簡単にできるおすすめのカラーです。

 

 

おなじトーンでまとめる

明度や彩度をまとめた例です。

上は、明度は高く、彩度は低めのパステルカラーでまとめています。

中は、明度も彩度も中間でまとめています。

下は、明度が低く、彩度は高い、濃いトーンです。

 

こうすると色相をバラバラにしても、統一感がでます。

 

ぐりお
ベースカラーとメインカラーの色相をあわせて、

アクセントカラーを反対色にするのもおすすめだよ

 

TechAcademyの無料体験

 

まとめ

 

今回は色の基礎知識についてやりました。

知識さえあれば、センスはなくてもきれいな配色は誰にでもできます。

 

これは私が使っているおすすめアプリです。

Color Pal
アンドロイドアプリです。

イメージを検索して簡単にカラーを探せます。

お気に入りを保存しておくこともできて便利。

 

 

※追記 このサイトもとても参考になります。

反対色、類似色など色の関係性が直観的にわかりますね。

いろいろいじって好きな組み合わせを見つけてみてください。

 

 

 

デザインの基礎についてのおすすめ書籍はこちらです。

created by Rinker
¥2,442 (2020/08/04 01:58:02時点 Amazon調べ-詳細)

初版を読みました。今は4版なので多少変わってるかもしれません。デザイナーではない人に向けたデザインの本です。
デザインを分かりやすく理論的にまとめた本としてははしりですね。

created by Rinker
¥3,695 (2020/08/04 01:58:02時点 Amazon調べ-詳細)

これも古い本ですが、さらに実践的に書かれていておすすめ。
カラーパレットの作り方も載っています。
デザイン、文体から作者の誠実な人柄が伝わる良い本です。

 

ダサいチラシをかっこよく!記事一覧へ戻る

 

次回は具体的に実際のチラシに色をつけていきましょう。

次は→ 7_色を知れば色を選べる ダサいチラシをかっこよく


スポンサーリンク

高解像度の写真素材なら【写真AC】

 

-ダサいチラシをかっこよく
-

Copyright© ぐりおブログ , 2020 All Rights Reserved.