メニューを開く

メニューを開く

メガメニュー を閉じる

お電話でのお問い合わせはこちら 0120-388-801

受付時間/平日10時〜19時定休日/毎週日祝日・隔週土曜日

HOME(名古屋のホームページ制作会社 株式会社アババイ)

BLOG

スタッフブログ

6月 2022 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 

RANKING

  • 2022/01/31

    工務店の広報さん必見!【デザインの4原則】を使った情報整理術

    アババイスタッフ 画像

    梶東

    こんにちは。アババイWEBデザイナーの梶東です。
    最近amazonで高評価だったので気になって手に取った本、「ノンデザイナーズ・デザインブック [第4版]」。

     

     

    最初は知識系の本かなと思ったのですが、読み進めるととても良い本で、特に【デザインの4原則】を1つずつ実例で検証していくので、どういう変化があるのかをわかりやすく見せてくれ、シンプルだけど一番大事な基礎がよりビジュアルで理解しやすい本でした。

     

    そこで今回は改めて初心である【デザインの4原則】を見直し、4原則を使うとどういう風なバナーになるか考えてみたいと思います。

    【デザインの4原則】とは

    ・近接 Proximity
    ・整列 Alignment
    ・強弱 Contrast
    ・反復 Repetition

    過去の記事で先輩であるジュニアさんもデザインのポイントについて詳しい記事を書いてくれているのでぜひ読んでください!!

     

    コントラスト(メリハリや強弱も含まれる)を強めることも大事ですが、それができるのも情報の優先順位があるからこそ!ということで、お客様にどういう風に情報を見て欲しいか、ということを考えながら進めるのが重要です。

     

    では実際のバナーデザインで実践へ!

     

     

    ではさっそくですが、上記バナーの工程を題材に詳細の説明をすると、

     

    01.スタートはまず情報をフラットに入れただけ(ラフ案)です。

    ここはワイヤーフレームのままの初期段階になります。情報をほぼ未調整で箱(バナーサイズのボード)の中に並べた状態です。
    ここから、

    02.近接・整列を使い、情報の優先順位などを基準に整理します。

    今回は情報がバナーなのでざっくりと、
    重要度1:情報の重要度で一番読んでほしいもの
    重要度2:その次に読んでほしいもの→重要度1を補足する情報であることが多い
    重要度3:重要度2の次に読んでほしいもの→重要度1をより細かく詳しく説明する情報であることが多い
    の3つに分けました。
    今回は情報が少なく、ざっくり3つでしたが、チラシやWEBデザインになると4つや5つに分けることもあります。

     

    ただ分けすぎると情報のコントラスト(強弱やメリハリ)が弱まり、衝突(差異が少ないため、情報同士がぶつかり合っている)しやすくなることもあります。
    そんな時はその中で同じグループは何か?を見つけ出し、グループ化や整理を繰り返すことで、情報の中の優先順位の整理がどんどん細かく分けられて、見やすくなります。
    ある程度視覚的にまとめられて、意図が伝わるレイアウトを構成したのち、

     

    03.コントラスト(情報の強弱など見せ方の微調整)に入ります。

    「戦略(どういう意図で見せたいか)」に合わせてフォントやカラーを変えたり、あえて違和感を出すことで目に止まりやすくしたりなど最終調整や工夫をします。

     

    この調整や工夫の段階で、戦略に応じてどれだけ幅広いデザインで表現できるのかがデザイナーの腕なので、お客様にWowと思ってもらえるのは何か?を日々自問自答しながら修行しております。。(個人的にも一番最難関の部分・・・生みの苦しみという表現をされることもあります・・)

     

    ただ、デザインの引き出しが多いことも大事ですが、その前段階の「情報整理(レイアウト)」がどれだけきちんとできるかが実は一番重要で、ここが迷わずできていることで、その次の調整や工夫が進められる状態にできます。

     

    反対にその「情報整理(レイアウト)」を怠ると次の調整や工夫で衝突が起こりやすくなり、なんだか見づらいような・・という迷いができるので、そんな時は「情報整理」に立ち直るようにします。

     

    過去の記事で偉大な先輩デザイナーさん達もデザインの考え方について記事を書いてくれているのでぜひ読んでください!!

     

    今記事は私が個人的にデザインする中での感覚的な順序に沿った方法ですので、人によって探求方法や表現は違うと思います。人によって覚え方やインプットアウトプットの方法は様々なので、いろいろな記事を読んで自分に近い!これは!と思う記事を自分なりに解釈し直しながら学んでいくのも新しい発見があり楽しいです。

     

    ただ【デザインの4原則】はおそらく全てのデザイナーやデザイナーでない方でも使える手法なので、ぜひ試してみてください!

     

    ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
    ▶お問い合わせ→ https://ababai.co.jp/request/
    ▶アババイの制作実績→ https://ababai.co.jp/case_cat/
    ▶今HOTなSNS運用→ https://ababai.co.jp/sns/
    ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲

CONTACT CONTACT

お電話でのお問い合わせはこちら 0120-388-801 お電話でのお問い合わせはこちら 0120-388-801

受付時間/平日10時〜19時定休日:毎週日祝日・隔週土曜日