ウェブサイトの配色で気を付けたい9つのこと｜ベイジの図書館
ウェブサイトやアプリケーションにおいて配色の持つ役割は大きく、その設計は使いやすさに強く影響を及ぼします。今回は基本的ではあるけれど覚えておくと役立つ、配色にまつわる9つのトピックについて解説します。 なお、本記事では、配色が与える情緒的な印象の話は出てきません。印象論的な配色理論は、数多く存在する他の書籍や記事に譲るとして、主にユーザビリティやアクセシビリティ、ビジネス上の課題解決に繋がる、基本的なポイントに絞って解説していきます。 1. メインカラーに赤を安易に採用しない 色を知覚する視細胞の中で、赤錐体（赤に反応する視細胞）は緑や青のものより数が多いという研究結果があります。 人間の目は赤に対して敏感であるという現象は、いくつかの学術的な裏付けにより証明されている事実と言えるでしょう。 色覚のしくみ – 多様な色覚に対応したデザインと社会の改善 特定非営利活動法人カラーユニバーサルデ
無料でウェブデザインに最適な配色実例をそのままコピペできるようにした「Happy Hues」レビュー
色は人の心理に働きかけることが知られており、デザインに何色を使うかは重要な問題です。特に、異なる色を使いつつ統一感を持たせるのは至難の業で、一歩間違うとまとまりやメッセージ性のない配色になってしまうことも。そこで、プロのデザイナーがウェブデザインのさまざまな配色実例をそのままコピーできる「Happy Hues」を作成し、無料で公開しています。 Happy Hues - Curated colors in context. https://www.happyhues.co/ トップページには画面左側にパレットが表示されています。パレットをクリックすることで、画面右側の配色を変更可能。深緑を中心とした落ち着いた配色から…… ピンクを中心としたファンシーな配色。 グレーベースのシンプルなデザイン。 温かみがある焦げ茶色ベースの配色など、背景だけでなく文字色やボタン、イラストの色まで変わるので画面
The internal of go-prompt: How to control the rich terminal UI (Part I).
Hello, I’m a creator of go-prompt. Fortunately, go-prompt reaches 2300 stars on Github. And many awesome OSS adopts this library today. Thank you for all the users and contributors. By using go-prompt, you can write powerful interactive prompts, like kube-prompt. https://github.com/c-bata/kube-promptAs the number of Github stars of the terminal UI projects implies, The rich terminal UI application
エンジニアが知っておきたい色についてのお話 - Qiita
「俺にデザインなんて無理だ。」 そう思う人もいるかもしれません。 確かにデザインはセンスによる部分も多大にあると思います。 でもちょっと待ってください。 デザインにも色々あるんです。 人生色々、男も色々、女だって色々・・・そう色の話です。 ＃私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話です はじめに 今回、本当に共有したかったのは後半部分のChromeの機能についてです。 個人的には超便利！ 使う色合いを決める 赤系なのか、青系なのか、緑系なのか・・・作るものによってはコーポレートカラーが決まってることもありますし、全く何も決まってないことがあるかもしれません。 アクセントカラー決めて、その補色をサブカラーにして・・・とかありますが、今なら Adobe Capture というスマホアプリを使えば適当に色をピックアップしてくれます。
Search by Muzli
Search, discover, test and create beautiful color palettes for your projects
デザイン的に合う色の組み合わせを指定されたカラーをベースに生成する無料ツール -Color Designer
色の組み合わせに悩んだ時、指定されたカラーをベースにその色の明るい色合いと暗い色合いをはじめ、補色、類似色、分裂補色、3色配色、4色配色など、色の組み合わせを簡単に自動で生成できるオンラインツールを紹介します。 カラーのセンスがなくても、デザイン的に合った組み合わせが分かります。
さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』 - LITERALLY
今回は知っておくと何かと役立つ『配色の基礎知識』と『色の心理学』についてまとめます。 1. 色を決める3つのパラメーターをおさえよう まず、基本的なところを簡単に説明します。色を決めるのは、①色相 ②明度 ③彩度の3つのパラメーターです。 色相 赤、青、黄などの色みの違いを表します。これは分かりやすいですね。 彩度 色みの強さの度合いを表します。いわゆる「あざやかさ」ですね。 明度 色の明るさの度合いを表します。限界まで明度を高くすると白になります。逆に限界まで低くすると黒になります。 この3つは「色の三属性」なんて呼ばれたりします。この3つは配色の話で何かと出てくるのでおさえておきましょう。 2. 補色について知っておこう 色相の並びをぐるっと1周つなげたものを色相環と呼んだりします。この色相環において、向かい合う2色ペアーの関係を補色と言います。この補色関係にある2色は、お互いを引き立
UIデザイン初心者が知っておきたい配色の理論 - ポップインサイト
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 「配色」はデザイナーの持てる手法の中で最も強力な手法の一つで、様々な感情を引き起こせたり、ユーザーの注意を引いたりできます。 ですが、新しいプロジェクトを立ち上げる経験をしたことがある方ならわかるかもしれませんが、プロダクトやサービスの配色を決めるのは非常に難しいものです。 今回は基本の色彩の理論とそれがどのようにUXデザインと関係するのかについてご紹介します。これはあくまでUIやUXのデザインの範囲での色彩の理論で、包括的なデザイン論ではありませんのでご了承下さい。 色彩の理論 色彩の理論には様々な要素がありますが、基本の基本では、補色性、コントラスト、鮮やかさを考慮した色の相互作用において成り立ちます。 補色性は他の色との関係性という点から色を見る方法です。
UIColorの定義はすべて#colorLiteral使ってみることにしてみた – Swift・iOSコラム – Medium
まだ最適解かは分かりませんが、UIColorの生成はすべて#colorLiteral使ってみることにしてみました。上のような感じになります。 Swift 3らしく、var定義かつcolor接尾辞無いのもポイントです。 Xcode 8以外で見ると次のようなテキストに見えます。 今までは、適当なライブラリ使って、#2c2c2cなどの16進数カラーコードから生成していましたが、#colorLiteralがXcode 8から導入されたので、活用することにしました。 (Xcode 7のPlaygroundでも使えましたが) メリットコード上で色が直感的に分かるカラーパレットで色を指定出来る(ダブルクリックなどで後から変更可能)ライブラリや独自メソッド定義不要で、標準で使える デメリットコード上で、16進数カラーコードが分かりづらいXcode 7以前では使えない(Xcodeは最新使い続けるのが正義だと
ノンデザイナーでも配色に困らないカラーパレットツール10選 - ポップインサイト
色はデザインにおいて重要な役割をもち、色の組み合わせひとつでユーザーに与える印象は大きく変わります。しかし、配色を決めるのはなかなか難しく、悩んでしまいがちです。 今回はそのようなときに役立つ、配色を提案してくれるサイトや、配色がコレクションされているサイトを紹介します。配色のアイデアを与えてくれるサービスばかりなので、ぜひ活用してみてください。 HELLO COLOR http://jxnblk.com/hello-color/ クリックすることで２色の色の組み合わせを提案してくれるサイトです。また、スペースキーを押すことで、提案された２色に合う色を表示してくれます。配色のデザイン知識がなくても使うことができる便利なサービスです。 PALETTABLE http://www.palettable.io/ 提案された色が「好き」か「嫌い」かを選択していくだけで、カラーパレットが完成します。
Webデザインの配色に役立つ！色彩について学べるサービス・ツール12選まとめ｜SUKIMANO
Webデザインをしているときに、配色に詰まって作業がはかどらないということは多々あるのではないでしょうか。 そんなときは、自動で配色パターンを生成してくれるサービスやツールに頼ってみましょう。 そこで今回は、Webデザインの配色に役立つ12個のツールをピックアップして紹介します。 1. Adobe Color CC https://color.adobe.com/ja/ 「 Adobe Color CC 」はAdobeが無料で提供している配色ツールで、元々は「Kuler」という名称で提供されていました。 「類似色」「モノクロマティック」「トライアド」など6種類のカラールールが用意されており、色彩と明度を好みで調整可能となっています。 さらに、画像をアップロードすると色を抽出して配色パターンを作成するという機能も備わっています。 納得いく配色パターンができないときは、「探索」のメニューからパ
DESIGN ARCHIVE vol.3｜迷ったときにすぐに役立つ！配色デザインアイデア|haconiwa
色の組み合わせがカンタンにできる！おすすめ配色パターン こんにちは。Keinaです。 デザインの基本といえば、配色デザイン。 学生の頃に色彩論を勉強したことがあるんですが、 色について知れば知るほど、デザインするのが楽しくなりました。 本日は、なんとなく色を選んでしまっている初心者さん、ついつい好きな色にかたよりがちの方のために、 迷ったときにすぐに役立つ！配色デザインアイデア3つをご紹介します。 01. 写真の配色から色を探してみよう 日常や旅で撮る写真には、必ずいい色が隠れていることが多いです。 撮った写真をPhotoshopで開き、ドキュメント内から好きな色を探して「スポイトツール」で直接クリックするだけで色が抽出できます。自分のパレットに思い出の色をプラスするのも楽しいものです。 春色を選びたいとき 春に咲く「花」の写真を使って色を選んでみましょう。 （ 権現堂桜堤の桜 #f0d7
【図解で分かる】色彩センスのいらない配色入門 - Brian'z Imagination
2016 - 04 - 29 【図解で分かる】色彩センスのいらない配色入門 Webデザイン シェアする Bookmark! Facebook Twitter Google+ Pocket Feedly Web制作を生業としていると、ブログを書いている知り合いからこんな声を聞く。あなたもこんな経験ないだろうか。 背景色や文字色をいじるのだけれど、 どうもパッとしない 。 これだ！と思う色を選択して使っているはずなのに、 なかなか思ったようなイメージにならない 。 そもそも センスがない 。 本題に入る前に、最初にひとつ、 伝えておきたいこと がある。「自分にはセンスがないからブログのデザインを考えるなんておこがましい」なんて思っているひとには、特に聞いてほしい。 実はここだけの話だが、Web制作で飯を食っているぼくでさえ、ほんの少し前まではデザインのキホンの「キ」さえ知らなかった。おかげさま
エンジニアがデザイン入門書を3冊買ってみたのでメモと雑感 - エンジニアをリングする
自分で何かWebアプリを作るときにデザインも自分である程度満足いくレベルのものをできるようになりたくて、今年に入ってからいくつかデザインの本を買いました。 感想と勉強になったことをまとめてみます。 ノンデザイナーズ・デザインブック ノンデザイナーズ・デザインブック [フルカラー新装増補版] 作者: Robin Williams,吉川典秀出版社/メーカー: 毎日コミュニケーションズ発売日: 2008/11/19メディア: 単行本（ソフトカバー）購入: 58人 クリック: 1,019回この商品を含むブログ (107件) を見る 定番・・・なんですかね。どこかでデザイン初学者向けにオススメされていたのをみて買ってみました。 とても教科書っぽいです。ただ文章は程よく砕けていて読みやすく、理論をベースに実際の例をたくさん挙げて説明されているのでとっつきやすいです。 特に参考になった章：7章 Usin
簡単にきれいな配色デザインが作れる無料ツール「ColorHexa」 | WordPressやWebデザインなど紹介 Ocadweb
前回、WEB上で画像やテキストなどのカラーを識別できるGoogle Chromeの機能を紹介しましたが、今回は色を識別してから、 色彩センスがないけど、きれいな配色が作りたい！！ この色には何色と合うんだろう？ とお困りではないですか。 【色を識別する記事】これ何色？画像やテキストなどWEB上の色を簡単に識別するGoogleChromeの機能 今回は、どんな色か特定できてもその色がどんなものなのか、相性の良い色はどの色なのか、配色を検討する参考にできる無料のオンラインツールを紹介します。 紹介する記事の中でこのサイトのロゴなどのテーマカラー「#d86e3a」をもとに紹介します。 簡単にきれいな配色デザインが作れるColorHexaって？ 前述していますが、「どんな色か特定できてもその色がどんなものなのか」、「相性の良い色はどの色なのか」、配色を検討する際に参考にできる無料のツールで、色彩セ
アプリのUIデザインと配色パターンまとめ（非デザイナー向け） - Qiita
はじめに 私は主にiOSアプリのプログラマーなのですが、デザインまで一緒に頼まれる事があります。 デザイナーじゃないので１からデザインをしていくなんて到底無理です。 そんな時にノンデザイナーの方でも良い物を作るために UIデザインのギャラリーサイトと配色パターンを決める便利なサイトをご紹介致します。 基本他のアプリを真似参考にするといい感じにできちゃうかもしれません。 Web系開発の方も配色パターン等は参考になると思います。 デザインをする前に デザインをする前に呼んでおいたほうがいい物 ITエンジニアに易しいUI/UXデザイン デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 ノンデザイナーのための配色理論 アプリデザイン CAPPTIVATE.co 動きのあるカッコいいUIばっかり載っています。 種類別で見ることもできるので便利ですね。 Mobile Design
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアも気にしたい色のアクセシビリティ / Color Accessibility that engineers should care
GitHub - ment-mx/Prism: Creates a beautiful artboard color palette with all your 'Document Colors' and their respective color label in a variety of formats.
新着記事 | PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
