色覚障がいの方が作ったサイト【We are Colorblind】が勉強になる
2013年3月23日 Webサイト制作, アクセシビリティ, 色彩 「We are Colorblind」というサイトをご存知でしょうか？サイト名を訳すと、「我々は色覚障がい者です」。そう、色を識別することが困難なデザイナーさんの作ったサイトです。数々の例とともに、Webサイト制作における改善すべき点を指摘してくれています。とっても勉強になったので、簡単に紹介します！ ↑私が10年以上利用している会計ソフト！ Webクリエイターボックスでは以前「色覚障がい者に配慮したWebサイトの作り方」という記事で色覚障がいとは何か、どのように見えるのか、また、Webサイト制作において注意すべき点をまとめました。読んでいない方は、まずはこちらに目をとおしてみてくださいね ;) Webサイト「We are Colorblind」の中の人はオランダ在住のデザイナー、Tom van Beveren氏。サイト名
絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎
webデザインを考える時にカラーは切っても切りはなせません。しかし、配色は苦手だけど、まぁカラーの勉強は後でいいや…センス無いしその前にやることあるし…となんとなく後回しにされがちなんじゃないかなーと思います。基本を知っておくと、デザインに役立つのはもちろん、クライアントさんに提案出来たり、私生活や料理etc…様々な場面でとっても強い味方になってくれるます。ちょっとしたスキルアップをしたいと考えてるなら、まずは配色から初めてみるのが良いかもしれませんXD 色って？ カラーモードRGBとCMYKとは？ 色の三属性について 「色相」 「明度」 「彩度」 具体的な例と配色方法 面積比率 可読性 最後に 1.色って？ まず一口に色といっても色々(シャレじゃないですw)あるのですが大きく分けて果物や印刷物など物についてる色とテレビやパソコンのモニターなど光を放っている色の2種類があります。 物体色
[CSS]画像にちょっと素敵なエフェクトを与えるスタイルシートのまとめ
デモページ [ad#ad-2] HTML img要素とメッセージのp要素をdiv要素に内包します。 <div class="polaroid"> <p>Sarah, Dec '02</p> <img src="http://lorempixum.com/200/200/people/1" /> </div> デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。 <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> CSS ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。 .polaroid { position: relative; width: 2
色を指定すると、トーン表や同系色など、その色に関連した情報を抽出してくれるカラー提案サービス・colllor - かちびと.net
ちょっと便利そうだったので備忘録的に。 色を指定すると、その色に沿ったトーン表 や同系色などを提案してくれるWebツール。 こういうの便利だけど結局あんまり使わな い事も多いんですけど、、色は苦手なので 飛びついちゃいますねｗ 最近この手のツール減りましたけど・・・前は良く見かけましたね。色相環を使ったカラースキーム作成ツールは個人的に使い勝手が悪くて疎遠してたんですが、これは機能もシンプルで割と楽です。 ベースカラーが決まってるならいい提案してくれそうなツールです。カラーコードを指定すると、関連する色合いをいろいろと出してくれます。コードを入れなくてもピッカーがありますのでインスピレーション向上にもなりそうですね。 こんな感じ。 色を指定すると、色合い、トーン表、他カラーのミックス、同系色を抽出してくれます。抽出されたカラーをクリックするとそのカラーコードがクリップボードにコピーされます
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーの私が色選択に迷った時に使用している配色ツール・カラーチャートなどのまとめ
配色のセンスをゼロから習得するために役立つスライド
ウェブ・印刷デザイン向け、テーマ別・カラー別の色の組み合わせやカラースキームのまとめ
配色決めにも利用できる！色について詳しく調べられるサイト「Color Hexa」 : 二十歳街道まっしぐら