webデザイン

デザインのレイアウトが苦手なひとが今日から得意になってしまう、たった3つの方程式!

ポスターやホームページのバナー、アイキャッチ画像など人目を引き付けるデザインをしたいけどなかなか上手くいかずバランスが悪くなってしまう毎回レイアウトにすごく時間がかかってしまうセンスが無いと割り切って妥協してしまう、そんなひとも多いようです。

ここでは「レイアウトは苦手っ!」というひとでも得意になってしまうような、とっておきの3つ方程式を提示しますので是非意識しながらデザイン作業に役立ててみてください。

  • ① グーテンベルク・ダイヤグラム:Zの法則
  • ② 無用の用
  • ③ 配色バランスの60:30:10ルール

グーテンベルク・ダイヤグラム:Zの法則

活版印刷術の創始者といわれるドイツのグーテンベルクは人間の視覚の流れがアルファベットのZのように移動することを唱え、その技術は現在でも印刷物やウェブデザインなど媒体を問わず幅広く使用されています。

Zの法則

人はデザインされたものを見る時、↑図のように無意識のうちに左上から視線を置き右へ水平移動し、左下へ落としてまた右へ移動させます。

このような視線の流れを意識することで全体のバランスが取りやすくなり意図的に仕掛けることで人目を引き付けるデザインが可能になります。

Zの法則2

↑のデザインではZの意識が少し足りないため、左上から真ん中下あたりにストンっと視線が落ちてしまうように感じるでしょう。そのためバランスも悪くなってしまい安定感に欠けふらふらと傾いてしまう印象を受けます。

こういった場合は、右上あたりに視線を誘導する仕掛けを心がけてデザインしてみよう!

Zの法則3

↑はZの法則を意識しながら3点ほどデザインを加えてみましたがどこだか分かりますか?

  • ① 右上にテキストの追加
  • ② 女性の顔の強調
  • ③ イヤリングとネックレスを黄金色で輝かせる

① テキスト(読む読まないは別にして)の配置はレイアウトバランスを取るのに最適。
② 顔(特に目)を強調し印象付けることで落ちそうな視線をグッと引き挙げてくれます。
アクセントカラーの黄色を右部にも追加することで視線を左から右へ繋げてます。

Zの視線を意識するだけでだいぶバランスが良くなりました!

無用の用

中国古代の哲学者である老子の言葉【無用の用】といえば有名で、その意味合いは《何の役にも立たないようにみえるものが、実は重要な役割を果たしている》だそうです。

「老子とデザインと何んの関係があんの?」と思われるかもしれませんが、私はこの言葉の持つ意味がデザインや他の芸術分野においても核心をついてるように感じるのです。

たとえば音楽では、鳴っている部分の音符を【とすれば鳴っていない部分の休符が【となると思います。有だけではプーと鳴り続ける汽笛のようになってしまいますが無を入れることによってそこにリズムが生まれ聴く人のこころを揺さぶる訳ですね。

文才と呼ばれる作家は無の部分である行間の使い方が上手いですし、落語家や芸人達はの使い方ひとつで笑いを大きく引き寄せます。

また写真家は、無という表現は適切ではないかもしれませんが人物であれば決して見ることのできない感情建物であれば奥ゆかしい歴史自然であればそこに流れる空気感を瞬間に収めることが優れていると言えるでしょう。

こういったことを踏まえるとデザインもこの【】の部分がいかに重要であるかが理解できるはず、逆に無の部分にフォーカスすることでレイアウトがとても楽になりバランスがめっちゃ取りやすくなるんですね。

レイアウトは無(空間)を描く作業

空間を描く

有の部分を動かして配置しようと試みるのではなく ↑のように顔・船・文字という概念をいったん忘れて無(ピンクの部分)の空間を描くような感覚でバランスを整えてみよう!

配色バランスの60:30:10ルール

配色バランスもレイアウトにおいて重要な要素のひとつ。色彩がチグハグで統一感がなかったり、視線が定まらず見ているだけで疲れてしまうようなウェブサイトなどを良く見かけますが、それは配色バランスの悪さが原因だったりします。

無数の色彩を用いているにも関わらず素晴らしいデザインをしてしまう色彩感覚のハンパない超一流デザイナーさん(うらやましい・・)も存在しますが、配色が苦手なひとはまず基本の60:30:10ルールを適用してデザインするように心がけよう!

配色バランス

デザイナーを公言しておいてなんですが実は私、ぶっちゃけ色彩感覚が乏しい・・?というよりあまり得意ではありません。

配色バランスルール

それでも60:30:10を意識するとそれなりになっちゃうもんです。今回は暗めのレディッシュブラウンをベース色にし、肌や水面のベージュをメイン色、ロゴや模様のイエローをアクセント色として仕上げてみました。

  • ① グーテンベルク・ダイヤグラム:Zの法則
  • ② 無用の用
  • ③ 配色バランスの60:30:10ルール

もし今までレイアウトが苦手だと思い込んでいたとしたら、是非この3つのことを意識しながら新たなデザイン業務に挑戦してみてください!実はレイアウトが得意だった自分に出会ってしまうかも??

合わせて読みたい関連記事:ヘッダーデザインのレイアウト(構成要素の配置)が苦手なら黄金比・白銀比ツールを活用しよう。Photoshop編

スリームデザインの無料メールマガジン

ピックアップ記事

  1. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…

関連記事

  1. フォトショップ

    photoshopで人物写真を肖像画風に仕上げる方法。

    人物写真を絵画や油絵の肖像画のように加工したい場合にはphotosho…

  2. webデザイン

    社長っ!御社のホームページはタコサイトですよっ、、ウェブ制作者・担当者が知っておくべき重要事項

    ちょっと過激なタイトルですが、タコとは悪口で使われるような意味を含んだ…

  3. webデザイン

    ブロガー必見!パソコン画面のはめ込み画像がわずか10秒で作れるMockDropが便利すぎた。

    ブログを書いているとパソコン画面の"はめ込み画像"を作りたい場合があり…

  4. フォトショップ

    photoshopで顔や肌のテカリをうまい具合に抑える方法。

    顔や肌のテカリを抑えるためにphotoshopのブラシなどで塗ったりし…

  5. webデザイン

    意外と知らないっ、、Photoshopで文字の輪郭(境界線)だけに影を付ける方法

    Photoshopで文字の輪郭(境界線)に影を付けようと思っても、「外…

  6. webデザイン

    コンバージョン率を2倍に上げるデザインとは?という考え方が間違っているその理由について。

    「ウェブサイトにおけるデザインの役割はとても重要だ!」と今更声をあげて…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  5. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
PAGE TOP