【webデザイン】シンプル&ナチュラルなカラーコードとフォントの控え

その他

無印良品、キナリノ、くらしきぬ、
Nico and…など、
シンプルでナチュラルデザインが好きな私。

 

ポスターやHP、カタログなどを見てデザインを参考にしているのですが、

「この色いいなぁ~」

と思ってもカラーコードがわからないときってありませんか?

「このフォント…めっちゃ可愛い…。」
ってフォント惚れしてしまう私ですが、
そのフォント名がわからなくて困る事も…。

 

そんなカラーコードとフォントに悩める子羊ちゃんのために

シンプル&ナチュラル
優しいデザインのカラーコード

集めました。

 

私が自分で調べて「いいな」と思ったものや、
デザイン本で見かけたフォントを載せています。

 

私と同じくカラーコードにお悩みの方のお役に立てば光栄です。

 

スポンサーリンク

シンプル&ナチュラル優しいデザインの基本

まず、が基調です。

私のブログも白をベースとしています。

 

アクセントカラーとして、グレー、茶色などを組み合わせて、色味を少なくすることでよりシンプルさが引き立ちます。

アースカラーなどの自然の中で使われている色もGood。

 

ベースをシンプルにすることで、写真や文字が引き立つと思っています。

 

ナチュラルで優しいカラーコード(白・グレー・茶色)

左から

・白  :#ffffff
・茶色 :#ddcaaf
・藍色 :#cfced2
・グレー:#a0a0a0
・ピンク:#f0ece8
・グレー:#6f6152

デザイン本で見かけたカラーコードを載せています。

「いいな」と思ったコード(#から始まるもの)をコピーし、カラー検索枠などに入れて使ってください。

 

ナチュラルで優しいカラーコード(グレー・グリーン・ピンク)

左から
・灰色  :#dfd8c2
・薄い抹茶:#96ad7e
・濃い抹茶:#5a8007
・ピンク :#eda9a9
・薄い紫 :#cfced2
・ベージュ:#f0ece8
・茶色  :#b8a38b

差し色に使えそうなカラーを集めました。

私の枠線は一番右の#b8a38bを使っています。

 

差し色に使えそうなカラーコード(黄色・ピンク)

左から

・ピンク :#FFD6CC
・イエロー:#FFC776
・オレンジ:#F99273
・イエロー:#FEF37F

可愛いですよね。

Cocoonの場合、設定のキーカラーの色を変更すると、目次の枠線やフッダーの配色を変えることができます。

 

ナチュラルで優しいフォント

私がよくcanvaで使うフォントです。
今は「はんなり明朝」がとても好きです。

「ほのか明朝」はひらがなより漢字が大きくなっていて、これはこれで魅力的です。

ちなみに、このブログのフォントは「わらさび明朝」に設定しています。

 

canvaにはなかったのですが、デザイン本で見かけたフォントも書き残しておこうと思います。
(ダウンロードしたら使えるかもしれません。)

・丸明オールド
・こぶりなゴシック
・American Typewriter
・Courier
・AMATIC SC

 

 

またいいのがあったら追記していこうと思います。

皆さまのオススメのフォントやカラーコードなどあれば是非Twitterやコメントで教えてください。

 

コメント

タイトルとURLをコピーしました