Web制作って独学でもスキル習得できます。
スクールの学費に10万円以上のお金をいきなり使うのもなぁ
まだ自分ができるかも想像つかないし
とりあえずやってみたい、そう思ったらまず独学です。
ただ、スクール行けば
「カリキュラムがある」「講師がいる」「仲間ができる」
があるから流れに沿って勉強すればいいし、迷ったら人に聞けば良いわけです。
でも独学は自分でカリキュラムを考えて、自分で卒業制作物を決めて作りきって、その後の動きも考えないといけない。
訳もわからず０からやみくもに勉強するには効率が悪い。
僕はテックアカデミー（オンラインプログラミングスクール）、デジハリStudio（通学制Webデザインスクール）に行って、
コーディング、WordPress、Webデザイン、UI/UX、Webディレクション
などのWeb制作に関わるスキルを一通り学習してオリジナルデザインのWebサイトを作りました。
その経験を元に
独学だったらこの流れで勉強すればいい
というロードマップを作ってみよう、と考えました。
Web制作スキルを独学で０から身につけて副業案件受注するロードマップ
Webサイトを０から制作するロードマップは以下の流れでスキルを習得していきます。
- 企画スキル →Webサイトの目的とターゲットを決める
- 設計スキル →ページ構成（サイトマップ）とレイアウト設計図（ワイヤーフレーム）を作る
- デザインスキル →Webサイトのデザインを制作する
- コーディングスキル →完成デザイン通りにブラウザ表示させる
- サーバーの知識 →「サーバー」にコーディングデータをアップしてインターネットから見れるようにする
検索エンジンで「Web制作 独学」と検索するとよく稼げるスキルと紹介されているのは、
- コーディングスキル →Webサイトをデザイン通りにブラウザで表示できるようにする
だけです。
このコーディングスキルがあれば副業可能。
とりあえずコーディングだけできればいいよ、という人はコーディングのところだけ読んでください。
でもですよ、Web制作の一通りの流れ知っておいた方がいいと思いませんか？
Web制作ってコーディング案件だけ受注するとしても、その前後で何をしているか分かっているのといないのでは発注者側の信頼も変わるし、自分が何をすべきかも明確になります。
なので、一通りこの記事では書いていきます！
Web制作独学のメリットデメリットを補足します
この記事内容は「独学」のメリットデメリットを補足するために作りました。
| 独学メリット | 独学デメリット |
|
①費用が安価ですむ
②自分のペースで勉強でき、自分が興味ある分野を集中して学習できる |
①自分でカリキュラムを作ってゴールを決めなければならない ②分からない時に質問したり相談できる相手がいない ③期限を決めないとダラダラ学習し続けることになる ④仲間ができない |
この記事で補足する内容
デメリット①の「自分でカリキュラムを作ってゴールを決めなければならない」を解消するために、この記事で「カリキュラム」概要を作ってみました。
メリット②の「自分のペースで勉強でき、自分が興味ある分野を集中して学習できる」について、「デザイン」「コーディング」だけでも学習できる内容にしました。
０からWeb制作できるスキルを身につける方法から「デザイン」「コーディング」を学習する部分を分けて説明するのでそこだけ見ればいいという内容にしています。
もちろんWeb制作全体像が分かるようにもしてます。
- 「０からWeb制作」＝「企画＋設計＋デザイン制作＋コーディング＋サーバーアップロード」
独学は、カリキュラムとゴールを自分で作らないといけないのが迷子になるポイント。
なのでこの記事でざっくり流れを書いていきます。
次から本題、いきましょう！
「企画」で目的とターゲットを明確にする
最初に、何のためにWebサイトを作るのか、誰のためのWebサイトなのか、誰に見てもらってどう行動してほしいのか、を整理します。この段階を「企画」と言います。この段階をきちんと整理することで目的に合ったWebサイトを制作することができます。
Webサイトは「何かを売りたい、問い合わせが欲しい、知ってもらいたい」などの目的を叶えるための手段の一つです。Webという特性を生かして誰に何を伝えてどう行動して欲しいのか、を考えるとコンテンツは何があったらいいのか、どんなデザインが効果的なのか、どんなレイアウトが見やすいのか、が見えてきます。
「企画」の流れ
企画はざっくり以下の流れで考えます。
- ①Webサイトの目的と目標を決める
- ②自分の特徴を洗い出す（自分を知る）
- ③Webサイトを見てもらいたい人をはっきりさせる（相手を知る）
- ④競合分析をする（他を知る）
- ⑤ポイントを整理してサイト概要（コンテンツ、デザイン）を決める
①Webサイトの目的と目標を決める
目的は、「Webサイトで実現したいことは何か」
目標は、「Webサイトで達成したい数字は何か」→KGI、KPIという指標をつかう
②自分の特徴を洗い出す（自分を知る）
自己分析をするということ。強み弱みを整理します。
③Webサイトを見てもらいたい人をはっきりさせる（相手を知る）
サイトを見る人になりきってみてどんなコンテンツが必要か、デザインはどうしたらいいか、を考える土台にします。以下のような手法を使ったりします。
ペルソナ →具体的な人物像
カスタマージャーニーマップ →ユーザーの行動を明確に可視化する方法
ストーリーボード→漫画のような絵コンテを使ってWebサイトの利用シーンやユーザーの感情などを洗い出す方法
④競合分析をする（他を知る）
見る人が自分のWebサイトを見てくれるためには他の似たようなサービス・商品を提供しているサイトには無いアピールをしないといけません。他のサイトの良いところ、分かりにくいところ、書いていないところを考えるということ。
⑤ポイントを整理してサイト概要（コンテンツ、デザイン）を決める
誰に何を伝えてどう行動して欲しいのか、結果自分はどうなったらハッピーなのか
Webサイトを見る人はどんな人で何に悩んでいるのか
他の競合サイトがアピールしているポイントは？
自分、サイトを見る人（相手）、競合の３つを整理しWebサイトのポイントをまとめてみます。
そのポイントから
コンテンツ内容の洗い出し（最新ニュース、取扱商品、サービス、採用情報、会社情報・・・）
見本にしたいWebサイト
デザインの方向性（和風、格調高い雰囲気、信頼感、インパクト、ナチュラル、先進的、キッズ向け、女性向け・・・）
色（ベースカラー、コンセプトカラー、アクセントカラー）
フォント
必要なパーツ、図とかイラスト
を固めていきます。
「企画」はここでは説明不足なので自分の卒業制作の事例なども含めてまた別の記事で深堀りして書いてみます。
「企画」の独学方法
ここは本で独学できます。
Webデザインの基本
ノンデザイナーでもわかるUX＋理論で作るWebデザイン
Webディレクションの新標準ルール
「設計」でサイトマップ、ワイヤーフレームを作る
Webサイトのページ数とページ同士のつながりを明確にしたり（ページ構成を明確にする）、ページごとのレイアウトを決めてどんなコンテンツを入れるか（レイアウト設計図）をはっきりさせます。
この段階を「設計」といいます。
「設計」の流れ
設計は以下２つの工程がメインです。
- ①サイトマップ作成
- ②ワイヤーフレーム作成
①サイトマップ作成
サイトマップとは、Webサイトのページ構成を図で示したものです。
上記のような図です。「企画」の最後で洗い出したコンテンツ内容をグルーピングして階層化します。
どのコンテンツをどのページの配下に置くか、が見てすぐに分かります。
例えば
トップページ：https://yuzuskill.com/
会社概要ページ：https://yuzuskill.com/company/
企業理念ページ：https://yuzuskill.com/company/philosophy
となります。階層は深すぎると見る人が迷うので3階層くらいまでを目安にした方がいいです。
②ワイヤーフレーム作成
ワイヤーフレームとは、簡単にいうとレイアウト設計図です。「ワイヤー」とか略したりします。
上記のような設計図です。
そのページに必要なコンテンツをどういうレイアウトで配置するのか、がわかればお客さんとも情報共有できるしページ数が多かったら全てのページのデザインを共有するのは難しいのでワイヤーフレームで共有して進めていく、ということ。
「設計」の独学方法
ググれば（検索すれば）独学可能。
サイトマップは、
サイトマップ（構成図）をエクセルで簡単に作成する方法【テンプレート付き】 | Web幹事
の記事が作成方法としては分かりやすいです。
ワイヤーフレームは、
ワイヤーフレームの作り方完全ガイド【サンプル付き】 | Web幹事
がワイヤーフレーム作成方法を理解するのに分かりやすいです。
「設計」で使用するツール
サイトマップとワイヤーフレームを制作するためのツールは色々あって
エクセル、パワーポイント、Cacoo、Photoshop、AdobeXD
と自分は使ってきました。
・デジハリLIGでは特に指定なしだったのでパワーポイントで作りました。
・実案件ではAdobeXDで作りました。（一度Photoshopで作ってみたけれどAdobeXDの方が簡単）
自分が確認するためだけなら「手書き」でOK。ページ数が少なかったりレイアウトが複雑でなければ「エクセルまたはパワーポイント」でいいと思います。誰でも修正しやすいですしね。
※Cacooは個人的には使いづらい感じ。クラウドサービスなのでURLを伝えればデータを共有できるメリットありですが、無料版だとシート数制限があったりするので微妙。Cacoo有料版にするんだったら下で説明するAdobeXDスタータープラン（無料）でいいかな。
オススメはAdobeXD
レイアウトが多少複雑だったり、コンテンツが多かったり、写真画像をちょっと埋め込んでみたり、ページ数が多ければ「AdobeXD」がいいです。photoshopを使っていたらなおさら操作性は同じなので使いやすいしphotoshopより簡単に使えます。「AdobeXD」についてはまだAdobe XD使ってないの？はじめての人もこれを読めばすぐに使えるAdobe XDのトリセツ：LIGブログに無料の「AdobeXDスタータープラン」を使ってワイヤーフレームを作る方法について書かれています。
この記事内の「便利な使い方：ホーム画面をサイトマップにする」というところで、サイトマップも作成して各ワイヤーフレームへのリンクを設定できるやり方も書かれてます。これは便利！
利用する際にはAdobe Creative Cloudのアカウントの作成が必要ですが、無料版として「期間」の縛りがなく、制作で必要な機能は全て利用可能。以下制限がありますが、個人で使う分には問題なし。
・ クラウドストレージが2GB（有料プランでは100GB）
「デザイン」を目的に合わせて制作する
企画で「サイト概要（コンテンツ、デザイン）」と設計の「ワイヤーフレーム」が作れたら次はデザイン制作です。デザインだけまずやってみよう、という人はここだけ見てください。
「デザイン制作」の流れ
- お客様からサイトの目的をヒアリングしてイメージに合うWebサイトを確認する
- 目的に合ったデザイン案（ラフデザイン）をワイヤーフレームのレイアウトで作っていく
- デザイン案（ラフデザイン）からいいのを選んでデザインカンプにする
がデザイン制作の流れです。上級者になるとすぐにデザイン制作に取り掛かれるかもですが、初心者はデザイン案（ラフデザイン）をいくつか作って考えます。制作会社の人と話すとお客さんに複数案だすのではなく一つのデザインをベースに詳細詰めていく、ということを言ってました。いくつも作るのは時間と労力がかかりますしね。なので最初のうち案件をとるときはデザイン案をいくつかだすと差別化になります（他の制作会社や個人製作者は複数案出さないから）。大変だけれども頑張るときも必要です。
デザインカンプとは
デザインカンプとは、簡単に説明すると「完成イメージ」のことです。日本語では「カンプ」と呼んでいますが、これは英語では「包括的レイアウト」という意味の「Comprehensive Layout」を略した呼び方です。つまり、すべての要素がそろった状態の最終的な見本がデザインカンプです。
引用：くりたま.jp
「デザイン制作」の独学方法
以下の流れで進めるのがいいかと思います。
- ①見本通りにPhotoshopで制作できるようにする
- ②デザイン理論を学習する
- ③色々なWebサイトを模写する
- ④オリジナルデザインのWebサイトを作ってみる
- ⑤Illustraotorを使えるようになってみる
まず見本通りに作ってみる。スクールではPhotoshop基礎講座（写真加工の方法とか文字の書き方とかを地味に練習する）もありますが、見本デザイン通りにPhotoshopで制作することを軸にカリキュラムが進んでいきます。見本通り制作できたら、既存Webサイトを模写してみる。パターンが分かってきたらオリジナルサイトを作ってみる、という流れ。
①見本通りにPhotoshopで制作できるようにする
まずPhotoshopでWebサイトを作れるようになりましょう。つまり見本通りに制作できればOK。
オススメする学習方法はUdemy、本です。
見たいコースを購入してパソコンでもスマホでもいつでも見ることができるというサービス。月額サービスではなくて1講座ずつ買い取りです。見本デザインどおりに制作する講義もあって通学制スクールのカリキュラムのように分かりやすいです。
セールをしょっちゅうやっていて僕は2万円以上の動画を1200円で買いました。激安。なんでこんなに値下げるのかと思いますがセールで買うのがお得です。セールを待ちましょう。
自分は、「未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース」
を購入しました。
上記画面のように実際のphotoshop操作画面で一つ一つ丁寧に教えてくれて音声説明付き。スマホからでも見れます。これは 全422レッスン＆ 総動画時間41.5 時間のボリューミーな内容で見本デザイン通りにWebサイトをPhotoshopで作ってみる、という内容。まさしく求めているカリキュラムそのもの。かつHTML、CSSのコーディング講座もあるからこれだけでコーディングまで学習できます。
他にもおすすめ講座はありますのでこちらの記事を参考にしてみてください。
ユズト 「Udemy」のコースをセール期間に購入してスキルアップしました。 ・本もいいけれど動画で網羅的にWeb制作スキルやWebデザインスキルを習得してみたい ・「Udemy」とい[…]
オススメ本
グラフィックデザイン Illustrator & Photoshop (デジタルハリウッドの本)
デジハリの回し者かと思われそうですが、本屋で色々探したけれどWebサイトを見本通りに作れる内容になっているのが見当たらなかったのでこちらをご紹介します。photoshop本って写真加工とかグラフィックデザイン系、もしくは基礎勉強の本が多いんですよ。
②デザイン理論を学習する
次は、本を読んでデザインの理屈を頭に入れましょう。そうすることで、なぜこのデザインが見栄え良く見えるのか、なぜこの色が落ち着く色なのか、など理解できるようになります。
前に書いた未経験からWebデザインを勉強する効率のいい手順【初心者向け】その２：「デザイン理論」を学ぶでも簡単に書きました。
といってもなんとなく頭に入れておいて、そんな理論なんだ、くらいで最初はいいと思います。手を動かして制作していかないと結局身にならないから。デザイン模写するときに振り返りをしていけばOK。
理論が網羅的に分かる本
いちばんよくわかるWebデザインの基本きちんと入門
デザインのクオリティーがあがる本
けっきょく、よはく
なるほどデザイン
レイアウトの理屈が分かる本
知りたいレイアウトデザイン
③色々なWebサイトを模写する
PhotoshopでWebサイトが作れるようになって、デザイン理論が一応頭に入ったら、次は模写です。模写の目的は
- Photoshopの使い方に慣れる
- デザインセンスを身につける
です。いきなり自分のオリジナルデザインで制作すると絵心ない人だとかなりかっこ悪くなります。ただボックスを並べているだけ状態。自分がそうでした。デザイナーが作ったWebサイトを模写することでなんでこの余白があるのか、この線の細さはなぜこんな細さなのか、ボックスに影がついてるけどないとどうなるのか、など自分の今の考えだったらこうするのになんでだろうか、と比較することができます。
模写するときのポイントは、
- ②のデザイン理論を考えながら模写する
- ちょっとだけ変えてみる（フォントを変更、色を変える、線の細さを太くする、レイアウトをずらすとか）
カッコイイと思えるデザインはなぜカッコいいのか、ということを自分の頭で考えていくという作業。最初は適当なことでもいいので理論化してみるとデザインの再現性が高まってくるはずです。ちょっとだけデザインを変えてみるとなんか微妙なデザインになったりします。全体のバランスも考えてデザインされているのでちょっと変えてみることで見えるデザイン理論もあります。
自分が好きなWebサイトを選んでここまでで身につけたPhotoshopスキルで模写します。
前の記事で書いた未経験からWebデザインを勉強する効率のいい手順【初心者向け】その３：既存Webサイトをたくさん見るでWebサイトの探し方を書いているので色々Webサイトを選んでみましょう。
そこでも紹介した本はこれ。事例豊富なので重宝します。
Webデザイン良質見本帳
・配色から考えるデザイン（ブランドカラーから考える、赤、ピンク、青、緑、白、黒など）
・業種、ジャンルから考えるデザイン（カフェ、ファッション、音楽、士業、ポートフォリオ、コーポレートなど）
という切り口でまとめられています。トレンドデザインなども整理して紹介されているので便利です。
④オリジナルデザインのWebサイトを作ってみる
オリジナルデザインは、
いろんなサイトを選んでうまいこと混ぜ合わせる
でできます。オリジナルデザインの作り方の記事で詳細は書きましたのでそちらを見て下さい。
未経験からWebデザインを勉強する効率のいい手順【初心者向け】
⑤Illustraotorを使えるようになってみる
Illustraotorを使わなくてもWebデザインはできます。Photoshopでもバナー制作や簡単な図は作れるので。ただ、Illustratorで名刺デザイン制作、企業ロゴ制作、図やイラスト制作ができるので使えるとデザインの幅が広がるしWebデザインのクオリティーも上がります。
- 名刺デザイン
- トレース
ができればとりあえず基本はOK。
Illustraotorは操作方法にクセがあるので、その使い方に慣れが必要です。何か見本となるイラストがあったときにそれをIllustraotorでパパっとトレースできればそれっぽいイラストが作れてしまうので便利。
Illustraotor学習方法を紹介します。
まず本です。
グラフィックデザイン Illustrator & Photoshop (デジタルハリウッドの本)
Illustrator しっかり入門 増補改訂 第２版 【CC完全対応】［Mac & Windows 対応］
WebデザインのためのPhotoshop＋Illustrator
次にUdemyです。
UdemyでもIllustrator講座あります。Udemyが使いやすいということであれば下の２つのどちらでも基礎を学習できます。
Illustrator 基礎からプロレベルまで完全ですべてをゼロから最短で学べる講座：Udemy
【超入門】初心者からデータ入稿まで Adobe Illustrator でキャラクターを描いてオリジナルグッズを作ろう：Udemy
Schooという授業形式の動画サービスもあります。
月額980円で4600本以上の授業が見放題のオンライン動画学習サイトです。
網羅的な講座が少ないイメージですが単発で知りたいことについて利用するには良いかな。Illustratorで名刺制作という講座で名刺をIllustratorで制作できます。他にもWebデザインとで検索すると色々授業が出てきます。
「デザイン」の独学方法まとめ
- Photoshopで見本通り作れたら、その技術で模写して、慣れたらオリジナルサイトを作る
ということ。Photoshop、Illustratorは本当に機能が多いので最低限Webデザイン制作ができれば模写をした方が効率的。あとは、分からないところが出てきた時のために参考本を1冊くらい手元に置いておくか、ググる（検索する）でいけます。
参考サイトは「サルワカ」のゼロからのPhotoshopの使い方は見やすくて分かりやすいです。
参考本としては上記で紹介した本以外に以下の本もオススメです。
世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書
「コーディング」でデザインカンプ通りブラウザ表示させる
完成したデザインカンプはPhotoshopデータなのでこのままではブラウザで見れません。ブラウザで表示させるために「コーディング」作業をする必要があります。最初に基礎をおさえながら見本どおりにコーディングをする進め方をご紹介します。
「コーディング」の流れ
コーディングはデザインカンプ通りにブラウザにデザインを表示させるための技術になります。「エディタ」というコーディングするためのツールをつかって作業をすすめます。
そして、HTML、CSSというマークアップ言語を使ってブラウザでデザインを表示させていきます。動きのある場所はCSSでアニメーションをつけたり、jQueryというライブラリを使います。（※「ライブラリ」とは、ある程度まとまったプログラムをあらかじめ作ってくれているファイルのこと）
ここもデザインと同じくまずは見本通りに制作していきましょう。必要最低限のコーディングスキルを身につければ使ったことがないスキルもググれば分かる状態になります。
「コーディング」の独学方法
- ①HTML、CSSを学習する（コーディングの基礎）
- ②jQueryを学習する（Webサイトに動きをつける）
- ③効率的にコーディングできる方法を学習する（Emmet、ブートストラップ、Sass）
- ④既存サイトを模写する
- ⑤最低限覚える必要があるPhotoshopの使い方を学習する
コーディングはベーススキルであるHTML、CSSが分かれば動きをつけることができるjQueryをサッと理解することでできるようになります。
①HTML、CSSを学習する（コーディングの基礎）
独学によく使われるサービスは２つあります。
Progate（プロゲート ）は、サイト内に用意されたエディタを使って実際に手を動かしながら課題をクリアしていく、というサービス。有料会員で980円/月額（税別）です。
ドットインストールは、動画で多種多様なプログラミングスキルを教えてくれるサービスです。無料動画もあり、有料動画をみるためにプレミアム会員になっても1,080円 /月額(税込)で見ることができます。
最初は、Progate（プロゲート ）で学習をするのがいいかと思います。エディタが用意されているし、実際手を動かしながら課題をクリアしていくので身になりやすいです。
ここでは「レスポンシブデザイン」までしっかり習得しましょう。
これは必須スキルなのでしっかり学習しましょう。今の時代、スマホからサイトを見るユーザーの方が多いわけです。とはいえパソコンでも表示はさせておきたい。
Progate（プロゲート ）のHTML & CSS 上級編にレスポンシブデザイン講義があります。
あと、個人的には「CSSアニメーション」の理解をしておくといいと思います。Webサイトに動作をつける方法として、後ほど説明するjQueryを使う場合とCSSアニメーションを使う場合があります。プレミアム会員にならないと見れないのですが動作をつける方法に興味があれば勉強してみてください。
オススメ本
本は網羅的に情報が書かれているので１冊仕上げると身になります。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
検証ツールを覚える
コーディングをするにあたって必要不可欠なツールがあります。
「Google Chrome」の検証ツール（デベロッパーモード）
です。Chromeの標準機能なのでお金がかかるとかいう話しではないのですがこれは知っておかないと話しにならないよ、というスキル。ブラウザで表示しているページのHTMLやCSSを確認・編集することができる、開発者にとって便利なツール。コーディング中にどこに問題があるのか分からない、この場所のコードがどうなっているのか知りたい、と思ったときにブラウザからすぐにコードを調べることができ一時的に編集もできるという便利ツール。Progateに分かりやすく紹介されていたのでご紹介します。
Font Awesomeを使えるようになってみる
Webアイコンという便利なものがあります。文字と同じように表示させることのできるアイコンです。拡大縮小してもボヤけないという利点があります。また文字みたいに色や大きさをCSSで変えることができるという便利なもの。facebookとかtwitterアイコンとかサクッとこれを利用できますし便利。サルワカに分かりやすく書かれています。
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう：サルワカ
②jQueryを学習する（Webサイトに動きをつける）
①でデザインカンプをブラウザに表示させることはできます。そこからWebサイトに動きをつけたい、と考えると思います。よく見るハンバーガーメニューとかドロップダウンメニューとかページ内移動（リンクをクリックしたらスルスルとその場所に移動する）とかはHTML、CSSでは実現できません。JavaScriptというプログラミング言語を基本使います。ただ、JavaScriptは難しいです。なので、それを簡単に使えるようにしたのがjQueryと言います（javascriptのライブラリと言います）。これを使えば簡単に動きのあるサイトを作れます。制作会社とのコーディング案件でもjQueryが使えれば大丈夫です。
Progate（プロゲート ）で学習しましょう。
オススメ本
本でオススメは下の２つ。実装してみたい動作がのっていれば買ってみて手を動かしてみるといいです。
jQueryデザイン入門
jQuery最高の教科書
③効率的にコーディングできる方法を学習する（Emmet、ブートストラップ、Sass）
ここまできたらコーディング慣れするために模写していくのがいいですが、効率的にコーディングできる方法を知っておくと便利です。
Emmet
簡単に言うと、コーディングするときの「ショートカットキー」です。
dbと入力後「Tabキー」でdisplay: block;になったり
dnと入力後「Tabキー」でdisplay: none;になったり
2文字入力で一瞬で必要なコードに変換してくれたりします。コーディングしているとよく使うコードは決まってきます。爆速でコーディングできると時短になります。以下ブログ記事で分かりやすく書かれています。僕のオススメ無料「エディタ」である「Visual Studio Code」で説明されています。
「はじめて」でも簡単！Emmetの使い方とよく使うパターン集：HPcode
ブートストラップ
ブートストラップとはCSSフレームワークのことです。つまり、CSSをセットメニュー化したものです。もっと言うと、classを書いただけで右寄せ、左寄せ、ボタン設置などよく使う装飾類が実装されてしまうというもの。CSSでどうしろ、こうしろと書かなくていい、ということ（①が分かってないと何のことか分からないと思いますがよくあるレイアウトに簡単にできるものだと思ってください）。
ここはドットインストール で学習しましょう。Bootstrap 4入門：ドットインストール
グリッドシステムが秀逸。これを覚えるとレスポンシブ対応が簡単にできます。Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】：Teachacademyマガジンに分かりやすく書かれてます。
Sass
CSSを変数とか使って効率的に書けるようにしたすごいCSSというのがSassです。これはデジハリLIGの講師の方から教えてもらいました。これを知ってしまうと普通のCSSが書けない、と言っていたのでどんなに便利なんだ？と思った記憶が。
ただ、導入するのにひとクセあります。CSSを変換（コンパイル）する必要があるのです。古い記事ですがLIGブログに導入方法が書かれてます。これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)：LIGブログ
この記事を読んで、ドットインストール で学習すれば最低限使える効率的な技が身につきます。
④既存サイトを模写する
ここまできたら慣れることが必要。実績としても摸写は活用できるのでいくつか制作してポートフォリオにのせることをモチベーションに頑張りましょう。
- 簡単だろうな、くらいのサイトを摸写してみる。難しすぎるとヤル気なくします。できると嬉しいです。
- 簡単の基準は今まで学習した内容でできる！と８割以上イメージできるサイト。1、２割はググらないと分からないかな、と思うくらいの内容。
- スマホ対応コーディングもする。レスポンシブ対応。
- できるだけ上記で説明した検証ツールを使わず（答えを見ないで）に自力でコーディングしてみる。
- どうしても分からないところはググって（検索して）調べるか検証ツールで少し見てみる。（考えることが重要）
上記の流れです。ここはスクール卒業しててもいくつか摸写して実績作らないといけないので必要な工程です。
なので、Evernoteに覚えたことをメモして模写のときにそれを活用して模写で再現する、ということをしました。再現しながらも1、２割はググれば（検索すれば）分かりそうだけどやったことないな、と思うようなWebサイトを模写するとスキルが伸びます。
3個くらい摸写できたら実案件取りに行きましょう。模写だけだとモチベーションもたないです。
⑤最低限覚える必要があるPhotoshopの使い方を学習する
デザインから学習している人は大丈夫なのですが、コーディング案件だけで副業したいとなるとデザインツールの使い方は学習せずに進んできているはずです。
しかしながら、制作会社と仕事をすると完成デザインがpsdファイル（photoshopデータ）で送られてきてそこから必要な画像は書き出して画像フォルダに入れないといけません。
よって、Photoshopで
・画像書き出し（画像アセットを使う、pngとjpgの違いを理解）
・色のCSSを調べる（色を正確に再現するため）
・フォントが何を使っているか調べる
ということができるくらいは知っておく必要があります。特に画像書き出しは必要です。背景透過が必要な場合はpngデータにするとか画像形式も考えて書き出しする必要があります。記事を書いてみましたので参考にしてみてください。
Photoshop画像書き出し方法を具体的に解説【画像形式の違い説明付き】
「サーバー」にデータをアップしてインターネットから見れるようにする
最後に制作したコーディングデータをサーバーにアップロードしてインターネットからWebサイトが見ることができればOK。
自分で模写したコーディングデータをインターネット接続してブラウザで見れるようにできればOK。
- レンタルサーバーを借りる
- ドメインを取得する（独自ドメインはテスト時は取得しなくていいのでここは飛ばしてもOK）
- ファイルをアップロードする
でインターネット接続してブラウザで制作したサイトを見れるようになります。以下サイトが概要が分かりやすく書かれています。
ついに完成！ファイルをアップロードしてWebサイトを公開！：Webクリエイターボックス
FTPソフトは無料ダウンロードできるのでここで紹介されているFileZillaで問題ありません。僕もこれを使っていて困ったことありません。
Web制作スキル学習をするために必要なモノ
Web制作をするために最初に用意する必要のあるモノについては別の記事で書きました。参考まで。
Web制作を始めるために必要なツール（道具）【最初に用意するもの】
Web制作独学で行き詰まったらスクール受講で時短
独学はデメリットもあると最初に伝えた通り。
- モチベーションが続かない
- 分からないところをすぐに教えてもらえればこんなに時間がかからないのに
- カリキュラム課題通りに作ってそれを実績にしたい
- オリジナルサイト作りたいけど独学じゃ作りきれない
独学で時間がかかりすぎて諦める、いつもの毎日に戻ってしまう。
時間を買うという投資。それがスクール。
スクールである程度のスキルまで引き上げてもらうことは時短になります。僕はそうしました。
無料体験コースがあるスクールもあるのでまずそれを試してみるのはアリですね。
僕の体験からスクールの選び方とオススメスクールを紹介した記事を書きましたので気になる方は参考にしてください。
【無料あり】副業でWeb制作案件受注したい人のスクール選び方とおすすめスクール３選
まとめ：Webサイトを無料で作ってモチベーションをあげる方法もある
Webサイトを０から制作するには以下スキルを身につける必要があるということを紹介してきました。
- 企画スキル →Webサイトの目的とターゲットを決める
- 設計スキル →ページ構成（サイトマップ）とレイアウト設計図（ワイヤーフレーム）を作る
- デザインスキル →Webサイトのデザインを制作する
- コーディングスキル →完成デザイン通りにブラウザ表示させる
- サーバーの知識 →「サーバー」にコーディングデータをアップしてインターネットから見れるようにする
独学でするには身が入りにくい。と思ったらおすすめは
知り合いでWebサイトが欲しい人を見つけて無料でいいから受けてみる
といいですよ。
ヒアリングする相手がいればこんなニーズあんのね、それをWebで解決するには？という思考になって勉強になります。
その上、相手がいればやり切るモチベーションにもなる。
僕はたまたま独立した個人事業主の知り合いがいたので、
無料でサイト作るんで色々事業内容教えてください！
と志願しました。
それを作りきって実績にして営業しました。営業トークも身が入りましたね。
無料で作ってれば多少間違えても気が楽だし、モチベーションも保てるしでお得。おすすめです。
この記事はここまでです。
サラリーマンに期待と絶望を繰り返しながら転職も３回経験。アラフォーから自分の実力一本で稼ぐのだ、と決意し未経験のWeb業界へ突入。転職という道は選ばず副業で。本業終わりにWeb制作スキルをスクールで身につけ、独力で営業開始。初月で月10万円の収益化。そこからマーケティングスキル、ライティングスキルも身につけスキルの多角化。スキルがあれば生活が安定することを実感。サラリーマンだけが仕事じゃない。サイト名の「セカンドスキル」とは本業以外の第２のスキルのこと。副業と両立することで得られるメリットはたくさんあります。やる気になったその日が開始日！副業をオススメする理由はこちらの記事で書いてます♪
スキル０からオリジナルデザインのサイト制作ができるようになるまでの過程、
制作会社に営業するための「営業メールの作り方」「営業アポイントリストフォーマット」なども盛り込んでます。 実践的・網羅的な内容にしていますのでこれからWeb制作・Webデザインを始めようという方にオススメのnote
【note】スキル実績人脈０のアラフォー男がWeb制作会社に営業して副業収益化した具体的な手順