色覚障がい者に配慮したWebサイトの作り方
2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに
Webデザインでも気にしたい。「みんなに伝わる」ユニバーサルデザイン入門 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのあゆみです。いきなりですが、 クライアント「いろいろな人が閲覧できるサイトに」 ええ、わかります。でも、これだけ多種多様な環境がある中で、全てに対応するのは無理な話で……。って経験、ありませんか？ ありますよね。 ぶっちゃけてしまうと、IE9以下はできるだけ対応ブラウザに入れたくないのですが、（Web制作に携わるみなさんの頷く声が聞こえる……）わたしがそう感じてしまうのは、「その人がアップデートしたら問題なく見られる」という、ユーザ側の対策案があるからです。 JSアニメーションやCSS3に影響があるかもしれませんが、もちろんサイト自体は見れるようにはなっていますし。（プログレッシブエンハンスメント対応での許可をいただいています） ただ、もっと別の環境で閲覧する人もいるわけです。 例えば、耳が遠かったり、色覚異常だったり、老眼だったり、近視だったり。 今回はそれらの
カラーユニバーサルデザイン推奨配色セット
色覚の多様性に配慮した�案内・サイン・図表等用のカラーユニバーサルデザイン�推奨配色セット （バリアフリーに配慮した見分けやすい色の組み合わせ） カラーユニバーサルデザイン推奨配色セット制作委員会 ■ 東京大学分子細胞生物学研究所 脳神経回路研究分野 伊藤啓 ■ 社団法人日本塗料工業会（JPMA） ■ DIC 株式会社（DICグラフィックス株式会社・DICカラーデザイン株式会社 ■ 特定非営利活動法人カラーユニバーサルデザイン機構（CUDO） ■ 石川県工業試験場 前川満良 カラーユニバーサルデザイン推奨配色セット ガイドブック 第２版 カラーユニバーサルデザイン推奨配色セットの塗料用、印刷用、画面用の詳しい情報と、組み合わせる色の注意点、使用する上でのノウハウなどをまとめた冊子の第２版を作成しました。 CUD_color_set_GuideBook_2018
自分のデザインをチェック！色覚シミュレーションの方法いろいろ - Design Color
もくじ 【色覚シミュレーションの前に】色覚とは Webサイトでシミュレート ブックマークレットでシミュレート フリーソフトでシミュレート スマホアプリでシミュレート Photoshopでシミュレート 【見やすいデザインを作るために】まずはモノクロで視認性チェック 今見ているページをモノクロにできるChrome拡張機能「(un)clrd」 Photoshopでモノクロにして確認する 【色覚シミュレーションの前に】色覚とは 色覚シミュレーションの方法をお伝えする前に、ざっくりと「色覚」についてご説明します。色覚には「P型」「D型」「T型」「A型」「C型」の5つのタイプがあり、それぞれ以下のような特徴があります。 P型：赤い光を主に感じる錐体が無い、あるいは分光感度がずれている D型：緑の光を主に感じる錐体が無い、あるいは分光感度がずれている T型：青い光を主に感じる錐体が無いため、青色付近の識
色弱者に優しいWebサイトをデザインしよう
Webデザインにおいては、色は重要なデザイン要素でありメッセージ要素である。しかし、この色を認識するのが苦手という人、一般の人と色の認識が異なる人がいることをご存じだろうか？いわゆる色弱者と呼ばれる人である。色弱者は日本人では男性では20人に1人、女性では50人に1人いると呼ばれ、日本全体では320万人以上存在するとされている。40人に1人、1クラスに1人以上いるとされているのだ。 そのような色弱者に対しても一般の人と同じように情報を伝達することを意図したデザインをカラーユニバーサルデザインと言う。 今回はこのカラーユニバーサルデザイン、つまりすべての人にやさしいデザインをするには、どのようなところに配慮し、デザインを行えば良いのかを考えてみよう。 1.カラーユニバーサルデザインって何？ カラーユニバーサルデザインはユニバーサルデザインの一つだ。 「ユニバーサルデザイン」は1990年代にロ
フラットデザイン｜Flat UI Colors
280 handpicked colors ready for COPY & PASTE
「K=100は濃い灰色！」「リッチブラックはC90% M90% Y30% K100%」で印刷関係者が騒然
概要 ▶ PhotoshopVIPのK=100は黒ではありません？ K=100は濃いグレー？ リッチブラックはC=90, M=90, Y=30, K=100？…疑問に思ったので調べてみました。 K=100は黒ではありません。 Photoshopでやってしまいがちな10個の間違い - PhotoshopVIP 「Photoshopでやってしまいがちな10個の間違い」（PhotoshopVIP）で「K=100は黒ではありません」「K=100は濃い灰色」とあったので印刷関係者が騒然となった（一部）。 名指しはしていないけど、こちらのブログでも K100%は「濃いグレー」か？ 日本に限って言うならはっきりと、「いいえ。違います」 K100%はグレー？？？いいえ、「黒」です。それでもリッチブラックを使うなら… | やもめも とある。（違ったらすみません） 日本と欧米ではブラックのインキの濃度が違う
ウェブデザインの配色設計に役立つオンラインサービスのまとめ -2013年春
見て楽しい触って便利な、最近リリースされたものを中心としたウェブデザインの配色設計に役立つオンラインサービスを紹介します。 まずは、気軽にカラーを楽しめるサービスから。
文章の作り方 - 伝わるデザイン 研究発表のユニバーサルデザイン
研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演（アウトリーチ活動）の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者（研究仲間や審査員、一般市民）へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく
webデザインにおける視線誘導のおはなし | 07design.blog
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
『初学者向けPCCSを使ったイエローベース・ブルーベースの分類』
経営者を35億通りの色で強運体質に！貴女に「似合う」色・素材・柄・形で「なりたい」を実現するCOCOLOR(ココカラー) 業界初！！ パーソナルテクスチャー®（似合う素材） パーソナルパターン®（似合う柄） パーソナルライン＆シルエット®（似合う形） を体系化＆商標取得。 外面と内面と統計学の総合的アプローチで「らしさ」を見極め スタイリングで「なりたい」を実現します！ PCCSとは Practical Color Coordinate System 日本色彩研究所が 「配色調和」を目的に開発した表色系です。 表色系とは、カラーシステムの一種で、 簡単に言うと「色のものさし」のようなもの。 どなたでも一回は、美術等の授業で チラっと見た事があると思いますし、 たいていの大きさの規模の本屋さんに行った時に このようなPCCSのカラーカードを 売り場のどこかで見かけたことがあるかと思います。
コンプレックス配色をうまく使った、素敵なWebデザイン例 - かちびと.net
様々な配色の中でも個人的に 気に入っているのがコンプレッ クス配色という配色です。自然 の中ではあまり見られない配色 で都会的なイメージや見る人に 印象を与えるのに大きく貢献して くれます。 不調和ゆえのの調和配色と言われるコンプレックス配色を利用したWebデザイン例。個人的に必要になりそうなのでメモとして残します。コンプレックス配色に関しては以前記事にしましたので宜しければ合わせてご覧下さい。 The English Network グレーに、やや紫がかったレッドカラーが印象的です。統一感もあって見やすい。 The English Network globaltradeqatar こちらもレッド&グレーですが、先ほどのと雰囲気は随分違います。ロゴだけ合わせてないのは理由があるのかな・・ globaltradeqatar estoyvolando.com シンプルながらダークカラーにビビッ
ColorBlender.com |色の相性
To get started, choose a preferred color using the color picker below, and a 6-color matching palette (a "blend") will be automatically calculated. You may swicth to Direct Edit mode to tweak or edit individual colors of your blend. Saved blends will be associated with your account if you signed in or stored in your browser cookies if you are not a member yet.
ウェブ配色ツール Ver2.0
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
●○ 10PEOPLE 10COLOR ○● ～STUDY ABOUT COLOR～
KNOWLEDGE ・・・ 色の基礎知識（色の仕組み・色調など） FEELING ・・・ 色の感じ方（暖かい色 ・寒い色などを図で説明） CONTRAST ・・・ 色の対比（背景の色を変えた二つの図で比較） SCHEME ・・・ 色の配色（さまざまなパターンの配色の紹介） COLOR ・・・ いろいろな色について
●○ 10PEOPLE 10COLOR ○● ～TOP～
●6/03 DIARYを更新しました。 ●6/01 LANGUAGEのページが出来上がりました。 LANGUAGEの白、黒を更新しました。 ●5/31 LANGUAGEの青、紫を更新しました。 ●5/30 LANGUAGEの黄色、緑を更新しました。 ●5/29 LANGUAGEの茶色、橙色を更新しました。 ●5/28 SITE MAPを修正しました。 LANGUAGEの赤、桃色を更新しました。 ●5/27 LANGUAGEを追加しました。 DIARYを更新しました。 ●5/22 プレゼンテーションをThink Questの 本部の方にメールで送りました。 ●5/21 Yahoo!きっずにサイト登録の申請を 出しました。 ●5/19 プレゼンテーションが大体出来上がりま した。 ●5/15 APPLICATIONの細かい修正をしました。 ●5/11 プレゼンテーション作りを開始しました。 ●
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://jfly.uni-koeln.de/colorset/CUD_color_set_GuideBook_2013.pdf
【配色 - デザイン】 - Adobe Kuler
Color Palette Generator
colr.org : a stie for playing with colors