サイトのカラーバランスを確認できるテストサイト

WordPressとは直接関係ありませんが、サイトの色の組み合わせに関する記事を書いたので、補足として色のバランスを確認できるテストサイトをご紹介します。

WEB DESIGN COLOR TESTER

前回前々回の記事ではAdobe Color CCを使用して色の組み合わせパターンを調べる方法をお話しいたしました。ここで調べたパターンが、実際サイトに反映させた場合、どのようなイメージになるのか視覚的に確認できるサイトがあります。

WEB DESIGN COLOR TESTERは、ダミーで作られたウェブサイトに対してカラーナンバーを反映させることで実際にサイトがどのようなイメージになるかが確認できるサイトです。

サイト上部にある「カラー設定」をオンマウスすると、カラーナンバーを入力するエリアが表示されます。

例として開門のロゴで調べたカラーナンバーを入力してみます。

このような感じです。基本的に文字の背景に色が入ると読みづらくなるので、彩度の調整を行うか、フォントカラーを白にする等、調整が必要な箇所を事前に把握することができます。


【PR】
[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] (Webデザイナー養成講座)
好評だった書籍『WordPress 仕事の現場でサッと使える! デザイン教科書』が最新WordPress 5.x環境に対応しました! WordPressを使って本格的なWebサイトを構築するために必要な基礎知識、独自テーマ作成手順、よりリッチなWebサイトにするためのカスタマイズやプラグイン活用、サイト運用テクニックまでわかりやすく解説します。もちろん、クライアントワークで必要とされるノウハウも満載。改訂版では、新しいブロックエディターの基本や活用テクニック、最新プラグインの使いこなし、スマートフォン・タブレットへの対応など、新たなトピックも取り上げています。WordPressを使うならぜひ手元に置いておきたい1冊です。
(技術評論社)

この記事が役に立ったらシェア!