デザインの本質とはちょっと違うのですが、ウェブデザイナーに必要な技術のひとつ、広告などに使う「目立つ・理解されやすいウェブデザイン」の手法をまとめてみました。
メリハリをつけて、目に留めてもらえるようなデザインを目指しましょう！

（すみません、タイトルふざけました、中身はいつもどおりマジメです。）

ウェブサイトは、横幅1200px〜（メイン記事サイズ940px 〜 980px）、で作るので、かなり大きいのですが
横幅100px〜200px くらいに縮小したときにも「なんとなくわかる」ようにするとよいです。
作業時間が長くなると、どんどん視野が狭くなり、細かな設定にこだわれるのですが
見ている側には「一瞬」で判断されてしまうので
視野を広く持つために、ディスプレイから1〜2m物理的に離れて眺めてみるのもおすすめです。

離れてみても「なんとなくわかる」サイトは、メリハリが付いているということ。
では、実際にどんな風にすればメリハリがつくのか考えてみます。


横のグリッドを揃えるのはもちろんですが、縦にも気をつけます。
最低でも左右両方の枠の部分（いわゆるコンテナエリア）の縦２本はきちんと。
カラムが分かれる場合は、カラムごとの縦グリッドをはっきりさせましょう。

図では最近要望として良く見るレイアウト例を示しています。
ひとつひとつのブロックが分かれていることで、どんな動きをするサイトなのか
どんな情報があるのかがはっきりとわかります。


小さなバナーから、ウェブサイトまで使えるテクニックです。
「塗り」で強制的に空間を示す方法です。
デザイナーがよく好むのは、「シンプルグレートーン」ですが、それは、「空間」の認識の知識があるから。
知識のない人にもわかってもらうなら、空間をはっきり分けてあげることです。


また、色はベタ塗りだけでなく、写真・テクスチャ・パターンを背景として使うとより「質感」や「立体感」が出ます。

空間の深度を深めるために、あえてぼかしを入れた写真をいれたりしてシズル感を出す方法もよく使われますね。

現実にあるテクスチャを、デジタルに持ってくることで
「怖さ」や「冷たさ」を取り除くのにも役立ちます。＝信頼感が生まれます。

デザイン性を出したい時、格を上げたいときには、テクスチャ背景は甘く感じてしまうかも。
素材選びや色選びが重要ですね。


人の目は、丸が２つと口っぽいものがあれば「顔」と認識し、注目する癖があります。
顔文字が顔に見えるのがその証拠。
人の顔、動物の顔などの写真やイラストを注目させたいところに置くと、どうしても見てしまいます。
このチカラを借りて、バナーならバナーの枠内に１つ。サイトならファーストビューの中に一つとか、ちょっと注目させて目に留まるような仕掛けをしてあげます。

たくさんの顔があると「うるさく」なるので、ほどほどに。１ビューに０〜１つが無難です。

首より下で演技している写真や、部屋やオフィスのイメージ写真は
「雰囲気」を映し出すのに有効です。奥行きのある画像なら、奥行きを作り出してくれます。
顔の画像よりはインパクトが落ちますが、雰囲気を伝えたいなら顔を出さないようにする（手や足などの他の情報で演技させる）のもテクニックのひとつです。


コラージュの手法は、特に注目させたい部分で有効です。
上記のようなかわいい系はもちろんですが
様々なオブジェクトを切ったり貼ったりして組み合わせ、
文字入れ空間を確保して他の空間を装飾で埋めるやり方で作れば
「塗り」と「楽しい感じ」を両方取り入れられて一石二鳥なのです。

さらに、先ほど書きました「顔」のあるオブジェクトを入れてあげると、注目をさらに集められます。
そのままでは使いづらい素材も切り抜いたりして遊ぶと、「手間がかかった」感がでます。
コラージュのバランスって難しいので、本当に手間かかってるんですけど
ホワイトスペースの定義をつくる手間よりは、わかってもらえます、たぶん。

作り方は、背景をつくる→文字スペース確保→素材追加・切り貼り
という順でつくると、うまくまとまります。


文字の大きさを変えて、リズムにメリハリをつける方法です。
基本的に、「〜の」「〜が」などの接続詞は小さく
一番強調したい名詞を大きく
というように変更していきます。

もっと強調したい場合は、フォントを変えたり、１文字だけ斜めにしたりとルール上の「仲間はずれ」を作るとよいです。
作業しづらい場合は、文字レイヤーを複数に分けて、自由に配置しましょう。


目的によって、オブジェクトの配置はだいぶ変わります。
この逆＋空間設計を徹底的にやると、シンプルミニマムデザインになります。（たぶん）
どっちが悪いじゃなく、両方できると、きっと楽しいと思います！

ご参考にどうぞ。

関連記事

• 愛され♡「メリハリ」ウェブデザインを作る！注目を集めたいときのデザインテクニック
• photoshopのアートボード機能でレスポンシブも、デザインパターンも一気に書き出し。
• レスポンシブデザインのプレビューをするために、ブラウザの最小幅を知っておこう
• 要素をタイル状に並べる軽量プラグイン「Freetile.js」
• 最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント