「3色だけでセンスのいい色」でWEBページをデザイン

はじめに

「3色だけでセンスのいい色」という色使いが書かれている本があるのですが、こちらを参考にWEBページをデザインしたところいい感じに作れたので記事書いてみようと思います。

成果物

作成したWEBページはこちらです。
単なるマイページなので面白い機能はないです。

作成前のお話

そもそもデザインする前段階である程度ページ自体は作成済みでした。
Next.jsで作成してVercelで動かしています。

デザイン

色のお話

デザインといいつつ大半はこちらの色に関するお話です。
書籍にはテーマごとに3つの色とバランスが書いてあるので、好きなテーマで作成していきます。
前回のアイコン同様、可愛らしい「星空のプリンセス」というテーマの配色を使用しました。
3つの色をどの割合で使用すればよいかメイン・サブ・アクセントでバランスが記載されているので、そのバランスに従って色付けをしていきます。
※ 明確なカラーコードの記載は避けます。気になる方は書籍をご覧になってください。

メイン

背景をメインカラーで色付けします。

サブ

背景の一部をサブカラーで色付けします。今回の場合はヘッダーとフッターを対象にしました。

アクセント

文字・枠線などをアクセントカラーとして色付けます。

おまけ

色見はいいんですが、まっさらなページになってしまったので気持ち程度各ページへの導線を置きました。

カードの背景はサブカラー、文字色は同じようにアクセントカラーで色付けしています。

さいごに

いかがでしたでしょうか。WEBページ作成したものの白黒だったり色付け悩んだりという方もいるのではとないでしょうか。
特にオリジナリティがあるわけではないですが、いい色見のあるページになったと思います。
今回使用した色パターン以外の記載もあるので是非興味ある方は書籍ご覧になってみてください。