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

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

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

「この色いいなぁ～」

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

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

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

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

集めました。

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

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

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

まず、白が基調です。

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

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

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

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

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

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

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

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

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

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

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

可愛いですよね。

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

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

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

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

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

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

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

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