似非デザイン技法

注:かなり昔の記事なので参考にならないかも

手っ取り早く、見た目をそれっぽくする(見た目でごまかす)知恵をまとめておく。

別名、「似非デザイナーになる方法」。

  • 対象範囲
    • Web、スタイルシート
    • 各種画像作成
    • ロゴ
    • グラフ
    • プレゼン
    • Word等での文章作成
    • アプリケーションUI
    • …などなど、要はコンピュータ上でデザインする際使える。


  • とりあえず文字はヒラギノにしておく。
  • 英語だと、Arielを使っておくと何にでもなじむので便利。

  • 文字をつめこまない。文字の周りには大きめに空白をもたせる。
  • 文字は出来るだけ削る。一言でかっこよく書いておくと、割とそれっぽく見える。
  • 枠で囲むよりも、スペースを大きくとって並べる方がきれいになる。
  • 空白を上手く使えるようになると一流の似非デザイナー。
    • アップルや無印良品しかり。

  • 写真素材を入れておく。これだけでかなり華やかになる。

  • グラデーションを使う。
  • 平面を一色で塗りつぶすのではなく、同じ色系統を微妙にグラデーションさせて塗ると、立体感や透明感が出てきれいになる。
  • 丸や四角などシンプルなモノに使うと効果大。

  • 文字にグロー効果を使う。
  • 写真の上や、濃い背景色の上に文字を重ねるとき、グロー効果を使ってコントラストをハッキリさせるとそれっぽくなる。
  • 白抜き文字なんかでは特に有効

  • アルファを使う。
  • 写真を貼り付けたり、色を塗ったりするのに加えて、半透明にしておくと、これまた立体感と透明感が出てきれい。
  • 背景や、グラフで使うと良いかも。

  • 色は少なめで、使う色を統一する。
  • 背景色と、メインカラー、サブカラーとアクセントの、最大でも4色ぐらいがいい。
  • で、それらの色をグラデーションだとかアルファさせれば良い。

  • 色に迷ったら、白かグレーにしておく。
  • 背景色を変えることを考える。

  • 小難しい絵は小さめ、きれいな絵は大きめで。

  • 一度に見せるモノは一つにしておく。1つの絵に1つのコメント。
  • 特にプレゼンやWebでやるとかっこいい。

  • 1ピクセルのワク。
  • 単純に四角を書くだけでなく、同系統で薄めの色で、かつ背景色とのコントラストのある色で、1ピクセル(←重要)で囲っておくと、しまりが出てかっこいい。
  • Webページの画像など、小さめのモノに使うといい。
  • あと、HTMLのテーブルでも使える。

  • 角を丸くしておく。
  • 四角の角を丸めておくと、優しくなるというか、柔らかくなってグッド。
  • それに加えて、ワクで囲っておくなどしておくと良さげ。

  • 背景に縞模様を使う。
  • OS Xの白いウィンドウのように、うざくない程度に縞模様を入れるとそれっぽくなる。
  • 縞模様じゃなくてもシンプルなテクスチャを使うと良い。

  • 文字を左上に書かない。
  • 左上から書くと堅い感じになるので、中央や下、右に少しずらして書くと、それっぽくなる。

  • 大きな文字と小さな文字。
  • 文章を書くとき、タイトルは必要以上に大きめに書く。
  • 文章の文字は小さめかつ、横に長くならないよう四角で囲ってコンパクトにする。

  • 文字の間隔を変える。
  • デフォルトの文字間隔だと普通に見えるけど、文字の間隔を変えるだけで割とそれっぽいロゴやタイトルが出来たりする。
  • 文字の間隔を詰めてみると良い場合もある

  • アクセントの画像に「*」「>>」「→」「▲(横に倒す)」「●」「■」「@」「+」「/」など記号を使う。
  • アクセントの画像などを作るのは割とめんどいので、これら文字を変換して使うと手っ取り早くそれっぽいアクセントになる。

  • パクる。
  • 似非デザイナー究極奥義。
  • アップルや無印良品、ソニー、その他有名なデザインブランドの広告やWebで使われている色づかいや配置、その他、画像の使い方の技をひたすらパクりまくる。
  • オリジナルなんて考えるな!!
Comments