@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

第一回 プログラマ向けデザイン勉強会 #design4p に行ってきました

webdesign event

面白かったです。以下、メモったことなどを。

Twitter Bootstrap のカスタマイズ例

ちょっと遅れて行ったので、オープニングが聞けませんでした。そして、途中でメモってたものを消失させてしまいました。残念。
資料→RailsエンジニアのためのTwitter Bootstrapカスタマイズ例 // Speaker Deck
スライドではありませんが、Githubはこちら→machida/CustomizedTwitterBootstrap · GitHub

  • 色の話
  • 色の決め方
    • パクレばいいじゃない。
    • 気に入った画像や、色を選択して、カラーパターンをそのままパクる。
      • これだけで結構ステキにBootstrapをカスタマイズ出来る。
    • アニメの色使いをパクってみたりも出来る、けっこうそれなりになる。いそのー野球しようぜ！
  • あとは、メモったのがなくなったので、記憶の断片。

CSSも危ういのに、SassとかLESSとか結構心配になる。でも覚えたい、知りたい。最近はCSSで書くのに限界を感じるしな。うん。
色のパクリ方とか参考になった。

少ない手間と知識で“それなり”に見せる ズルいデザインテクニック

資料→zurui-design // Speaker Deck

  • 誰向け？
    • デザイン初心者の技術者向け。
    • 手早くやってもらうためのものですね。
    • Sass+Compass圧倒的にDRY。
    • 単純化するのが楽である。
    • プログラマは、SassとかCompassとかつくっていったほうがいいですよ。
  • 1. ズルい線
    • 上に透明度を高めの黒い線
    • 下に透明度低めの白い線
      • ポイント。黒か白のみで書いて、背景色に合わせて透明度を調整する。
      • 見出しのしたに引いたりとか、区切りにつかったり。
      • 太さは１px。ぼかさない。
    • ボックスに作る。
      • borderとshadowをつかってやっている。
      • 光を当てている方向を考えおく。光源の向きを考えおこう。
      • 光源の逆がハイライト、光源側が暗い色。
      • SassのMix-inを作っておくと便利です。
  • 2. ズルいTextShadow
    • 背景色に合わせて刻印されているように見せるためのテクニックです。
    • 濃い背景色＋白抜きの文字の場合、光源側に影を付けておくようにするよ良い。
    • 白（っぽい）背景色＋濃い文字の場合、光源と逆側に白の影をつけておくのが良い。
    • 透明度で調整。
    • 太さは１pxでぼかさない。
    • 濃すぎるとダメ。
    • これもSassのMix-inにしておくと良いです。
  • ３．ズルい背景
    • ズルい背景パターンがあったりする。
    • ノイズ、木目、紙、布、細かいドット、などなどをひいてあげるだけでいけてしまう。
    • 白に近いものほど使いやすい。グレーっぽいものも使いやすい。
    • パターンが細かいものがいい。コンテンツを食わない。
    • ナチュラル素材が最近は流行ってると思う。個々何年かは流行ってる。
    • 反対に、大柄なパターン。彩度が強いもの、鮮やかなものは素人っぽくなってしまう。
    • ズルイグレー
      • 限りなく白に近いグレー。
      • カラーコードで言うとEEEより薄い。F8F8F8とか。
      • ほぼ白として使える。
      • FFFと並べて使うと結構いい感じになります。
  • 4. ズルいグラデーション
    • 微妙な明度差のグラデーションのこと。
    • ベタ塗りでもいいところでも、微妙な差をつけてあげることでズルくなる。
    • 背景色とか、アイコンとかを少ない差でやると、本物っぽくなる。
    • カラーコードの一桁目を2ずらすといい感じ。
    • colorzilla.comで、グラデーションCSSを簡単に作れるよ。
    • これもMix-inに出来ますよ。
  • 5. ズルい角丸
    • 大きすぎないのがオススメ。6px以内が良いのではないか。
    • オブジェクトが小さくなればなるほど、小さくする。
    • サブミットボタンは4px。アイコンとかは2pxとか。
    • R半径が大きいのは難しいので、上級テクニックです。
  • 6. ズルいボックスシャドウ
    • 濃すぎるのはだめ。
    • ボックスの枠線かわりに使う。
      • すごく薄い明度で黒の影を外側に均等に作る。ボーダーではない。
    • セクションを囲むのに最適です。
    • リボンとかボタンでは、内側にぼかしておくと良い。
    • 凹んでいるボックス。
      • フォームとかに使うと良いです。光源側にハイライト、内側にシャドウ。
    • 凸のボックス。凹の逆。
  • 7. ズルいボタン
    • 今までの組み合わせでやろう！
      • ズルイテキストシャドウ
      • グラデーション
      • 角丸
      • ボックスシャドウ
2012.11.07追記

ノンデザイナーのための配色理論

資料→ノンデザイナーのための配色理論

  • 色を選ぶときのやりかたってどうやってますか？
    • カラーピッカーとかじゃないですかね？
    • なんとなくじゃないですかね？
    • 実はポイポチ選んでいるのも、失敗に片足突っ込んでいるのも同然です。
  • 色を数値で表すのは2種類ある。
    • 混色系：混ぜあわせて考える。RGBやCMY、XYZ。
      • 混色系は数学的にやりやすい。機会が使うのにいい。人間的じゃない。
    • 顕色系：人間の知覚に近い形で色を配置した理論。
      • 色相、彩度、明度で表します。
      • マンセルやPCCS表色系など。
  • ツールは混色系ですね。機会向きです。
    • 顕色系で選べればいいよね。
    • 色相、彩度、明度で表せます。
  • 色相環：360度で色を表せます。
    • 色味はこの1周以外はないです。人間に感じられるのは。
    • 色相→0から360までで選べます。
  • 彩度、鮮やかさ。
    • 数値が低いほど色がなくなって、白黒グレーに近づきます。
  • 明度、明るさの値。
    • 数値が低いほど黒くなるイメージです。
  • 色の組み合わせ
    • 一発では決まらない。軸をブラせずに探してく。
    • RGB色空間。
      • PCを使って色を選んでいく。
      • 不可避なトラップです。
  • 色相、彩度、明度で選んでも実は中身はRGBです。
    • HSB空間は、RGB空間を非線形変換したものです。
    • ただ単に、RGBを選び易くしただけのものです。
  • 単色は選び易いけど、調和のとれたものを複数選べないです。
    • RGBで選ぶと高彩度になりやすい。
    • 彩度の低い空間を選びたい。
    • 彩度を１００％にするとパキパキになる。
  • 顕色系の色空間を使いましょう。
    • マンセルの色空間を使ってみましょう。
    • マンセルは顔料をベースとしているので、RGBのような加法混色ではなくて、減法混色です。
      • 反射の原理？（・・・反射するときは、いくつかの色を吸収するので減法と言うことなのかな）
    • 必然的に彩度が程良く低くなってくる。
    • なるべく、10進や16進で考えない。
    • 一定の彩度で、色相などを変えられます。
  • どうやって選ぶのか
    • 先人の知恵を使いましょう。
    • 色々あります。
      • 今回は、ムーン＆スペンサー。
    • 色相だけで考えた場合、基準色を選びます。
      • 例えば、12時の赤。白いところは調和して、それ以外は調和します。（資料参照）
      • 25度から43度は類似色として調和します。
      • 100度から260度までは対比として調和します。
      • マンセルの色空間ではあっているであろう色相の選び方です。
    • 色相と明度も選んだのを中心に、同心円状に、割合によって合う合わないがある。
    • 色の面積によっても違うのだけれども。
      • でも、今回は省略します。
  • 理論を考えながらやるのは、無理ゲーですね。
    • ノンデザイナーですしね。
  • 変換するツールを作りました。
    • しかしながら、難しいことなので、理論に完全に則っているわけではありません。
    • だいたいあってる程度にしてくだしあ。
    • [ HUE / 360 ] The Color Scheme Application
      • だいぶ選び易くなったよね。
  • 同一の調和：内側に選んでいく。濃さが変わるものが簡単に選べる。
    • 選び易いので、風味は揃えられるが、単調になる
  • 類似の調和：なるべく同じ円環状で選ぶと良い。
    • するとトーンが揃えられる。（多少違うけどね。特に黄色）
  • 対比の調和：力強い。
    • 基準色の補色に当たるものの類似色を選ぶと良い。
  • 余談ですが。
    • グラデーションは、線形につなぐので、真ん中のグレーの部分を通ると厳しいものになる。
  • コンテンツ、文字が増えると黒味が増えていく。
    • 面積比としてそうなるので、要素が追加されたりして、変わっていく。目の錯覚？
    • 実際にアプリを作る場合には、やっていくうちに変わっていきます。
      • コンテンツが増えれば、色のバランスが変わっていくからね。
    • なので、調整をしていきましょう。

おまけ

参加者が作っているサービスを発表してくれたデザイナーさんがあーでもないこーでもないと講評してくれるとのことでした。

色々とありましたが、割愛。

その他

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

ノンデザイナーズ・デザインブック [フルカラー新装増補版]