こんにちは、ノウルです🕊️
▶︎▷詳しいプロフィールはコチラ
今日は私がWebデザイナーになった
具体的な勉強法の全てをお伝えしちゃるで〜！
これを読んどるあなたは、
「Webデザインやってみたいけど、
どっから始めたらええんか分からん…」
って思ったことがある人やんね。
実はな、私も全く同じやったんよ。
パソコンの前に座って、
SNSとかYouTube開いたり
Google先生に
「デザイン 勉強法」って聞いてみたり。
けど出てくる情報が多すぎて、
結局何から手つけたらええんか分からんのよな。
正直、これまでに大体の勉強法は試してきて、
何回も「やっぱ私には向いとらんかも…」
って諦めかけた。
やけど、ちょっとずつやり方を見つけて
小さな成功を積み重ねていったら、
気づいたら”好き”で満たされとったんよ！
この記事では
うちが失敗だらけやった独学の道のり
をぜーんぶ話すけん、
最後まで読んだら
「あ、私にもできるかも」
って思えるはずやで！
さっきも言ったけど、
わたしも最初はあなたと同じで
“何から始めたらええんか全然わからん！”
ってとこから始まったんよ。
デザイン勉強したいけど、
どんな順番でやればいいんか…
頭の中は「？？？」だらけ。
しかもド田舎住みの私の周りには
Webデザイナーなんてキラキラした職業の人
おらんかったしな笑
「ほんまに私でもなれるんかな…？」って、
不安しかなかったんよ。
「このままじゃ何も変わらん。
ちゃんと学んでみよ！」
そう決めた瞬間から、
考えてばっかりやった私が
ちゃんと行動を起こすようになって、
少しずつ景色が変わりはじめたんよな。
もちろん、最初は失敗ばっかり。
- 模写しても全然うまくできん
- ソフトの使い方でつまづいて嫌になる
- 自分のデザインに全然自信が持てん
なんなら私の独学は
なぜかHTML /CSSから入ってしまって、
案件に必要な条件なんにも満たせてなかった笑
「やっぱり私には向いてないんかなぁ…」って、
本気で何回も思ったんよ。
でもここでやって良かったのは
「諦めずに行動し続けたこと」。
向いてないんかなって思いつつも、
どうしても夢が諦めきれんくて、
結局行動せずにはいられんくて、
毎日PC開いては情報集めたり、
SNSで自称フリーランスと語る人と電話して
怪しい商売に騙されそうになったり。笑
そんなとき、ある情報発信者さんに出会ってな。
｢また自称フリーランスの怪しい人かな｣
って思いながら電話して色々話したんやけど、
「この人優しすぎんか？」ってなったんよ笑
というのも、約３時間くらいの電話で、
自分がどういうポジションにおって、
今からどう行動していかないかんか
をすごく丁寧に教えてくれて。
そこから一気に勉強が進み始めたんやわ。
最初に作ったバナーができたとき、
家の中で一人で叫んだよ。
「やった！できたやん！」って。
夫とか親にも自慢しまくったし笑
いろんな人に褒めてもらえて、
何よりたった１つやけど
自分が納得いく作品を作れた
ってことが嬉しくて。
その小さな成功体験が、
めちゃめちゃ大きな自信になったんやな。
SNSに投稿して
「かわいい！」って反応もらえたり、
自分の頭の中で思い描いていたサイトが
形になったり。
「楽しい！もっとやりたい！」
って気持ちがどんどん積み重なっていったんよ。
で、教えてもらった通りの順番で勉強しながら
アウトプットもしていって、
どんどんできることが増えていった。
試行錯誤しながら
教えてもらいながらやってみて、
成功する勉強法がだんだん固まってきた。
たとえば…
「模写 → 自主制作 → フィードバック」
この流れを繰り返すだけで、
スキルが着実に伸びていったんよな。
ここまで読んでくれたあなたも、
きっと一歩踏み出せるはずやで。
失敗してもかまん。
むしろ失敗したほうが身につくけん。
この続きでは
「独学で挫折しやすいポイント」 や
「成長を早めるロードマップ」
｢実際にやって良かった勉強法｣
などを具体的にまとめとるけん、
ぜひチェックしてみてな✨
目次
- 【Webデザイン独学法】
- 1️⃣ 独学の難しさ
- 2️⃣ どうなりたいかを考える
- 3️⃣ 心構え
- 4️⃣ 勉強法（概要）
- 5️⃣ 具体的な勉強法
- デザイン基礎
- Canva / Figma
- WIX
- WordPress / HTML・CSSなどのコーディング
【Webデザイン独学法】
1️⃣ 独学の難しさ
「何から始めたらええかわからん…」
「教材いっぱいありすぎて迷う…」
わたしも最初は同じやった。
独学は自由やけど、そのぶん
・このままでWebデザイナーなれるんかな？
・ちゃんと進めとるかな？
って迷子になりやすいんよね。
でも大丈夫。
この続き読んで、迷子から抜け出そ！
2️⃣ どうなりたいかを考える
まずは「なりたい姿」をはっきりさせよ。
- 1年後、どんなデザインが作れるように
なりたい？ - どんな働き方をしたい？
ここを考えるだけで、
「何を勉強すべきか」が見えてくるんやわ。
例えば
「副業で5万くら稼ぎたいかな」
「本業としてWebデザイナーになって
生活していきたい」
「完全在宅で仕事したい」
この３つでも学ぶべきことは
全然変わってくるで。
私はとりあえず
働いてた塾が経営危機で潰れそうやったし、
お母さんの持病の介護とか
私のHSP気質もあって、
完全在宅で本業として
Webデザイナーを目指しとった
けん、その勉強の流れで話すな。
3️⃣ 心構え
✅ アウトプット優先
読むだけじゃ意味ない。
ちゃんと手を動かして作って、
SNSやノートに残そ。
SNSに制作物を上げるときは
こだわりポイントや学びポイントも
一緒に載せるんが大事やで。
✅ 完璧を目指さん
最初は真似から。
真似の中で「型」が学べるんよ。
で、少しずつ自分なりにアレンジしたり、
複数のデザインを取り入れながら
真似することで、
自分の作品になっていくんやで。
最初から
オリジナルで100％を目指すと挫折しやすくなるけん、マッジで注意。
✅ コツコツ続ける
真面目なあなたは
「毎日⚪︎時間は死ぬ気で勉強しないと
Webデザイナーになれない」
っていう情報発信者さんの言葉を信じて、
毎日無理やり進めようとしとるかもしれんけど、それじゃあダメ。
毎日やなくてもええし、
疲れたときはリフレッシュするの大事。
ただ諦めない粘り強さだけを大事にしていこ！
小さい積み重ねが一番効くけんね。
4️⃣ 勉強法（概要）
ざっくりの流れはこんな感じ👇
- デザイン基礎（配色・フォント・レイアウト）
- Canva / Figma
- WIX /WordPress / HTML・CSS
などのコーディング - Photoshop /Illustrator
- ポートフォリオ制作
- 案件に挑戦
👉 具体的に「どのツールで何をすればいいか」は、次で詳しく紹介しとるよ！
5️⃣ 具体的な勉強法
デザイン基礎
デザイン基礎っていうんは
・レイアウトの基本
（余白・整列・近接・反復）
・配色
（色相・彩度・トーン・配色ルール）
・タイポグラフィ
（フォントの選び方・字間・行間）
・視線の流れ・情報の優先順位
（Z型・F型・アイキャッチ）
・デザインの４原則
（ノンデザイナーズ・デザインブックで
有名なやつ）
この辺は「理論」やけど、
必ずアウトプット（真似・実践）とセット
で吸収するんが大事やで！
デザイン基礎を押さえとけば
センスなくても売れるデザイン
が作れるようになれるけん、超大事！！！！
デザインの基礎はだいたい
ネットの情報と
自分の好きなデザイン本で完結したかな。
おすすめの本2冊おしえるけん、見てみて👇
『ノンデザイナーズ・デザインブック』1998年の第1版刊行から 20年以上ずっと読まれ続けている デザイン 基本書の 超定番。book.mynavi.jp
なるほどデザイン「デザイン＝ 楽しい」を実感できる！ デザイナーのあたまの中を豊富なビジュアルでひも解くbooks.mdn.co.jp
Canva / Figma
1.真似・模写（PinterestやInstagramから）
まずはSNSやPinterestにあがってる
「これいいな」ってバナーを
模写するとこから始めよ！
よかったら私のInstagramやTiktokで
バナー制作の方法あげてるから見てみてな👇
InstagramCreate an account or log in to Instagram – Share what you’rewww.instagram.com
2.自主制作してフィードバックもらう
自分の作品が出たら、
かならず客観的な目線で
アドバイスをもらうこと。
できればWebデザイナーから
プロの視点で見てもらった方がええで。
自主制作のターゲットや目的をまとめた
要件定義書も一緒に送って添削してもらえば、
もっと具体性の高いアドバイスがあげられる！
要件定義書についてはこの記事を読んでな👇
このフィードバックを恥ずかしがったり
怠ったりする人は、
残念ながらクライアントから求められる
Webデザイナーにはなれんのよ。
自分よがりなデザインでは商品は売れんし、
そもそも実案件やって
修正ばっかりなんが当たり前な世界やけん、
見てもらう&修正してもらう経験は超大事やで！
ただ、SNSに自分の作品あげて
「アドバイスください！」って言うだけ
にするのはあんまりオススメせん。
作品見てアドバイスするんって時間かかるけん、自分の制作に忙しいWebデザイナーは
わざわざ教え子でもない人に
アドバイスせんのよね。
私の公式LINEでは送ってくれた作品を
丁寧に１つずつ添削しよるけん、
良かったら送ってな！
実際の添削と教え子ちゃんたちのレビュー
はこんな感じ👇
ここから添削申し込めるよ👇
WIX
1.LP /HPを真似して作ってみる
LP（ランディングページ）は
１枚だけで完結するページのこと。
具体的には通販のページとかかな！
「サイトつくった！」って成功体験が
めっちゃ自信になるんよ。
WIXやったらコードもいらんし、
直感で作れるからマジでおすすめ。
まずはHP（ホームページ）より簡単なLP
を模写してみると達成感があるから
学習が続けやすいで！
真似するLPを見つけるならこのサイトがおすすめ👇
LPデザインに参考になるランディングページ集｜LP advance【LP掲載数：2289】心にグッとくるLP制作を！LP advanceは、LP制作・Web広告に参考になるLPデザインリンsite-advance.info
LP作り終わったらHPも挑戦してみてな！👇
Wixで作られたおしゃれなホームページ参考事例15選国内の Wix ユーザーが作成した、デザインと機能に優れた Web サイト事例 15 選をご紹介させていただきます。これかja.wix.com
2.自主制作
まずはChatGPTにお題出してもらって、
自分なりに模写で学んだことを活かしながら
LP1個作ってみよ！
LPも作り終わったら
必ずフィードバックもらうこと。
ここまで読んでくれとるあなたなら、
もうフィードバックの大事さは
わかってくれとるよね。
具体的なLPの自主制作の仕方は
今後noteに載せていくけん待っとってな！
3.ポートフォリオサイトを完成させる
ポートフォリオサイトも
そんな凝ったデザインやなくていいけん、
下のサイトのどれか構成を真似して作ってみて！👇
イケてるWebデザインで作られたポートフォリオサイト20選まとめ | マイナビクリエイターイケてるWebデザインで作られたポートフォリオサイトを20選にまとめました。ポートフォリオサイトは、転職において、それ自体mynavi-creator.jp
近いうちに
・ポートフォリオサイトの作り方
・WIXを使ったサイト制作について
の記事も上げるのでお楽しみに♡
Photoshop/ Illustrator
WordPress / HTML・CSSなどのコーディング
1.実戦型の本で学ぶ
これらを勉強するには実践型の本がおすすめ。
初心者でもサイト制作の方法が０からわかる✨
YouTubeとかでもええんやけど、
サイト制作の最初から最後まで
を教えてくれる動画ってなかなかないんよな。
おすすめの本はこちら👇
これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 | 翔泳社Webサイト制作をこれから学ぶ人へ送る“1冊目”に最適の入門書！【学びをサポートする4大特典つき】 本書は手を動かしてWwww.shoeisha.co.jp
1冊ですべて身につくWordPress入門講座 | SBクリエイティブ読者の圧倒的な支持！シリーズ累計35万部！ 全国の書店員がオススメする本 第1位やITエンジニアがおすすめするwww.sbcr.jp
2.自分のポートフォリオをコツコツ作っていく
サイトの自主制作に関しても
ChatGPTにお題出してもらって
練習するんが良きかな！
フィードバックもらうんも忘れずに。
Photoshop /Illustrator
1.本/SNSの知識を実践しながら学ぶ
フォトショとイラレも本がおすすめ！
私的には下の２つの本が
わかりやすくて、すぐ実践できる内容
やったから良かった！
SNSでもこの２つの知識は
よく投稿されているから、
気になる投稿があればすぐ試す。
それが難しければスクショか保存して
あとから見返せるようにしとく！
案件取ろうと思ったらかなりの確率で
フォトショとイラレは入ってくるから、
Canva /Figmaだけで満足せずに
学んでおくと幅が広がるよ！
6️⃣ わたしが実際にやった流れ
独学の最初は
HTML /CSSから入ってしまった私やけど、
正しい順番を教えてもらってからは
こんな感じで進めて成功したよ👇
- 1か月目：デザイン基礎＋Canva /Figma模写＋自主制作/フィードバック
- 2か月目：WIXで簡単なLP模写＋自主制作＋フィードバック
- 3か月目：WIXでポートフォリオサイト制作＋ホームページ模写＋フィードバック
- 4か月目：HTML/CSS本 →WordPress本
- 5か月目：Photoshop /Illustrator、
案件想定で
サイト自主制作＆SNS投稿
7️⃣いろんな遠回りを経験したから
いろんな勉強方法を試して
遠回りしてきたわけやけど、
そんな思いをあなたにはさせたくない！
そこで今回、
私が実際にやった独学の流れをまとめた
”Webデザイン独学ロードマップPDF”
を作ったんよ✨
これ見れば
「どんな順番で学んだらええん？」
「ツールは何から触ればええん？」
「真似したらええって聞くけど、
どこを見たらええん？」
こんな悩みを持っとる人に、
めっちゃ役立つはず。
「これさえ見たら、迷子にならん！」
って内容にしとるし、
やるべきことをチェックリストにまとめて
わかりやすくしとるけん、
ダウンロードしてぜひ活用してな〜！
📄 PDFロードマップ（図解付き）
ノウル ┊︎ 韓国Webデザイナー lit.linkWebデザインガチ初心者向けの発信、スクールなしでWebデザイナーになる方法を0から教えとるよ😉、One link tolit.link
コメント