資料請求
HAマガジン

ハタフルアカデミーの「人」を知り倒すメディア

デザインを見る目を養う方法

デザインを見る目を養う方法の画像

皆さんこんにちは!ウェブデザイナーの根本です。みなさん、ウェブデザインを作成するときは必ず色々な参考デザインを探すと思います。でも、闇雲にギャラリーサイトなどで見かけたデザインを参考にしたりしていませんか?それ、実はよくないかもしれません。この記事では、なぜそれがよくないかと、ではどうすればいいのかを順を追って解説させていただきます。

ハタべこ

ボクと一緒に学んでいくべこ!

ギャラリーサイトに載っているからといってよいデザインというわけではない

デザインの制作を行う際には、自分にない引き出しを探したり、トレンドのチェックをしたりするのに参考デザインの調査は必須です。そしてそんなときは、素敵なWebデザインをたくさん集めたギャラリーサイトを皆さんもよく参考にされると思います。しかし、そんなギャラリーサイトに載っているからといって必ずしもよいデザインというわけではありません

たまたまよいデザインを参考にして上手くいくこともあるかもしれません。しかし、あまりかっこよくないデザインや自分の案件に対しては適切ではないデザインを参考にしてしまうと、せっかく作ったデザインもいまいちな仕上がりになってしまいます。

世の中にあふれるWebデザインを闇雲に参考にして、当たりクジを引くまで頑張るような努力をする前に、見る目を養うことが大切です。

ハタべこ

ボクいつもChromeに100個ぐらい参考デザインのタブ開いてたべこ

見る目を養うための3ステップ

見る目を養うためにはどうするといいの?と考えたとき、最初に思い浮かぶのはきっと「沢山参考デザインを見ること」ではないかと思います。しかし、漫然とデザインの海を眺めるだけでは見る目を養う=良いデザインを選ぶことには繋がりません。その他にも重要な2つのステップと合わせた、以下の合計3ステップをセットで考えることが大切です。

  • 知る
  • 見る
  • 創る
ハタべこ

「見る」以外にも重要なことがあるべこね

知る

世の中の参考デザインを見るとき「これはこんな理由でよく見えるんだな」「こういう目的でこういう工夫がされているんだな」ということを分析しなければ、参考にしたときに得られるものはとても少なくなってしまいます。沢山のデザインを探す前に基礎知識を取り入れて、デザインに対する理解の解像度を上げることが大切です。

本で知る

デザインに「どんな工夫がされているのか?」を分析するためには、デザインの4原則などの基本ルールを学ぶことが必要不可欠です。専門書などから基礎知識を取り入れ、自分の中に蓄えておきましょう。

リンクで紹介している「なるほどデザイン」「デザイン入門教室」の2冊は入門にとても良い本なのでおすすめです。あとは手前味噌ではありますが、弊社ブログのデザインについての記事もご参考ください。

こういった学習書は例えば「このぐらいのサイズの写真のこの位置にこんな文字を置けば格好良くなる!」などのような即効性のある知識ではないため、本を読んでいても本当に役に立つのか不安になることもあるかもしれません。しかし、見る目を養ったり、手を動かしたりといった「自分で考える」力を育てるためにはとても重要です。

流行の歴史を知る

特に、今まさに勉強しはじめたという生まれたてホヤホヤのWebデザイナーの皆さんはここ10年来のWebデザインの流行の変遷を知っておきましょう。初学者が「こういうの見たことある気がするからこれでいいだろう」と思うデザインは十数年前のトレンドなことが多いからです。あらかじめ「昔はこういうのが流行ったんだな」ということを知っておくことで、参考デザインを探す際にもそういった古いデザインを見分けて避けることができます。

Webデザインはトレンドの移り変わりが早く、データも残らないころが多いため、具体的な参考資料の探し方が難しいですが「xxxx年 Webデザイン」などでも検索してみるといいでしょう。

やばいデザインの例です

自分を知る

自分について知っておくこともとても大切です。

  • どんなデザインが好きか・嫌いか それはなぜか
  • どんなデザインが得意か・苦手か それはなぜか

参考デザインを探しているときは、つい自分の好きなテイストのデザインばかりをピックアップしてしまいがちです。しかし、自分の好みではないデザインでも優れたデザインはあります。

自分についての理解と基礎のデザイン理論の両方を知っていることで冷静に「これは自分があまり好きではないデザインだけれど、良いものとして紹介されているのはなぜなのか」ということを分析し、参考にすることができるようになります。

ハタべこ

「見る」前の下準備が大事べこね。
それに、すきなものからも、そうじゃないものからも、いいところを探せるのがプロなんだべこね!

見る

基礎知識と自分についての理解を知った上で、たくさんのデザインを見てインプットを行うことはやはりとても大切です。Webデザインにおいては、特に以下のようなサイト・検索方法が参考になります

1つのギャラリーサイトだけではなく、賞を受賞したデザイン、書店の雑誌、街中で見かけるデザインなど、日常で見かける様々なデザインを参考にするようにしましょう。

また単純に眺めるだけでなく「知る」で得た基礎知識を元に、どの部分がどうして良いのか、自分が作るときどんな風に応用できるのかを必ず分析しながら参考にするようにましょう。

ハタべこ

いきなり難しいこと言われてもわかんないべこ……

例えば私がデザインを見る場合、以下のように分析します。

「このデザイン、素敵!」と感じたデザインをそのまま丸暗記するのではなく「この法則を用いればこんなふうにかっこよくできるんだな」と分析して、更に自分がそれを使えるか使えないかについても考えていることがわかります。

ハタべこ

なるほど!これならボクでもできそうべこ!

ハタべこくんが安心できたようでよかったです。

例えばそのデザインを素敵だと感じた理由が「とても高いフォントを使っているからきれいに見える」だとか「高名なカメラマンが季節の一番キレイな瞬間を切り取った写真だからきれいに見える」などの場合、自分のデザインに取り入れることができません。「このデザイン、素敵!」という印象をどうやって作っているのか?を分析することで、素材そのものに注目するのではなく、自分のデザインに応用できるものを探しやすくなります。

創る

「見る目を養うことが目的なのに、創るの?」と不思議に思われる方もいるかもしれません。しかし沢山インプットをするのと同じぐらい、沢山アウトプットすることは重要です。

これは、洋服の試着にもにています。お店で素敵な洋服を見つけたので試着もせずに買ったら、家の鏡の前で見たときに全然似合っていなくてがっかりしてしまった……という失敗は、みなさんも一度はあるのではないでしょうか?

素敵だと思ったデザインを自分の中に取り入れたらどうなるかは、実際に着てみるまで=手を動かしてデザインを作ってみるまでわかりません。

「知る」も「見る」も沢山頑張ったのに、「創る」で思ったようにかっこよくならなかった……という経験はきっと沢山生まれると思います。しかし、その失敗が最も重要な資産となっていきます。沢山試して沢山失敗して「このデザインはこんなところに参考になるんだな」「こういうデザインは参考にできないんだな」ということを経験で学んでいくことが結局のところ一番役に立ちます。

ハタべこ

ボクも、とってもかっこいいズボンを買ったのにお尻が入らなかったことがあるべこ。
とっても恥ずかしかったけど、それからはちゃんと試着するようになったべこね。
タンスの肥やしになってるあのズボンは、無駄ではなかったべこね。

ただし、だからといって「知る」ことが不要というわけではありません。基礎知識を持っていることで、闇雲にトライアンドエラーを繰り返すより効率よく経験をつんでいくことができます。

まとめ:3ステップのどれが欠けてもいけない

以上を踏まえて、知る、見る、創る、この3つがデザインを見る目を養う上で重要なことがおわかりいただけたでしょうか。どれに偏りすぎても見る目を養うことはできません。また、デザインの流行は移り変わりますので、常にこの3セットを行うことが必要です。見る目を養い、良いデザインを参考にし、それを取り入れてよいデザインを作っていけるよう、精進をし続けましょう。

ハタべこ

いつまでたっても「これで一安心」とはならないのが大変そうべこね…!
でも、それがプロのデザイナーってやつべこね
みんなも、僕と一緒にもっともっと頑張っていこうべこ!

無料個別体験レッスン ・説明会を 予約する

お子様連れOK家族同伴OK顔出し無しOK(オンライン)

マンツーマンの 体験レッスン・ 説明会です お気軽に お申込みください

スクール説明会の参加者全員に
Amazonギフト券プレゼント!

  • 1,000円分

予定枚数に達した場合、予告なしで終了する可能性がございます。

お電話でも 予約を 承っています。

フリーダイヤル 0120-620-290
営業時間
9:30~18:30(土日・祝日を除く)

説明会参加でAmazonギフト券プレゼント!

説明会を予約する
年始ダッシュキャンペーン!最大123,200円(税込)割引 期間:2025年1月31日(金)まで+特別優待プラン適用で最大20%OFF(ダブルでおトク)
説明会参加でAmazonギフト券プレゼント!
スクール説明会を予約する