似非デザイン技法2

素人でも手っ取り早く、なんだかそれらしく見せるテクニック。

文字
  • 良いフォントを使う
    • 日本語
      • ゴシック:ヒラギノ角ゴ,  新ゴ, 見出しゴ, MB101, 小塚ゴシック
      • 明朝:ヒラギノ明朝, リュウミン
      • その他:じゅん, 丸フォーク
    • 英語
      • Sans Serif: Hevetica, Myriad, Frutiger, Open Sans
      • Serif: Garamond, Times New Roman, Georgia
      • Mono: Menlo, DejaVu Sans Mono, Bitstream Vera Sans Mono, Monaco, Consolas, Courier New, Courier, Nimbus Mono L, Droid Sans Mono
      • Other: Nunito, Lobster
  • フォントを少し太くするか、少し細くする
    • 細いフォントや小さめの文字だと高級感が出るが、逆に弱々しくなったり難しそうに見える。
    • 太いフォントや大きめの文字だとインパクトが出て分かりやすそうな印象を与えるが、逆に安っぽくなる。
  • 字間を少し開けるか、少し詰める
  • 行間を少し開ける
  • 文字をつめ込まない。文字の周りには大きめの空白を持たせる。
  • 文字は極力短くする。一言でずばりと書くとかっこいい。
  • 文字の上下左右の余白は等しくする。
  • ごく僅かに明度が異なる同系色でグラデーションをかける。
    • #00 ~ FF で差が2くらいの違い
  • 背景にものすごーく薄いグレーを使う。#F8F8F8
  • 背景にものすごーく薄いテクスチャを使う。濃いと超ダサくなるので注意。
    • 目立つボタンやアイコン、文字にテクスチャをつけるのもあり。
    • すごーく薄いグレーか、逆にすごーく濃いグレー。
    • http://subtlepatterns.com/
  • 背景にものすごーく綺麗な写真を1枚置く。写真がイマイチだと超ダサくなるので注意。
    • 木のテクスチャ
    • きれいな空
  • すごーく薄くドロップシャドウをかける。濃いドロップシャドウはダサいので注意。
    • 枠線の代わりに薄ーいドロップシャドウをかけてもよい
  • 内側に薄くボケ足の長いドロップシャドウをかけると高級感が出てリアルさが増す。

  • 線を減らす
    • 枠や線で区切らず、余白を大きめに取って並べる。
  • 小さめの角丸を使う。半径2〜6pxぐらい。
  • ズルい線を使う
    • 上:黒・透明度0.2・1px
    • 下:白・透明度0.3・1px
  • ボタンや写真、枠の縁にこだわる。
    • 枠の上下左右で微妙に明度を変える。ズルい線。
    • 上下左右にハイライト・オフライトの線を入れる。
  • 文字や枠線にテキストシャドウをかけて彫り込まれているように見せる。
トレンドに乗っかる(簡単に真似できるそうなものに限る)

参考
Comments