前回は自己紹介をの制作を題材にして、参考資料を活用することにフォーカスしてお送りしました。今回はさらに細かいところにフォーカスしていきます。 カラースキームを固める 前回考えたプロセスの中で、自己紹介に関連するキーワードを書き出してみました。 それらのキーワードをもとに、今度はページのカラースキームを考えてみましょう。 基本のベースカラーが決まれば、そのカラーを基準にパレットのバリエーションも増やすことができます。 配色については、色彩理論[1]を身につけておくとカラースキームを考えるときに役立ちます。 また、色彩に関するセンスは経験によってより洗練されていくものだと考えています。いろいろなパターンを作りながら、試行錯誤していくことが大切です。 Web 上だけを見ても自動的にカラースキームを生成してくれる、便利なカラースキームジェネレータなどが多くあります。ゼロからつくれなくても、こういっ
CSS3でアニメーションを実装するTransitionsをウェブページで効果的に使用するためのチュートリアルをWeb Designer Depotから紹介します。 CSS Transitions 101 TransitionsはSafariやChrome上で動作するCSS3のアニメーション機能で、JavaScriptやFlashを使用せずにウェブページに実装することができます。 ※Firefoxでも将来的にはサポートされる予定です。 チュートリアルでは3つのデモが掲載されています。 ※Safari, Chromeでご覧ください。
“青い”静脈、実は“灰色” 目の錯覚と確認 という研究報告を紹介した記事があります。研究報告の内容は「腕などで青く見えている静脈の色は実際は灰色なんだけど、周りの肌の色と比較すると青いので、相対的に青く見える」というものです。人間が色を認識する時には（測定機器でも同様ですが）、眺める領域の周囲を基準にした色の認知を行うことで、色の恒常性を得たり（照明光の補正を行ったり）します。だから、肌の上から見た静脈が周囲の肌より「青く」見えれば、静脈は青く見えるわけです。 …しかし、そもそも「赤い血」が流れてるはずの静脈がなぜ「青く」見えるのでしょう？青い静脈（専門用語では”blue pipe”）に流れているのは赤い血のはずで、皮膚の上から見たとき、皮膚の色に静脈の色が重なって見えるとしたら、「皮膚の上から見た静脈部分」は周りの皮膚よりも赤く見えそうです。そうだったとするならば、静脈は周りの皮膚より「
子アイテムをパタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するスタイルシートのテクニックを紹介します。 デモページ 実装 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
どうもですはやちです(ノ)◜ω◝(ヾ) 最近『龍が如く維新』にどっぷりはまっております。畑仕事と釣りと別宅のローン返済が楽しくて本編のストーリーが進みません。 龍が如くシリーズは毎回寄り道してしまいます( ˘ω˘) どうでもいいですねc⌒っ´ʘ‿ʘ｀)っ 今回はLIGのデザイナーチームで半数以上のメンバーが使用している『sublime text』がより見やすく、使いやすくなるデザインテーマをご紹介いたします。 テーマを変えてみよう まずテーマの変更方法をご紹介します。 テーマをインストールする Control + Shift + pで呼び出して Package Control: Install Packageを選びます( ˘ω˘)☝ そのあとにパッケージ一覧が表示されますのでthemeで絞り込み、お好みのものを選びましょう( ˘ω˘)☝ これでインストールは完了です。 テーマを反映させる。
「広める価値のあるアイディアを」ということで主にテクノロジー・エンターテイメント・デザインの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週間
.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. クリエイティブな暗いデザイン 終わりに はじめに ブラックベースのウェブデザインは人気が高く、エレガントでクリエイティブな魅力があります。しかし全てのウェブサイトに適したものという訳ではなく、適切であるときだけ使用されるべきデザインです。 ブラックベースのデザインを使用すると印象
デジカメはその仕組み上、紫色を撮るのが苦手らしい。 と聞いて、 「知ってるよ」 という人もいれば 「やっぱりそうなのか！」 という人もいれば 「そうなの？」 という人もいるだろう。 私は、なんとなく知っていたつもりだ。実際に紫が変な色に撮れてしまった経験も何度かある。 一方、ちゃんと紫色に写ることもある。どうも、同じ紫でもＯＫなやつとそうでないやつがあるらしい。しかしどの場合がＯＫでどの場合がＮＧなのかは、聞かれてもサッパリわからない。 そのあたりをもう少しはっきりさせておきたい。 （text by T・斎藤） ●どうして紫が苦手なのか？ 多くのデジカメは、光を光の三原色である赤と緑と青（RGB）に分解して捉える。 そしてその３つの色を混ぜ合わせることで、全ての色を表現している。例えば、赤と青が入り混じることで紫色が表現される。 一方、実際の光は、波長の違いによって色が変わる。 光は、波長
この記事は、 Vim Advent Calendar 2012 の83日目(!)の記事です。 昨日の記事は ujihisa さんの「unite.vimのfile_recで無視リストを追加する」。 — こんばんは。 目に優しい黒背景が大好きなcocoponです。 エディタの配色って大事ですよね。 見やすさは、コーディングの速度に直結します。 黒背景のvimを全画面表示にすれば、自然とテンションも上がってきますね。 一生ついていくと決めていた「jellybeans」黒背景のカラースキームといえば、迷うことなく「jellybeans」をオススメしてきました。 クールながらも落ち着いた、絶妙な配色。 はじめて出会ったときは、その完成度に圧倒されたまま「一生ついていく」と心に決めたスキームでありました。 しかし、気になる点もいくつかありました。 例えば、JavaScriptの正規表現。 黒背景に濃い
このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。 今回は「#ff7400」を指定してみます。 すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。 メニューの配色を決める ということで、以下のような配色でメニューを作ってみます。 メニュー背景のグラデーションと境界線の1pxラインに使う色を選ん
同じイラストを使っていても配色を変えるだけでがらっと印象が変わってしまうものであり、色を塗るまではイメージ通りだったのに色を塗った瞬間に予想外のイラストが仕上がってしまうことも少なくありません。そこで、イメージ通りのイラストを仕上げるための配色の仕方や技術的なポイントを300枚以上の作例を使って解説したのがマール社の「同人誌やイラストを短時間で美しく彩る配色アイデア100」です。これは同人誌において一番の勝負所とも言うべき「表紙」デザインに非常に役立つさまざまなテクニックを具体的に解説した同人誌やイラストの美しいデザイン100の続刊なのですが、同人誌の表紙だけでなくCDジャケットや盤面、名刺などの作例もあり、イラスト関係であれば幅広く使える技術が多く書かれています。 マール社：同人誌やイラストを短時間で美しく彩る配色アイデア100 http://www.maar.com/books/03/
こんにちはこんにちは！！ 今日はちょっとCSSのメモです！ 半透明について！ opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
色彩は、Webサイトが どのように際立つか ユーザの目にとまるか ユーザーにどのような感情を芽生えさせるか ユーザがどんな動作をするか に大きな影響を与える。 ユーザの属性に合わせて適切な色彩を使うことは、売上を増大させたり、滞在時間を長くしたり、直帰率を下げることにつながる。 また、Webサイトだけでなく、 ファッション インテリア エクステリア(住まいの外観) 広告、商品 などにも使えるので、汎用性のある知識だと思う。 色彩心理 色 プラスの心理的影響 マイナスの心理的影響 赤 情熱的 活動的 晴れやか 暖かい 元気の良い 購買欲求 安っぽい 派手 危険 暴力 青 さわやか 清らか 清涼感 すっきり クール 閑静 憂鬱 寂しい 冷淡 未熟 無機質 黄 若々しい 陽気 明るい 楽しい うるさい 目立つ 幼稚 警戒 緑 ナチュラル 新鮮 穏やか すがすがしい 毒 田舎 疲れ 未熟 紫 高貴
システム会社に「色はとりあえず適当にお願いします」と言ってあがってきたものを見ると「えーっ」という配色になってあがってくることがよくある。「適当に」と指定していない自分が悪いのだが色をすべて指定しないと使ってはいけない色の組み合わせを使ってきてしまうのだ。 という私も初めて自分でチラシのデザインを作った時は「韓国風の色遣いだね」とつっこまれたが、緑や赤の原色を多様してしまった。（韓国の色づかいが悪いと言っているのではありません）そこでデザイナーさんに進めてもらったのは配色辞典。そこにあげられている色を使えばたちまちセンスの良い色遣いができるようになるのだこれホントに。 たとえば参考サイトは http://www.colourlovers.com/ これを見ると３色とか５色の色があげられているのでその色の組み合わせを使ってあげるとセンスがよくなる。 ああ、なんと便利な。ちょっと知ってるだけで
今年の7月に本格的にTwitterの活用を初めて以来、その可能性に注目し、いろいろな人に口頭や書籍、記事などを通してTwitterを勧めてきましたが、初心者のうちはなかなか、どうやって楽しめばいいのか、わかりにくいと思います。 実際、「Twitter始めたんですけれども、まだやり方がよくわからなくて」という相談を受けたりします。 なので、これまでもバラバラといろいろなところでコツを説明してきましたが、いま、ちょうどTwitter本社の取材に向けてサンフランシスコに向かっていますので、改めてその機内の中で、Twitterの楽しみ方･使い方を10のステップに分けて、整理していきたいと思います。 これを実行すれば、まずはTwitterの操作が一通りわかって、まずは情報の受け手として、そして、一部の情報については発信者として、Twitterを楽しめる「初級者」になることを想定しています。 なお、こ
"GREP_OPTIONS"という環境変数に、常に付けておきたいオプションをあらかじめ指定しておくと、grepコマンドやxgrep(egrepとかfgrepとか...)を実行したときに、自動でオプションをつけて実行してくれます。 例えば、、、 $ export GREP_OPTIONS="--color=auto"とか。常に含めておくなら、あとは"-I"オプションとかですかね。これくらいなら"alias"でも良いわけですがｗ grepとか毎日使ってもおかしくないコマンドなので、こういう小さい効率化はどんどんやっていきたいところですね！ オプション無しで実行した場合 GREP_OPTIONSを設定してから実行した場合 おまけ: --colorの色を変えたい場合 環境変数 "GREP_COLOR"に色コードを指定してやると良いです。 例えば、ハイライトを黄色にしたい場合とかは、以下のような感じ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
