第5回 カラースキームを決めるために必要なツールと注意点 | gihyo.jp
前回は自己紹介をの制作を題材にして、参考資料を活用することにフォーカスしてお送りしました。今回はさらに細かいところにフォーカスしていきます。 カラースキームを固める 前回考えたプロセスの中で、自己紹介に関連するキーワードを書き出してみました。 それらのキーワードをもとに、今度はページのカラースキームを考えてみましょう。 基本のベースカラーが決まれば、そのカラーを基準にパレットのバリエーションも増やすことができます。 配色については、色彩理論[1]を身につけておくとカラースキームを考えるときに役立ちます。 また、色彩に関するセンスは経験によってより洗練されていくものだと考えています。いろいろなパターンを作りながら、試行錯誤していくことが大切です。 Web 上だけを見ても自動的にカラースキームを生成してくれる、便利なカラースキームジェネレータなどが多くあります。ゼロからつくれなくても、こういっ
[CSS]ウェブページで手軽にアニメーションが楽しめる -CSS Transitions
CSS3でアニメーションを実装するTransitionsをウェブページで効果的に使用するためのチュートリアルをWeb Designer Depotから紹介します。 CSS Transitions 101 TransitionsはSafariやChrome上で動作するCSS3のアニメーション機能で、JavaScriptやFlashを使用せずにウェブページに実装することができます。 ※Firefoxでも将来的にはサポートされる予定です。 チュートリアルでは3つのデモが掲載されています。 ※Safari, Chromeでご覧ください。
「赤い血」が流れてるはずの静脈が「青く」見える理由（納得したい人向け） | 雑学界の権威・平林純の考える科学
“青い”静脈、実は“灰色” 目の錯覚と確認 という研究報告を紹介した記事があります。研究報告の内容は「腕などで青く見えている静脈の色は実際は灰色なんだけど、周りの肌の色と比較すると青いので、相対的に青く見える」というものです。人間が色を認識する時には（測定機器でも同様ですが）、眺める領域の周囲を基準にした色の認知を行うことで、色の恒常性を得たり（照明光の補正を行ったり）します。だから、肌の上から見た静脈が周囲の肌より「青く」見えれば、静脈は青く見えるわけです。 …しかし、そもそも「赤い血」が流れてるはずの静脈がなぜ「青く」見えるのでしょう？青い静脈（専門用語では”blue pipe”）に流れているのは赤い血のはずで、皮膚の上から見たとき、皮膚の色に静脈の色が重なって見えるとしたら、「皮膚の上から見た静脈部分」は周りの皮膚よりも赤く見えそうです。そうだったとするならば、静脈は周りの皮膚より「
[CSS]パタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するテクニック
子アイテムをパタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するスタイルシートのテクニックを紹介します。 デモページ 実装 HTML ナビゲーションの親のカテゴリはdivでまとめ、各子供はリストで実装します。 <div class="navbar"> <a class="menu" href="#">MENU</a> <div class="link large" href="#"> <span class="active"><i class="icon-twitter"></i>Twitter</span> <ul class="hover-bot"> <a href="">Reply</a> <a href="">Favorite</a> </ul> <ul class="hover-top"> <a href="">Follow</a> <a href="">Ret
すごい講演で有名な「TED」から学ぶ統計的に最高＆最低プレゼンの条件 - GIGAZINE
「広める価値のあるアイディアを」ということで主にテクノロジー・エンターテイメント・デザインの3ジャンルを扱う「TED」は公式サイト上で数々のスピーチ＆プレゼンムービーを日本語字幕付きで公開しています。非常に興味深いものからそうでないものまで、講演する人の実力は多岐にわたっているのですが、数多のプレゼンを統計学のアプローチから解析し、TEDにおける史上最高のプレゼンと史上最低のプレゼンの条件をプレゼンするというすさまじい講演がかなり秀逸です。 Lies, damned lies and statistics (about TEDTalks) | Video on TED.com http://www.ted.com/talks/lang/jpn/lies_damned_lies_and_statistics_about_tedtalks.html もし今TEDのホームページに行くと延べ1週間
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
ブラックベースの暗いウェブデザインで気をつけたいポイント
ブラックベースの暗いデザインのウェブサイトを制作する際に、取り入れたいポイントや注意すべきポイントをWeb Designer Depotから紹介します。 The Do's and Don'ts of Dark Web Design 下記は、その意訳です。 はじめに 1. ホワイトスペースの活用 2. テキストのホワイトスペース 3. テキストのコントラスト 4. フォントの取り扱い 5. カラースキームは最小に 6. スタイルスイッチャー 7. 暗いデザインがはまるサイトとは 8. エレガントな暗いデザイン 9. クリエイティブな暗いデザイン 終わりに はじめに ブラックベースのウェブデザインは人気が高く、エレガントでクリエイティブな魅力があります。しかし全てのウェブサイトに適したものという訳ではなく、適切であるときだけ使用されるべきデザインです。 ブラックベースのデザインを使用すると印象
@nifty：デイリーポータルZ：デジカメは紫が苦手？
デジカメはその仕組み上、紫色を撮るのが苦手らしい。 と聞いて、 「知ってるよ」 という人もいれば 「やっぱりそうなのか！」 という人もいれば 「そうなの？」 という人もいるだろう。 私は、なんとなく知っていたつもりだ。実際に紫が変な色に撮れてしまった経験も何度かある。 一方、ちゃんと紫色に写ることもある。どうも、同じ紫でもＯＫなやつとそうでないやつがあるらしい。しかしどの場合がＯＫでどの場合がＮＧなのかは、聞かれてもサッパリわからない。 そのあたりをもう少しはっきりさせておきたい。 （text by T・斎藤） ●どうして紫が苦手なのか？ 多くのデジカメは、光を光の三原色である赤と緑と青（RGB）に分解して捉える。 そしてその３つの色を混ぜ合わせることで、全ての色を表現している。例えば、赤と青が入り混じることで紫色が表現される。 一方、実際の光は、波長の違いによって色が変わる。 光は、波長
[D] LG製ディスプレイを引いてしまったMacBookユーザーの心得
最近ますます一眼レフのRAW現像にハマってるんですが、いつも気になっていたのがディスプレイ環境による色味の違い。できることなら「全員Retina iPadで見てね」と言いたいけど、結局手間隙かけて現像しても、見てる人のディスプレイ環境が悪かったら綺麗に見てもらえないので悩ましいなとか考えてたのですが、そもそも自分の現像してる環境(\MacBookAir11\)のディスプレイがまともな色を再現してるのかな?とふと気になったのでググってみたら衝撃を受けました。 というのも最近のMacBookのディスプレイは主に\Samsung\と\LG\が提供しているらしいのですが、LG製のディスプレイを引いてしまうと色味が悪いみたいです。(逆にSamsungは補正が不要らしい。) 実際に購入時にディスプレイメーカーを指定できないので、当たり外れで性能が変わるのが悲しいところですが、不幸中の幸い、OSXにはデ
【vim】黒背景好きの僕の心を揺さぶるカラースキーム「hybrid」 | ここぽんのーと
この記事は、 Vim Advent Calendar 2012 の83日目(!)の記事です。 昨日の記事は ujihisa さんの「unite.vimのfile_recで無視リストを追加する」。 — こんばんは。 目に優しい黒背景が大好きなcocoponです。 エディタの配色って大事ですよね。 見やすさは、コーディングの速度に直結します。 黒背景のvimを全画面表示にすれば、自然とテンションも上がってきますね。 一生ついていくと決めていた「jellybeans」黒背景のカラースキームといえば、迷うことなく「jellybeans」をオススメしてきました。 クールながらも落ち着いた、絶妙な配色。 はじめて出会ったときは、その完成度に圧倒されたまま「一生ついていく」と心に決めたスキームでありました。 しかし、気になる点もいくつかありました。 例えば、JavaScriptの正規表現。 黒背景に濃い
カラーツール「0to255」で色を決めてメニューを作ってみる
このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。 今回は「#ff7400」を指定してみます。 すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。 メニューの配色を決める ということで、以下のような配色でメニューを作ってみます。 メニュー背景のグラデーションと境界線の1pxラインに使う色を選ん
イラストを狙った通りの印象に仕上げるポイントを300枚以上の作例を使い解説した「同人誌やイラストを短時間で美しく彩る配色アイデア100」
同じイラストを使っていても配色を変えるだけでがらっと印象が変わってしまうものであり、色を塗るまではイメージ通りだったのに色を塗った瞬間に予想外のイラストが仕上がってしまうことも少なくありません。そこで、イメージ通りのイラストを仕上げるための配色の仕方や技術的なポイントを300枚以上の作例を使って解説したのがマール社の「同人誌やイラストを短時間で美しく彩る配色アイデア100」です。これは同人誌において一番の勝負所とも言うべき「表紙」デザインに非常に役立つさまざまなテクニックを具体的に解説した同人誌やイラストの美しいデザイン100の続刊なのですが、同人誌の表紙だけでなくCDジャケットや盤面、名刺などの作例もあり、イラスト関係であれば幅広く使える技術が多く書かれています。 マール社：同人誌やイラストを短時間で美しく彩る配色アイデア100 http://www.maar.com/books/03/
配色初心者でも効果的なカラーデザインが出来るようになる4つの工程 / Maka-Veli .com
タイトル間違えました。 「僕みたいなクソデザイナーが配色する時に騙し騙しデザインする手法」です。 配色には色々作法があります。そして言葉もあります。加法、減法、色の三属性、伝統、政治的意味合い、などなど。厳密に出したらキリがありませんし、プロじゃないので、細かい事は抜きにして、個人的に抑えておく簡単なポイントをまとめてみました。 雰囲気のキーワードを出す なんとなくのキーワードを出します。 カッコイイ！ うぉ！すっげ！って感じ クール とにかく渋く。鳥肌立つ感じで 可愛いっぽく。 やっぱ少し可愛くが良い ラブリー♡ もうワクワクーって感じで♥ シンプルに。 余計な物はいらん インパクトどーん とにかく覚えてもらいたい！ 爽やかーーー キレイに見せたい！ 楽しい！ ﾁｮｰﾊｯﾋﾟ ｽｰﾊﾟｰﾊｯﾋﾟ ﾉ…(ry など。 ここで決めたキーワードがベースになります。 常に頭に入れてお
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
複数のカラーでカラースキームを作成する際に調和のとれたいい感じにするアイデア
世界の名画でデジカメ画像を一発補正