“グッとくるWebデザイン”ができるようになる3つの習慣

詳しく見ていきましょう。

はじめに

「デザインスキル」と一言で言っても様々ありますが、デザインスキルの重要な要素の一つとして、「目的に沿ってうまく”あしらえる”こと」があるとぼくは思っています。

例えば、新春初売りセールをお知らせするバナーを作りECサイトに集客したいとしましょう。

極論を言えば、目的を達成できる（ここではクリック率など）のであれば上のようなクリエイティブでもデザインとしては正解です。

ただし、人間はもっと非合理的で気まぐれな生き物です。
興味がなければバナーを見ようともしないですし、何ならバナーの存在すら気づいていないかもしれません。

ですのでデザインを作るときは、なるべく「パッと見で」「スッと内容が入ってきて」「何だかグッとくる」ように、”あしらい”を施します。
ユーザーの目を引いて興味を持ってもらえるよう、演出をするのです。

さて、この”あしらい”ですが、うまく施せるようになるには結構な時間と努力が必要です。
何度も練習を重ね、腕を磨いていく必要があります。
（逆に言えば、努力してセンスを磨きさえすれば、グッとくるデザインを作れるようになれます。）

このページでは、そんな”あしらい”に焦点を当て、ぼくがデザインスキルを高めるために行った３つの習慣について紹介していきます。

よければ参考にしてみてください。

デザインスキルを上げるために大切なこと

3つの習慣の説明に入る前に、まずデザインスキルを上げるにあたってのマインドセットを整理しておきます。

デザインスキルを上げるには、とにかく次の3点を意識することが大切です。
（…と、前に会社の上司から教えていただきました）

引き出しの数を増やすというのは、デザインの表現手法の手札を増やすということで、
世の中にあるデザインをよく観察し、自分の中にインプットしておくことが大切です。

アウトプットはその名の通り、どんどんデザインを作るということです。
デザインの表現手法はインプットしただけでは役に立ちません。いつでも引き出しから取り出し、使えるようにしておく必要があります。

そして作ったデザインは、なるべく人に見せた方がよいです。
自分一人だとどうしても”自己満足”に陥ってしまいがちですが、誰かに見てもらうことで”気づき”を得ることができます。

ぼくが行った３つの習慣

上で挙げたマインドセットを踏まえ、ぼくは次の３つの行動を習慣化させました。
（あくまでも”あしらい”を上達させるための行動です。デザインのスピード改善などには向かないので、ご了承ください）

それぞれ見ていきましょう。

「いいな」と思うデザインを見つけ、なぜ「いいな」と思ったのか、口で説明する

時間

毎日５分くらい

練習のメリット

練習のやり方

まずはピンタレストやMUUUUU.ORGといったデザインのギャラリーサイトに行き、何となくでいいので「お、このデザインいいな！」と思うものを見つけます。

そして、そのデザインの何が良かったのか、どんな目的で作られているのか、など、自分なりに言語化をしてみます。

大切なのは、一つのデザインからたくさんの”気づき”を得て、推測したり話ができるようになることです。
“正解かどうか”はあまり気にしなくて大丈夫です。

例えばぼくは下のデザインを「いいな」と思ったので、ちょっと言語化してみました。

「いいな」と思ったデザインを模写する

時間

週に1回、２〜３時間程度

練習のメリット

練習のやり方

こちらも同様、まずはピンタレストやMUUUUU.ORGといったデザインのギャラリーサイトに行き、「いいな！」と思うデザインを見つけます。

そしてPhotoshopやAdobe XDなどのデザインツールを使って、先ほど見つけたデザインをなるべく忠実に再現していきます。

スペースの空け方や配色、文字の組み方など、細かいところでどういうことをやっているのか意識し、手を動かしながら体で感じることが大切です。

ぼくは下のデザインを「いいな」と思ったので、模写してみました。

ゼロからバナーやLPを作る

時間

2週に1回くらい、3〜4時間程度

練習のメリット

練習のやり方

ランサーズやクラウドワークス など、デザイン制作のお題が見つかりそうなサービスを活用し、それをもとにアウトプットの練習をします。

この練習ではとにかくアウトプットに慣れることが大切です。
模写などで増やしたデザインの引き出しをうまく使い、スピーディかつ高品質なデザインができるようにしていきます。

そして、デザインを作ったらばなるべく誰かに見せてレビューしてもらいましょう。
自分のデザインを叩いて叩いて、強くしていきます。

ぼくもDaily UIのお題をもとに、「タイマー」のUIを作ってみて、デザイナーの友達にレビューしてもらいました。

練習にオススメのサービス７選

ここまで紹介してきたデザインの練習を行うにあたり、オススメのギャラリーサイトやサービスを紹介します。

模写にオススメのサイト

ピンタレスト

https://www.pinterest.jp/

バナーやLPなどの参考を探したり、雰囲気のいいデザインや海外のデザインを探したい場合はピンタレストがオススメです。

ピンタレストのいいところは、「似たテイストの画像」をレコメンドしてくれるのと、画像の保存と管理がめっちゃラクなところです。
デザインを探して、見て、保存して、というのがかなり直感的にでき、つい楽しくなって長居してしまいます。

レトロバナー

https://retrobanner.net/

もう少し商業チックというか、「バナーっぽいデザインのバナー」を探したい時は、レトロバナーをオススメします。
レトロバナーはサイズでのバナー検索が充実していて便利です。

Web Design Clip

https://www.webdesignclip.com/

Webサイトのギャラリーサイトです。

掲載数はそこまで多くないですが、LPのギャラリー、スマホサイトのギャラリーと分けて表示できたり、日本語サイトと海外サイトを分けて表示できるのが便利です。
ぼくはスマホサイトのファーストビューを模写したいときなどによく使っています。

MUUUUU.ORG

https://muuuuu.org/

こちらもWebサイトのギャラリーサイトです。

Web Design Clipよりも掲載数が多く、サイトのカテゴリー分けもWeb Design Clipとは若干異なっています。
MUUUUU.ORGではECサイトを絞り込むことができます。ECサイトのUIを模写したり参考にしたいときに便利です。

アウトプットにオススメのサービス

クラウドワークス

【PR】クラウドワークス

オンラインの受発注サービスです。

バナーのデザイン制作案件が豊富にあり、アウトプットの練習場としてはもってこいです。
コンペ案件であれば、実際に受注をしなくてもお題を見て練習することができます。

会員登録は無料でできるので、とりあえず会員登録して案件を見てみるといいと思います。

ランサーズ

https://www.lancers.jp/

こちらもクラウドワークス同様、オンラインの受発注サービスです。
ランサーズでもコンペ案件としてバナー制作やLP制作などの案件を見ることができます。

Daily UI

https://www.dailyui.co/

メールアドレスを登録すると100日間、ほぼ毎日UIデザインのお題を送ってくれる海外の無料サービスです。

お題は「#076 Loading…」や「#075 Pre-Order」など、かなりざっくりしていて、細かい指示や設定はありません。
その分、自由な発想でデザインに取り掛かることができます。

作ったデザインはDribbleやInstagramなどでデザイナー間で盛んに発信、シェアされています。
作例を見たい時は、例えばInstagramで「#dailyui076」と検索すると、他のデザイナーが作った「#076 Loading…」の作品を見ることができます。

まとめ

以上でお助けツールのお話はおしまいです！