iPhone・iPad用のページはこちら(Android端末での動作確認は行っておりません)

ウェブ配色ツール Ver2.0 produced by フォルトゥナ

1色を作れば自動的に配色を作るツールです。説明はページ下部に。

  • English Version
  • Italian Version
1つ前の画像 1つ後の画像
photo

リンクの色も読みやすく

photo

ロゴが読めないと、サイトを覚えてもらえない

photo

背景色は薄い方が長文は読みやすい

photo

背景色が暗い場合は、色相差は控えめに

photo

読めない配色に一切の価値なし

photo

本文テキストに意味不明な装飾を施さないこと

photo

中明度の背景色は出来るだけ避ける

photo

赤と緑の高彩度色は要注意色

photo

色使いが苦手な人は、色相差を0°に近づける

photo

緩やかなグラデーションが配色を助ける

photo

広めに余白を取るだけで解決出来ることは多い

photo

赤と緑の組み合わせを避ける

photo

悩んだときには色の面積を減らす

photo

地味なテクスチャは配色を和らげる

photo

食は万里を超える

配色ツール バージョン2.0

基本的な使い方

左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています(ただしフォントは変更出来ません)。

カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。

色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。

この配色ツールについて

この配色ツールはカラー&Webデザイン フォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。

配色ツールを導入しませんか?

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

取材・執筆等のお申し込み

このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、カラー&Webデザイン フォルトゥナのサイトで承っております。使いやすい配色や説得力のある配色など聞きたい内容に合わせて内容をカスタマイズしますので、気軽にお問い合わせください。

またSEO業者やウェブ製作などの宣伝・勧誘については全て断っておりますのでご了承ください。

▲このページのトップに戻る

配色の方向

全体の背景

ロゴの背景

色相差

配色の一覧表を表示する


配色一覧表1
テーマカラー #FFFFFF  
全体の背景    
メニュー    
ロゴ    
配色一覧表2
本文見出し1    
本文見出し2    
サイドバー見出し #000000  
サイドバー背景    

まずしい木こりの男が、大きな森の近くにこやをもって、おかみさんとふたりのこどもとでくらしていました。ふたりのこどものうち、男の子がヘンゼル、女の子がグレーテルといいました。しがなくくらして、ろくろく歯にあたるたべものを、これまでもたべずに来たのですが、ある年、国じゅうが大ききんで、それこそ、日日のパンが口にはいらなくなりました。木こりは、晩、寝床にはいったものの、こののち、どうしてくらすかかんがえると、心配で心配で、ごろごろ寝がえりばかりして、ためいきまじりに、おかみさんに話しかけました。

色の一覧表(コピー&ペーストでご利用ください)

基本的な使い方

画面右上のカラーピッカーを操作することで、配色が自動的に出来上がります。またその下にある操作パネルを調整することで、多少のカスタマイズが出来るようになっています。

操作の説明

基本色
カラーピッカーで選んだ色が表示されます。またここに色を16進数6桁でRGB値(例:#CC0000)を入れることも可能です。
ロゴの文字
初期値はフォルトゥナになっておりますが、ここに文字を入れることで、表示する名前を変えることができます。
ロゴの色
16進数6桁でRGB値(例:#CC0000)を入力することで、ロゴの色を変えることが出来ます。既にロゴの色が決まっている場合にお使いください。
配色の方向
レイアウト領域内に色を付けるかどうかの選択ができます。「明るい」を選ぶ背景が白くなり、全体的に明るい配色となります。「暗い」を選ぶと全体に色が付くようになります。どちらかというと欧米向きのサイトの配色が出来上がるような気もします。
全体の背景
レイアウト領域の外側の背景色をありにするか、白にするかを選択出来ます。
ロゴの背景
「配色の方向」を「暗い」にした場合、背景色によってロゴが見えなくなります。そのような場合に、ロゴの背景部分を白にすることが出来ます。
色相差
このツールは基本的に同系色相でまとめるようになっていますが、このスライダーで使う色相に幅を持たせることが出来ます。あまり大きくしすぎるとおかしな配色になるので、控えめな利用をおすすめします。
メインビジュアルの変更
画像の右下の方にある矢印のボタンを押すことで、メインビジュアルを変更することができます。作りたいイメージに近い画像を選ぶようにしてください。
配色一覧の表示
ロゴの部分(初期はフォルトゥナ)を押すことで、出来上がった配色の一覧を表示することができます。コピー&ペーストができますので、保存したい時などにご利用ください。
サンプルテキスト

右下にある文章は、文字が読みやすいかどうかを確認するためのブロックです。コントラストが一定以上に低くなって、読みにくいのではないかという場合には、大きな赤い×印が出ます。主に中明度の背景色を使ったときに出てきますので、そのような色は使わないのが無難です。

なお、このコントラストの計算にはWCAG2.0やJIS X8341-3:2010で使われているコントラスト比が4.5以下の時に警告出るように設定しています。ただし4.5以上の場合でも読みにくい組み合わせはありますのでご注意ください。

使い方のコツや注意事項

ウェブ配色 コーディネートカタログ

配色がどうしても上手くいかない方は?

このツールを提供しているフォルトゥナでは、ウェブ配色診断サービスを行っています。どうしても配色が上手くいかないので改善点を知りたい場合や、配色の知識がなくどこを修正してよいかわからない場合など、配色の問題を指摘して、具体的にどのように変更すればよいかをアドバイスしています。詳しくは「ウェブ配色診断」のページをご覧ください。

このツールに関するご意見・お問い合わせなど

このツールは大阪のホームページ制作事務所 フォルトゥナが提供しております。フォルトゥナではツールを使ってもどうしても配色がよくならないという方のためのデザインアドバイスなども行っています。ご質問やバグの発見、取材、書籍等への掲載のお問い合わせや業務の依頼などは、フォルトゥナのお問い合わせページよりお願いいたします。

更新の履歴

このページのトップへ