ウェブサイトの印象を左右するのはテーマカラー：新刊ピックアップ
与えたい印象から決める方法もあります。「エレガントな印象を与えたいから，彩度を抑えたピンクにしよう」「楽しく活気のある印象にしたいから，オレンジなどの暖色を主役にしよう」といったものです（図2）。 この2つの方法は自身のことだけを考えたものですが，ライバルとなるウェブサイトのことも少し気にしましょう。ライバルと似たテーマカラーでは印象は弱く，記憶にも残りにくいからです。後発のサイトならば「真似た」と思われることすらあります。競合サイトがどんな色を使っているかを調べ，時には，あえて違う色にするという選択もあります。 テーマカラーを使う テーマカラーが決まったら，次に考えるのはその使い方です。 テーマカラーはサイトの主役となる色。だったら大きく使えばよいのか，といえば，そう単純ではありません。 高彩度の色であれば，大きく使わなくても強い印象を与えられます。それどころが大きすぎると，ぎら
テーマカラー1色をメインに用いたWebサイト50
2018年10月11日 Webデザイン, インスピレーション, 色彩 前回の記事「WebデザイナーにおすすめのEvernote活用術」で紹介したように、私はEvernoteに素敵なデザインをストックする際、使われているテーマカラー別にタグをつけて分類しています。気がつけば各色のデザインストックが増えてきたので、その中でも厳選した5サイト×10色の合計50サイトを紹介します。単色をデザインに使う時のポイントも一緒に読んでみてくださいね！ ↑私が10年以上利用している会計ソフト！ 追記：リンク切れサイトを削除したため、数が減ってます… テーマカラーをメインに取り入れる時のポイント 「配色に自信がなくても！Webデザインが好きになる配色ツールと使い方」でも紹介したとおり、きれいな配色でもベタ塗りしただけではデザインの魅力が半減してしまいます。特に今回のようにテーマカラーを使う面積が広ければ広いほ
デザインやファッションに取り入れたい、2011年 春のトレンドカラー
PANTONE Spring 2011(PDF) [ad#ad-2] 需要があるか分かりませんが、Photoshop用のスウォッチファイル（.aco）を作成してみました。
カラーだけではない、ウェブデザインにおける4つのコントラストの使い方
コントラストはカラーだけではありません。 ユーザーに伝えたい重要なエレメントを適切に目立たせる4つのコントラストを紹介します。 Fully Understanding Contrast in Design [ad#ad-2] 下記は各ポイントを意訳したものです。 コントラストとは 1. カラーのコントラスト 2. サイズのコントラスト 3. シェイプのコントラスト 4. ポジションのコントラスト おわりに 通常、コントラストがテーマに扱われる時は初心者向けのものが多いでしょう。例えば書籍では、『ブラックとホワイトがコントラストをもっており、レッドとオレンジはそうではありません』と書いてあります。初心者向けの本では、コントラストはカラーのことだけが触れられており、サイズやシェイプについては触れられていないでしょう。 アマチュアのデザイナーとプロのデザイナーを区別する最も容易な方法は、コントラ
良いウェブサイトを作るための色遣い / ウェブデザインライブラリー
投稿日：2010年07月06日 レベル：― ソフトウェア：― Step1 ： はじめに Step2 ： それぞれの色の働き Step3 ： Webサイトにおける色の役割 ウェブサイトのデザインには、入力からレイアウトや色に至るまで、数々のスキルの積み重ねを要します。色は、ユーザーによる第一印象を決める、特に重要な要素です。色遣いが正しければユーザーに好印象を与え、色遣いを間違えるとユーザーに悪印象を与えます。 良いウェブサイトを作るために、ウェブデザイナーは人に印象を与える色の働きについて知る必要があります。人は無意識のうちに色に反応したり、色に対して異なる感情や感覚と関連付けたりします。色は、単に人の感情や感覚を刺激してサイトの見え方に影響を与えるのではなく、ユーザーをサイトの特定のセクションへ誘導するために巧妙に使われます。 最近インターネットで使えると思われるそれぞれの色に
ユーザーが何色を求めているかをまとめた -Color of the Year 2010
感情をあらわしたキーワードとカラー、国ごとの色合い、月ごと・曜日ごと・時間ごとの色合いなど、2010年のカラーをまとめたインフォグラフィックを紹介します。 Color of the Year 2010: By The People [ad#ad-2] 「Color of the Year 2010」は、世界137ヵ国1,088人の人々を対象に2010年のカラーについて調査を行ったもので、カラーの流行について具体化したインフォグラフィックとなっています。
HTMLの色の操作が素晴らしく簡単になるjQueryプラグイン「xcolor」:phpspot開発日誌
jQuery color plugin xcolor - Website and Application Intelligence HTMLの色の操作が素晴らしく簡単になるjQueryプラグイン「xcolor」。 出来ることは豊富にあるのですが、以下に使えそうなものを列挙してみます。 ２つの色を混ぜ合わせて新しい色を作ることができる $.xcolor.combine('#800000', '#0000fa'); 特定の色を明るくすることができる $.xcolor.lighten('#ff0000'); 特定の色を暗くすることができる $.xcolor.darken('#ff0000'); 類似の色を生成することが出来る $.xcolor.analogous('#ff0000'); getRGBメソッドでRGBのオブジェクトに分解できる WEBセーフカラーに補正することが出来る 応用すること
simpleColorPicker jQuery plugin
A simple color picker jQuery plugin that appears as the user focuses the input. Just attach the simpleColorPicker to an input text and when it gains focus the color palette appears aligned to its bottom right corner. Check out the latest version at http://github.com/rachel-carvalho/simple-color-picker. Live samples Default options Choose a color: $(document).ready(function() { $('input#color').sim
JavaScriptで使えるカラーピッカー作成ライブラリまとめ:phpspot開発日誌
Flashプレイヤーの検出とHTML埋め込みを簡単に行えるJavaScriptライブラリ... 次の記事 ≫：2006年プログラミング言語人気ランキングTOP20 JavaScriptで使えるカラーピッカー作成ライブラリまとめ。 フォームでHTMLの色情報を入力してもらう際に非常に便利なJavaScriptで出来たカラーピッカーライブラリ。 種類も多数あったので試用＆まとめてみました。 Yahoo! UI Library ダウンロード後、examples\slider\ 以下に存在 インクルードすべきファイルが多く、設置がやや面倒。 ポイントした位置にスライドアニメーションしてくれてちょっとカッコいい。 dhtmlgoodies Color picker Color picker Adv 設置は比較的簡単。表示される色が不規則に並んでいるのが少々気になる点。 script.aculo.us
配色に自信がなくても！Webデザインが好きになる配色ツールと使い方
2016年12月13日 Webデザイン, 便利ツール, 色彩 以前書いた記事「配色パターンからWebデザインを考える」を見た方から「いい配色だなーと思ってもうまく使いこなせない」という意見をいくつか頂きました。確かにすてきな配色をどうデザインに取り込んでいいのか、というのは難しいところです。今回は簡単に配色を提案してくれるオンラインツール「ウェブ配色ツール Ver2.0」を使って配色をWebデザインに取り込む方法を紹介します。 ↑私が10年以上利用している会計ソフト！ ウェブ配色ツールを使った基本的な配色方法 まずこの「ウェブ配色ツール Ver2.0」について。テーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。Webサイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです！ オレンジを元に色相差0°で配色した例。色相差を0°にすると同系色（＝同
ウェブ配色ツール Ver2.0
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
国産限定・カラー選定、配色支援などに役立ちそうなカラーツールいろいろ - かちびと.net
カラースキーム、配色関連のツールの 大半は海外サイトのものです。僕も海外 のサイトを利用していますが、やはり 日本語の方が良いよねという方も少なく 無いかと、ふと思いましたので国産の サイトでカラー選定、配色支援に役立ち そうなツールを探してみましたのでシェア。 海外のは海外ので似たような機能のカラースキームツールばかりにもなっているので国産に目を向けてみるのも良いかもしれませんよ。ツールの前に配色を学びたいという方はwebデザイナーの色彩スキルを磨くエントリーまとめというエントリをご参照ください。 NIPPON COLORS – 日本の伝統色 まだ出来たばかりのツール。和の色専門ツールですよ。デザインも使用感もかなり素敵です。環境によってはうまく表示されないかもです。 NIPPON COLORS – 日本の伝統色 色サンプル(色見本と配色) もっと評価されて欲しいツール。明暗や、系統でカ
webデザイナーの色彩スキルを磨くエントリーまとめ
多くのwebデザイナーが、行き詰ったときに吐かれる台詞。 それが『センス』です。 センスがない、というのはよく聴く言葉です。 しかし、色彩感覚とは『センスの問題』ではなく、たんに勉強不足というケースも少なくありません。 今回はそんな色をテーマにしたエントリーをまとめて見る事にします。 とにかく最初に学ぶ基礎 この色彩系の分野においては圧倒的にwebクリエイターボックスブログが強いので、その中でこれは使えるぞというエントリを何個か抽出しています。そのほかにも、ちょっと古い記事でもとても参考になるものからもご紹介いたします。 正直私のブックマークが配色、色彩、色で60近くのエントリーがありました。 色で学ぶ部分と言うのは「広く浅く」では無く、どちらかと言うと「狭く深く」のほうが強い気がします。なので、そのブックマークの中から、かなりというかもう限界まで厳選した物をご紹介いたします。 配色パター
カラフルでもまとまりのある配色、WebデザインにするためのTips
過去記事：同色系でまとまりのある配色、WebデザインにするためのTipsに続いて、色々なカラーを使ってもまとまりのある配色にするためのTipsをご紹介します。 実際にWebサイトをデザインする時は、たくさんの色相の違う色を使います。 でも配色してみると、何だかまとまりがなくてしっくりこないなーということも… 配色を直感だけでできればWebデザイナーとしては一人前なんでしょうけど、まだまだそんなセンスが身に付いてない私はこんな風にして配色を選定しています。 無作為に選んだ配色とルールに従って選んだ配色 あなたはどうやってWebサイトに使う色、配色を決めてますか？ 色に対してのセンスのいい人は直感でぱぱっと決めてもまとまりのあるカラースキームをつくる事ができます。 でも残念ながら私にはそんなセンスがないので一定のルールに従ってまとまりのある配色を作成しています。 それでは試しに順を追っ
Web上で最も強い力を持つ色は？
下の画像は有名なサーチエンジンからポルノサイトまで、あらゆるコンピューター関連の会社のロゴを色別にまとめたものです。 こうして見ると、同じカテゴリーのトップブランドは似た色のロゴを使う傾向にあるような気がします。紫のロゴが少ないのは何かわけがあってのことなのかな？ ランキングの上位2社はロゴにレインボーを採用していますね。 さて、何か傾向を発見できましたか？ [Colourlovers] Jesus Diaz（原文／あんね）
カラースキームを決めるのに役立つ、配色ジェネレータ17個まとめ | ライフハッカー・ジャパン
相性の良い色を選んでくれたり、配色の手助けをしてくれるジェネレータはたくさんあります。25 Free Color Tools, Apps and Palette Generatorsで、様々な配色ジェネレータが紹介されていましたので、ここから17個を厳選して以下に紹介します。 1. Color Scheme Designer 3 「Color Scheme Designer 3」は、バランスのとれた色味を生成してくれるジェネレータ。配色に困ったらまずここでヒントを得ましょう。 2. Toucan 「Toucan」では、似た色や逆の色など配色パターンが選べます。画像から色を抽出することもできますよ。 3. kuler 「kuler」は、Adobe製の配色パターン生成ツール。直感で色を決めてみましょう。Adobe製品との連携もあるようです。 4. ColoRotate 「ColoRotate」
最適なテキストリンクの色は？ | ウェブ力学
青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoogleと同一でした。また、ユーザビリティといえばビービットさん、ということで調べてみましたが、やや暗めの青を使用していました。ビービットさんのことなので何か意味があるのかもしれません。 クックパッド クックパッドは、日本最大級のレシピ検索のサイトです。ユーザービリティには細心の注意を払っていて、ユーザー一人当たりの平均PVが高いことでも知られています。 そんなクックパッドですが、サイトをのぞいてみ
Color Inspiration: Wonderful Uses of Beige | Envato Tuts+
Beige and tan are most often used in websites simply as background colors. They're commonly seen used in paper textures, grunge sites, or, occasionally, as a solid-colored background. The advantage is that, because they're neutral, they can easily be combined with any number of other colors without clashing. The websites shown below offer a pretty complete picture of how beige and tan are used in
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Random Color Swatch Generator | SwatchSpot
IDEA * IDEA
