はじめまして！新人デザイナーのsakoと申します！
このたび2021年4月に新卒入社いたしました。
早いもので、入社してからもうすぐ半年。優しくも頼れる先輩方にたくさんサポートを頂きながら、なんとか毎日頑張っております。
そんな私が半年間で感じたこと、「こうすればよかった！」の経験談や、オススメの勉強法を、
新人の視点からお伝えできればと思います！
入社して感じたこと
私は学生時代にグラフィックデザインを中心に学んでおり、
独学のような形でIllustratorやPhotoshopの使い方は一通り習得していました。
ですが、がっつりWebを専門に学んできたというわけではなく…。
実際に入社して先輩方のお仕事を拝見して、
クオリティはもちろん効率の良さからくるスピードの速さに、ただただ「すごい！！」と打ちのめされるばかりでした…！
ですが、いつか先輩方のようにバリバリのデザイナーになりたい！
というわけで、ここが足りない！と感じた部分と、勉強法を書いていこうと思います！
初心者向けWebデザイン勉強法「インプット編」
デザインの引き出しが足りない！
まず初めに感じたことは、自分のデザインアイデアの引き出しの無さでした。
「この部分が寂しい…この部分を強調したい…」と思っても、どういうデザインをすればいいのかがわからない…！
絵を描くときに、知らない動物を描いてと言われてもイメージできないのと同じで、
いかに自分の中に知識・アイデアがないか痛感しました。
↑簡単に画像を作ってみました。
少しポップな雰囲気を意識して、吹き出しっぽい線や筆記体で動きを出したり、色をカラフルに使ってみたりしました。
しかし、求められるデザインはターゲットや要望によって異なります。
（例えば「可愛く」「大人っぽく」「ゴツく」「信頼感を出したい」などですね）
同じ情報でも、伝え方や、見る人に訴求したいイメージは違います。
要望に沿った幅広いデザインをするために、アイデアの引き出しを増やすことがとても重要ということです。
先輩方はこの「○○な雰囲気を出したいから、ここはこういう装飾をしよう」という引き出しがとても多く、見習うところばかりです…！
これを解決するためには…
本当に単純なのですが、とにかく見て吸収することに尽きます！
先輩方があんなにたくさんアイデアを持ってらっしゃるのは、経験ももちろんなのですが、日々情報収集を行なっているからです。
アイデアのヒントが詰まった素敵なギャラリーサイトはたくさんありますが、その中の一部をご紹介します。
https://www.webdesignclip.com/
【Web Design clip】
毎日更新されるので、毎日見る習慣をつけるのがおすすめです！
ポイントとしては、ただ見るだけではなく、
「ターゲットの年齢層が○○代ぐらいだから、文字はこのサイズなのかな」といった感じで、細かく分析しながら見るのがポイントです！
デザイン分析に関しては、それだけで記事が書けてしまいそうなので今回は割愛します。いつか詳しく解説したいです。
【Responsive Web Design JP】
現在、Webデザインはレスポンシブが基本だと思います。
PC向けに作った場合、同じデザインテイストを踏襲しながら、スマートフォン向けに再構築する必要が出てきます。
このサイトは、秀逸なレスポンシブデザインを並べて掲載してあるので「同じ情報をスマホではこうやってレイアウトするんだ！」という発見が多いサイトです！
分かったつもりになってない？基礎をしっかり学ぶ！
そんなの知ってるよ！と流してしまいがちな基礎の部分は、実は本当に大事だったりします。
プロの仕事を見ていると、「自分より遥かに効率よく」「自分が感覚で作ってしまう部分を、しっかり理論に基づいてデザインしている」ことがわかります。
デザイン理論やツールの使い方の基礎を改めて学ぶ際に役に立った書籍・動画などをシェアしようと思います。
書籍
【なるほどデザイン】
言わずと知れた有名本。
学生時代から知っていたのですが、入社してから力不足を痛感し、改めてしっかり読みました。
弊社には、年間10万円まで勉強本の費用などを負担してくれるスキルアップ制度があるため、この制度を利用して読ませていただきました！ありがとうございます！
同じ情報を伝える場合でも、ターゲットによってデザインの正解は変わるということや、
その他の基礎がとてもわかりやすく、たっぷり解説されています！
（個人的にはデザインの擬人化…とあたりが目から鱗でした。楽しい）
動画教材
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材】
【Photoshop CC マスターコース : 動画で徹底的に学ぶ！ 確かな技術をマスターしよう！】
新入社員研修として受講した動画教材の中で、
特にやってよかったと感じた2本です。
IllustratorとPhotoshop、独学でもある程度は使えるようになるものの
実は知らないところですごく非効率的な作業をしていたり、そもそも知らない機能があったり…という方が多いツールでもあると思います。
これらの動画は、0からのスタートの方も対象ではあるのですが、独学で勉強した方の学び直しの意味でもとても勉強になりました！
初心者向けWebデザイン勉強法「アウトプット編」
ここまで知識の吸収についてお伝えしてきましたが、
知識だけあっても、最終的には手を動かしてアウトプットしなければなりません。
ツールの使い方はわかってきたけど、いざWebデザインをするぞ！となると何が何だかわからない…
それらの法則を掴み、同時に感覚を身につける方法として、サイトトレースはとても有効に感じました。
これも研修で初めてやったのですが、繰り返すうちに少しずつわかってくる感覚が嬉しかったです！
解説
※ラフ・デザインともに、Adobe XDを使用しています。
XD上で再現できないデザインや、ページ内の魅力的なバナーは、Illustratorなどでトレースしてみると力がつくと思うのでそちらもおすすめです！
まずはサイトのキャプチャを撮り、アートボード上に貼り付けます。
↑私はこちらのGoogle拡張機能を使用しています！縦になが〜くサイトのスクショが撮れる便利な機能です！
このキャプチャを参考に、デザインを正確に模写していく練習方法です。
↑こんな感じです！
ポイント
何も考えずに写すのではなく、
「このフォントを使うと、こういう雰囲気になるんだ」「このサイトはコンテンツの余白が文字の倍あるんだ」「こんな写真の切り抜き方もあるのか」
といったことを考えながら行うと、とっても勉強になります！
終わりに
いかがでしたでしょうか？
めちゃくちゃ初歩ではありますが、同じような駆け出しデザイナーの皆様の参考に少しでもなれば嬉しいです。
弊社は成長しようとする姿勢をとても応援してくださる環境なので、
私も1日でも早く先輩方に追いつけるようなデザイナーになりたいと思います！
最後までご覧いただきありがとうございました！
