Upgrade to Pro — share decks privately, control downloads, hide ads and more …

zurui-design

 zurui-design

少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass
(English Version)
https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version

第一回 プログラマ向けデザイン勉強会 #design4p
http://connpass.com/event/1185/
で発表させていただきました。
(#p4d プログラマ向けデザイン部 主催イベント http://prog4designer.github.io/

@mah_lab さんが ズルいデザインのRails gemを作って下さいました
http://blog.mah-lab.com/2012/11/07/zurui-design-for-rails/
(Repository) https://github.com/mahm/zurui-sass-rails
(sample) http://zurui-sample.herokuapp.com/

========================================
あわせて読みたい (#design4p 発表資料)
========================================
0.1ランク上のアイコンの作り方講座 @is8r_
https://speakerdeck.com/is8r/0-dot-1rankushang-falseaikonfalsezuo-rifang-jiang-zuo

ノンデザイナーのための配色理論 @saucerjp
http://www.slideshare.net/saucerjp/ss-14902681

初めての欧文書体 @9d
http://www.slideshare.net/shoheiitoh/ss-17245066

Bootstrapのカスタマイズ例 @machida
https://speakerdeck.com/machida/railsenziniafalsetamefalsetwitter-bootstrapkasutamaizuli

ノンデザイナーズデザインブックを読み解く @monoooki
https://speakerdeck.com/monoooki/read-a-non-designers-designbook

---------------------------

ken_c_lo / TAEKO AKATSUKA

October 27, 2012
Tweet

More Decks by ken_c_lo / TAEKO AKATSUKA

Other Decks in Design

Transcript

  1. 少ない手間と知識で
    “それなり”
    に見せる、
    ズルいデザインテクニック
    と り あ え ず 、 こ れ や っ と け ば 大 丈 夫 ( 多 分 )
    @ken_c_lo
    TAEKO AKATSUKA
    Z u r u i D e s i g n

    View full-size slide

  2. 1
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    フリーランスで Web デザイン&グラフィックデザインしてます
    赤塚 妙子(アカツカ タエコ)
    @ ken_c_lo
    (ケンシロウと…読むけど正直後悔しています)
    https://twitter.com/ken_c_lo/
    http://d.hatena.ne.jp/ken_c_lo/
    https://github.com/taea/
    http://crow.ly/
    ・P4D ハッカソンで Receibo 作った => http://receibo.heroku.com/
    ・ 最近は Forkwell.com のリニューアルデザインとか携わり中(途中)
    ・Haml + Sass(.sass) + compass 好き (に割と最近なった。

    ・いぬがすき。いぬ関連の Web サービス作りたい
    自己紹介

    View full-size slide

  3. 2
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    デザイン初心者の技術者向け
    例えば…プログラマの人がハッカソンなどで、
    集中して短時間でサービス開発&ローンチしたい時に、
    少ない手間でそれらしく見せたい

    ・ベジェ曲線
    (難しい

    めんどい


    ・画像加工・合成 (とりあえずありもので・・・)
    ・デザインの基礎知識・理論
    (難しい話は後だ!

    …などのスキル、知識がなくても、とりあえずこれやっとくと簡単にデザインがちょっ
    と良く見える感じの小ズルい Tips を紹介します。
    趣旨

    View full-size slide

  4. 3
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    提供
    ・今日来てる方々はむしろ普通の CSS 書くより、抵抗少なそう。
    ・紹介するソース例も Compass で書けるところは、Compass で紹介します。
    趣旨
    圧倒的に楽!
    DRY!
    ズルい

    View full-size slide

  5. 4
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 1 ズルい線
    Zurui Design
    1
    ズルい線 (© @machida)

    View full-size slide

  6. 5
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    《ズルい線》 とは?
    Zurui Design 1 ズルい線
    黒と白の線を 2 本並べることで、背景に彫り込まれたように見える線。
    これがズルい線 (命名 @machida)
    ※下は box-shadow で書く(Compass で書いた例 )
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    上: 黒 / 透明度 0.2 /1px の線
    @include box-shadow(rgba(255, 255, 255, .3) 0 1px 0);
    下: 白 / 透明度 0.3 /1px の線
    よく見るアレ

    View full-size slide

  7. 6
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    ここがポイント
    Zurui Design 1 ズルい線
    ・色は、黒
    (rgba(0, 0, 0, x))、
    白 (rgba
    (255,255,255,x)) のみで、
    ・背景色にあわせて透明度を調節する
    ・太さは 1px
    ・ぼかしは 0
    ・濃過ぎないように。

    View full-size slide

  8. 7
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    随所で活躍する、ズルい線
    Zurui Design 1 ズルい線
    見出しの下に引いたり、list やセクションなどの区切りに使ったり…

    View full-size slide

  9. 8
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    各方向のズルい線
    Zurui Design 1 ズルい線



    下 border-bottom: 1px solid rgba(0, 0, 0, .2);
    @include box-shadow(rgba(255, 255, 255, .3)0 1px 0);
    border-top: 1px solid rgba(0, 0, 0, .2);
    @include box-shadow(rgba(255, 255, 255, .3) 0 1px 0 inset);
    border-left: 1px solid rgba(0, 0, 0, .2);
    @include box-shadow (rgba(255, 255, 255, .3) -1px 0 0);
    border-left: 1px solid rgba(0, 0, 0, .2);
    @include box-shadow(rgba(255, 255, 255, .3) -1px 0 0 inset);
    左下向き光源を
    想定した場合

    View full-size slide

  10. 9
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    背景色の濃さによって、ズルい線の透明度を調節。
    Zurui Design 1 ズルい線
    背景色 #333
    白: alpha 0.1
    @include box-shadow(rgba(255, 255, 255, .1) 0 1px 0);
    黒: alpha 1.0
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    背景色 #EEE
    白: alpha 1.0
    @include box-shadow(rgba(255, 255, 255, 1) 0 1px 0);
    黒: alpha 0.1
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    背景色 #B0430B
    白: alpha 0.2
    @include box-shadow(rgba(255, 255, 255, .1) 0 1px .2);
    黒: alpha 0.2
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    背景色 #FFC300
    白: alpha 0.3
    @include box-shadow(rgba(255, 255, 255, .3) 0 1px 0);
    黒: alpha 0.1
    border-bottom: 1px solid rgba(0, 0, 0, .1);

    View full-size slide

  11. 10
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    @mixin line-left($op1: .2, $op2: .3){
    border-left: 1px solid rgba(0, 0, 0, $op1);
    @include box-shadow (rgba(255, 255, 255, $op2) -1px 0 0);
    }
    @mixin line-right($op1: .2, $op: .3){
    border-left: 1px solid rgba(0, 0, 0, $op1);
    @include box-shadow(rgba(255, 255, 255, $op2) -1px 0 0 inset);
    }
    こういう mixin 作っておくと便利
    Zurui Design 1 ズルい線



    @mixin line-top($op1: .2, $op2: .3){
    border-top: 1px solid rgba(0, 0, 0, $op1);
    @include box-shadow(rgba(255, 255, 255, $op2) 0 1px 0 inset);
    下 @mixin line-bottom($op1: .2, $op2: .3){
    border-bottom: 1px solid rgba(0, 0, 0, $op1);
    @include box-shadow(rgba(255, 255, 255, $op2)0 1px 0);
    }
    透明度を引数に
    よく使う透明度を
    デフォルトに

    View full-size slide

  12. 11
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 2 ズルい text-shadow
    Zurui Design
    2
    ズルい text-shadow

    View full-size slide

  13. 12
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 2 ズルい text-shadow
    文字が刻印されているように見えるテキストシャドウ
    背景色 #333
    text-shadow: 1px -1px 0 rgba(0,0,0,1);
    右上(光源と逆)方向に
    黒 alpha 1.0 / 1px / ぼかし 0 / の影
    背景色 #B0430B
    text-shadow: 1px -1px 0 rgba(0,0,0,.5);
    右上(光源と逆)方向に
    黒 alpha 0.5 / 1px / ぼかし 0 / の影
    濃い背景色 + 白抜き文字 の場合

    View full-size slide

  14. 13
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 2 ズルい text-shadow
    文字が刻印されているように見えるテキストシャドウ
    背景色 #EEE 背景色 #FFC300
    text-shadow:
    -1px 1px 0 rgba(255, 255, 255, 1);
    text-shadow:
    -1px 1px 0 rgba(255, 255, 255, .4);
    左下
    (光源と同じ)方向に
    白 alpha 1.0 / 1px / ぼかし 0 / の影
    左下
    (光源と同じ)方向に
    白 alpha 4.0 / 1px / ぼかし 0 / の影
    薄い
    (白に近い)背景色 + 濃い色の文字 の場合

    View full-size slide

  15. 14
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    ここがポイント
    ・色は、黒、白のみで、
    ・背景色にあわせて透明度を調節する
    ・濃い背景 + 白抜き文字 の場合 黒い影 光源と逆方向↗
    ・薄い背景 + 濃い色文字 の場合 白い影 光源と同方向↙
    ・太さは 1px
    ・ぼかしは 0
    ・濃過ぎないように。辛うじて見えるかなく
    らいがちょうどいい。
    Zurui Design 2 ズルい text-shadow

    View full-size slide

  16. 15
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    こういう mixin 作っておくと便利
    Zurui Design 2 ズルい text-shadow
    @mixin ts-000($op : .4){
    text-shadow: 1px -1px rgba(0, 0, 0, $op);
    }
    @mixin ts-fff($op : .7){
    text-shadow: -1px 1px rgba(0, 0, 0, $op);
    }
    透明度を引数に
    よく使う透明度を
    デフォルトに

    View full-size slide

  17. 16
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 3 ズルい背景
    Zurui Design
    3
    ズルい背景

    View full-size slide

  18. 17
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 3 ズルい背景
    これらをうまく使うだけでパッと見 2 割増く
    らいのクオリティ

    ノイズ 木目 紙 布 細かいドット
    ズルい背景パターン達
    ズルい

    View full-size slide

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

    使いやすい背景パターンの特徴
    ・白に近い色がベースのもの
    (薄いグレー・アイボリー等)
    ・黒に近い色ベースのもの
    (グレー・濃紺等)
    ・パターンが細かいもの
    ・ナチュラル素材
    Zurui Design 3 ズルい背景

    View full-size slide

  20. 19
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    ×
    使いづらい背景パターンの特徴
    ×大柄のパターン
    ×彩度が強いもの
    (色が鮮やかなもの)
    ×地の色と模様の明度差が大きいもの
    (模様がよく見えるもの)
    強い柄、強い色のものは、中の要素とぶつかってしまうため、うまく使わないと素人っぽくなりやすい。
    Zurui Design 3 ズルい背景
    ズルくない

    View full-size slide

  21. 20
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    ズルい背景パターンを取り揃えた有名サイト
    http://subtlepatterns.com/
    これが gem になったら便利なのでは…
    (誰か…)
    Zurui Design 3 ズルい背景

    View full-size slide

  22. 21
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    そろそろ、お気づきですよね…
    このスライドも、
    ズルい。
    Zurui Design 3 ズルい背景
    テキストシャドウ
    木目調

    View full-size slide

  23. 22
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    もう一つついでに…
    ズルいグレーとは。
    Zurui Design 3 ズルい背景

    View full-size slide

  24. 23
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    ズルいグレーとは
    限りなく白に近いグレー (#EEE 以下 )
    #EEE #F8F8F8
    Zurui Design 3 ズルい背景
    ・殆ど白に見える明るいグレー → 白の代わりに使える。
    ・これらに、ズルい線やズルいテキストシャドウを乗せると…
    ・ほのかに立体感が出て、一気に高級感が出る。
    ・本当の白
    (#FFF)と並べて使うと微妙な色の違いがオシャレ
    #FFF

    View full-size slide

  25. 24
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 4 ズルいグラデーション
    Zurui Design
    4
    ズルいグラデーション

    View full-size slide

  26. 25
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    #434343
    #2d9fee
    #48b1f2
    #222222
    微妙な明度差のグラデーション
    ベタ塗りの一歩手前く
    らいの、微妙な色の差のグラデーションで
    本物っぽい質感が出る
    Zurui Design 4 ズルいグラデーション
    カラーコードで
    1 桁目の差が 2

    らいがいいみたい

    View full-size slide

  27. 26
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    色の差が大きなグラデーションは、
    実際使ってみると野暮いデザインになりがち・・・
    (びしっと決まるとカッコイイけど、大胆な上級テク。

    Zurui Design 4 ズルいグラデーション
    大胆なグラデーションの使いこなしは結構難しい。
    だめじゃないけど
    むずかしい

    View full-size slide

  28. 27
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    グラデーションの CSS を楽につくれるズルいサイト
    http://www.colorzilla.com/gradient-editor/
    Zurui Design 4 ズルいグラデーション

    View full-size slide

  29. 28
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Sass(SCSS) にも切り替え可能
    Zurui Design 4 ズルいグラデーション

    View full-size slide

  30. 29
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 4 ズルいグラデーション
    で、作ってもいいんだけど…
     さらに mixin 化できそう。

    View full-size slide

  31. 30
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    微妙な色の差グラデーション mixin
    @mixin gradient-top-lighten($color : #666, $lighten: 10%){
    background-color: $color;
    @include filter-gradient(lighten($color, $lighten), $color,
    vertical);
    @include background-image(linear-gradient(lighten($color,
    $lighten) 0%, $color 100%));
    使うときは引数で下のベースになる色だけ指定して 1 行で書ける
    @include gradient-top-lighten(#222);
    上の方が少し明るいグラデーション
    Zurui Design 4 ズルいグラデーション

    View full-size slide

  32. 31
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    微妙な色の差グラデーション mixin
    Zurui Design 4 ズルいグラデーション
    @mixin gradient-top-darken($color : #666, $darken: 10%){
    background-color: $color;
    @include filter-gradient(darken($color, $darken), $color,
    vertical);
    @include background-image(linear-gradient(darken($color,
    $darken) 0%, $color 100%));
    }
    使うときは (ry
    @include gradient-top-lighten(#48B1F2);
    上の方が少し暗いグラデーション

    View full-size slide

  33. 32
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 5 ズルい角丸
    Zurui Design
    5
    ズルい角丸

    View full-size slide

  34. 33
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 5 ズルい角丸
    角丸にするだけで、
    なんかオシャレ
    ! ズルい

    けど、これも使いこなすのに少しコツが…

    View full-size slide

  35. 34
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    角丸、大きすぎないのがおすすめ
    原則 6px 以内が使いやすい
    1 つの section を囲むような通常サイズ
    の BOX であれば、
    border-radius:
    5px 〜 6px
    ぐらいが、最も無難でキレイです。
    Zurui Design 5 ズルい角丸

    View full-size slide

  36. 35
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 5 ズルい角丸
    border-radius:
    4px
    border-radius:
    2 〜 3px
    Submit ボタン等のボタンは
    小さなアイコン等のコーナー

    View full-size slide

  37. 36
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    R 半径が大きい角丸は、
    野暮ったいデザインになりやすいので、
    あまり使わない方がよいです。
    (びしっと決まるととてもカッコイイ
    けど、上級テク。

    だめじゃないけど
    むずかしい

    Zurui Design 5 ズルい角丸

    View full-size slide

  38. 37
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Compass 使おう。
    Zurui Design 5 ズルい角丸
    .hoge{
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    }
    .hoge{
    @include border-radius(6px);
    }
    ズルい

    View full-size slide

  39. 38
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 6 ズルい box-shadow
    Zurui Design
    6
    ズルい box-shadow

    View full-size slide

  40. 39
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    ×
    ×色が濃すぎる
    ×ボケ足が長すぎる
    ×色つき
    これは NG! な box-shadow
    Zurui Design 6 ズルい box-shadow
    だめじゃないけど
    むずかしい

    やり方によってはダメじゃないんですが、これも使いこなすのが難しい上級テク
    box-shadow はできるだけ繊細に使用した方が見栄えが良い。

    View full-size slide

  41. 40
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 6 ズルい box-shadow
    ズルい box-shadow ① 枠線がわりに
    ・角度をつけずに四方に薄い alpha0.15 のシャドウ
    ・box と背景がともに白に近い色の時に利用しやすい
    @include box-shadow(rgba(0, 0, 0, .15) 0 0 2px);

    View full-size slide

  42. 41
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 6 ズルい box-shadow
    ズルい box-shadow ② 内側にぼかして高級感
    ・内側にむかってぼけ足を長く、薄いシャドウを入れることで、少し高級感、
     リアルな存在感が出る。
    ・ズルい背景パターンとの併用オススメ
    ・リボン、ボタン等、
    「モノ感」を出したい場合に有効
    @include box-shadow(rgba(0, 0, 0, .2) 0 0 0 20px inset);

    View full-size slide

  43. 42
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 6 ズルい box-shadow
    ズルい box-shadow ③ 凹み BOX
    (deboss)
    border: 1px solid rgba(0, 0, 0, .1);
    @include box-shadow(rgba(0, 0, 0, .1) -1px 1px 2px inset,
    rgba(255, 255, 255, 1) -1px 1px 0);
    ↗右上・内側に影 ↙左下・外側にハイライト

    View full-size slide

  44. 43
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    @mixin box-deboss($border: .1, $shadow: .1, $highlight: 1){
    border: 1px solid rgba(0,0,0,$border);
    @include box-shadow(rgba(0,0,0,$shadow) -1px 1px 2px inset,
    rgba(255,255,255,$highlight) -1px 1px 0);
    }
    使う時はこんな感じで。
    @include box-deboss(.15, .2, .7)
    ③ 凹み BOX を mixin に
    Zurui Design 6 ズルい box-shadow
    borderとシャドウ、
    ハイライトの透明度は
    背景色によって調節したいので
    引数に

    View full-size slide

  45. 44
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 6 ズルい box-shadow
    ズルい box-shadow ④ 凸 BOX
    (emboss)
    border: 1px solid rgba(0, 0, 0, .15);
    @include box-shadow(rgba(0, 0, 0, .5) -1px 1px 0, rgba(255, 255,
    255, 1) -1px 1px 0 inset);
    ↙左下・外側に影 ↗右上・内側にハイライト

    View full-size slide

  46. 45
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    @mixin box-emboss($border: .15, $shadow: .05, $highlight: 1){
    border: 1px solid rgba(0,0,0,$border);
    @include box-shadow(rgba(0,0,0,$shadow) -1px 1px 0,
    rgba(255,255,255,$highlight) -1px 1px 0 inset);
    }
    使う時はこんな感じで。
    @include box-emboss(.15, .2, .7)
    ④凸 BOX を mixin に
    Zurui Design 6 ズルい box-shadow
    borderとシャドウ、
    ハイライトの透明度は
    背景色によって調節したいので
    引数に

    View full-size slide

  47. 46
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design
    7
    ズルいボタン
    Zurui Design 7 ズルいボタン

    View full-size slide

  48. 47
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    ここまでで出てきたズルい技を使って
    ボタンを作ってみる。
    Zurui Design 7 ズルいボタン

    View full-size slide

  49. 48
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 7 ズルいボタン
    .button-zurui {
    a
    $button_color: #48B1F2;
    display: block;
    @include ts-000;
    @include gradient-top-lighten($button_color);
    @include border-radius(4px);
    @include box-emboss(.2, .1, .3);
    color: rgba(255,255,255,.9);
    text-align: center;
    padding: 10px;
    font-size: 20px;
    line-height: 1em;
    font-weight: bold;
    margin: 50px 30px;
    &:hover
    @include gradient-top-lighten($button_color, 15%);
    text-decoration: none;
    color: rgba(255,255,255,1);
    }
    ズルい text-shadow
    ズルい角丸
    ズルいグラデーション
    ズルい box-shadow
    hover でグラデーションの上を
    10% → 15% に明るく

    View full-size slide

  50. 49
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 7 ズルいボタン
    @extend で .button-zurui を継承
    .button-red{
    @extend .button-zurui;
    $button_color: #b0430a;
    a
    @include gradient-top-lighten($button_color);
    &:hover
    @include gradient-top-lighten($button_color, 15%);
    }
    色も簡単に変えられる
    これもうちょっと短くなりそうな気がするんですが、私はこれが限界でした。

    誰か教えてください・・・
    上の 3 行だけでいけるかなと思ってたらだめだったー
    Zurui Design 7 ズルいボタン

    View full-size slide

  51. 50
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    Zurui Design 7 ズルいボタン
    こういうズルい gem もあります。
    http://jaredhardy.com/sassy-buttons/
    (まだ、使ったことない)

    View full-size slide

  52. 51
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック
    ありがとうございました。
    (実は、これらを Rails の gem にするところまで
    今回やってみようと思ってたんですが、
    全然間に合わなかった…すいません。


    View full-size slide