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

ズルいデザインテクニック2013 + セミフラット version

ズルいデザインテクニック2013 + セミフラット version

[大阪] プログラマー向けデザイン勉強会で発表させていただきました。
http://connpass.com/event/3086/

---
[あわせて読みたい]

KSSで作るパターンライブラリ by @machida
https://speakerdeck.com/machida/kssdezuo-rupatanraiburari

【アイコンを200こ描いた振り返り!】アイコンから知るデザインのヒントby @awayuki
http://www.slideshare.net/awayukin/awayuki-pmd01-share

ビジュアルデザインまでのデザインワーク by @yokotak0527
http://www.slideshare.net/YokotaKenji/ss-26460108

ken_c_lo / TAEKO AKATSUKA

September 21, 2013
Tweet

More Decks by ken_c_lo / TAEKO AKATSUKA

Other Decks in Design

Transcript

  1. 少ない手間と知識で
    “それなり”
    に見せる、
    ズルいデザイン
    テクニック 2013
    Semi-Flat version

    in Programmer meets Design in Osaka #dmp
    @ken_c_lo
    TAEKO AKATSUKA

    View full-size slide

  2. 2
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Hello Osaka.
    Photo by http://www.flickr.com/photos/72782973@N00/4670383270/
    好き
    やねん
    大阪

    View full-size slide

  3. 3
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Hello Osaka.
    Photo by http://www.flickr.com/photos/72782973@N00/4670383270/
    多分 7 年ぶりくらいに大阪来ました。来れてうれしい!
    今回で 2 回目だけど、もしかしたら東京よりも好きかも。
    電車の中とか、みんなしゃべってていいよね。
    知らない人が話しかけてくることも、東京よりも多い感じ。
    なんか好きなんですよ、大阪。

    View full-size slide

  4. 4
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Thank you @kamiyam
    Photo by http://www.flickr.com/photos/72782973@N00/4670383270/
    かみやん、実は今まで会ったことなかったんですが、
    Twitter で仲良くしてもらって、今回呼んでいただいて大阪の発表が実現しました。
    他にも、Twitter で知っててずっとお会いしたいと思ってた方々が
    今日、何人か来てくださってて、お会いできたのすごくうれしいです
    ! ありがとう

    かみやん、呼んでくれてありがとう

    View full-size slide

  5. 1
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    東京で、フリーランスで Web デザイン&グラフィックデザインしてます
    赤塚 妙子 Taeko Akatsuka
    @ken_c_lo(ケンシロウと…読むけど正直後悔しています)
    twitter https://twitter.com/ken_c_lo/
    rss http://d.hatena.ne.jp/ken_c_lo/
    github https://github.com/taea/
    ・ 最近は Forkwell.com のリニューアルデザインとかをお手伝い
    ・Haml + Sass(.sass) + compass 好き
    ・ Rails アプリにデザインを入れる仕事
    ・ Git + GitHub を使ったチーム開発に参加
    で、誰やねん?

    View full-size slide

  6. 2
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    http://www.atmarkit.co.jp/ait/kw/zurui_design.html
    @IT で
    「ズルいデザイン」連載中

    View full-size slide

  7. 3
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    We are #P4D
    facebook グループ (自由に参加できます)
    facebook https://www.facebook.com/groups/151208708350141/
    ・デザイナーがプログラマにプログラミングを教わったり(Git や Rails など)
    ・ プログラマがデザイナーに作ってるサイトのデザインのダメ出しをされたり
    ・ 月 2 回開催・ 終わったあとはだいたい飲んでいる
    ・ たまにデザイナーとプログラマが組んでハッカソンや、温泉合宿など
    ・毎回、Git や Rails の環境を作ってる人がいる
    ・ 主催の海老沢さん(@satococoa )がやたらと女子を呼びたがる
    デザイナー向けプログラム部 in 東京

    View full-size slide

  8. 4
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    今回の内容
    Pure、やめました

    ごめんなさい

    めんどく
    …諸事情あり、途中でやめました。すみません…
    そのかわり、もっとピュアな意味でのデザインの話します
    Pure とは?
    Twitter Bootstrap みたいな感じの、よりシンプル・軽量な
    CSS フレームワーク
    (YUI 製)
    http://purecss.io/
    これに、ズルいデザイン組み込めるようにしたら、便利そうじゃーん…とか思ったのだが…

    View full-size slide

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

    ・ベジェ曲線
    (難しい

    めんどい


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

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

    View full-size slide

  10. 6
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ということで、あの出回ってるスライドと大体同じですが…
    https://speakerdeck.com/ken_c_lo/zurui-design

    View full-size slide

  11. 7
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    フラッ
    トデザインの流行に合わせて
    ズルいデザイン、オワコンと言われないように、
    今回大幅に改訂 + 追加を加えました

    View full-size slide

  12. 8
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    「フラッ
    トデザインは難しい」 問題
    ・ボタン等、アフォーダンスの必要性
    (え?押せるの?)
    ・コンテンツ部分とフレーム部分、メリハリを付けるのが困難
    ・寂しくなりがち、手抜きに見えがち問題
    プロでも、うまくやるのは難しい…
    でも、フラットデザインの醸すモダンな雰囲気は取り入れたい
    どうすれば?

    View full-size slide

  13. 9
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    「セミフラッ
    トデザイン」
    の提唱
    フラットっぽく見えながら適度なメリハリとアフォーダンスを
    ・控えめなグラデーション・テクスチャ
    ・ 控えめな立体感
    ・さりげないリッチ感
    今風の見た目、しかもわかりやすい UI を保つにはどうしたらいいの?
    こんな感じのやつを、
    「セミフラットデザイン」
    と呼びたい
    (勝手に)

    View full-size slide

  14. 10
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    全体的にフラットデザインぽい雰囲気にしつつ、
    控えめな質感や立体感でメリハリをつける
    よく見ると、うっすらテクスチャ
    がついてる
    押せるところには立体感をさりげ
    なく
    セミフラット:大体こんな感じの雰囲気のやつです

    View full-size slide

  15. 11
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Use
    圧倒的に楽!
    DRY!
    ズルい

    Sass(SCSS)

    View full-size slide

  16. 12
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design
    1
    ズルい線
    改訂版
    semi-flat version
    前回スライドより、より控えめな感じに濃度を微調整

    View full-size slide

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

    View full-size slide

  18. 14
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい線の断面図
    背景の面
    ズルい線
    背景の面に彫り込まれた溝
    光源と逆方向の面は
    光が当たってハイライトに
    光源と同方向の面は
    影になる
    光源
    Zurui Design 1 ズルい線

    View full-size slide

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

    View full-size slide

  20. 16
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    各方向のズルい線
    コードの詳細はあとで配布するスライドで見てみてください。



    下 border-bottom: 1px solid rgba(0, 0, 0, .1);
    @include box-shadow(rgba(255, 255, 255, .5)0 1px 0);
    border-top: 1px solid rgba(0, 0, 0, .1);
    @include box-shadow(rgba(255, 255, 255, .5) 0 1px 0 inset);
    border-left: 1px solid rgba(0, 0, 0, .1);
    @include box-shadow (rgba(255, 255, 255, .5) -1px 0 0);
    border-left: 1px solid rgba(0, 0, 0, .1);
    @include box-shadow(rgba(255, 255, 255, .5) -1px 0 0 inset);
    左下向き光源を
    想定した場合
    Zurui Design 1 ズルい線

    View full-size slide

  21. 17
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    背景色の濃さによって、ズルい線の透明度を調節。
    背景色 #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);
    Zurui Design 1 ズルい線

    View full-size slide

  22. 18
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    こういう mixin 作っておくと便利
    @mixin line-left($black: .1, $white: .5){
    border-left: 1px solid rgba(0, 0, 0, $black);
    @include box-shadow (rgba(255, 255, 255, $white) -1px 0 0);
    }
    @mixin line-right($black: .1, $white: .5){
    border-left: 1px solid rgba(0, 0, 0, $black);
    @include box-shadow(rgba(255, 255, 255, $white) -1px 0 0 inset);
    }



    @mixin line-top($black: .1, $white: .5){
    border-top: 1px solid rgba(0, 0, 0, $black);
    @include box-shadow(rgba(255, 255, 255, $white) 0 1px 0 inset);
    下 @mixin line-bottom($black: .1, $white: .5){
    border-bottom: 1px solid rgba(0, 0, 0, $black);
    @include box-shadow(rgba(255, 255, 255, $white)0 1px 0);
    }
    透明度を引数に
    よく使う透明度を
    デフォルトに
    Zurui Design 1 ズルい線

    View full-size slide

  23. 19
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design
    2
    ズルい text-shadow
    改訂版
    semi-flat version
    前回スライドより、より控えめな感じに濃度を微調整

    View full-size slide

  24. 20
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    文字が刻印されているように見えるテキストシャドウ
    光源とは逆方向に黒い半透明のシャドウ
    背景色 #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 / の影
    濃い背景色 + 白抜き文字 の場合
    Zurui Design 2 ズルい text-shadow

    View full-size slide

  25. 21
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    文字が刻印されているように見えるテキストシャドウ
    背景色 #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 / の影
    薄い
    (白に近い)背景色 + 濃い色の文字 の場合
    Zurui Design 2 ズルい text-shadow

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 24
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design
    3
    ズルい背景
    改訂版
    semi-flat version
    セミフラットデザイン向けのオススメ背景パターンを追加

    View full-size slide

  29. 25
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    これらをうまく使うだけでパッと見 2 割増く
    らいのクオリティ

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

    Zurui Design 3 ズルい背景

    View full-size slide

  30. 26
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version

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

    View full-size slide

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

    View full-size slide

  32. 28
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい背景パターンを取り揃えた有名サイト
    http://subtlepatterns.com/
    Zurui Design 3 ズルい背景

    View full-size slide

  33. 29
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    http://bradjasper.com/subtle-patterns-bookmarklet/
    ブックマークレッ
    トもある
    わかりやすい解説 -> http://review4.cc/archives/2356/
    見ているサイトの背景を簡単に SubtlePatterns の背景に変えられたりして便利
    Zurui Design 3 ズルい背景

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 32
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    セミフラッ
    トにオススメの背景パターン 6 選
    from subtlepatterns
    控えめなテクスチャがオススメです。
    Zurui Design 3 ズルい背景
    http://subtlepatterns.com/cardboard-flat/
    色を上に乗せて使ってもよい。
    (色は Photoshop とかで乗せてください。乗算が良い)

    View full-size slide

  37. 33
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design 3 ズルい背景
    http://subtlepatterns.com/retina-dust/
    http://subtlepatterns.com/gray-lines/
    http://subtlepatterns.com/brilliant/

    View full-size slide

  38. 34
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design 3 ズルい背景
    http://subtlepatterns.com/worn-dots/
    http://subtlepatterns.com/blizzard/
    http://subtlepatterns.com/paper/

    View full-size slide

  39. 35
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design
    4
    ズルいグラデーション
    改訂版
    semi-flat version
    前回スライドより、より控えめな感じに mixin の濃度差を微調整

    View full-size slide

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

    らいがいいみたい
    Zurui Design 4 ズルいグラデーション

    View full-size slide

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

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

    Zurui Design 4 ズルいグラデーション

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 41
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    微妙な色の差グラデーション mixin
    @mixin gradient-top-lighten($color : #666, $lighten: 5%){
    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

  46. 42
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    微妙な色の差グラデーション mixin
    @mixin gradient-top-darken($color : #666, $darken: 5%){
    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);
    上の方が少し暗いグラデーション
    Zurui Design 4 ズルいグラデーション

    View full-size slide

  47. 43
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design
    5
    ズルい配色
    NEW
    今回から新規に追加しました

    View full-size slide

  48. 44
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design 5 ズルい配色
    キーになる色は Sass で変数にして一括管理しよう
    メインカラー
    アクセントカラー
    ベースカラー
    テキストカラー
    重要なボタンなど
    (目立つ色)
    少ない面積に使用すると効果的
    (全体の面積の 5% く
    らい)
    背景色。
    白か黒に近い色が一般的で使いやすい。
    薄いグレーやアイボリー等もよい
    サイトのイメージを表す色
    (あの赤いサイトだよねー)
    ヘッダやロゴ色、リンク、見出しの色等、
    全体の 10 〜 20% 程度の面積で
    利用すると効果的

    View full-size slide

  49. 45
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design 5 ズルい配色
    $main-color: #b13b23; // メインカラー
    $accent-color: adjust-hue($main-color, 200); // アクセントカラー
    $base-color: #FFF; // ベースカラー(背景色)
    $text-color: #4a2d08; // テキストカラー(テキスト色)
    a{ color: $main-color; }
    キーになる色は Sass で変数にして一括管理しよう
    もとの変数の色を変えれば、各要素の色を変えなくても一気に色が変えられる

    View full-size slide

  50. 46
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design 5 ズルい配色
    $accent-color: adjust-hue($main-color, 200); //アクセントカラー
    色相を転換 200°
    $accent-color
    #236ab0
    200°
    $main-color
    #b03b23
    アクセントカラー:目立つ色
    重要なボタンなど
    少ない面積に使用すると効果的
    (全体の面積の 5% く
    らい)
    メインカラー:中心となる色
    サイトのイメージを表す色
    (あの赤いサイトだよねー)
    ヘッダやロゴ色、リンク、見出しの色等、
    全体の 10 〜 20% 程度の面積で
    利用すると効果的

    View full-size slide

  51. 47
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    フラッ
    トデザインぽい配色
    Flat UI colors から選ぶと便利
    http://flatuicolors.com/
    Zurui Design 5 ズルい配色

    View full-size slide

  52. 48
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    でも、そのままだと鮮やかすぎて使いこなしが難しい
    → Sass の deaturate を使って彩度を少し落とす
    鮮やか過ぎる色は、主張が強く、うまく使いこなすのが難しい。
    少しだけ彩度を落としてあげることで、他の色と仲良くしやすくなり、
    使いこなしの難易度が下がる。
    Zurui Design 5 ズルい配色
    $main-color: desaturate(#25b89a, 10%);
    彩度を落とす 10%

    View full-size slide

  53. 49
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design
    6
    ズルい角丸

    View full-size slide

  54. 50
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    角丸にするだけで、
    なんかオシャレ
    ! ズルい

    けど、これも使いこなすのに少しコツが…
    Zurui Design 6 ズルい角丸

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    Zurui Design 6 ズルい角丸

    View full-size slide

  58. 54
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design 5 ズルい角丸

    View full-size slide

  59. 55
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Compass 使おう。
    .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);
    }
    ズルい

    Zurui Design 6 ズルい角丸

    View full-size slide

  60. 56
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design
    7
    ズルい box-shadow
    改訂版
    semi-flat version
    前回スライドより、より控えめな感じに mixin シャドウ濃度を微調整

    View full-size slide

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

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

    View full-size slide

  62. 58
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい box-shadow ① 枠線がわりに
    Zurui Design 7 ズルい box-shadow
    ・セクションの囲み、ボックス罫線の代わりに利用するのがおすすめ
    ・borderよりも繊細で柔らかな表現になる

    View full-size slide

  63. 59
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ・シャドウには角度を付けない四方で、薄い alpha0.15 のシャドウ
    ・ぼかしは 2px で、線よりも少しふわっとした表現に
    ・box と背景がともに白に近い色の時に利用しやすいです
    ズルい box-shadow ① 枠線がわりに
    .box {
    @include box-shadow(rgba(0, 0, 0, .15) 0 0 2px);
    }

    View full-size slide

  64. 60
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい box-shadow ① 枠線がわりに
    → mixin で汎用化
    使う時はこんな感じで
    (透明度 0.3 のシャドウをつける)
    @mixin zurui-box($shadow: 0.15) {
    @include box-shadow(rgba(0, 0, 0, $shadow) 0 0 2px);
    }
    @include zurui-box(.3);

    View full-size slide

  65. 61
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい box-shadow ② 内側にぼかして高級感
    ・内側にむかってぼけ足を長く、薄いシャドウを入れることで、少し高級感、
     リアルな存在感が出る。
    ・ズルい背景パターンとの併用オススメ
    ・リボン、ボタン等、
    「モノ感」を出したい場合に有効
    Zurui Design 7 ズルい box-shadow

    View full-size slide

  66. 62
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい box-shadow ② 内側にぼかして高級感
    Zurui Design 7 ズルい box-shadow
    .ribbon {
    @include box-shadow(rgba(0, 0, 0, .2) 0 0 0 20px inset);
    }

    View full-size slide

  67. 63
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい box-shadow ② 内側にぼかして高級感
    → mixin で汎用化
    Zurui Design 7 ズルい box-shadow
    @mixin rich-box($shadow: .2){
    @include box-shadow(rgba(0, 0, 0, $shadow) 0 0 0 20px
    inset);
    }
    使う時はこんな感じで
    (透明度 0.1のシャドウをつける)
    @include rich-box(.1);

    View full-size slide

  68. 64
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい box-shadow ③ 凹み BOX
    (deboss)
    Zurui Design 7 ズルい box-shadow
    ・浅い凹みのある box 表現
    ・フォームのテキストエリアなど、入力を促したい場所に利用すると効果的

    View full-size slide

  69. 65
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい box-shadow ③ 凹み BOX
    (deboss)
    Zurui Design 7 ズルい box-shadow
    ・光源の方向に影、光源とは逆方向にハイライト
    ・右上・内側に影:alpha 0.05 /ぼかし 2px の黒い box-shadow 左下
    ・外側にハイライト:alpha .8 /ぼかし 0 の白い box-shadow
    .box {
    border: 1px solid rgba(0, 0, 0, .1);
    @include box-shadow(rgba(0, 0, 0, .05) -1px 1px 2px inset,
    rgba(255, 255, 255, .8) -1px 1px 0);
    }

    View full-size slide

  70. 66
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい box-shadow ③ 凹み BOX
    (deboss)
    → mixin で汎用化
    Zurui Design 7 ズルい box-shadow
    @mixin deboss-box($border: .1, $shadow: .05, $highlight: .8) {
    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);
    }
    borderとシャドウ、
    ハイライトの透明度は
    背景色によって調節したいので
    引数に
    使う時はこんな感じで
    @include deboss-box(.15, .2, .7);

    View full-size slide

  71. 67
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい box-shadow ④ 凸 BOX
    (emboss)
    Zurui Design 7 ズルい box-shadow
    ・ボタン等のクリックやタップを促す箇所に使うと効果的
    ・シャドウやハイライトを控えめにすれば、フラットな UI の中でもマッチ

    View full-size slide

  72. 68
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい box-shadow ④ 凸 BOX
    (emboss)
    Zurui Design 7 ズルい box-shadow
    .box {
    border: 1px solid rgba(0, 0, 0, .1);
    @include box-shadow(rgba(0, 0, 0, .05) -1px 1px 0, rgba(255, 255, 255, .5)
    -1px 1px 0 inset);
    }
    ・光源とは逆方向に影、光源の方向にハイライト
    ・左下・外側に影:alpha 0.05 /ぼかし 0 の box-shadow
    ・右上・内側にハイライト alpha 0.5 /ぼかし 0 の box-shadow

    ボックスの周りに、
    黒い alpha 0.15 の線 (薄い線を入れることによって、
    輪郭が締まります)

    View full-size slide

  73. 69
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ズルい box-shadow ④ 凸 BOX
    (emboss)
    → mixin で汎用化
    Zurui Design 7 ズルい box-shadow
    @mixin emboss-box($border: .1, $shadow: .05, $highlight: .5) {
    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 emboss-box(.15, .2, .7);
    borderとシャドウ、
    ハイライトの透明度は
    背景色によって調節したいので
    引数に

    View full-size slide

  74. 70
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design
    8
    ズルいボタン
    改訂版
    semi-flat version
    前回スライドより、数点改良しました。

    View full-size slide

  75. 71
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ここまでで出てきたズルい技を使って
    ボタンを作ってみる。
    Zurui Design 8 ズルいボタン

    View full-size slide

  76. 72
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    前回から数点改良し、より汎用的に便利になりました。
    ・文字サイズの変更、またそれに併せてボタンサイズの変更に対応
    ・i タグを使ったアイコン用の Webフォントに対応
    ・今回は font-awesome を使って解説しています
    ・フラットデザインの流行にに合わせ、立体感やグラデーションをより
    控えめに、かつ padding を大きめに取ったボタンスタイル
    ・input type="submit" や button タグにも対応
    ・色の変更もさらに簡単に。文字色の変更にも対応
    Zurui Design 8 ズルいボタン

    View full-size slide

  77. 73
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    @mixin button($color: #48B1F2, $font-size: 16px, $text-color: white) {
    display: inline-block;
    background-origin: border-box;
    position: relative;
    font-weight: bold;
    @include ts-000(.1);
    @include gradient-top-lighten($color, 5%);
    @include border-radius(4px);
    @include emboss-box($border: .1, $shadow: .1, $highlight: .2);
    color: rgba($text-color, .9);
    text-align: center;
    font-size: $font-size;
    padding: 0 ($font-size * 2);
    height: $font-size * 3;
    line-height: $font-size * 3;
    i {
    font-size: 130%;
    margin-right: 5px;
    color: rgba($text-color, .5);
    }
    &:hover {
    @include gradient-top-lighten(lighten($color, 5%), 5%);
    text-decoration: none;
    color: $text-color;
    i {
    color: $text-color;
    }
    }
    &:active {
    @include gradient-top-lighten($color, 5%);
    top: 1px;
    }
    }
    汎用的に使えるように、
    まずは mixin にする。
    →クソ長い

    1つひとつのコード説明、割愛。
    詳細は @IT の連載に書きました。
    http://www.atmarkit.co.jp/ait/
    articles/1309/12/news001.html
    Zurui Design 8 ズルいボタン

    View full-size slide

  78. 74
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    上下 padding が文字の大きさの 1 倍
    padding が大きめのボタンが今時
    フォントサイズに合わせて padding サイズが変わるようにした
    左右 padding が文字の大きさの 2 倍
    padding: 0 ($font-size * 2);
    height: $font-size * 3;
    line-height: $font-size * 3;
    Zurui Design 8 ズルいボタン

    View full-size slide

  79. 75
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    リンクタグで使いたい時
    submit ボタンで使いたい時
    ボタンタグで使いたい時
    .button{
    a {
    @include button;
    }
    input[type="submit"] {
    @include button;
    }
    button {
    @include button;
    }
    Zurui Design 8 ズルいボタン
    mixin にしておくことで、
    色んなマークアップで
    同じスタイルが使えるように

    View full-size slide

  80. 76
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    大きいボタン 小さいボタン
    .button-large {
    a {
    @include button($font-size: 24px);
    }
    }
    .button-small {
    a {
    @include button($font-size: 12px);
    }
    }
    Zurui Design 8 ズルいボタン
    引数の $font-size 指定を変えることで、文字とボタンの大きさが変更できます。
    ボタンの大きさを変えてみよう

    View full-size slide

  81. 77
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    赤いボタン 黒いボタン
    .button-red {
    a {
    @include button($color: #ef662f);
    }
    }
    .button-black {
    a {
    @include button($color: #444);
    }
    }
    Zurui Design 8 ズルいボタン
    引数の $color 指定を変えることで、ボタンの色が変更できます。
    ボタンの色を変えてみよう

    View full-size slide

  82. 78
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    白いボタン
    .button-white {
    a {
    @include button($color: #f6f6f6, $text-color: #444)
    @include ts-fff(0)
    @include ts-000(.1)
    @inlude emboss-box(.05, .05, 1)
    }
    Zurui Design 8 ズルいボタン
    引数の $text-color を変えることで、文字色の変更もできます
    白いボタンは、ベースの色が薄く、
    テキスト色が黒いので、少しシャドウやハイライトを
    調整しています。
    ボタンの色を変えてみよう

    View full-size slide

  83. 79
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Font-Awesome とは?
    Zurui Design 8 ズルいボタン
    Webフォントアイコンをボタンにつけてみよう
    数百種類ものアイコンが Webフォントで提供されているサービスです。頻繁にバージョンアップがあり、そのたびに
    アイコンの種類が増えます。MIT ライセンスによって提供されています。
    Font-Awesome をボタンに入れてみる

    View full-size slide

  84. 80
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design 8 ズルいボタン
     font-awesome は HTMLで i タグの class にアイコンの名前を付けて使用します。
    リンクのボタンにアイコンを利用するには、このような HTML に
    こんなアイコンのついたボタンになります。



    ズルいボタン


    View full-size slide

  85. 81
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    @mixin button($color: #48....) {


    i {
    font-size: 130%; // テキストより 130% 大きく
    margin-right: 5px; // 右マージンあける
    color: rgba($text-color, .5); // 半透明に
    }


    }
    アイコン、そのまま置くと、
    あまりカッコ良くないので
    mixin 中で i タグに調整を加えた。
    Zurui Design 8 ズルいボタン

    View full-size slide

  86. 82
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design
    9
    ズルいフキダシ
    NEW
    今回から新規に追加しました

    View full-size slide

  87. 83
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design 9 ズルいフキダシ
    よくあるアレ
    よくあるアレ
    …を、mixin で汎用化して、
    色・位置・三角形の大きさを都度、調節出来るようにしたい。
    うん、しよう。
    この三角形の部分

    View full-size slide

  88. 84
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    @mixin balloon-left($size: 6px, $color: #FFF, $top: 6px){
    position: relative;
    &:after{
    position: absolute;
    content: "";
    display: block;
    border: $size solid transparent
    border-right: $size solid $color;
    top: $top;
    left: -1 * $size * 2;
    }
    }
    @include balloon-left($size: 10px, $color: #EEE, $top: 25px;)
    Zurui Design 9 ズルいフキダシ
    $top
    $size
    左方向のフキダシの mixin
    使う時はこんな感じで

    View full-size slide

  89. 85
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    @mixin balloon-left-border($size: 6px, $color: #FFF, $top: 6px,
    $border-color: #CCC, $border: 1px){
    position: relative;
    $size2 : $size + $border;
    @include balloon-left($size, $color, $top)
    &:before{
    position: absolute;
    content: "";
    display: block;
    border: $size2 solid transparent;
    border-right: $size2 solid $border-color;
    top: $top - $border;
    left: -1 * $size2 * 2;
    }
    }
    Zurui Design 9 ズルいフキダシ
    左方向のフキダシの mixin + border 付き
    $border
    線の太さ
    $border-color
    線の色

    View full-size slide

  90. 86
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    @mixin balloon-right($size: 6px, $color: #FFF, $top:
    6px){
    position: relative;
    &:after{
    position: absolute
    content: ""
    display: block
    border: $size solid transparent;
    border-left: $size solid $color;
    top: $top;
    right: -1 * $size * 2;
    }
    }
    @mixin balloon-right-border($size: 6px, $color: #FFF,
    $top: 6px, $border-color: #CCC, $border: 1px){
    position: relative;
    $size2 : $size + $border';
    @include balloon-right($size, $color, $top);
    &:before{
    position: absolute;
    content: "";
    display: block;
    border: $size2 solid transparent;
    border-left: $size2 solid $border-color;
    top: $top - $border;
    right: -1 * $size2 * 2;
    }
    }
    Zurui Design 9 ズルいフキダシ
    右方向のフキダシ 右方向のフキダシ + border
    あとで見といてください

    View full-size slide

  91. 87
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    @mixin balloon-top($size: 6px, $color: #FFF,
    $left: 6px){
    position: relative;
    &:after{
    position: absolute;
    content: "";
    display: block;
    border: $size solid transparent;
    border-bottom: $size solid $color;
    top: -1 * $size * 2;
    left: $left;
    }
    }
    @mixin balloon-top-border($size: 6px, $color: #FFF,
    $left: 6px, $border_color: #CCC, $border: 1px){
    position: relative;
    $size2 : $size + $border;
    @include balloon-top($size, $color, $left);
    &:before{
    position: absolute;
    content: "";
    display: block;
    border: $size2 solid transparent;
    border-bottom: $size2 solid $border-color;
    top: -1 * $size2 * 2;
    left: $left - $border;
    }
    }
    Zurui Design 9 ズルいフキダシ
    上方向のフキダシ 上方向のフキダシ + border
    あとで見といてください

    View full-size slide

  92. 88
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    @mixin balloon-bottom($size: 6px, $color: #FFF,
    $left: 6px){
    position: relative;
    &:after{
    position: absolute;
    content: "";
    display: block;
    border: $size solid transparent;
    border-top: $size solid $color;
    bottom: -1 * $size * 2;
    left: $left;
    }
    }
    @mixin balloon-bottom-border($size: 6px, $color:
    #FFF, $left: 6px, $border-color: #CCC, $border: 1px){
    position: relative;
    @include balloon-bottom($size, $color, $left);
    $size2 : $size + $border;
    &:before {
    position: absolute;
    content: "";
    display: block;
    border: $size2 solid transparent;
    border-top: $size2 solid $border-color;
    bottom: -1 * $size2 * 2;
    left: $left - $border;
    }
    }
    Zurui Design 9 ズルいフキダシ
    下方向のフキダシ 下方向のフキダシ + border
    あとで見といてください

    View full-size slide

  93. 89
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design
    10
    ズルい数字
    NEW
    今回から新規に追加しました

    View full-size slide

  94. 90
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    ポイントになる英数字を大きく見せてメリハリを出す
    Zurui Design 10 ズルい数字

    View full-size slide

  95. 91
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    数字専用のフォントを mixin 化しておく
    DIN Medium http://fontzone.net/font-details/din-medium
    Zurui Design 10 ズルい数字
    @mixin num-font {
    font-family: Arial, Helvetica,sans-serif;
    font-weight: bold;
    }
    @font-face{
    font-family: 'DIN Medium';
    src: url('fonts/DIN_Medium.ttf');
    }
    @mixin num-font{
    font-family: 'DIN Medium', 'Helvetica Neue', Arial,
    'Liberation Sans', FreeSans, sans-serif;
    }

    View full-size slide

  96. 92
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    数字を span.num でマークアップ
    数字を span.num でマークアップ
    Zurui Design 10 ズルい数字

    ¥2,610

    .num{
    @include num-font;
    font-size: 200%;
    }

    View full-size slide

  97. 93
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design
    11
    ズルいフラッ
    トデザイン
    NEW
    今回から新規に追加しました

    View full-size slide

  98. 94
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Zurui Design 10 ズルいフラットデザイン
    フラットデザインがうまくいく
    8 つの法則
    フラットデザインはごまかしがきかない分、
    うまく成り立たせるために制約とパターンがある。
    うまくいくパターンを、既存のフラットデザインから読み取ってみる。
    ・寂しくならない
    ・手抜きに見えない
    ・使いやすさを担保

    View full-size slide

  99. 95
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    法則 1 色ベタ面が表示画面の半分以上を占める
    かつ、色ベタ面の幅は画面の端まで 100% 幅である
    Zurui Design 10 ズルいフラットデザイン
    同系色で背景にうっすらイラスト描いてるのもよくある

    View full-size slide

  100. 96
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    法則 2 写真が表示画面の半分以上を占める
    かつ、写真の幅は画面の端まで 100% 幅である
    法則 1 の色ベタ面の代わりに写真を利用している
    Zurui Design 10 ズルいフラットデザイン
    ぼかすのもよくある 上に色乗せて文字読みやすくするのもよくある

    View full-size slide

  101. 97
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    法則 3 メインカラー + ごく一部にアクセントカラー
    メインカラーは 画面の半分以上を占める : アクセントカラーは 5% 未満
    ※色選びのポイントは、
    「ズルい配色」参照
    白抜き文字 / 黒文字 いずれも載せられるような色がメインカラーに使いやすい
    一番重要なボタン等に大体アクセントカラーが使われている
    Zurui Design 10 ズルいフラットデザイン

    View full-size slide

  102. 98
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    法則 4 アイボリー / ベージュ背景 + カラフル
    上に乗せるカラフルな色も、背景色に合わせて、少し彩度を落としている。
    ※彩度の落とし方:
    「ズルい配色」参照 (desaturate)
    Zurui Design 10 ズルいフラットデザイン

    View full-size slide

  103. 99
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    法則 4 アイボリー / ベージュ背景 + カラフル
    上に乗せるカラフルな色も、背景色に合わせて、少し彩度を落としている。
    ※彩度の落とし方:
    「ズルい配色」参照 (desaturate)
    Zurui Design 10 ズルいフラットデザイン

    View full-size slide

  104. 100
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    これら、フラットデザインの法則
    今風のデザインテイスト &
    使いやすくコンテンツが馴染む UI
    セミフラットデザイン
    ズルいデザイン


    Zurui Design 10 ズルいフラットデザイン

    View full-size slide

  105. 101
    少ない手間と知識で“それなり”
    に見せる、ズルいデザインテクニック 2013 + Semi-Flat version
    Thank you Osaka.
    Photo by http://www.flickr.com/photos/72782973@N00/4670383270/











    View full-size slide