マモルンBlogに来ていただきありがとうございます。
今回は現役Webデザイナーでありながらオンラインスクール現役講師のマモルンが30代Webデザイン未経験から最短最速（約3ヶ月）で30万円の案件を稼ぐまでにした勉強方法をご紹介します。
この記事を最後まで読んでいただければ、具体的に何をすれば仕事になるのかが、はっきりとわかるようになります。
私はWebデザイン未経験ながら憧れを抱き何も勉強をしていない中、思い切って会社を退職しこの道を選び学習することになりました。
普通に考えてバカだったと思います。
そんな感じで思い切った私は全くの未経験からWeb制作、Webデザイナーに魅力を感じてこの道を選んだのですが最初にHTML/CSSを見た時は絶望し悩みました。
ですが安心してください。
全くの未経験でも順番通りにしっかり学習をしていけばなんとかなります。
はっきり言って自分が1番びっくりしてます。
こんな悩みを持つ人向けに書いています👇
・Webデザイナー、WEB制作に興味がある人
・興味があるけど学習の仕方がわからない
・スクールと独学で迷っている人
・学習に息詰まっている方
結論から申し上げると
・CSS
・Sass
・jQuery
・Adobe XD
・php
・WordPress
php、WordPressまで入れますと4ヶ月です。
を学習しました。
見慣れないと目を背けたくなりそうですが一つ一つお話ししていきますので最後まで頑張りましょう。
HTML/CSSを学習する
振り返るとすごく大事だったなと感じている事があるので先にお伝えしますが
完璧に100％覚える必要はありません！
完璧に覚えるよりはこーやったらあーなるみたいに理屈を理解しておけば最悪ググればなんとかなるようになります。
そこでまず私が取り組んだのがPrpgateの携帯アプリをインストールし無料の範囲のところをやりました。
私は2周やる事でおおまかなHTMLタグやCSSのプロパティ、そして1番大事な流れを把握することが出来ました。
しかしこの時点では自分自身でコーディングをしてホームページを作り出す事は出来ず、まだまだ未知の領域の真っ只中でした。
私の場合は学習したことでこの先の不安がどんどん大きくなった事を思い出します。
しかし安心してください。
そんな感じでも結論はなんとかなりましたので。
とにかく気を取り直して次に進みましょう。
Vscode（テキストエディタ）をカスタマイズする
色々調べる中でコーディングをする時に無料のVscodeを使うのがオススメだと知りパソコンにインストールしました。
最初は英語ばかりで難しいと思いますがググりながら進めました。
便利な拡張機能が沢山あるのでそれをひたすらインストールした方がいいです。
・Auto Rename Tag （タグの変更を簡単にできる）
・Auto Close Tag （HTML 文書でたくさん入力する「タグ」の入力作業が楽になる）
・Evillnspector （全角スペースを強調表示する）
・Japanese Language Pack for Visual Studio Code （日本語化する）
・Format HTML in PHP （PHP中のHTMLを整形する）
・Bracket Pair Colorizer （括弧記号を色付けする）
・Prettier – Code formatter （ソースコードを自動で整形する）
・Code Snippets （functions.php ファイルの編集・管理が簡単に行える）
・Highlight Matching Tag （HTMLの開始タグと対応する終了タグをわかりやすく表示してくれる）
・zenkaku （全角スペース・全角英数字をハイライトして見やすくする）
・Code Soell Checker （スペルチェックを指摘する）
・CSSTree validator （CSSの構文チェックを行ってくれる）
・HTML CSS Support （HTMLドキュメントに対するCSSのサポートを行う）
・htmltagwrap （開始タグと終止タグを同時に変更することが出来る）
・Live Server （簡易的なローカルサーバーを簡単に立ち上げることができる）
・indent-rainbow （インデントが色付きになる）
・Live Sass Compiler （Sassファイルを監視して自動でコンパイルする）
・PHP Intelephense （PHPの開発をする場合とても便利）
・Trailing Spaces （コードの中にある余計なスペースを表示する）
・vscode-icons （ファイルがアイコンつきで表示されぱっと見で理解することができる）
私がインストールしたのはこんな感じになります。
上記の拡張機能を使う事によりコードのエラーを教えてくれたり記述の補助機能や日本語対応になったり今後学習を進めていく上で非常に役に立ちました。
Vscodeを使ってコーディングしてみる
Vscodeをインストールし拡張機能を入れたらコーディングしてみましょう。
しかしHTMLとCSSを使ってコーディングするイメージがまったくわかりませんでした。
私は真っ先に参考書「1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]」を買ってみました。
この本を購入して良かった点ですが
・余白もしっかり取られていて文字だらけが苦手な人でも読みやすい
・口コミも良かった
・順番通り学習する事で1カラム、2カラム、3カラムのサイトが作れる
・タイル型のレイアウトも学べる
・GoogleマップやSNSの掲載のやり方も学べる
手順通りに一度ホームページを作成してみたらコーディングの流れが非常によくわかりました。
そして本の最大のメリットとは？
・都度書き込みもできる
・見返す時に大体ページの場所も覚えているので確認が早くできる
こんな利点がありました。
一応参考に私が使用した本のリンクを置いておきますね👇
それと並行してSass(SCSS)というCSSを効率良くかける言語も使用した方がいいと知りそちらもCSSと並行して学習しました。
こちらを使えるようになる事でcolorを文字で管理する事が出来たりCSSコードを書く量を減らす事が出来たりコーディングが効率よくなります。
基本だけでも覚えると全く違います。
これも私は本「Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ [ 平澤隆 ]」を使って勉強しました。
この本を購入して良かった点ですが
・Sassの基本、誕生経緯が丁寧に書かれている
・利用環境の整え方がわかりやすい
・基本と高度な使い方がはっきり分かれていて勉強しやすい
・現場で使える実践編がある
ここまで来ればホームページ制作の流れはわかってきたと思うのでデザインカンプからコーディングをやってみましょう。
これがめちゃくちゃ難しいんです。
ただこれも数をこなせばなんとかなります。
私が使ったサイトはこちらですCodestep。
このサイトのオススメ点は
・無料で模写コーディングやデザインカンプからのコーディングが練習出来る素材が準備されている
・入門編、初級編、中級編、上級編、番外編、WordPressと充実しています。
そして色々調べるとAdobe XDからのデザインカンプが出来ないと仕事にならないみたいな情報を見つけたのでいざやってみることに。
いざAdobe XDのカンプをダウンロードしようと思ったらそもそものAdobe XDをダウンロードしないといけないということがわかりました。（今考えると本当に無知で情けない…見切り発車すぎました。）
そして色々調べてみるとWEBデザイン、WEB制作をフリーランスでやっていくのであればPhotoshopやIllustratorもあると良いとの事。
AdobeのソフトがまとめてあるAdobe コンプリートプランがお得という事で取得いたしました。
準備は整ったのでいざカンプを見てみましたがAdobe XDの操作の仕方が全くわか利ませんでした。
情報の取得の仕方がわからない…
そこで私はYouTubeで色々検索しアキユキ/Web制作チャンネルに出会いました。
アキユキさんはとにかく説明がとてつもなく丁寧で初心者でもわかりやすい。
再生リストのAdobe XD講座を見ながら手を動かしてみました。
これでやっとデザインカンプからのコーディングに移る準備が出来ました。
やっと辿り着いたので作業に入ったら
「………………………………」
状態でした。
もう半泣き状態です。もうこうなったら必殺
カンニングです。
学生時代はご法度とされたカンニング行為が見事にハマりなんとなくコツみたいなのを掴んできました。
そのやり方でCodestep。にあるコーディングを全てやってみました。
jQueryを学習する
その途中でjQuery（JavaScript)を使うものが出てきたのでこちらも本を使って勉強しました。
jQueryとはホームページで動きをつけたりする時に使われております。
・スライダー
・ローディング画面など
私の場合は全部完璧に把握したというよりはやり方（型）を理解することに徹しました。
記述して後から目で見た時に解読出来るレベルです。
こちらも本「jQuery標準デザイン講座 「使える」知識が身につく！ [ 神田幸恵 ]」で学習しました。
・サンプルファイルによりソースコードが取得できる
・実際に現場で使いそうな内容が揃っている
・丁寧でわかりやすい
・難易度事にゾーンが分かれている
このように紆余曲折ありながらコーディングしていくうちに最初は暗号に見えていたコードがわかるように。
日本語（これは大げさです）並に見ればすぐ意味がわかる状態になってくると思います。
実際の案件をやりました
ここまで来たら実際の案件を探します。
私は知人や友人に学習初期の頃からWebデザイナーを目指している話はしていました。
再度今の現状を話しすると運よく新規のホームページのお仕事の話を頂きました。
この時に賛否両論あるかと思いますが先方には本当の実力をお話ししました。
ここで見栄を張ったり仕事が欲しくてできないことを出来るというとトラブルの原因になるので注意した方が良いかと思います。
ただ今回は最初の最初のお話なので今後は攻めてお仕事を獲得する場面も出てくると思うので場面場面での見極めが大事だと思います。
しかしここでお仕事を振ってもらったのは良かったのですが、今まではデザインカンプが完成されている状態からのコーディングでしたが今回は0から作り出すという事。
お客さまは色の指定と必要なページの指示はあったのですがデザインは私に全て任せてくださるとの事。
そして前職の営業時代を思い出しお客さまに、ホームページが必要な理由と目的、最終的に目指すゴールなどをヒアリングしデザインに入りました。
デザインに全く無知の私はまたアキユキ/Web制作チャンネルのWebデザイン講座に頼ることになります。
ここで一通り動画を見て学習し、お客さまと競合している他社のホームページを何社も見つけて何度も見て勉強してみました。
そしてホームページを見ることになるエンドユーザー様の気持ちになって考え離脱しないで売上アップに繋がるホームページはどうしたら良いのだろうか？
こんな事を考えながらAdobe XDでデザインカンプを作成し、このデザインに至った経緯と理由をお客さまにお話し確認し、コーディングに入りました。
ここで補足ですがこの当時はなかったのですが2022年1月に現場で使える Webデザインアイデアレシピ [ 小林 マサユキ ]が発売になりました。
この本ではCSSで実際に現場で使える装飾のやり方がわかります。
以前から小林マサユキさんのTwitterを拝見していた事もあり今回購入して見ました。
購入して良かった点ですが
・サポートサイトがありソースコードが取得できる
・実際に現場で使いそうな内容が揃っている
・丁寧でわかりやすい
・デザインの種類が豊富
写真の加工などPhotoshopを使わないといけないと思っていたのですが色の変化やサイズの変更などの簡単なものはAdobe XDで出来ることがわかり今回はそこで済ませてしまいました。
そしてコーディングが終わりお客さまから確認を頂くためにサーバー、ドメインを取得させていただきパスワードをつけて限定公開にし確認していただきました。
サーバーの会社もどこにして良いかわからなかったのでマモルンはエックスサーバーを選びました。
選んだ理由は
・様々な契約期間と容量・転送量で柔軟にプランを選べる！
・サーバー稼働率99.99%以上で負荷にも強い安定した環境を提供！
・オールNVMe採用でサーバー速度は国内最速！
・WordPressのインストールがとても簡単！
・メール・電話サポートに対応しているので安心！
レンタルサーバーの定番と言っても過言では無いので利用者も多いです。
候補の一つにしてみてください。
ここまでの流れが本気で毎日10時間学習し約3ヶ月でした。
最初は全くわからず苦悩していましたがここまで出来たことが不思議な感覚になるくらいなんとか形になりました。
納品方法に関してはこちらをご覧ください👇
【WEBデザイナーの納品方法を解説】重要な事なのに意外と理解していない
HTMLで作ったサイトをWordPress化
一旦これで完了とさせて頂くところでしたがお客さまのと話をする中でHTMLで作成したホームページをWordPress化する練習をさせていただけるとの事。
今後WordPressも覚えた方がいいと聞いていたので実際にやらせて頂ける事になり本当にありがたい。
しかしWordPress化するにはphpが必要なことが判明しこれがまたやっかいで見ても全くわからない。
さらにWordPress管理画面も訳がわからない。
ここでまたアキユキ/Web制作チャンネルに頼ることになる。
たびたび登場するが決して回者ではなく本当に丁寧でわかりやすいので初心者の方には凄くオススメだと思います。
WordPressの使い方講座を片っぱしから見て手を動かし勉強しました。
それでも中々ループだとかカスタムフィールドだとかその他もろもろ理解できない。
そこでここでも本「［改訂版］WordPress 仕事の現場でサッと使える！ デザイン教科書［WordPress 5.x対応版］ [ 中島真洋＝著／ロクナナワークショップ＝監修 ]」を買ってみました。
この本を購入して良かった点ですが
・サンプルファイルが入っている
・手順通り進めることでオリジナルテーマのサイトが作れるようになる
・関数やタグがその都度ピックアップされているのでわかりやすい
・プラグインを使った実践的な内容が書いてある
・カスタム投稿、フィールドが理解できた
本とYouTubeを並行する事で私の場合は格段に理解が深まりました。
本に補足的なかたちでYouTubeの情報を書き込むことで自分に落とし込んでいきました。
取り掛かってから1ヶ月ほどかかりましたがなんとかHTMLからWordPress化をする事ができました。
結構苦戦したので終わった時の達成感は凄かったです。
WordPressを一度覚えてしまうとこちらも色々とプラグインがありますのでお問い合わせフォームやぱんくずリストなど簡単に作成することが出来ました。
そしてループやカスタムフィールドを使うことで投稿、更新が簡単になりました。
マモルンは動画ではWordPressのやり方が全く理解できずにいましたがこの本に出会ったおかげで今では自由に動かせるようになりました。
HTML&CSSを理解した方でWordPress化が中々うまくいかずに悩んでいる方にとってオススメの一冊です。
まとめ
まとめると
・CSS
・Sass
・jQuery
・Adobe XD
・php
・WordPress
上記を一通り学習し1件の仕事になりました。
今回はお客さまが知り合いということもありすごくやりやすい案件でしたので本当に感謝しております。
私みたいな今まで野球ばかりやってきていた全くの未経験の30代でも本気で取り組むことが出来ればなんとか1件の仕事になりました。
今まで野球、仕事でばかりの生活で、特別すごい知識もなかったマモルンでも本気になって覚悟を決めて学習すればなんとかなりました。
決して楽ではありません。
ただ諦めずに学習し、乗り越えた先に明るい未来が待っていることを願って突き進みましょう。
今の現状に不満があり、何かを変えたいならなおさらです。
皆さんの参考になれば嬉しいです。
ここまで読んでいただき本当にありがとうございます。
顔は見えませんがお互い頑張っていきましょう。
