なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ８つの基本ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基本ルール１ 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで
English version 先日、北海道カラーユニバーサルデザイン機構（北海道CUDO）のイベントで、「色覚体験ルーム」というのを経験した。特殊な分光特性を持つライトに特殊な光学フィルタを被せたものを照明として使用しているその部屋の中では、一般型の色覚の人でも、P型（1型）やD型（2型）色覚の人と同様に色が見えてしまうのだ。つまり、特定の色の組合せにおいて、色の区別がつかなくなってしまう。こんなすごいものをよく作れたと思う。その部屋の中でいろいろなものを見たが、裸眼で色覚体験を行うのは、シミュレータを使ってディスプレイ上で見るのとはまた違った臨場感がある。貴重な体験だった。 部屋の中にフィンセント・ファン・ゴッホ（Vincent van Gogh）の絵のコピーがあった。その絵は、なんだか僕がいつも見ているゴッホと違って見えた。僕はゴッホの絵が大好きで、いろいろな美術館で実物を何点も見た
思考実験の面白さは異常 世界五分前仮説←これが一番 シュレーディンガーの猫はカス : 哲学ニュースnwk
2011年07月07日22:58 思考実験の面白さは異常 世界五分前仮説←これが一番 シュレーディンガーの猫はカス Tweet 1：名無しさん＠涙目です。(チベット自治区)：2011/07/06(水) 23:45:19.68 ID:BQ9lOpcb0 「シュレーディンガーの猫」のリスク管理論 正しく怖がる放射能【12】 「ミクロな世界」と「マクロな世界」 さて、私たちの住む世界は「自然法則」に支配されています。 夢の中などは別として、現実の空間では誰もその支配を免れることはできません。 りんごは木から落ち、磁石のN極とS極は引き合い、電流を流せば豆電球が光る。 物理や化学、あるいはDNAなど生命科学の法則に私たちは従いながら生活しています。 ところが原子や分子の世界は、ちょっと様子が違います。小さな小さな水素原子1粒を取り出し、 よくよく観察してみると、同じ電気や磁気の働きが全然様変わりし
遺伝の法則の「優性」「劣性」は使いません――。誤解や偏見につながりかねなかったり、分かりにくかったりする用語を、日本遺伝学会が改訂した。用語集としてまとめ、今月中旬、一般向けに発売する。 メンデルの遺伝学の訳語として使われてきた「優性」「劣性」は、遺伝子の特徴の現れやすさを示すにすぎないが、優れている、劣っているという語感があり、誤解されやすい。「劣性遺伝病」と診断された人はマイナスイメージを抱き、不安になりがちだ。日本人類遺伝学会とも協議して見直しを進め、「優性」は「顕性」、「劣性」は「潜性」と言い換える。 他にも、「バリエーション」の訳語の一つだった「変異」は「多様性」に。遺伝情報の多様性が一人一人違う特徴となるという基本的な考え方が伝わるようにする。色の見え方は人によって多様だという認識から「色覚異常」や「色盲」は「色覚多様性」とした。 学会長の小林武彦東京大教授は「改訂した用語の普
オープンソースの集まりで1度しか実際にお会いしていませんが、お願いがあります。 富士通アクセシビリティ・アシスタンスというサービスが、2013年8月20日で提供終了します。つまり、あと20日。このソフトは視覚障がい者や色覚障がい者の方がどのように色を見ているかを確認できるツールです。Webサイト制作をしている人なら、今は必要なくても、いつか必要になるソフトです。 8月20日までにダウンロードすれば、8月21日以降もローカル環境で普通に使えるので、なんとかメディアで紹介して頂き、提供終了するまでに、少しでも多くの人に知ってもらいたいと考えています。 紙媒体だと、とても間に合わないのですが、ネット媒体なら、なんとかなるかも！と思い、お願いしたいと思いました。 視覚障がい者や色覚障がい者という障がいに興味がないかもしれませんが、外見では判断できない障がいなので、気付いていないだけなのです。 よか
カラーユニバーサルデザイン推奨配色セット
色覚の多様性に配慮した 案内・サイン・図表等用のカラーユニバーサルデザイン 推奨配色セット ■ 東京大学分子細胞生物学研究所 高次構造研究分野 伊藤啓 ■ 社団法人日本塗料工業会（JPMA） ■ DIC 株式会社（旧･大日本インキ化学工業株式会社） DIC カラーデザイン株式会社 ■ 特定非営利活動法人カラーユニバーサルデザイン機構（CUDO） 概略 一般の人にも色の見え方が異なる人にも見分けやすい、カラーユニバーサルデザイン推奨配色セットを作成。 被験者実験を重ね、数千の候補色から20色を絞り込み。 塗料業界の色指定の業界標準であるJPMA塗料用標準色2011年F版に対応色を収録。印刷・デザイン業界の色指定の業界標準であるDICカラーガイドシリーズから対応色を選出。 はじめに いわゆる色弱（色覚異常）の人や、緑内障など網膜の疾患を持つ人、白内障の人は、色によっては違いを
2020年ももうすぐ終わるので、読んでおもしろかったノンフィクションを振り返っていこうかと。今年はまるっと本の雑誌でノンフィクションの新刊ガイドを担当しており、例年よりもたくさん読んだような、あまり変わらないような。とはいえ、おもしろいノンフィクションには山ほど出会ったので、思い出しながら書いていく。 まずは科学系から！ ＬＩＦＥＳＰＡＮ（ライフスパン）―老いなき世界 作者:デビッド・Ａ・シンクレア,マシュー・Ｄ・ラプラント発売日: 2020/09/01メディア: Kindle版科学系のノンフィクションの中で最もおもしろかったのはなにかといえば、デビッド・Ａ・シンクレア、マシュー・Ｄ・ラプラントによる『LIFESPAN 老いなき世界』になる。シンクレアは老化の原因と若返りの方法に関する世界的な権威で、老化は克服できる病であり、克服すべきだ、とこの本の中で強烈に主張している。ほとんどすべての
企画やらUIを考えるツール iPhone Idea Sheet（PDF） 三階ラボさんのアイデアシート（PDF）。 iPhoneの枠だけじゃなく、ナビゲーションバーやタブバー、ステータスバーが書きやすいように、うっすら線が入っていてGOOD。 印刷して何枚か持ち歩いている。何か作りたいなーどうかなーと思ったら、手書きでワーっと書く。このシート自体が美しいので、いいもの作れそうな気がしてくる。 紙なので、対面でのブレストやら打ち合わせしながら書き込みやすい。 Cacoo（Web） UIの構想がまとまってきたら、Cacooで清書してチームで共有。 iPhoneの各パーツのステンシルが揃っているので、きれいに、わかりやすく作れる。SkypeミーティングのときにみんなでCacoo触りながら話したりとかしている。 Interface HD（iPad App） iPad上で、iOSパーツを組み合わせて
色覚障がい者に配慮したWebサイトの作り方
2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに
色覚異常補正レンズを買った
私は先天性の色覚異常である（wiki先生によると色覚多様性という言い方もあるらしい）。 もっとも、「最後の赤と緑、赤い方を切れ！そうすれば爆発を回避できる！」……みたいな経験もないので、仕事や日常生活にはさほど困ってはいない。 ただ、興味本位と日常の些細な問題（靴下の色を取り違える、焼けてない肉を食べそうになる etc.）から、先日、色覚補正用レンズを購入した。 色覚異常を持つ人は男性で約5%の割合でいるそうだ。強弱はともあれ、佐藤・鈴木・高橋姓を足した人数くらい、先天的にその特性を持っているはずである。 まぁ、日常生活で気付くことはまず無理だし、赤の他人から指摘するのも（たぶん）躊躇われるし、で同様に困ってる人にはまだリアルで遭遇していない。 自身の場合は母方祖父がそうだったため、家族からの指摘で比較的早い段階で気付くことが出来た。 早い段階で気付けたことと、見分けのつきにくい色もバンバ
「絶望先生」作者にとって最終回は“供養”である。「かってに改蔵」から最新作「かくしごと」まで、マンガ家・久米田康治が語る“終盤の急展開”に込めた想い
『初代ポケモン』マサラタウンのジオラマを画用紙で作ってみた！ ストップモーションで描かれる表現に「立体なのがなんか感動する」「わくわくする」の声 海外でバズり中のボカロ曲「ヤババイナ」楽曲配信開始！初音ミク、ずんだもん、重音テトの破茶滅茶なMV映像に「中毒性やばい」「何度も聞きにきたくなる」の声 久米田康治先生のマンガは、最終回に衝撃的な「どんでん返し」が起こるという特徴がある。 『かってに改蔵』の連載終了当時、数年に渡るギャグ展開を全てひっくり返すような突然のシリアス最終回が波紋を呼び、話題となった。 『さよなら絶望先生』はショックを受けるほどの暗いラストに、久米田先生が「最終回は連載開始前から決めていた」と語ったのも相まって、筆者もリアルタイムで読んでいて背筋が凍ったのをよく覚えている。 そして、先日に完結した最新作『かくしごと』は、最終回で作品全体に仕掛けた大きな伏線を回収するという
データ分析&データ視覚化のコンサルティングをしております、永田ゆかりと申します。 これまで2000人以上の方にデータ分析や活用の研修・トレーニング講師、企業への分析コンサルティングをさせていただいており、仕事をさせていただく中で必要な本を読み続けているうちに、気がついたらデータ分析領域の本を200冊以上読んでいました。 中でもデータビジュアライゼーション・視覚化の領域に関しては私自身の得意領域ということもあり、数多く読み込んでいます。 本記事では数多くのクライアントの方々との問題解決に役立った知識・ノウハウが書かれている良書をご紹介させていただきますので、是非最後までご覧ください。 データ可視化そのものについて知りたいたは、こちらの記事からどうぞ。 データ可視化とは？その重要性や手法、よくある課題と解決策を解説 データ分析における視覚化（ビジュアライゼーション）系のおすすめの本17選1 S
<この項は書きかけです。順次追記します。> This section is about to be written. I will add it little by little. 目次の前に(forward) この記事は、インターンシップの大学生の方に、「ゲームはするよりもゲームプログラムを書く方が楽しい」ということを説明した際に、その説明の一部として書いたものです。ゲームを卒業研究の題材にするなら、ゲームの中での色使いで、人による見え方の違いに配慮した改訂のあったJIS安全色(国際整合：ISO 3864-4:2011(Graphical symbols−Safety colours and safety signs−Part 4: Colorimetric and photometric properties of safety sign materials))を参考にするとよいよとい
O'Reilly Japan - インタフェースデザインの心理学 : ウェブやアプリに新たな視点をもたらす100の指針
デザインは相手から反応を引き出すための大事な要素です。買ってほしい、読んでほしい、行動を取ってほしいなど、相手の反応を誘い出すためにデザインをします。人間の行動原理を理解していないデザインは相手を混乱させるだけで目的の結果を得ることができません。本書ではすべてのデザイナーが知るべき100の指針を実践例とともに紹介します。すべてが科学的な研究から導き出されたものです。これらの指針を理解してデザインすれば、人間の思考や行動、遊び方にマッチした直観的で人を引きつける製品――印刷物、ウェブサイト、アプリケーション、ゲーム――を作れるようになります。 翻訳者によるサポートページ。 サンプルPDF ● 「前付〜#008まで」（53MB） 目次 1章 人はどう見るのか 001 目が受け取る情報と脳が私たちに伝える情報は微妙に違う 002 対象の「あらまし」をつかむのは中心視野より周辺視野の役目 003
先日のアップデートでシャニマスのUI周りに色々と手が加えられた。 その中でも個人的に嬉しかったのは、ソートに関連するチェックボックスのON/OFFが見やすくなっていたことだ。 大多数のユーザーにとっては「まあ確かにね」くらいのものかもしれない。しかし私は「これでようやくまともにソート機能が使える」とひそかに歓喜した。一部のユーザーも共感してくれるのではないだろうか。 なぜなら私の目に映った変化は以下のようなものだったから。 チェックの光沢の有無でかろうじて判別していた（ひよこ鑑定士か？）この見え方の差異は、私が『色覚マイノリティ』、いわゆる『色弱者』であることに起因する。 『色弱者』って何？光（色）を感じる視細胞が何らかの原因により欠損、または十分に機能しないことによって色の見え方が一般とは違う人のことを、本記事では『色弱者』という呼称で表記する。 日本人男性の5％、女性の0.2％がこの色
WebデベロッパーのVictor氏による下記のツイートから始まるスレッドが大変参考になる内容だと感じたので、ご本人に許諾を得て日本語で紹介させていただくことにしました。 I reviewed 100+ user interfaces this year. Avoid the most common 18 mistakes to make your UI/UX design better 👇 — Victor (@vponamariov) July 30, 2021 私は今年100以上のユーザーインターフェースをレビューしました。あなたのUI/UXデザインをより良くするための、下記に示す18個の良くある誤ちを回避しましょう。本記事で使用する画像はすべてVictor氏のツイートから拝借しています。なお翻訳には一部私の意訳が入っていることをご了承ください。 1. 薄いコントラストの文字適切では
実は僕色弱でして、ていっても軽度のなんですけど、細かい色の違いがあんまりわからんのです 特に赤と茶色辺りはもう全然で、あと緑と黄色の辺もちょっと怪しい。絵具とかも色鉛筆も名前が書いてないと「はい詰んだー」みたいなとこありました この画像とか有名ですね これで言うと僕は 左上 見えない 真中上 12 右上 見えない 左下 17 真ん下 70 右下 見えない(4?) って感じ でもそれでそんな困るか？ って言ったらね、別にそんな大して困んない 強いて言うなら 絵を書く会の時に先生に 「何であのお花は青色なのに紫色で塗っちゃったのかな？」 って聞かれて 「わかんない」 を連呼して先生を困らせたくらい 別に信号の区別がつかないってわけじゃないし、ざっくりとした色の違いはわかるし、イルミネーションとか鮮やかな絵とか見たら「キレイだなー」って思う ただね、やっぱ日常生活してると「やべぇ……」って
個人開発のUI設計術 - Crieit
あんど( @ampersand_xyz )と申します。 クイズメーカーなど、色々なサービスを個人でリリースしているフリーのエンジニアです。 個人開発を支える技術のアドベントカレンダーではサービスを構築するArchitectureに関する技術の話題が多いなか、周りの方やマシュマロからの匿名メッセージ質問でUIのことに関する質問などが多かったので、本投稿ではUIやデザイン周りに関するTechnic…と言えるほど上等なものではないのですが、そのあたりの技術をお話したいと思います。 なお、自分は正直かなり我流で適当にやっているので、もっといい方法のツッコミなど歓迎しております。 1.画面サイズの最大・最小幅を最初に決めておく まずはじめにここを決めます。 いかにリキッドデザインやレスポンシブで画面を作成するといえども、極端に幅が小さい、または大きいデバイスを相手にする場合、どうしてもサイズ整合性を
Webサイト、スマホアプリの制作・開発に携わるすべての人に役立つ、200種類以上の有料・無料のデザインツールを紹介します。 定番ツールから最近リリースされた注目のツールまで、便利なツールが揃っています。 Awesome Design Tools -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アクセシビリティのツール アニメーションのツール AR（拡張現実）のツール コラボレーションのツール カラーピッカーのツール デザインのフィードバックツール デザインのハンドオフツール デザインパターンとインスピレーションのツール デザインシステムのツール デザインをコードにするツール エクスペリエンスのモニタリングツール フォントのツール スクリーンショットのツール アイコンのツール イラストのツール 情報アーキテクチャの
カラーユニバーサルデザイン推奨配色セット
色覚の多様性に配慮した�案内・サイン・図表等用のカラーユニバーサルデザイン�推奨配色セット （バリアフリーに配慮した見分けやすい色の組み合わせ） カラーユニバーサルデザイン推奨配色セット制作委員会 ■ 東京大学分子細胞生物学研究所 脳神経回路研究分野 伊藤啓 ■ 社団法人日本塗料工業会（JPMA） ■ DIC 株式会社（DICグラフィックス株式会社・DICカラーデザイン株式会社 ■ 特定非営利活動法人カラーユニバーサルデザイン機構（CUDO） ■ 石川県工業試験場 前川満良 カラーユニバーサルデザイン推奨配色セット ガイドブック 第２版 カラーユニバーサルデザイン推奨配色セットの塗料用、印刷用、画面用の詳しい情報と、組み合わせる色の注意点、使用する上でのノウハウなどをまとめた冊子の第２版を作成しました。 CUD_color_set_GuideBook_2018
周りでレーシックやった人みんな失敗してる:ハムスター速報
1：以下、名無しにかわりましてVIPがお送りします：2012/04/17(火) 20:06:07.18ID:rHHa1tPT0 本当に大丈夫なの？ 2：以下、名無しにかわりましてVIPがお送りします：2012/04/17(火) 20:06:35.10ID:IVJhCZiz0 駄目 25：以下、名無しにかわりましてVIPがお送りします：2012/04/17(火) 20:42:48.88ID:lJBGtpB30 ここで「レーシック難民」って入れて検索してみ。絶対にやるもんかって思うから。 http://www.lasik-049.com/lasik_taiken/bbs.html |||||||||||||||''|||||||||||||ﾞ|||||ﾞ|||''|||||'ﾞ||||ﾞ||||||||||ﾞ|||||||||||||||||||| |||||||||||||ﾞ || |||
強震モニタレイヤーは、防災科研が運用する強震観測網（強い揺れを記録するための地震計ネットワーク）によって観測された日本全国の今現在の揺れをリアルタイム震度として表示する機能です。緊急地震速報（予報）が発表された場合には、緊急地震速報の予想震度やP波・S波の伝播状況推定図と強震モニタレイヤーの情報を自動的に統合して表示します。 揺れ検知通知を有効にすると、地震と思われる変化を検知した場合にプッシュ通知を受け取ることができます。緊急地震速報が発表されていない地震についても検出して通知できるケースがあります。なお検知手法は完全ではないため、誤検知で通知が送信される場合があることをご留意ください。 この取り組みは、国立研究開発法人防災科学技術研究所（以下、「防災科研」）、ゲヒルン株式会社、株式会社TBSテレビ、TBS・JNN NEWS DIG合同会社の4者が締結した「強震モニタデータの利活用に関す
ぽんた @Pontamama12345 昔は入学時に色覚検査を行っていた。今はやらない。でも、クラスには一人二人居ると思って指導する。 「緑色の黒板では、赤色や緑色で文字を書くな」と初任者の頃厳しく指導された。「使うのは白色か黄色のチョーク。赤色は枠で囲む時だけ使う」などは常識だった。 今その常識すら失われつつある… 2017-09-14 17:06:42 ぽんた @Pontamama12345 検査をしないから見つかっていないだけで、居ない訳ではないのだ。クラスの中に黙って困っている子がいるかもしれない。 描く図画の色使いを見ていく。色使いがユニークだと、心理状態云々を考える前に、色の区別がつかないのかもしれないと考える。 保健室で簡易検査をしてもらい、保護者へ連絡する 2017-09-14 17:08:52 ぽんた @Pontamama12345 校内の全体研修で「学習中のきまりの中に
国から表彰された路線図が横浜にある
路線図が好きだ。カラフルに色分けられた路線、限られたスペースに詰め込めれた情報、うっかり現実世界とかけ離れる歪み。時間を忘れてうっとり眺めてしまう路線図は個人的に表彰したくなる。生まれてきてくれてありがとう。 いやいや、母性を暴走させている場合じゃない。僕が表彰しなくても、国から表彰されている路線図が既にあるのだ。横浜市営地下鉄である。
ぶりとぶら @s_mosachan 某ビルのトイレの表示。 ただオシャレなだけで実用性を欠いたヒドいデザイン。 赤と青で区別するのがジェンダー観点や色覚異常者観点で問題なのであれば、せめて「男性用/Men/Gentlemen」「女性用/Women/Ladies」という文字を記載すべきだと思う。 pic.twitter.com/YPmn9NZjeE 2022-05-31 21:10:07
2013年3月23日 Webサイト制作, アクセシビリティ, 色彩 「We are Colorblind」というサイトをご存知でしょうか？サイト名を訳すと、「我々は色覚障がい者です」。そう、色を識別することが困難なデザイナーさんの作ったサイトです。数々の例とともに、Webサイト制作における改善すべき点を指摘してくれています。とっても勉強になったので、簡単に紹介します！ ↑私が10年以上利用している会計ソフト！ Webクリエイターボックスでは以前「色覚障がい者に配慮したWebサイトの作り方」という記事で色覚障がいとは何か、どのように見えるのか、また、Webサイト制作において注意すべき点をまとめました。読んでいない方は、まずはこちらに目をとおしてみてくださいね ;) Webサイト「We are Colorblind」の中の人はオランダ在住のデザイナー、Tom van Beveren氏。サイト名
最近、哲学者の千葉雅也氏がサイゼリヤについて語っていたツイートが「炎上」状態になっていた。 サイゼリヤに来たら、番号を記入した紙を渡す形式になっていた。ライス大盛りに一つの記号列が割り当てられている。ひどいと思った。世界は本当に寂しいところになった。これでいいと本気で思っているんですか、本当のところはどうなんですか、と叫びたくなった。 2022-07-05 12:56:36 ものすごく卑近な言い方にすれば、無味乾燥な記号にすることで本来それを指す言葉が持っていた豊潤さを消している、人間味であるとか詩的感性の剝奪である、というようなことであろう。コンテキスト等についてアンフェアにならないように紹介しておけば、togetterと氏のアカウントの直接の発言も参照されたい。 今回は、氏の発言がなぜ「炎上」状態になったかについて私見および他の方のご意見をメモとして残しておく。今回の内容は、私以外の方
Webアクセシビリティ難しすぎる問題
はじめに 私はデザイナー兼フロントエンドエンジニアというような立ち位置で、勤務するfreee株式会社のアクセシビリティガイドラインの作成に関わったり、アクセシビリティまわりの仕組みの整備や社内エバンジェリストみたいなことをしています。 もともと私はWebアクセシビリティという分野が、重要なものである以上に技術や考え方として面白いと思ってやっているうちに気付いたら仕事で大きなウェイトを占めるようになってしまったタイプの人です。しかし、そうではない人たちにその重要さを説明したり、対応をお願いしたり、そのための資料を作ったりしているうちに、「やっぱWebアクセシビリティって難しいんだなぁ」と思うようになってきたので、それについて書いてみようと思います。 なお、背景を説明するうえで必要なので社名を出しましたが、あくまでこの文章は個人の見解であり、所属組織とは関係がありません。 誰のためにやるのかが
やしろあずき @yashi09 オシャレに特化されたトイレの性別表記、直感的にトイレに突入できなくなるから怖い。尿意が限界の時人間はアホになるから悠長に考えてる余裕はないんだ。 pic.twitter.com/b8Mal9Jgip 2022-06-18 07:11:40
この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ
色の組み合わせチェック - 読みやすい前景色と背景色
誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名（CSS2の色名＋SVGの色名、計147色）およびrgb()の表現が使えます（初期値は、読みにくい例が入っています）。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行
エンジニアのための十徳ナイフ「DevToys」がバージョン２になってクロスプラットフォームやCLI対応しさらに便利すぎる - Qiita
はじめに 以前紹介させていただき、2022年Qiitaのいいねランキング18位、ストックランキング20位を記録したこちらの記事の続編です！ DevToysはリリース後しばらく定期的なバージョンアップが続けられていましたが、去年の7月からぱったりとアップデートが止まっている状態でした。 リポジトリや作者のXを見るとバージョン２の開発を行っているようで、今か今かと待ち続けていましたが数日前リリース予告のポストを見つけて、今日ついにプレリリースされました！ ということで早速紹介していきます！ DevToysとは DevToysは「開発者のためのスイスアーミーナイフ」の紹介文の通り、開発時によく使うツールを十徳ナイフのようにまとめたアプリとなっています。 JSONの整形とかエンコードデコードetc... プログラミングや保守運用の調査でやりがちな作業をいちいち変換サイトを探したり、エディター拡張機
小学校で義務付けられていた色覚検査が廃止されて１０年。色覚異常の子供の約半数が異常に気づかないまま進学・就職に臨み、中には直前で進路を断念せざるを得ないケースもあることが、日本眼科医会の調査で明らかになった。保護者の同意があれば今も色覚検査はできるが、希望調査すら実施しない学校がほとんどという。同会は「希望者が学校で検査できるようにしてほしい」と訴えている。（平沢裕子）◇ ◆「差別」と撤廃 色覚異常は主に染色体の劣性遺伝により、男性で２０人に１人、女性で５００人に１人の割合で現れる。色が見分けにくく、赤と緑、赤と黒、ピンクと灰色などの識別に困難を生じる。６割以上は軽い症状とはいえ、有効な治療法がなく、近視や遠視のように眼鏡での矯正もできない。 かつて、小学４年生を対象に学校で色覚検査が行われていた。しかし、「色覚検査をすることは差別につながる」などの声が挙
よしもとよしとも @yoshitomosan 強度の色覚異常という点でオレも障害者なのだが手帳が出るわけでもなく不便はある。なぜカラー原稿が描けるかというと20年前のコピックのマーカーを使ってるからで、これは色の識別に「物体の名前」が付いている。 2021-04-15 09:10:09 よしもとよしとも @yoshitomosan 「Peach Skin」なら女の肌、「Yellowish Skin」なら男の肌、肌の影は「Skin Shade」というように。実はこの色だけ見ても判別ができない。「物体の名前」がないと。「なんちゃらブラウン」でなく「Bread」とあればそれが何かわかる。 pic.twitter.com/hBzfHBIqMK 2021-04-15 09:10:10
色覚異常者です。 もう手遅れかもしれませんが、本当に本当に辛い思いをしている人間を、さらにその希望まで踏みにじるようなことは止めてください。 残念ながらこの製品はフェイクであり、この体験記もフェイクです。 それがフェイクであることは、このサイトの中で簡単に証明できます。 増田にも言及があったこのページを御覧ください。 http://www.neo-dalton.com/side/check/ 色覚異常者であるわたしは、一般とされている画像が52と読めます。 （健常者に確認を取ったわけではありませんが、ここにはおそらく89と書かれているのではないでしょうか。） そして画像の番号が進むと同時に89という文字が視認できるようになります。 わたしはA7で視認できました。 お気づきでしょうか。 つまりこれが、わたしが89を正しく認識できる色の世界です。 89は確かに読めました。でも、これが色覚異常者
2014-09-01 数字が見えない！色覚異常者いっぱいいるよ！ 色覚異常という言葉が生まれたのは最近のこと。 昔はは色弱とか色盲って言われてたね。 色弱、色盲の人は、受験や就職で差別されていたらしい。 「成績に関わらず色覚異常者は不可」 なんてあったとか。ひでぇ。 ただ、社会生活に何ら問題ないという理由で、2003年度から色覚検査が定期健診から外れたらしい。 たしかに、俺が小学生の時はあった、保健室で色覚検査を受けたことを覚えてる。 ちょっと多すぎるんじゃない？ 日本人男性の５％は色覚に異常を持っているとか。 ５％って多すぎ。 ２０人に１人って多すぎるよ。 そして、かく言う俺も色覚異常者でね。 これが見えない 俺の場合は 左上× 中央上12 右上× 左下17 中央下70 右下5 となる。 左上と右上は見えないとダメなんだって。 右下なんて完っ全に『５』どう見たって『５』 俺
なんかはてブの陰キャ共が説教垂れ始めてるんで消しときますね はーキモ
2022年上半期、注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー
「Ameba」アイコン刷新 一貫性と再現性追求のための設計術 | CyberAgent Developers Blog
GUIにおけるアイコンとは、プロダクトを触れるユーザーに対して、機能や動作を抽象化してシンプルかつ直感的に伝達させる、文字情報に頼らない記号です。 基本的に、記号が内包する意味には受け手によって解釈の余地があるような状態であってはなりません。しかし、ユーザーに対して、シンプルに正しい意味を伝えることが出来るという前提さえ踏まえれば、それを成すスタイリングは作り手やプロダクトによって様々な表現が可能な余地が残されています。 つまり、アイコンは、記号としての機能性に加えて、装飾としての役割も抱く、プロダクトGUIにおけるスタイリング定義の標本となり得るということです。 前段 「Ameba」について 「Amebaらしい」アイコンとは何か 塗りと線のルール 「Amebaらしい」形状 「Ameba Sans」の形状分析と曲率定義 線の太さのルール 命名規則を決める Library化 リプレイス まと
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
asada's memorandum (ゴッホの本当のすごさを知った日)
遺伝の「優性」「劣性」使うのやめます 学会が用語改訂：朝日新聞デジタル
「終了前に、ただ伝えてほしい」――多くの開発者に届きますように。
2020年に刊行され、おもしろかったノンフィクションを振り返る - 基本読書
iPhone/iPadアプリデザインで使っているツール
データ視覚化のプロが選ぶデータ分析のオススメ本32選
プログラマが知っているとよい色(1)使い(JIS安全色) - Qiita
シャニマスのチェックボックスから見る色弱者の世界｜謝罪Ｐ
UIデザイン時にやってしまいがちな18の誤ち｜Mikio Kiura / ANKR DESIGN
【テスト画像有り】色弱・色盲の僕がとりあえず困ること｜今日はヒトデ祭りだぞ！
保存版！デザインツールの総まとめ -200種類以上の定番ツールから最近リリースされた注目のツールまで
特務機関NERV防災
昔の小学校に「赤色や緑色のチョークで文字を書くな、使うのは白か黄色」というルールがあった理由
最近のトイレおしゃれなだけで実用性少なすぎる、焦ってる時に漏らさない方が重要なんです
色覚障がいの方が作ったサイト【We are Colorblind】が勉強になる
メモ - 弱者にやさしく人間味のない社会/肌のぬくもりの感じられる素朴な差別
おしゃれなデザインのトイレマークを見た色覚異常当事者の方『こう見えるけど全然違ってて震える』
Web制作を変える！2021年の便利オンラインツール・ベスト100選
TEDのおすすめスピーチを日本語書き起こし(800件) - ログミー
小４での色覚検査、中止から１０年 異常知らず進路選択、トラブルも - MSN産経ニュース
漫画家のよしもとよしとも先生が明かした「強度の色覚異常があってもカラー原稿が描ける理由」と今後の話
色覚異常者です。 もう手遅れかもしれませんが、本当に本当に辛い思いをし..
数字が見えない！色覚異常者いっぱいいるよ！ - Golden Year！
なんかはてブの陰キャ共が説教垂れ始めてるんで消しときますね はーキモ