• ホーム
  • フォルトゥナについて
  • サービス
  • お問い合わせ
  • ウェブ配色ツールが新しくなりました

    1色を作れば自動的に配色を作るツールです。難しいツールではないので、多分使えばわかると思います。この写真も変えることができます。

  • ロゴはきちんと読めるようにしましょう

    お店やサービスの名前がわからないと、訪問者は不安になります。ロゴの背景色は常に注意しましょう

  • 長いページには薄い背景色が望ましい

    背景に強い色が付いている方が読み進めにくくなります。文章が長めなら、白背景に黒文字が基本です

  • 色相差を大きくせずに配色する

    色に苦手感を感じている人は、色相差を-90~90の間くらいで色を決めましょう。差が少ない方が同系色でまとまるので、色を扱いやすくなります

  • 無理に色を増やそうとしない

    スマートフォンでは嫌でも上から下に自然に流れます。大事なところだけ強調すれば読んでもらえるので、色で目立たせようとがんる必要はありません

  • 派手で大きな色は内容を吹き飛ばす

    派手な色を大きく使うと、色だけが目立ってしまい、内容が頭に入らないことがあります。大事なのは文章なので、常に色より文章を優先させましょう

  • いい写真は色に勝る

    質のよい写真があれば、他の色は必要ありません。写真にはお金を惜しんではいけません

  • 余白を広く取ることで、多くの問題は解決する

    画面がにぎやかに見える場合、原因の多くは狭い範囲にいろいろ詰め込みすぎなのです。余白を広げらられるなら、色を変えなくても済むこともあります

  • 気分で色を変えないようにする

    このツールは気分で色を変えられるツールですが、たびたび色を変えると「あの青のページ」のように覚えられにくくなります。色を変えるときは常連の方のことを考え、慎重に行うべきです

ウェブ配色ツールの使い方

1色選ぶだけでOK

1色選ぶだけでそれなりに見えそうな配色を作ることができるツールです。

最近の配色傾向には対応していますが、それだけでいいデザインになるとは限りません。

設定で多少の調整可能

ロゴのテキストや文字色・背景色の有無などの多少の変更に対応しています。

文字が読みにくい場合には、×印が出ることがあります。その組み合わせは避けましょう。

カラーコードをコピペ

設定パネルの下部にカラーコードの一覧が表示されています。コピペして使ってください。

保存機能や再現機能などはありません。

ウェブ配色ツールについて

この配色ツールは大阪のウェブ制作事務所 フォルトゥナによって提供されています。リンクなどは自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。

この配色ツールは自作のため、プログラミングの技術の問題もあり、簡易的なものとなっています。私自身はプログラマーでないため、複雑なプログラムは作成出来ませんが、配色のアルゴリズムは提供出来ますので、ウェブサービスやソフトウェアで私の知識が必要な場合はぜひお声掛けください。

設定項目の説明

ロゴの文字

ロゴの部分に入る文字列を変更することができます。

ロゴの色

ロゴの色は初期設定では黒(背景色が明るい時)か白(背景色が暗い時)の2色のどちらかですが、#CC0000のように16進数表記のカラーコードを「ロゴの色」の入力欄に入力することができます。

本来、ロゴの色などはホームページなどができる前にできあがっているものだと考えていますので、ロゴの色を選ぶという機能はあえて実装していません。

ロゴの色がまだ決まっていなければ、先に色を決め、それに合わせた配色を作るようにしましょう。

初期設定は空(#444444のグレーあるいは#FFFFFFの白)です。

配色の方向性

大雑把に言えば、白背景の明るい配色を作るか、黒背景の暗い配色を作るかをここで設定します。暗い方は厳密に黒ではなく、選んだ色に合わせた暗いグレーが設定されます。

スライド透過

ページ上部のスライドショーの写真を少しだけ透過することができます。スライドの背景にはカラーピッカーで選んだ色が配置されていますので、少し写真の色味を選んだ色に近づけて見せることができます。

全背景色

配色の方向性が「明るい」場合、背景色は#FFFFFFの白が設定されますが、全背景色を「オン」にすることで、白以外の背景色が使われるようになります。ベージュやピンクなどの薄い色を背景に使いたい場合にご利用ください。

配色の方向性が「暗い」場合には、この設定は無視されます。

色相差

色相差を変えることで、最初に選んだ色とは離れたカラフルな配色ができるようになっています。-180~180の間で変えることができますが、配色が苦手な人は-90~90くらいまでを目安にしましょう。

使い方のコツや注意事項

文字の読みやすさについて

読みにくい文字色と背景色の組み合わせにならないように作っていますが、どうしても読みにくい文字ができあがることもあり、一定の基準を下回ると×印が出るようになっています。

この判定には、JIS X8341-3:2010で使われているコントラスト比が4.5以上(レベルAAを満たしている)かどうかを基準としていますが、×印が出なくても読みにくいと思われる場合もありますのでご了承ください。

コントラスト比について詳しく知りたい方は、「文字コントラストの達成基準」をご覧ください

配色の方向性
スライド透過
全背景色
色相差
基本色
背景色
背景色ブロック
アイコン(左)
アイコン(中央)
アイコン(右)
フッターナビ
フッター
強調色(赤)
強調色(緑)
リンク色(青)