ウェブサイト全体の色を簡単に微調整できるサイト「web colorizer」 : 二十歳街道まっしぐら
「web colorizer 」はウェブサイト全体の色を調整できるサイトです。 URLを指定すると、プレビューが表示されます。 色のスライダーを調整するだけで、全体の色を変化させることができますよ。 さらに、変更後の結果（画像やCSSなど）はダウンロードすることもできます。 以下に使ってみた様子を載せておきます。 まず「web colorizer 」にアクセスしましょう。 無料登録をしてログインします。 調整したいウェブサイトのURLを指定して読み込みます。 読み込むと、このようにプレビュー＋調整バーが表示されます。 スライダーをいじるとこのようにリアルタイムでウェブサイトの色が変化します。 上記例は極端ですが、すこし色を暗くしたい、明るくしたいなどの微調整に利用できますね。 最後にサイト全体をプレビューできます。 「Download result」より、HTML、CSS、変更後の画像など
配色に自信がなくても！Webデザインが好きになる配色ツールと使い方
2016年12月13日 Webデザイン, 便利ツール, 色彩 以前書いた記事「配色パターンからWebデザインを考える」を見た方から「いい配色だなーと思ってもうまく使いこなせない」という意見をいくつか頂きました。確かにすてきな配色をどうデザインに取り込んでいいのか、というのは難しいところです。今回は簡単に配色を提案してくれるオンラインツール「ウェブ配色ツール Ver2.0」を使って配色をWebデザインに取り込む方法を紹介します。 ↑私が10年以上利用している会計ソフト！ ウェブ配色ツールを使った基本的な配色方法 まずこの「ウェブ配色ツール Ver2.0」について。テーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。Webサイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです！ オレンジを元に色相差0°で配色した例。色相差を0°にすると同系色（＝同
ウェブ配色ツール Ver2.0
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
ブラックベースの暗いウェブデザインで気をつけたいポイント
ブラックベースの暗いデザインのウェブサイトを制作する際に、取り入れたいポイントや注意すべきポイントをWeb Designer Depotから紹介します。 The Do's and Don'ts of Dark Web Design 下記は、その意訳です。 はじめに 1. ホワイトスペースの活用 2. テキストのホワイトスペース 3. テキストのコントラスト 4. フォントの取り扱い 5. カラースキームは最小に 6. スタイルスイッチャー 7. 暗いデザインがはまるサイトとは 8. エレガントな暗いデザイン 9. クリエイティブな暗いデザイン 終わりに はじめに ブラックベースのウェブデザインは人気が高く、エレガントでクリエイティブな魅力があります。しかし全てのウェブサイトに適したものという訳ではなく、適切であるときだけ使用されるべきデザインです。 ブラックベースのデザインを使用すると印象
色のバリアフリーに配慮した色見本を色弱の僕がレビューします。 - 日々、とんは語る。
IRC でのりさんが教えてくださったのですが、CUDO(クドー)や日本塗料工業会DIC株式会社などにより色覚の多様性に配慮した案内・サイン・図表等用のカラーユニバーサルデザイン推奨配色セットというものが制作されたそうです。 DIC の色見本と言えば、デザイナーの方には有名かと思いますが、近いうちにDICカラーガイドシリーズに追加されるそうです。 また、日本塗料工業会塗料用標準色(JPMA Standard Paint Color)にも2009年5月会員予約受付開始分から収録されるそうです。 さっそくサイトのサンプルを見てみましょう。 赤 色弱の人が赤と感じやすいように、オレンジ寄りの赤にしています。 黄色 白内障の人が白と区別しやすい、濃い黄色にしています。 緑 色弱の人が黄色や赤と間違えやすい黄色みの強い緑を避け、青みが強い緑を選んでいます。ただし青緑まで行ってしまうと、今度はグレーや紫
ウェブページのカラーコントラストをチェックする -Check My Colours
ウェブページに使用されている全てのテキストと背景のカラーコントラストが充分であるかどうかチェックしてくれるオンラインサービス「Check My Colours」を紹介します。 カラーコントラストをチェックした結果画面 当サイトを試したところ、上記のようになりました。 テキストと背景の判定はスタイルシートから行っているようで、各要素ごとに使用している色とそのサンプル、コントラストが充分かが一覧で表示されています。 テキストが無い箇所や色指定が無い箇所の判定も行うため、一覧は長くなりますが、エラー箇所のみ表示することも可能です。
カラーユニバーサルデザイン推奨配色セット
色覚の多様性に配慮した 案内・サイン・図表等用のカラーユニバーサルデザイン 推奨配色セット ■ 東京大学分子細胞生物学研究所 高次構造研究分野 伊藤啓 ■ 社団法人日本塗料工業会（JPMA） ■ DIC 株式会社（旧･大日本インキ化学工業株式会社） DIC カラーデザイン株式会社 ■ 特定非営利活動法人カラーユニバーサルデザイン機構（CUDO） 概略 一般の人にも色の見え方が異なる人にも見分けやすい、カラーユニバーサルデザイン推奨配色セットを作成。 被験者実験を重ね、数千の候補色から20色を絞り込み。 塗料業界の色指定の業界標準であるJPMA塗料用標準色2011年F版に対応色を収録。印刷・デザイン業界の色指定の業界標準であるDICカラーガイドシリーズから対応色を選出。 はじめに いわゆる色弱（色覚異常）の人や、緑内障など網膜の疾患を持つ人、白内障の人は、色によっては違いを
カラーピッカー.js - JavaScript ライブラリー - HTML5.JP
対応ブラウザー Internet Explorer 6 以上 Firefox 2.0以上 Opera 9.0以上 Safari 3.0以上（もしかしたら2.0でも動作するかもしれませんが、未確認です。） Google Chrome 0.3以上 使い方 cpick_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。そしてHTMLのhead要素内に、cpick.jsをロードするようscriptタグを記述しておきます。このサンプルは、html5jpフォルダが一階層上に存在しているものとしてscript要素のsrc属性を指定していますが、html5jpフォルダ はどこに設置しても構いません。html5jpフォルダの設置場所に合わせてcpick.jsをロードするscript要素のsrc属性を書き換えてください。
【AIRコレ】カラーパレット・スキームをネットで共有『Adobe kuler』 | ネット | マイコミジャーナル
Werbブラウザ上で配色やテーマを作成し、それをAdobe Illustratorなどで利用することができるAIRアプリケーションが『Adobe kuler』です。作成した配色はローカルに保存するだけではなく、世界中で公開、共有することができるので、他の人が作成した色合いをそのまま使うことができます。 ※「Adobe kuler」を利用するにはAdobe IDが必要です。 オリジナルパレットの作成・公開が可能で、世界中で作成された配色を共有することができる。毎日たくさんのカラーパレットが公開されているので、どの配色を使うか悩めるところが楽しい オンラインヘルプやチュートリアルなどが用意されているので(画面右上の「i」ボタン)、初心者ユーザーにもわかりやすい。Macのウィジェットである「Dashboard」も使えるので、Mac環境で配色を作成したい方にも最適だ 気に入った配色はドラッグ&ドロ
【AIRコレ】色合いの評価は『DeltaE』におまかせ | ネット | マイコミジャーナル
すべての分野におけるデザイナーにとって、色合いの決定は非常に悩むポイントなのではないでしょうか。カラーサンプルを使いながら理想的な色を探す、というのもよいですが、サイトデザインなどの場合はディスプレイにサンプルを当てながら、などというわけにはいきません。そんなときに有効なAIRアプリケーションが『DeltaE』です。「DeltaE」は、実際の色を数値化し、色差式で色相評価ができるアプリケーションで、CIE(1976、1994、2000)、CMCの色差について計算が行えます。 「DeltaE」を初めて起動すると、アップデートの有無についてチェックが行われる。念のため実行しておこう 「DeltaE」のメイン画面。二つの色が項目ごとに色差式で数値化されている。言語サポートは英語とイタリア語のみだが、とくに難解な記述などはない C(彩度)やh(色の角度)などを調整してみよう。二つの色の項目に設定さ
いろいろな色の名前が分かるサイト色々
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
WEB制作者なら最低限知っておくべき色彩心理とWEBセーフカラー、WEBセーフカラーを出力するRubyコード - 久保清隆のブログ
色彩は、Webサイトが どのように際立つか ユーザの目にとまるか ユーザーにどのような感情を芽生えさせるか ユーザがどんな動作をするか に大きな影響を与える。 ユーザの属性に合わせて適切な色彩を使うことは、売上を増大させたり、滞在時間を長くしたり、直帰率を下げることにつながる。 また、Webサイトだけでなく、 ファッション インテリア エクステリア(住まいの外観) 広告、商品 などにも使えるので、汎用性のある知識だと思う。 色彩心理 色 プラスの心理的影響 マイナスの心理的影響 赤 情熱的 活動的 晴れやか 暖かい 元気の良い 購買欲求 安っぽい 派手 危険 暴力 青 さわやか 清らか 清涼感 すっきり クール 閑静 憂鬱 寂しい 冷淡 未熟 無機質 黄 若々しい 陽気 明るい 楽しい うるさい 目立つ 幼稚 警戒 緑 ナチュラル 新鮮 穏やか すがすがしい 毒 田舎 疲れ 未熟 紫 高貴
ウェブデザイナーの作業を助ける12のオンラインツール
カラースキームの作成、フォントの作成・選択、画像編集などウェブデザイナーの作業を助ける12のオンラインツールをSix Revisionsから紹介します。 12 Useful Web Tools for Designers
「たかが色、されど色」 ヒトとWebと色の関係：MarkeZine（マーケジン）
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
【公式】ハイローオーストラリア｜新機能：ジャックポット・キャッシュバックプログラム￤HighLow.com
ジャックポットについて特別なキャッシュバック取引約定後に、幸運なプレイヤーは最大100,000円のキャッシュバックが当たります。また、Highlowロイヤルティ・ステータスが高いほど当選確率・金額が上昇します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
カレンダーやDateピッカー関連のjQueryプラグイン20:phpspot開発日誌
ノンデザイナーのための配色理論
IDEA * IDEA
全てのWeb開発者必見!!! いろのはなし - How We Hear
デザインやファッションに取り入れたい、2009年 秋のトレンドカラー