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. 3 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Hello Osaka. Photo

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

    Photo by http://www.flickr.com/photos/72782973@N00/4670383270/ かみやん、実は今まで会ったことなかったんですが、 Twitter で仲良くしてもらって、今回呼んでいただいて大阪の発表が実現しました。 他にも、Twitter で知っててずっとお会いしたいと思ってた方々が 今日、何人か来てくださってて、お会いできたのすごくうれしいです ! ありがとう ! かみやん、呼んでくれてありがとう !
  3. 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 を使ったチーム開発に参加 で、誰やねん?
  4. 3 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version We are #P4D

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

    ごめんなさい ! めんどく …諸事情あり、途中でやめました。すみません… そのかわり、もっとピュアな意味でのデザインの話します Pure とは? Twitter Bootstrap みたいな感じの、よりシンプル・軽量な CSS フレームワーク (YUI 製) http://purecss.io/ これに、ズルいデザイン組み込めるようにしたら、便利そうじゃーん…とか思ったのだが…
  6. 5 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version デザイン初心者の技術者向け 例えば…プログラマの人がハッカソンなどで、集中して短時間でサービス開発したい時に、 少ない手間でそれらしく見せたい

    ! ・ベジェ曲線 (難しい ! めんどい ! ) ・画像加工・合成 (とりあえずありもので・・・) ・デザインの基礎知識・理論 (難しい話は後だ! ) …などのスキル、知識がなくても、とりあえずこれやっとくと簡単にデザインがちょっ と良く見える感じの小ズルい Tips を紹介します。 今回の内容
  7. 8 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 「フラッ トデザインは難しい」 問題

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

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

    ズルい線 改訂版 semi-flat version 前回スライドより、より控えめな感じに濃度を微調整
  10. 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 を利用→
  11. 14 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい線の断面図 背景の面 ズルい線

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

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

    ズルい text-shadow 改訂版 semi-flat version 前回スライドより、より控えめな感じに濃度を微調整
  17. 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
  18. 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
  19. 22 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ここがポイント ・色は、黒、白のみで、 ・背景色にあわせて透明度を調節する

    ・濃い背景 + 白抜き文字 の場合 黒い影 光源と逆方向↗ ・薄い背景 + 濃い色文字 の場合 白い影 光源と同方向↙ ・太さは 1px ・ぼかしは 0 ・濃過ぎないように。辛うじて見えるかなく らいがちょうどいい。 Zurui Design 2 ズルい text-shadow
  20. 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
  21. 24 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 3

    ズルい背景 改訂版 semi-flat version セミフラットデザイン向けのオススメ背景パターンを追加
  22. 25 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version これらをうまく使うだけでパッと見 2 割増く

    らいのクオリティ ! ノイズ 木目 紙 布 細かいドット ズルい背景パターン達 ズルい ! Zurui Design 3 ズルい背景
  23. 26 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ◯ 使いやすい背景パターンの特徴 ・白に近い色がベースのもの

    (薄いグレー・アイボリー等) ・黒に近い色ベースのもの (グレー・濃紺等) ・パターンが細かいもの ・ナチュラル素材 Zurui Design 3 ズルい背景
  24. 27 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version × 使いづらい背景パターンの特徴 ×大柄のパターン

    ×彩度が強いもの (色が鮮やかなもの) ×地の色と模様の明度差が大きいもの (模様がよく見えるもの) 強い柄、強い色のものは、中の要素とぶつかってしまうため、うまく使わないと素人っぽくなりやすい。 ズルくない Zurui Design 3 ズルい背景
  25. 29 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version http://bradjasper.com/subtle-patterns-bookmarklet/ ブックマークレッ トもある

    わかりやすい解説 -> http://review4.cc/archives/2356/ 見ているサイトの背景を簡単に SubtlePatterns の背景に変えられたりして便利 Zurui Design 3 ズルい背景
  26. 31 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルいグレーとは 限りなく白に近いグレー (#EEE

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

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

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

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

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

    #222222 微妙な明度差のグラデーション ベタ塗りの一歩手前く らいの、微妙な色の差のグラデーションで 本物っぽい質感が出る カラーコードで 1 桁目の差が 2 く らいがいいみたい Zurui Design 4 ズルいグラデーション
  32. 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 ズルいグラデーション
  33. 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 ズルいグラデーション
  34. 44 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 5

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

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

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

    2 〜 3px Submit ボタン等のボタンは 小さなアイコン等のコーナー Zurui Design 6 ズルい角丸
  40. 53 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version R 半径が大きい角丸は、 野暮ったいデザインになりやすいので、

    あまり使わない方がよいです。 (びしっと決まるととてもカッコイイ けど、上級テク。 ) だめじゃないけど むずかしい ! Zurui Design 6 ズルい角丸
  41. 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 ズルい角丸
  42. 56 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 7

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

    ×色つき これは NG! な box-shadow だめじゃないけど むずかしい ! やり方によってはダメじゃないんですが、これも使いこなすのが難しい上級テク box-shadow はできるだけ繊細に使用した方が見栄えが良い。 Zurui Design 7 ズルい box-shadow
  44. 58 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい box-shadow ①

    枠線がわりに Zurui Design 7 ズルい box-shadow ・セクションの囲み、ボックス罫線の代わりに利用するのがおすすめ ・borderよりも繊細で柔らかな表現になる
  45. 59 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ・シャドウには角度を付けない四方で、薄い alpha0.15 のシャドウ

    ・ぼかしは 2px で、線よりも少しふわっとした表現に ・box と背景がともに白に近い色の時に利用しやすいです ズルい box-shadow ① 枠線がわりに .box { @include box-shadow(rgba(0, 0, 0, .15) 0 0 2px); }
  46. 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);
  47. 61 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version ズルい box-shadow ②

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

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

    凸 BOX (emboss) Zurui Design 7 ズルい box-shadow ・ボタン等のクリックやタップを促す箇所に使うと効果的 ・シャドウやハイライトを控えめにすれば、フラットな UI の中でもマッチ
  54. 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 の線 (薄い線を入れることによって、 輪郭が締まります)
  55. 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とシャドウ、 ハイライトの透明度は 背景色によって調節したいので 引数に
  56. 70 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 8

    ズルいボタン 改訂版 semi-flat version 前回スライドより、数点改良しました。
  57. 72 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 前回から数点改良し、より汎用的に便利になりました。 ・文字サイズの変更、またそれに併せてボタンサイズの変更に対応 ・i

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

    ボタンタグで使いたい時 .button{ a { @include button; } input[type="submit"] { @include button; } button { @include button; } Zurui Design 8 ズルいボタン mixin にしておくことで、 色んなマークアップで 同じスタイルが使えるように
  61. 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 指定を変えることで、文字とボタンの大きさが変更できます。 ボタンの大きさを変えてみよう
  62. 77 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 赤いボタン 黒いボタン .button-red

    { a { @include button($color: #ef662f); } } .button-black { a { @include button($color: #444); } } Zurui Design 8 ズルいボタン 引数の $color 指定を変えることで、ボタンの色が変更できます。 ボタンの色を変えてみよう
  63. 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 を変えることで、文字色の変更もできます 白いボタンは、ベースの色が薄く、 テキスト色が黒いので、少しシャドウやハイライトを 調整しています。 ボタンの色を変えてみよう
  64. 79 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Font-Awesome とは? Zurui

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

    ズルいボタン  font-awesome は HTMLで i タグの class にアイコンの名前を付けて使用します。 リンクのボタンにアイコンを利用するには、このような HTML に こんなアイコンのついたボタンになります。 <i class="icon-circle-arrow-right"></i> <p class="button"> <a href="#"> <i class="icon-circle-arrow-right"></i> ズルいボタン </a> </p>
  66. 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 ズルいボタン
  67. 83 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 9

    ズルいフキダシ よくあるアレ よくあるアレ …を、mixin で汎用化して、 色・位置・三角形の大きさを都度、調節出来るようにしたい。 うん、しよう。 この三角形の部分
  68. 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 使う時はこんな感じで
  69. 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 線の色
  70. 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 あとで見といてください
  71. 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 あとで見といてください
  72. 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 あとで見といてください
  73. 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; }
  74. 92 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version 数字を span.num でマークアップ

    数字を span.num でマークアップ Zurui Design 10 ズルい数字 <p class="price"> ¥<span class="num">2,610</span> </p> .num{ @include num-font; font-size: 200%; }
  75. 94 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Zurui Design 10

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

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

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

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

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

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

    使いやすくコンテンツが馴染む UI セミフラットデザイン ズルいデザイン + ↓ Zurui Design 10 ズルいフラットデザイン
  82. 101 少ない手間と知識で“それなり” に見せる、ズルいデザインテクニック 2013 + Semi-Flat version Thank you Osaka.

    Photo by http://www.flickr.com/photos/72782973@N00/4670383270/ あ り が と う ご ざ い ま し た