とりあえず これやっとけば 大 丈 夫 ( 多 分 ) 少 ない 手 間 と 知 識 で それなり に 見 せる ズルいデザインテクニック Zurui Design @ken_c_lo TAEKO AKATSUKA
自 己 紹 介 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 サービス 作 りたい
趣 旨 2 デザイン 初 心 者 の 技 術 者 向 け 例 えば プログラマの 人 がハッカソンなどで 集 中 して 短 時 間 でサービス 開 発 &ローンチしたい 時 に 少 ない 手 間 でそれらしく 見 せたい! ベジェ 曲 線 ( 難 しい!めんどい!) 画 像 加 工 合 成 (とりあえずありもので ) デザインの 基 礎 知 識 理 論 ( 難 しい 話 は 後 だ!) などのスキル 知 識 がなくても とりあえずこれやっとくと 簡 単 にデザインがちょっ と 良 く 見 える 感 じの 小 ズルい Tips を 紹 介 します
趣 旨 3 提 供 圧 倒 的 に 楽! DRY! ズルい! 今 日 来 てる 方 々はむしろ 普 通 の CSS 書 くより 抵 抗 少 なそう 紹 介 するソース 例 も Compass で 書 けるところは Compass で 紹 介 します
Zurui Design 1 ズルい 線 4 Zurui Design1 ズルい 線 ( @machida)
Zurui Design 1 ズルい 線 5 ズルい 線 とは? 上 : 黒 / 透 明 度 0.2 /1px の 線 border-bottom: 1px solid rgba(0, 0, 0,.2); よく 見 るアレ 下 : 白 / 透 明 度 0.3 /1px の 線 @include box-shadow(rgba(255, 255, 255,.3) 0 1px 0); 下 は box-shadow で 書 く(Compass で 書 いた 例 ) 黒 と 白 の 線 を 2 本 並 べることで 背 景 に 彫 り 込 まれたように 見 える 線 これがズルい 線 ( 命 名 @machida)
Zurui Design 1 ズルい 線 6 ここがポイント 色 は 黒 (rgba(0, 0, 0, x)) 白 (rgba(255,255,255,x)) のみで 背 景 色 にあわせて 透 明 度 を 調 節 する 太 さは 1px ぼかしは 0 濃 過 ぎないように
Zurui Design 1 ズルい 線 7 随 所 で 活 躍 する ズルい 線 見 出 しの 下 に 引 いたり list やセクションなどの 区 切 りに 使 ったり
Zurui Design 1 ズルい 線 8 左 下 向 き 光 源 を 想 定 した 場 合 各 方 向 のズルい 線 上 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); 右 下 border-bottom: 1px solid rgba(0, 0, 0,.2); @include box-shadow(rgba(255, 255, 255,.3)0 1px 0);
Zurui Design 1 ズルい 線 9 背 景 色 の 濃 さによって ズルい 線 の 透 明 度 を 調 節 背 景 色 #333 黒 : alpha 1.0 border-bottom: 1px solid rgba(0, 0, 0, 1); 背 景 色 #B0430B 黒 : alpha 0.2 border-bottom: 1px solid rgba(0, 0, 0,.2); 白 :alpha 0.1 @include box-shadow(rgba(255, 255, 255,.1) 0 1px 0); 白 : alpha 0.2 @include box-shadow(rgba(255, 255, 255,.1) 0 1px.2); 背 景 色 #EEE 黒 : alpha 0.1 border-bottom: 1px solid rgba(0, 0, 0,.1); 背 景 色 #FFC300 黒 : alpha 0.1 border-bottom: 1px solid rgba(0, 0, 0,.1); 白 :alpha 1.0 @include box-shadow(rgba(255, 255, 255, 1) 0 1px 0); 白 : alpha 0.3 @include box-shadow(rgba(255, 255, 255,.3) 0 1px 0);
Zurui Design 1 ズルい 線 10 上 こういう mixin 作 っておくと 便 利 @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-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 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); } 透 明 度 を 引 数 に よく 使 う 透 明 度 を デフォルトに
Zurui Design 2 ズルい text-shadow 11 Zurui Design2 ズルい text-shadow
Zurui Design 2 ズルい text-shadow 12 文 字 が 刻 印 されているように 見 えるテキストシャドウ 濃 い 背 景 色 + 白 抜 き 文 字 の 場 合 背 景 色 #333 text-shadow: 1px -1px 0 rgba(0,0,0,1); 背 景 色 #B0430B text-shadow: 1px -1px 0 rgba(0,0,0,.5); 右 上 ( 光 源 と 逆 ) 方 向 に 黒 alpha 1.0 / 1px / ぼかし 0 / の 影 右 上 ( 光 源 と 逆 ) 方 向 に 黒 alpha 0.5 / 1px / ぼかし 0 / の 影
Zurui Design 2 ズルい text-shadow 13 文 字 が 刻 印 されているように 見 えるテキストシャドウ 薄 い( 白 に 近 い) 背 景 色 + 濃 い 色 の 文 字 の 場 合 背 景 色 #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 14 ここがポイント 色 は 黒 白 のみで 背 景 色 にあわせて 透 明 度 を 調 節 する 濃 い 背 景 + 白 抜 き 文 字 の 場 合 黒 い 影 光 源 と 逆 方 向 薄 い 背 景 + 濃 い 色 文 字 の 場 合 白 い 影 光 源 と 同 方 向 太 さは 1px ぼかしは 0 濃 過 ぎないように 辛 うじて 見 えるかなくらいがちょうどいい
Zurui Design 2 ズルい text-shadow 15 こういう mixin 作 っておくと 便 利 @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); }
Zurui Design 3 ズルい 背 景 16 Zurui Design3 ズルい 背 景
Zurui Design 3 ズルい 背 景 17 ズルい! ズルい 背 景 パターン 達 ノイズ 木 目 紙 布 細 かいドット これらをうまく 使 うだけでパッと 見 2 割 増 くらいのクオリティ!
Zurui Design 3 ズルい 背 景 使 いやすい 背 景 パターンの 特 徴 白 に 近 い 色 がベースのもの( 薄 いグレー アイボリー 等 ) 黒 に 近 い 色 ベースのもの(グレー 濃 紺 等 ) パターンが 細 かいもの ナチュラル 素 材 18
Zurui Design 3 ズルい 背 景 使 いづらい 背 景 パターンの 特 徴 大 柄 のパターン 彩 度 が 強 いもの( 色 が 鮮 やかなもの) 地 の 色 と 模 様 の 明 度 差 が 大 きいもの( 模 様 がよく 見 えるもの) ズルくない 強 い 柄 強 い 色 のものは 中 の 要 素 とぶつかってしまうため うまく 使 わないと 素 人 っぽくなりやすい 19
Zurui Design 3 ズルい 背 景 20 ズルい 背 景 パターンを 取 り 揃 えた 有 名 サイト http://subtlepatterns.com/ これ が g e m に なったら 便 利 なので は ( 誰 か )
21 Zurui Design 3 ズルい 背 景 そろそろ お 気 づきですよね 木 目 調 このスライドも ズルい テキストシャドウ
Zurui Design 3 ズルい 背 景 22 もう 一 つついでに ズルいグレーとは
23 Zurui Design 3 ズルい 背 景 ズルいグレーとは 限 りなく 白 に 近 いグレー (#EEE 以 下 ) #EEE #F8F8F8 殆 ど 白 に 見 える 明 るいグレー 白 の 代 わりに 使 える これらに ズルい 線 やズルいテキストシャドウを 乗 せると ほのかに 立 体 感 が 出 て 一 気 に 高 級 感 が 出 る 本 当 の 白 (#FFF)と 並 べて 使 うと 微 妙 な 色 の 違 いがオシャレ #FFF
Zurui Design 4 ズルいグラデーション 24 Zurui Design4 ズルいグラデーション
Zurui Design 4 ズルいグラデーション 25 微 妙 な 明 度 差 のグラデーション #434343 カラーコードで 1 桁 目 の 差 が 2 くらいがいいみたい #2d9fee #48b1f2 #222222 ベタ 塗 りの 一 歩 手 前 くらいの 微 妙 な 色 の 差 のグラデーションで 本 物 っぽい 質 感 が 出 る
Zurui Design 4 ズルいグラデーション 26 大 胆 なグラデーションの 使 いこなしは 結 構 難 しい 色 の 差 が 大 きなグラデーションは 実 際 使 ってみると 野 暮 いデザインになりがち (びしっと 決 まるとカッコイイけど 大 胆 な 上 級 テク ) だめじゃないけど むずかしい!
Zurui Design 4 ズルいグラデーション 27 グラデーションの CSS を 楽 につくれるズルいサイト http://www.colorzilla.com/gradient-editor/
Zurui Design 4 ズルいグラデーション 28 Sass(SCSS) にも 切 り 替 え 可 能
29 Zurui Design 4 ズルいグラデーション で 作 ってもいいんだけど さらに mixin 化 できそう
30 Zurui Design 4 ズルいグラデーション 微 妙 な 色 の 差 グラデーション 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);
31 Zurui Design 4 ズルいグラデーション 微 妙 な 色 の 差 グラデーション mixin @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);
Zurui Design 5 ズルい 角 丸 32 Zurui Design5 ズルい 角 丸
33 Zurui Design 5 ズルい 角 丸 角 丸 にするだけで なんかオシャレ! ズルい! けど これも 使 いこなすのに 少 しコツが
Zurui Design 5 ズルい 角 丸 34 角 丸 大 きすぎないのがおすすめ 原 則 6px 以 内 が 使 いやすい 1 つの section を 囲 むような 通 常 サイズ の BOX であれば border-radius: 5px 6px ぐらいが 最 も 無 難 でキレイです
Zurui Design 5 ズルい 角 丸 35 Submit ボタン 等 のボタンは border-radius: 4px 小 さなアイコン 等 のコーナー border-radius: 2 3px
Zurui Design 5 ズルい 角 丸 36 だめじゃないけど むずかしい! R 半 径 が 大 きい 角 丸 は 野 暮 ったいデザインになりやすいので あまり 使 わない 方 がよいです (びしっと 決 まるととてもカッコイイ けど 上 級 テク )
Zurui Design 5 ズルい 角 丸 37 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 ズルい box-shadow 38 Zurui Design6 ズルい box-shadow
これは NG! な box-shadow 色 が 濃 すぎる Zurui Design 6 ズルい box-shadow だめじゃないけど むずかしい! 39 ボケ 足 が 長 すぎる 色 つき やり 方 によってはダメじゃないんですが これも 使 いこなすのが 難 しい 上 級 テク box-shadow はできるだけ 繊 細 に 使 用 した 方 が 見 栄 えが 良 い
Zurui Design 6 ズルい box-shadow 40 ズルい box-shadow 1 枠 線 がわりに @include box-shadow(rgba(0, 0, 0,.15) 0 0 2px); 角 度 をつけずに 四 方 に 薄 い alpha0.15 のシャドウ box と 背 景 がともに 白 に 近 い 色 の 時 に 利 用 しやすい
Zurui Design 6 ズルい box-shadow 41 ズルい box-shadow 2 内 側 にぼかして 高 級 感 @include box-shadow(rgba(0, 0, 0,.2) 0 0 0 20px inset); 内 側 にむかってぼけ 足 を 長 く 薄 いシャドウを 入 れることで 少 し 高 級 感 リアルな 存 在 感 が 出 る ズルい 背 景 パターンとの 併 用 オススメ リボン ボタン 等 モノ 感 を 出 したい 場 合 に 有 効
Zurui Design 6 ズルい box-shadow 42 ズルい box-shadow 3 凹 み 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); 右 上 内 側 に 影 左 下 外 側 にハイライト
Zurui Design 6 ズルい box-shadow 43 3 凹 み BOX を mixin に border とシャドウ ハイライトの 透 明 度 は 背 景 色 によって 調 節 したいので 引 数 に @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)
Zurui Design 6 ズルい box-shadow 44 ズルい box-shadow 4 凸 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); 左 下 外 側 に 影 右 上 内 側 にハイライト
Zurui Design 6 ズルい box-shadow 45 4 凸 BOX を mixin に border とシャドウ ハイライトの 透 明 度 は 背 景 色 によって 調 節 したいので 引 数 に @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)
Zurui Design 7 ズルいボタン 46 Zurui Design7 ズルいボタン
Zurui Design 7 ズルいボタン 47 ここまでで 出 てきたズルい 技 を 使 って ボタンを 作 ってみる
48 Zurui Design 7 ズルいボタン ズルい text-shadow ズルいグラデーション ズルい 角 丸 ズルい box-shadow hover でグラデーションの 上 を 10% 15% に 明 るく.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); }
Zurui Design 7 ズルいボタン 49 色 も 簡 単 に 変 えられる @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 ズルいボタン 50 こういうズルい gem もあります http://jaredhardy.com/sassy-buttons/ (まだ 使 ったことない)
51 ありがとうございました ( 実 は これらを Rails の gem にするところまで 今 回 やってみようと 思 ってたんですが 全 然 間 に 合 わ な か っ た す い ま せ ん )