今回は33歳までホームページ制作未経験から３ヶ月で30万円の案件を頂くまでどんな勉強をしてきたかを書いてみます。
この記事を最後まで読んでいただければ、具体的に何をすれば仕事になるのかが、はっきりとわかるようになります。
私は2021年9月に思い切って務めていた会社を退職しこの道を選び学習してきました。ちなみに私を一言で言うと野球バカです。
そんな人間だと思いながら読んでみてください。
父がWeb制作のお仕事をやっていたことから魅力を感じてこの道を選んだのですが最初にHTML/CSSを見た時は絶望し悩みました。
ちなみに今回はこんな悩みを持つ人向けに書いています👇
・Webデザイナー、WEB制作に興味がある人
・興味があるけど学習の仕方がわからない
・スクールと独学で迷っている人
・学習に息詰まっている方
結論から言うと私はスクールに入らずに独学で学びました。
入ろうと考えていたスクールで少し問題があり返金騒動になっていて少し不安があったのでこの際、独学でやってしまおうと考えた次第です。
しかしいざやってみると中々学習の仕方がわからずひたすらググった経験がありました。
そしてそんな私でも本気になって学習してみたらなんとか形になり仕事を頂けるまでに成長することが出来ました。
少なくとも大きく道を逸れる事は無くなりますし、自分がこれから何をしていけば良いのかがはっきりするようになります。
まず始めるにも準備が必要です。
私が準備したものは全部で9点です。
全部が全部最初に必要というわけではないですがあると便利でした。
まとめるとこちらです。
・MacBook Pro
・マウス
・キーボード
・ワイドモニター
・USB/HDMI出力用ハブ
・マウスパッド
・机
・イス
・Google Nest Hub
未経験からWEBデザイナーを目指す為に必要なもの９つ
まず1つ目はMacBook Pro！！！
WEBデザイナーを目指す上で一番大事なパソコンですがMWP72J/A [シルバー] MacBook Pro Retinaディスプレイ 2000/13.3 Apple ノートパソコン 2020年5月発売モデルを購入しました。
当時何も分からなかったのでとにかくググって調べたら推奨するスペックが出てきました。それが
・CPU：インテルCore i5以上
・メモリ(RAM)：16GB以上
・ストレージ(ハードディスク)：256GB(SSD)以上
と書いてありました。
ちなみに「CPU」とはデータ処理能力のことでi5、i3など何種類かあるのですが数字が高いほど高性能になります。
PhotoshopやIllustratorを使うとかなり重たい作業になるためi5以上が望ましいです。
次に「メモリ」とはデータを一時的に記録するために使用するものです。
メモリには4、8、16、32GBと種類が複数あり数字が大きいほど性能が良くなります。
この数字が足りていないとメモリがいっぱいになり動作が遅くなったり、フリーズしたり、強制終了します。
メールやネットサーフィン程度なら最小の4GBで十分ですがWEBデザイナーであれば最低8GB、少し余裕を持って16GBにしておいた方が効率よく作業に集中できると思います。
「ストレージ」とはデータ（書類や写真など）を保存するために使用されます。
iPhone等スマートフォンを使用している方であればイメージつくかと思います。
128GB、256GB、512GB、1TBなどのサイズ設定がされています。
WEBのお仕事をするなら大きければ大きい方がいいのは想像つきますね。
しかし大きくすればするほど金額も上がってしまいます。
以上の情報をふまえて購入したMacBook Proのスペックはこんな感じです。
・CPU：インテルCore i5プロセッサ
・メモリ(RAM)：16GB
・ストレージ(ハードディスク)：512GB
今のところ問題なく作業できています。
そして購入してから気づいた良かった点ですが
・iPhoneユーザーは「AirDrop（エアドロップ）」ができる。
・トラックパットが使いやすい
・複数のデスクトップが作れる
iPhoneユーザーならお馴染みの「AirDrop（エアドロップ）」ができるので写真や動画だけでなく共有したい情報をパソコンに一瞬で送ることができるのでかなり使っています。
トラックパットはキーボードの下にあるマウスの変わりをするところですが指の本数まで感知してくれてスクロールや画面のスライド、ズームなど慣れるとすごく使いやすくこれもかなり使っています。
Macは複数のデスクトップが作成できてトラックパットでスライドする事で切るので、すぐに行き来もできてとても便利です。
気づくといつも10個くらい使っています。
気合を入れて新品を買いましたが口コミとかを読んでいると中古でも全然いいそうなのでぜひご検討してみてください。
2つ目がマウスです！
初めのうちはマウスは使用せずに勉強していたのですがトラックパットでは個人的にはクリックが押しづらかったのでマウスを購入することにしました。
購入したマウスはApple純正品 Magic Mouse 2 MLA02ZA/Aこちらになります。
このマウスはマウスの表面がMulti-Touchに対応しているので、トラックパットを使っているようにスワイプしたりスクロールもできます。
そして一度充電すると1日中使用しておりますが2ヶ月くらい充電しなくても使えました。
そしてスタイリッシュなデザインでかっこいいです。
3つ目がキーボードです！
キーボードも必要ないと言う人もおりますがマモルンは会社員時代に、右側に数字のキー付きを使用していたこともあり癖で右側にどうしても数字のキーかないとやりずらかったのでApple(アップル)純正 Magic Keyboard テンキー付き Bluetooth マジックキーボード (iMac/Mac Pro/MacBook/iPad/iPhone対応) 日本語(JIS) シルバー MQ052J/A MQ052JA を購入しました。
Bluetoothで繋げられますしこちらも一度充電してしまえば長持ちで4ヶ月使っておりますが購入時に一度充電しただけです。
4つ目がワイドモニターです！
LG モニター ディスプレイ 29WL500-B 29インチ/21:9 ウルトラワイド(2560×1080)/HDR/IPS 非光沢/FreeSync対応/HDMI×2/ブルーライト低減、フリッカーセーフ機能 こちらを使用しています。
WEBデザイナーをやっているとデザインを見ながらコーディング作業や調べ物しながら作業したり複数の画面を行き来します。
ワイドモニターがあった方が確実に作業効率は上がりますしストレスもなくなります。
そしてワイドモニターが個人的にはかなり使い勝手が良いです。今ではワイドモニターが無いと仕事にならないくらい大事なものです。
いつも左側にVscode、右側にAdobe XDみたいな感じで作業しております。
5つ目がUSB/HDMI出力用ハブです！
ここまでにご紹介させていただいたMacBook Proをワイドモニターに移すにはHDMIケーブルを経由するのですが今回ご紹介したMacBook ProにはHDMIケーブルの挿し口はありません。
そこで購入したのがMacbook Pro 13/15インチ用 USB type c マックブック ハブ Thunderbolt3 Type-C hub [ Thunderbolt3 Power Delivery(PD) パススルー 充電 100W 対応×1 / USB3.0 ×2 / HDMI 4K 変換 ポート/SD/microSD カードリーダー付 ] アルミ合金です。
これを使用することでHDMIケーブルを使用する事ができるようになります。
そしてUSBの挿し口も今回のMacBook Proにはなかったのでこちらの商品で解決しました。
もう必須ですね。
6つ目がマウスパッドです！
マウスパットを初めのうちは試供品でいただいた通常の正方形の物を使用していましたがAdobe XDやPhotoshop、Illustratorなど使用しているとマモルンの場合ははみ出してしまったり使いずらいことが多々ありました。
そこで色々探した時に ZOZOFO マウスパッド 大型 レザー調 デスクパッド PC パソコン 周辺機器 持ち運び便利 拡張 デスクマット おしゃれ カラフル 両面使用可能 マウスマット 大きい ゲーミング マウスパッド 無地に出会いました。
こちらのマウスパットは横に長く使いやすいです。
そして黒のレザー調でシンプルなデザインなので気に入ってます。
7つ目は机です！
机は北欧風 木目ブラウン L字型 コーナーパソコンデスク 書棚付き 机 ブラウン 幅124.8×奥行100 「つくえ ワークデスク PCデスク オフィスデスク ハイタイプ 木製 北欧 お洒落 pd001 」を購入しました。
こちらの机は左右に色々置ける場所が多かったのと正面のスペースがちょうどワイドモニターを置いても問題ない寸法でしたので購入いたしました。
右側にMacBook Proを置いて正面にワイドモニター、左側には本や書類を置いています。
右側のMacBookを開いた状態で置いているとトラックパットも使えるし、マウスも使える二刀流になります。
使ってみると良さがわかるかもしれません。
この金額（約3万円）でこの使い勝手はかなりオススメです。
私は右利きなのでこの机はベストですが左利きの方だともしかしたら使いづらいかもしれないので注意してくださいね。
8つ目はイスです！
イスはGTRacing（ ジーティーレーシング) ゲーミングチェア を購入しました。
理由はAKRacingのゲーミングチェアをCMで見て欲しいなと思ったのですが予算的に少しオーバーだったのですが類似品で少し安いのがGTRacingのゲーミングチェアでした。
そして口コミも良さそうでしたので購入を決めました。
４ヶ月使っている感想ですが、作業をしていると長時間座る事もありますが疲れにくいです。
そして肘置きはかなり使えます。肘置きがないイスだと肩が、かなり疲れますが全くです。
リクライニング、足置きもできるので休憩時は足を伸ばして寝ることも可能です。
そして色はブラックなので高級感もあり一気にオフィス感も出ます。
実際に座ってから購入できれば良かったのですが店舗販売はしていないのでそこが残念なところでした。
たまに置いてある施設があるようなのでお近くで見かけたら座って見てください。
9つ目はGoogle Nest Hubです！
Google グーグル スマートスピーカー Google Nest Hub MAX はあると便利です。
個人で仕事をしていると一日中、一人で作業しているので結構孤独です。
そんな時に便利なのがGoogle Nest Hubです。
話しかけると何か反応してくれたり調べ物をしてくれたりしてくれます。他には好きな音楽を流す事もできますしYouTubeも見れますし、radikoでラジオを聴く事もできます。
Spotifyを使用しているのですが有料会員にならないと好きな曲を自由に選択する事ができないのですがGoogle Nest HubでSpotifyを使うと好きな曲を自由に選択することが出来るようになります。
これは購入後に気がつきました。
他にはGoogleカレンダーと同期させ予定の確認をしたり、Googleフォトによってフォトフレームにもなるし、Googleマップで経路検索も出来るし、時計にもなりますし一家に一台あると非常に便利です。
こんな感じで右側の棚に置いております。
【学習方法に悩んでいる人必見】30代未経験から3ヶ月で30万円の案件を完了させた学習の流れ
結論から申し上げると自分は下記の学習をいたしました。
・HTML
・CSS
・Sass
・jQuery
・Adobe XD
・php
・WordPress
php、WordPressまで入れますと4ヶ月です。
それでは一つ一つお話ししていきます。
HTML/CSSを学習する
振り返るとすごく大事だったなと感じている事があるので先にお伝えしますが完璧に覚えるよりはこーやったらあーなるみたいに理屈を理解しておけばググればなんとかなるようになります。
まず私はPrpgateの携帯アプリをインストールし無料の範囲のところをやりました。
私は2周やる事でおおまかなHTMLタグやCSSのプロパティ、流れを把握する事が出来ました。
しかしこの時点では自分でコーディングをして作り出す事は出来ないですしまだまだ未知の領域でした。
私の場合は学習したことでこの先の不安がどんどん大きくなった事を思い出します。
しかし安心してください。そんな感じでもなんとかなりましたので。
とにかく次に進みましょう。
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を文字で管理する事が出来たりコードを書く量を減らす事が出来たりコーディングが効率よくなります。
基本だけでも覚えると全く違います。
これも私は本「Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ [ 平澤隆 ]」を使って勉強しました。
この本を購入して良かった点ですが
・白黒だけではなくカラーなので読みやすい
・Sassの基本、誕生経緯が丁寧に書かれている
・利用環境の整え方がわかりやすい
・基本と高度な使い方がはっきり分かれていて勉強しやすい
・現場で使える実践編がある
ここまで来れば流れはわかってきたと思うのでデザインカンプからコーディングをやってみましょう。
私が使ったサイトはこちらですCodestep。
このサイトは無料で模写コーディングやデザインカンプからのコーディングが練習出来るように準備されていて入門編、初級編、中級編、上級編、番外編、WordPressと充実しています。
そして色々調べるとXDからのデザインカンプが出来ないと仕事にならないみたいな情報を見つけたのでいざやってみることに。
いざAdobe XDのカンプをダウンロードしようと思ったらそもそものAdobe XDをダウンロードしないといけないということがわかりました。（本当に無知で情けない…）
そして色々調べてみるとWEBデザイン、WEB制作をフリーランスでやっていくのであればPhotoshopやIllustratorもあると良いとの事。
Adobe コンプリートプランがお得という事で取得いたしました。
準備は整ったのでいざカンプを見てみましたがカンプの操作の仕方が全くわからず、情報の取得の仕方がわからずつまづきました。
そこで私はYouTubeで色々検索しアキユキ/Web制作チャンネルというものに出逢いました。
アキユキさんはとにかく説明が丁寧でわかりやすく再生リストのAdobe XD講座を見ながら手を動かしてみました。
これでやっとデザインカンプからのコーディングに移ることが出来ました。
しかし入門編からコーディングをやってみたのですが中々手が動きません。私は答えのコードを丸写ししながら画面を見てどう動くのかを確認しながら作ってみたらなんとなくコツみたいなのを掴んできました。
そのやり方でCodestep。にあるコーディングを全てやってみました。
jQueryを学習する
その途中でjQuery（JavaScript)を使うものが出てきたのでこちらも本を使って勉強しました。
jQueryとはホームページで動きをつけたりする時に使われております。
・ハンバーガーメニュー
・スライダー
・ローディング画面など
私の場合は全部完璧に把握したというよりはやり方（型）を理解し、記述して後から目で見た時に解読出来るレベルで大丈夫です。
こちらも本「jQuery標準デザイン講座 「使える」知識が身につく！ [ 神田幸恵 ]」で学習しました。
この本を購入して良かった点ですが
・カラーページで読みやすい
・サンプルファイルによりソースコードが取得できる
・実際に現場で使いそうな内容が揃っている
・丁寧でわかりやすい
・難易度事にゾーンが分かれている
サンプルファイルのソースコードをパソコンに入れておけばコピー＆ペーストして少しいじれば実装できてしまうのでオススメの一冊だと思います。
そうやってコーディングしていくうちに最初は暗号に見えていたコードが日本語（これは大げさです）並に見ればすぐ意味がわかる状態になってくると思います。
実際の案件をやりました
ここまで学習を終えた時に何人かの知り合いに私がWeb制作、WEBデザイナーを目指して勉強している事を話ししました。
そしたら運よく1件新規のホームページのお仕事の話を頂きました。
自分の中ではまだまだ自信もなく不安でしたので受けるのか迷ったのですがせっかくのご縁だったのでここで逃したら次に繋がらないと思いお仕事をさせていただく事になりました。
しかしここで困ったのが今まではデザインカンプが完成されている状態からのコーディングでしたが今回は0から作り出すという事。
お客さまは色の指定と必要なページの指示はあったのですがデザインは私に全て任せてくださるとの事。
そして前職の営業時代を思い出しお客さまに、ホームページが必要な理由と目的、最終的に目指すゴールなどをヒアリングしデザインに入りました。
デザインに全く無知の私はまたアキユキ/Web制作チャンネルのWebデザイン講座に頼ることになります。
ここで一通り動画を見て学習し、お客さまと競合している他社のホームページを何社も見つけて何度も見て勉強してみました。
そしてホームページを見ることになるユーザー様の気持ちになって考え離脱しないで売上アップに繋がるホームページはどうしたら良いのだろうか？
こんな事を考えながらAdobe XDでデザインカンプを作成し、このデザインに至った経緯と理由をお客さまにお話し確認し、コーディングに入りました。
ここで補足ですがこの当時はなかったのですが2022年1月に現場で使える Webデザインアイデアレシピ [ 小林 マサユキ ]が発売になりました。
この本ではCSSで実際に現場で使える装飾のやり方がわかります。
以前から小林マサユキさんのTwitterを拝見していた事もあり今回購入して見ました。
購入して良かった点ですが
・カラーページで読みやすい
・サポートサイトがありソースコードが取得できる
・実際に現場で使いそうな内容が揃っている
・丁寧でわかりやすい
・デザインの種類が豊富
です。
この本の中にある背景・画像・写真装飾や見出しやテキストの装飾は他の案件で参考にさせて頂き使っております。
この本が一冊あるだけでWEBデザインの実装できる幅が格段にひろがりました。
こんな風にするにはどうやってCSSを書くのだろうと悩んでいましたが解説も丁寧に書いてあるのでよく理解することができました。
基礎がわかってきて案件をこなそうとしている人にとっては特にオススメの一冊だと思います。
写真の加工などPhotoshopを使わないといけないと思っていたのですが色の変化やサイズの変更などの簡単なものはAdobe XDで出来ることがわかり今回はそこで済ませてしまいました。
そしてコーディングが終わりお客さまから確認を頂くためにサーバー、ドメインを取得させていただきパスワードをつけて限定公開にし確認していただきました。
サーバーの会社もどこにして良いかわからなかったのでエックスサーバーを選びました。
選んだ理由は
・様々な契約期間と容量・転送量で柔軟にプランを選べる！
・サーバー稼働率99.99%以上で負荷にも強い安定した環境を提供！
・オールNVMe採用でサーバー速度は国内最速！
・WordPressのインストールがとても簡単！
・メール・電話サポートに対応しているので安心！
レンタルサーバーの定番と言っても過言では無いので利用者も多いです。
ここまでの流れが約3ヶ月でした。
最初は全くわからず苦悩していましたがここまで出来たことが不思議な感覚になるくらいなんとか形になりました。
HTMLで作ったサイトをWordPress化
一旦これで完了とさせて頂くところでしたがお客さまのと話をする中でHTMLで作成したホームページをWordPress化する練習をさせていただけるとの事。
今後WordPressも覚えた方がいいと聞いていたので実際にやらせて頂ける事になり本当にありがたい。
しかしWordPress化するにはphpが必要なことが判明しこれがまたやっかいで見ても全くわからない。
さらにWordPress管理画面も訳がわからない。
ここでまたアキユキ/Web制作チャンネルに頼ることになる。
たびたび登場するが決して回者ではなく本当に丁寧でわかりやすいので初心者の方には凄くオススメだと思います。
WordPressの使い方講座を片っぱしから見て手を動かし勉強しました。
それでも中々ループだとかカスタムフィールドだとかその他もろもろ理解できない。
そこでここでも本「［改訂版］WordPress 仕事の現場でサッと使える！ デザイン教科書［WordPress 5.x対応版］ [ 中島真洋＝著／ロクナナワークショップ＝監修 ]」を買ってみました。
この本を購入して良かった点ですが
・カラーページなので読みやすい
・サンプルファイルが入っている
・手順通り進めることでオリジナルテーマのサイトが作れるようになる
・関数やタグがその都度ピックアップされているのでわかりやすい
・プラグインを使った実践的な内容が書いてある
・カスタム投稿、フィールドが理解できた
本とYouTubeを並行する事で私の場合は格段に理解が深まりました。
本に補足的なかたちでYouTubeの情報を書き込むことで自分に落とし込んでいきました。
そーやってやっていくうちに1ヶ月ほどかかりましたがなんとかHTMLからWordPress化をする事ができました。
結構苦戦したので終わった時の達成感は凄かったです。
WordPressを一度覚えてしまうとこちらも色々とプラグインがありますのでお問い合わせフォームやぱんくずリストなど簡単に作成することが出来ました。
そしてループやカスタムフィールドを使うことで投稿、更新が簡単になりました。
私は動画ではWordPressのやり方が全く理解できずにいましたがこの本に出会ったおかげで今では自由に動かせるようになりました。
HTML&CSSを理解した方でWordPress化が中々うまくいかずに悩んでいる方にとってオススメの一冊だとマモルンは思います。
納品の仕方
・ファイル納品
・FTPツール
・WordPress
一番簡単な方法がファイル納品です。
方法としては
・納品するフォルダをzip形式にし、クライアントとやりとりしているツールで納品
・ギガファイル便でzipフォルダをアップロードしURLを共有する
こんな感じです。
ファイル納品だと修正時は直接ファイルにアクセスできないので再度zipにして送る手間があるのでそこは大変です。
サーバーをいじる必要はなくアップロードは先方にやっていただけるのでそこは楽する事ができます。
FTPツールを使う
そもそもFTP（File Transfer Protocol）ツールとはなんぞや？
って人のためにわかりやすく解説すると
ネットワーク上でファイル等の転送を行う事ができるツールです。
このツールを使うことによりファイルをサーバーとPCの間などでやりとりすることができるようになります。
マモルンは「File Zilla」を使っています。
これを使って具体的にどうやって納品をするのかというと
①先方からFTP情報（ホスト名、ユーザー名、パスワード）を教えてもらいます。
※紛失してしまった場合は先方よりサーバー会社に確認してもらう。
②FTPツール（例えばFile
