2022年10月5日SHAREツイートシェアはてブLINEPocketこんな方に向けて書いたよ未経験からWebデザイナー、UI/UXデザイナーを目指していますデザインを上達させるコツとか練習法を知りたい!バナーやLPを作っているけど、なんかイマイチ...この記事の内容だよぼくがデザインスキルを上げるために会社の合間でやっていた3つの習慣を紹介するよバナーやLPがいい感じに作れるようになるよ詳しく見ていきましょう。「デザインスキル」と言われると、どんなことを思い浮かべるかね?きれいな色使い、Photoshopの加工技術、スピーディーに作れること...ぼく先生まあそれも大切なんじゃが、目的に沿って”あしらい”がうまくできるかどうかがけっこう大切なんじゃ。ほほう、“あしらい”ですか...ぼく「デザインスキル」と一言で言っても様々ありますが、デザインスキルの重要な要素の一つとして、「目的に沿ってうまく”あしらえる”こと」があるとぼくは思っています。新春初売りセールをお知らせするバナーを作りECサイトに集客したいとしましょう。テキストを置いて、「特大セール」を赤字にしただけ。w極論を言えば、目的を達成できる(ここではクリック率など)のであれば上のようなクリエイティブでもデザインとしては正解です。人間はもっと非合理的で気まぐれな生き物です。興味がなければバナーを見ようともしないですし、何ならバナーの存在すら気づいていないかもしれません。デザインを作るときは、なるべく「パッと見で」「スッと内容が入ってきて」「何だかグッとくる」ように、”あしらい”を施します。ユーザーの目を引いて興味を持ってもらえるよう、演出をするのです。赤背景に金色の雲で新春っぽさを出してみたり、「50%OFF!」でお得感を伝えてみたり。この”あしらい”ですが、うまく施せるようになるには結構な時間と努力が必要です。何度も練習を重ね、腕を磨いていく必要があります。(逆に言えば、努力してセンスを磨きさえすれば、グッとくるデザインを作れるようになれます。)このページでは、そんな”あしらい”に焦点を当て、ぼくがデザインスキルを高めるために行った3つの習慣について紹介していきます。よければ参考にしてみてください。ぼくぼくもまだまだスキルは未熟ですが、今の会社に入ってからデザインの練習を重ね、少しは”あしらい”を施せるようになりました。ここで紹介する習慣は会社の合間にできるレベルのものですので、ぜひ取り入れてみてください!デザインスキルを上げるために大切なこと3つの習慣の説明に入る前に、まずデザインスキルを上げるにあたってのマインドセットを整理しておきます。デザインスキルを上げるには、とにかく次の3点を意識することが大切です。世の中にあるデザインをよく観察し、自分の中にインプットしておくことが大切です。アウトプットはその名の通り、どんどんデザインを作るということです。デザインの表現手法はインプットしただけでは役に立ちません。いつでも引き出しから取り出し、使えるようにしておく必要があります。作ったデザインは、なるべく人に見せた方がよいです。自分一人だとどうしても”自己満足”に陥ってしまいがちですが、誰かに見てもらうことで”気づき”を得ることができます。ぼくここで挙げた3点を意識しながらデザインの練習をすると、けっこう上達できると思います。MEMOそもそもデザインとは、「何かのお困りごとを解決するための手段」とよく言われます。デザインには必ず解決したい”目的”が存在します。この目的を達成させるために、デザイナーは様々な手段を使って表現を創り上げるのです。デザイナーは、表現の手段を豊富に取り揃え、それをいつでも技術的に実現することができ、きちんと目的に沿った”あしらい”ができなければなりません。デザインも自己満足で終わらせるのではなく、常に俯瞰し磨き上げる姿勢が大切です。上で挙げたマインドセットを踏まえ、ぼくは次の3つの行動を習慣化させました。(あくまでも”あしらい”を上達させるための行動です。「いいな」と思うデザインを見つけ、なぜ「いいな」と思ったのか、口で説明する「いいな」と思ったデザインを模写するゼロからバナーやLPを作るそれぞれ見ていきましょう。毎日5分くらい練習のメリットいろいろなデザインに触れ、表現の引き出しが増えるデザインを言語化する力が身に付く細かいところにまで意識を向けるクセが付く練習のやり方まずはピンタレストやMUUUUU.ORGといったデザインのギャラリーサイトに行き、何となくでいいので「お、このデザインいいな!」と思うものを見つけます。そのデザインの何が良かったのか、どんな目的で作られているのか、など、自分なりに言語化をしてみます。大切なのは、一つのデザインからたくさんの”気づき”を得て、推測したり話ができるようになることです。“正解かどうか”はあまり気にしなくて大丈夫です。ぼくは下のデザインを「いいな」と思ったので、ちょっと言語化してみました。ベクトルぼくこうして見てみると、「事業分析」というやや堅苦しいビジネス向けサービスを、親しみやすくも信頼感のあるテイストで、わかりやすく伝えようとする意図が汲み取れます。練習のメリット表現の引き出しが増える文字組みや色使いなど、プロの技術を盗み、身に付けられるグッと引き締まったデザインの作り方がなんとなくわかるようになる練習のやり方こちらも同様、まずはピンタレストやMUUUUU.ORGといったデザインのギャラリーサイトに行き、「いいな!」と思うデザインを見つけます。XDなどのデザインツールを使って、先ほど見つけたデザインをなるべく忠実に再現していきます。スペースの空け方や配色、文字の組み方など、細かいところでどういうことをやっているのか意識し、手を動かしながら体で感じることが大切です。ぼくは下のデザインを「いいな」と思ったので、模写してみました。小さいテキストのフォントは同一のものが見つからず、似たフォントで代用。緑丸はよく見ると斜線のテクスチャのようなものが入っているが、上手く再現できなかった...。デザイン制作のお題が見つかりそうなサービスを活用し、それをもとにアウトプットの練習をします。この練習ではとにかくアウトプットに慣れることが大切です。模写などで増やしたデザインの引き出しをうまく使い、スピーディかつ高品質なデザインができるようにしていきます。デザインを作ったらばなるべく誰かに見せてレビューしてもらいましょう。自分のデザインを叩いて叩いて、強くしていきます。UIのお題をもとに、「タイマー」のUIを作ってみて、デザイナーの友達にレビューしてもらいました。iPhoneの「時計」アプリをベースにしつつ、ニューモーフィズムというデザイン手法に挑戦してみました。赤入れをいただきました...!自分が見落としていた箇所や、新たな視点に気付けたりできるので、他者の意見はとても貴重です。UIを活用するのがよい気がしました。UIは毎日メールでデザインのお題を送ってくれる無料のサービスです。Dribbbleなどで作った作品が公開されています。練習にオススメのサービス7選ここまで紹介してきたデザインの練習を行うにあたり、オススメのギャラリーサイトやサービスを紹介します。模写にオススメのサイトピンタレストhttps://www.pinterest.jp/バナーやLPなどの参考を探したり、雰囲気のいいデザインや海外のデザインを探したい場合はピンタレストがオススメです。ピンタレストのいいところは、「似たテイストの画像」をレコメンドしてくれるのと、画像の保存と管理がめっちゃラクなところです。デザインを探して、見て、保存して、というのがかなり直感的にでき、つい楽しくなって長居してしまいます。レトロバナーhttps://retrobanner.net/もう少し商業チックというか、「バナーっぽいデザインのバナー」を探したい時は、レトロバナーをオススメします。レトロバナーはサイズでのバナー検索が充実していて便利です。Cliphttps://www.webdesignclip.com/Webサイトのギャラリーサイトです。掲載数はそこまで多くないですが、LPのギャラリー、スマホサイトのギャラリーと分けて表示できたり、日本語サイトと海外サイトを分けて表示できるのが便利です。ぼくはスマホサイトのファーストビューを模写したいときなどによく使っています。MUUUUU.ORGhttps://muuuuu.org/こちらもWebサイトのギャラリーサイトです。Clipとは若干異なっています。MUUUUU.ORGではECサイトを絞り込むことができます。ECサイトのUIを模写したり参考にしたいときに便利です。アウトプットにオススメのサービスクラウドワークスクラウドワークスオンラインの受発注サービスです。バナーのデザイン制作案件が豊富にあり、アウトプットの練習場としてはもってこいです。コンペ案件であれば、実際に受注をしなくてもお題を見て練習することができます。ランサーズhttps://www.lancers.jp/こちらもクラウドワークス同様、オンラインの受発注サービスです。ランサーズでもコンペ案件としてバナー制作やLP制作などの案件を見ることができます。UIhttps://www.dailyui.co/メールアドレスを登録すると100日間、ほぼ毎日UIデザインのお題を送ってくれる海外の無料サービスです。Pre-Order」など、かなりざっくりしていて、細かい指示や設定はありません。その分、自由な発想でデザインに取り掛かることができます。作ったデザインはDribbleやInstagramなどでデザイナー間で盛んに発信、シェアされています。Loading...」の作品を見ることができます。UI本体から作例を出すことはないようですが、世界中のデザイナーが様々なSNSでハッシュタグ付きで作品を投稿しているので、そこからクリエイティブの参考を得ることができます。まとめデザインスキルを上げるには、次の3つを意識してひたすら練習するべし。引き出しの数を増やすどんどんアウトプットする作ったデザインを誰かにレビューしてもらう以上でお助けツールのお話はおしまいです!ぼくお疲れ様でした。Posts文系卒で美大出てなくてもWebデザイナー、UI/UXデザイナーになれるの?Web・UI/UXデザイナーはコーディングができるべき?Web・UI/UXデザイナーとプログラマーの違いjQueryとは?未経験からWebデザイナー・UI/UXデザイナーを目指す方向けに解説Webデザイナー・UI/UXデザイナーはJavaScriptも習得すべき?ぼく(管理人)大学卒業後に新卒で入った会社で2年半営業として働く。飛び込みとテレアポの日々で心身共に疲れ切ってしまい、適職診断をしまくってWebデザイナーの道を知り、その面白さに魅了され独学でWebデザイナー、UI/UXデザイナーを目指した。現在は事業会社にてUI/UXデザイナー兼Webディレクターをやっています。