任意の2色を指定するとマテリアルデザインのパレットを作ってくれる『Material Palette』 | 100SHIKIこれ、すごく便利だ・・・。 Material Paletteを使えば、好きな2色からマテリアルデザインのパレットを作ってくれる。 最新のAndroidでサポートされているこのデザインだが、ゼロから配色を作るのは大変なのでこうしたツールをうまく使うといいだろう。 なお作ったパレットはCSSやSass、SVGなどの形式でダウンロードすることが可能だ。 アプリ製作者なら知っておきたいツールですな。
[CSS]さまざまなバリエーションを簡単に利用できる美しいデザインのボタンを実装するチュートリアル
画像は使用せずに、繊細なパターンとグラデーションで美しいボタンをスタイルし、サイズやカラーなどさまざまなバリエーションを簡単に利用できるように実装するスタイルシートのチュートリアルを紹介します。 ベースとなるボタン HTML マークアップは非常にシンプルです。 <a href="" class="button">Button</a> または、button要素でも構いません。 <button class="button">Button</button> CSS CSS3を使って、ちょっとリッチにスタイルしてみましょう。 .button{ display: inline-block; *display: inline; zoom: 1; padding: 6px 20px; margin: 0; cursor: pointer; border: 1px solid #bbb; overflow
iOS 7の優しいパステルカラーをまとめたPhotoshop用のスウォッチ素材 -iOS 7 Swatches
フラットやソリッドなデザインだけでなく、優しくて明るい雰囲気のデザインにも使えるパステルカラーをまとめたPhotoshop用のスウォッチ素材を紹介します。 iOS 7 Swatches 元となっているのはLouie Mantiaのアートワーク「iOS 7 Color Wheel」で、これをベースにスウォッチを作成したそうです。
人間の目に優しい色合いを設計するためのカラースペース -HUSL
iOS 7にも採用されているような落ち着いたパステルカラー、同じ明るさで異なる色合いを組み合わせたカラースキームなど、人間の目に優しくより見やすくなるように色合いを設計するためのカラースペース「HUSL」を紹介します。 HUSL -Human friendly HSL HUSL -GitHub HUSLは「Human friendly HSL」の略で、RGBのカラースペースに幾何学的な変換して設計されています。カラーの定義はHSLのように色相（hue）と輝度（lightness）を使い、彩度に「saturation」ではなく「chroma 」を使用します。 彩度のsaturationとchromaの違いは、こんな式になるようです。 Saturation（彩度：S）＝ Chroma(C) ／ 明度(V) 参考：イメージクリエーションの構築と基礎知識の習得 どんな感じかは、デモですぐに試すこと
なぜ、富士通は「色覚障がい者のための診断ソフトウェア無償提供」を終了したのか
富士通は2013年8月20日、視覚障がい者や色覚障がい者のアクセシビリティを高めるための診断ソフトウェアツール群「富士通アクセシビリティ・アシスタンス」の無償提供を終了した（参照記事）。このニュースはSNSでの反響も大きく、ユーザーから「なぜこのような素晴らしいサービスが終了してしまうのか」との声が多く聞かれた。 同様のツールは他にもあったが、富士通アクセシビリティ・アシスタンスが愛用されるのにはわけがあった。富士通アクセシビリティ・アシスタンスは、3つのツール群「WebInspector（ウェブインスペクター）」「ColorSelector（カラーセレクター）」「ColorDoctor（カラードクター）」から構成されており、それぞれ以下の特徴が挙げられる。 WebInspector ローカルフォルダを指定した場合、サブフォルダのHTMLまで一括でチェックでき、結果をCSVで保存できる C
Top 13 Web-Based Color Tools for Web Designers - 1stWebDesigner
Picking the perfect color scheme shouldn’t be a miserable task. All you need are the right tools for the job and an eye for design. I can’t help develop your eye for picking colors, but I can share a bunch of handy color tools that’ll likely improve your eye as you use them. These tools are all 100% free, so they’re easy to bookmark and reuse time & time again. They can also work for web, mobile,
簡単、きれい！RGBaカラーを使って横メニューを作ってみる
RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白（rgba(255,255,255,0.4)など）と黒（rgba(0,0,0,0.1)など）だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。 早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。 <ul id="menu"> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href
私がWebサイトの配色を決める時の流れ
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
配色センス０でも大丈夫！？服、インテリア、デザイン、様々な“色使い”を改善するかもしれない『60-30-10 Rule』！ | バンクーバーのうぇぶ屋