MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【新人デザイナー】初心者向けWebデザイン勉強法

【新人デザイナー】初心者向けWebデザイン勉強法

公開日:2021年09月14日
最終更新日:2021年09月14日
m.takai
デザイン
ホーム > 全記事一覧 > 制作 > デザイナー > デザイン > 【新人デザイナー】初心者向けWebデザイン勉強法
このエントリーをはてなブックマークに追加
【新人デザイナー】初心者向けWebデザイン勉強法
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

はじめまして!新人デザイナーのsakoと申します!

このたび2021年4月に新卒入社いたしました。

早いもので、入社してからもうすぐ半年。優しくも頼れる先輩方にたくさんサポートを頂きながら、なんとか毎日頑張っております。

そんな私が半年間で感じたこと、「こうすればよかった!」の経験談や、オススメの勉強法を、

新人の視点からお伝えできればと思います!

入社して感じたこと

私は学生時代にグラフィックデザインを中心に学んでおり、

独学のような形でIllustratorやPhotoshopの使い方は一通り習得していました。

ですが、がっつりWebを専門に学んできたというわけではなく…。

実際に入社して先輩方のお仕事を拝見して、

クオリティはもちろん効率の良さからくるスピードの速さに、ただただ「すごい!!」と打ちのめされるばかりでした…!

ですが、いつか先輩方のようにバリバリのデザイナーになりたい!

というわけで、ここが足りない!と感じた部分と、勉強法を書いていこうと思います!


初心者向けWebデザイン勉強法「インプット編」
デザインの引き出しが足りない!

まず初めに感じたことは、自分のデザインアイデアの引き出しの無さでした。

「この部分が寂しい…この部分を強調したい…」と思っても、どういうデザインをすればいいのかがわからない…!

絵を描くときに、知らない動物を描いてと言われてもイメージできないのと同じで、

いかに自分の中に知識・アイデアがないか痛感しました。

↑簡単に画像を作ってみました。

少しポップな雰囲気を意識して、吹き出しっぽい線や筆記体で動きを出したり、色をカラフルに使ってみたりしました。

しかし、求められるデザインはターゲットや要望によって異なります。

(例えば「可愛く」「大人っぽく」「ゴツく」「信頼感を出したい」などですね)

同じ情報でも、伝え方や、見る人に訴求したいイメージは違います。

要望に沿った幅広いデザインをするために、アイデアの引き出しを増やすことがとても重要ということです。

先輩方はこの「○○な雰囲気を出したいから、ここはこういう装飾をしよう」という引き出しがとても多く、見習うところばかりです…!

これを解決するためには…

本当に単純なのですが、とにかく見て吸収することに尽きます!

先輩方があんなにたくさんアイデアを持ってらっしゃるのは、経験ももちろんなのですが、日々情報収集を行なっているからです。

アイデアのヒントが詰まった素敵なギャラリーサイトはたくさんありますが、その中の一部をご紹介します。


https://www.webdesignclip.com/

【Web Design clip】

毎日更新されるので、毎日見る習慣をつけるのがおすすめです!

ポイントとしては、ただ見るだけではなく、

「ターゲットの年齢層が○○代ぐらいだから、文字はこのサイズなのかな」といった感じで、細かく分析しながら見るのがポイントです!

デザイン分析に関しては、それだけで記事が書けてしまいそうなので今回は割愛します。いつか詳しく解説したいです。

https://responsive-jp.com/

【Responsive Web Design JP】

現在、Webデザインはレスポンシブが基本だと思います。

PC向けに作った場合、同じデザインテイストを踏襲しながら、スマートフォン向けに再構築する必要が出てきます。

このサイトは、秀逸なレスポンシブデザインを並べて掲載してあるので「同じ情報をスマホではこうやってレイアウトするんだ!」という発見が多いサイトです!


分かったつもりになってない?基礎をしっかり学ぶ!

そんなの知ってるよ!と流してしまいがちな基礎の部分は、実は本当に大事だったりします。

プロの仕事を見ていると、「自分より遥かに効率よく」「自分が感覚で作ってしまう部分を、しっかり理論に基づいてデザインしている」ことがわかります。

デザイン理論やツールの使い方の基礎を改めて学ぶ際に役に立った書籍・動画などをシェアしようと思います。


書籍

https://www.amazon.co.jp/dp/4844365177/ref=cm_sw_em_r_mt_dp_VPM6F1GXPK02SP6E1DB9

【なるほどデザイン】

言わずと知れた有名本。

学生時代から知っていたのですが、入社してから力不足を痛感し、改めてしっかり読みました。

弊社には、年間10万円まで勉強本の費用などを負担してくれるスキルアップ制度があるため、この制度を利用して読ませていただきました!ありがとうございます!

同じ情報を伝える場合でも、ターゲットによってデザインの正解は変わるということや、

その他の基礎がとてもわかりやすく、たっぷり解説されています!

(個人的にはデザインの擬人化…とあたりが目から鱗でした。楽しい)


動画教材

https://www.udemy.com/share/102Clj3@oqldcTNe2GBqIudTkl-zyTK6jpBWGiqDwo8YTGTFEjJwM4uAUgokF_pURQtRDDBgRg==/

初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材

https://www.udemy.com/share/101O8l3@kysYbo4nPVTHl-Z-xrvawUZGOjBNm9svzJHwGL8Lrf7BTPzXNuIfpN2Mot9nwn7iQA==/

Photoshop CC マスターコース : 動画で徹底的に学ぶ! 確かな技術をマスターしよう!

新入社員研修として受講した動画教材の中で、

特にやってよかったと感じた2本です。

IllustratorとPhotoshop、独学でもある程度は使えるようになるものの

実は知らないところですごく非効率的な作業をしていたり、そもそも知らない機能があったり…という方が多いツールでもあると思います。

これらの動画は、0からのスタートの方も対象ではあるのですが、独学で勉強した方の学び直しの意味でもとても勉強になりました!


初心者向けWebデザイン勉強法「アウトプット編」

ここまで知識の吸収についてお伝えしてきましたが、

知識だけあっても、最終的には手を動かしてアウトプットしなければなりません。

ツールの使い方はわかってきたけど、いざWebデザインをするぞ!となると何が何だかわからない…

それらの法則を掴み、同時に感覚を身につける方法として、サイトトレースはとても有効に感じました。

これも研修で初めてやったのですが、繰り返すうちに少しずつわかってくる感覚が嬉しかったです!


解説

※ラフ・デザインともに、Adobe XDを使用しています。

XD上で再現できないデザインや、ページ内の魅力的なバナーは、Illustratorなどでトレースしてみると力がつくと思うのでそちらもおすすめです!

まずはサイトのキャプチャを撮り、アートボード上に貼り付けます。

https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=ja

↑私はこちらのGoogle拡張機能を使用しています!縦になが〜くサイトのスクショが撮れる便利な機能です!

このキャプチャを参考に、デザインを正確に模写していく練習方法です。

↑こんな感じです!


ポイント

何も考えずに写すのではなく、

「このフォントを使うと、こういう雰囲気になるんだ」「このサイトはコンテンツの余白が文字の倍あるんだ」「こんな写真の切り抜き方もあるのか」

といったことを考えながら行うと、とっても勉強になります!


終わりに

いかがでしたでしょうか?

めちゃくちゃ初歩ではありますが、同じような駆け出しデザイナーの皆様の参考に少しでもなれば嬉しいです。

弊社は成長しようとする姿勢をとても応援してくださる環境なので、

私も1日でも早く先輩方に追いつけるようなデザイナーになりたいと思います!

最後までご覧いただきありがとうございました!


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーが知っておくべきデザイン業界用語集【DTP】
デザイン
公開日: 2017年12月27日
最終更新日: 2017年12月27日
デザイナーが知っておくべきデザイン業界用語集【DTP】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
シンプルなデザインについて考えてみる
デザイン
Webデザイン
公開日: 2017年07月25日
最終更新日: 2022年01月17日
シンプルなデザインについて考えてみる
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
デザイン
Webデザイン
公開日: 2019年03月26日
最終更新日: 2022年01月17日
【Webデザイン検証.その1】ホームボタンってグローバルナビ に必要なの?
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
名刺をデザインする効果的なポイント!
デザイン
公開日: 2018年01月18日
最終更新日: 2018年01月18日
名刺をデザインする効果的なポイント!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
グリットデザインを使いこなそう!
デザイン
Webデザイン
公開日: 2018年08月10日
最終更新日: 2022年01月17日
グリットデザインを使いこなそう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーが知っておきたいデザインコンペ
デザイン
公開日: 2017年10月23日
最終更新日: 2017年10月23日
デザイナーが知っておきたいデザインコンペ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webデザインで取り入れたい!心理学を使ってユーザーを誘導する方法
デザイン
Webデザイン
公開日: 2017年01月18日
最終更新日: 2022年01月17日
Webデザインで取り入れたい!心理学を使ってユーザーを誘導する方法
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーのお仕事Q&A
デザイン
デザイナー
デザイン
公開日: 2017年11月11日
最終更新日: 2017年11月11日
デザイナーのお仕事Q&A
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
修正サクサク!校正記号を正しく覚えよう!
デザイン
公開日: 2019年04月29日
最終更新日: 2019年06月15日
修正サクサク!校正記号を正しく覚えよう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ロゴマークの基礎知識 その③
デザイン
ロゴ制作
公開日: 2017年09月21日
最終更新日: 2017年09月21日
ロゴマークの基礎知識 その③
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。