【バナーで学ぶ】効率的にWebデザインのアイデアを出す力を鍛える方法

masaca（@masaca_dApps）です。

デザインのアイデアが浮かばず、なかなか制作が進まないWebデザイナーの方は多いと思います。私も駆け出しの頃はデザインにとても時間がかかり、苦労していました。

今ではデザインのアイデアが浮かぶようになりましたが、そのためにはデザインの基礎知識とパターンをインプットして実際に手を動かす必要があります。

効率的にアイデアの引き出しを増やす方法はバナーデザインが有効ですので、その流れをご紹介します。

Webデザインのアイデアを出す方法

Webデザインに限りませんが、何もないところからアイデアを出すことは困難です。
まずは基礎知識を身につけ、日常に溢れる様々なデザインに目を向けたり、Webデザインのギャラリーサイトを見る習慣が大切です。

【デザイン力を磨く】Webデザイナーとして成長するための大事な習慣

【メインビジュアル参考】「チラシミュージアム」で全国のアート系チラシが簡単に集まる！

独学でWebデザイナーに必要な技術と基礎を身につける方法

効率的にデザインのアイデアの引き出しを増やす方法

Webデザインのアイデア力はバナー制作で効率的に鍛えることができます。
実際に手を動かすことでアイデア力をグングン伸ばすことができます。

簡単なバナーで複数のデザインパターンを考える

本サイトに使用したアイキャッチ画像を元に、複数のデザインパターンを考えてみます。

内容は変えずにテイストだけ変えて繰り返しバナーを制作します。主題は変えずに、装飾のための画像の追加と表記の変更はOKとしました。
配色、レイアウト、使用素材を届けたいユーザーに合わせて変更しています。

最小限の情報に絞ってシンプルに表現する

装飾要素は最小限にし、文字のみでシンプルに表現しました。ミニマルデザインなどシンプルなWebサイトのバナーとして使えそうです。
フォントを細く、配色は黒とグレーの無彩色がポイントです。Webサイトの場合シンプルすぎるとリンクとわかりづらいので、矢印を追加することなどを考えます。

背景に画像を入れてみる

先ほどのシンプルなバナーをベースにして、背景に画像を入れてみました。
画像に女性が写っていることとレトロなトーンなので、ガーリーな雰囲気が出ました。

フォントを変更して女性らしさを強化する

文字の大きさを小さくしフォントを「Didot」に変更したことでエレガントさが増し、女性らしさがより強調されました。

画像とフォントを変更して男性向けにする

画像に男性を入れ、フォントを極太にし傾けることで勢いを出しました。タイトルがはみ出すような表現方法は定番です。

配色とフォントを変更して子ども向けにする

原色に近い色、太くて丸いフォントを使用することで子どもらしさを表現することができます。イラストとの相性が良いです。

より伝わりやすい表現にするため、「Webデザイナーに関する」を「Webデザイナーのおしごと」と対象にあわせて表記を変更しています。

この考え方はWebサイトのナビゲーションの表記を何にするかといった場合にも応用できます。

レイアウトを工夫してみる

様々なテイストに変更するのもアイデアを出す力が鍛えられますが、レイアウトの変更でもさらにパターンを生み出す事ができます。
レイアウトに合わせ「Q&A」の表記を「よくある質問」に変更しました。アイデアに困ったらレイアウトや文言の変更も考えて見ましょう。

アイデアを出すポイント

アイデアを考えるときに「オズボーンのチェックリスト法」というものがあります。
デザインに行き詰まったら、一度以下のポイントを確認してみてください。

まとめ

ひとつのテーマでバナーを繰り返し作ることで、Webデザインのアイデアを出す力が効率よく鍛えられます。

この勉強法を一ヶ月も続ければアイデアに困ることはなくなります。

アイデアの源になる基礎知識もとても大切ですので、デザイン力を磨く習慣も同時に行なってください。
【デザイン力を磨く】Webデザイナーとして成長するための大事な習慣

デザインに行き詰まってしまうのは、センスが無いのではなく、日々のインプットと実際に手を動かすアウトプットが足りていない可能性がありますので、一ヶ月だけこの勉強法を試してみてください。デザイン力の向上を実感できると思います。

【職業・働き方・ツール】Webデザイナーに関するよくある質問と答え

コミュニティではWebデザイン勉強中のあなたにもっと役立つ情報を発信中！

SPONSORED LINK