ぼくがWeb制作に携わってからこれまで約２年半、Web上の多くの優良なサイトから知恵を借りて、ド素人からなんとかフリーで仕事を貰えるまでになった。そして常々、そうして与えてもらった知識や情報を還元したいと思っていた。
そしてこうしてブログを始めたこともあり、一度Web制作に関する良質な情報をまとめてみようと思った。
このエントリーでは、Web制作の初心者もしくはWeb制作に興味があってこれから始めてみたいという人がうまくWebの世界に入っていくのに役立つような情報を厳選して紹介している。
一人でWeb制作全般を見れるようになるための基礎的な情報を広く列挙してあるが、必要な箇所だけ断片的に取り上げてもらっても役立つと思う。またできるだけ日本語の中で閉じるよう、海外サイトは最低限にとどめた。
とにかく１ページに詰め込むことを優先したのでかなり長いが、下の目次から必要な部分だけ必要なときにチェックしてもらえれば良い。
Web制作全般の優良サイト
まずはじめに、Web制作全般に関する優良なサイトをあげておく。
Webの仕事をしていると、問題にぶつかる。その度に自分で検索して解決していくことになるのだが、何度も繰り返していると、いつも自分の納得いく答えをくれるのが、同じサイト達であることに気づく。そうして「いつも使うサイト」になっていく。
それはやはり、そのサイトに知恵が詰まっていて、わかりやすく解説してくれているからだ。そんなサイトの代表例をあげておく。
デザイン制作
デザインの知識があるとWeb制作はもちろん、生活の色んな場面で役立つ。道具は必要だが、投資して損はない。なによりデザインは楽しい。
０１．デザインに必要なソフト
普通はまずAdobe製品（PhotoshopやIllustrator）を自分への投資として購入する（まずは体験版から）が、どうしても無料で済ませたいという方はGIMPもある。
０２．写真素材（無料）
いい写真は質の高いデザインには不可欠。ありがたいことにネット上には無料の素材が溢れている。
初心者なら、きっと誰もが一度はお世話になるサイト。クレジット表記不要。（※クレジット表記とは著作権表示のこと）
全３０の素材サイトを横断的に一括検索できるのがこちら。
ブログなんかで「お、この写真かっこいいな」と思ったら、たいていその写真は下の３つのどれかで見つけれる。ハイクオリティな写真が並ぶ超貴重サイト。これであなたもワンランクアップ。Pixabayは素人写真も混ざるが種類豊富、UnsplashとFindAは海外サイトなので検索は英単語で入力。
有料サイトだが無料素材もある。「いいね！」すればクレジット表記無しで使える。
風景・背景など人物以外の素材が揃う。
０３．写真素材（有料）
デザイン制作をしていると必ず無料素材では限界がくる。多少出費をしても有料素材を使うと効率的でクオリティの高い作業ができる。fotoliaかPIXTAを使っている人が多いだろう。安く入れるのはfotolia。
０４．イラスト素材
かわいいイラストが豊富にある。商用は要連絡だが、社内掲示や刊行物には最適。
０５．ピクトグラム、アイコン、ロゴ、他（無料、商用OK）
ピクトグラムやシルエット素材は色んな場面で使えるので貴重。
ロゴ作成まではできないという方は重宝する。簡単なモノで良ければ十分間に合う。
各種ボタンもWeb制作には欠かせない。
ワンポイントでアイコンを置くだけでデザインは全然変わる。ユーザーもアイコンがあった方が直感的にわかりやすい。
フレームや吹き出しもWebデザインでよく使う。
背景要のテクスチャ素材集。質感を意識するとデザインも一歩上達する。
０６．フォント
WindowsやMacにはデフォルトでフォントが入っているが、デザインの幅を広げたければもっとこだわりたい。特に日本語フォントは無料ではあまりいいのはないし、探す時間がもったいない。MORISAWAフォントは持っていてもいいだろう。
欧文フォンならフリーでも選択肢は広い。
０７．デザインテイスト・色彩関連
配色に困ったらこちら。
色の使い方に関しては、PCCSのトーンを覚えておけばだいぶ違う。
デザインテイストのマトリクス表示。
０８．バナーデザイン制作
バナーデザインの制作ができれば、Web広告単体の仕事があるので、それだけでも稼ぐことはできる。
バナーデザインのギャラリーサイト。色んなWeb広告のサンプルが一覧で見られる。デザインのアイデアや構想を練るときに役立つ。
Webバナーの作り方はここら辺の記事が参考になる。
０９．Webサイトデザイン制作
Webサイトのギャラリーサイト。これら以外にも、サイトデザインを考えるときは、制作会社の実績紹介なども参考になる。
１０．その他デザイン関連
複数枚の画像からGIFアニメーションを生成してくれる。たまに必要になる。
Webサイト構築
１１．オーサリングソフト＆エディタ
Webサイト構築には、HTML/CSSを書くためのソフトが必要だ。AdobeCCコンプリートプランを契約したならDreamweaver CCでまずはいいだろう。Macの人はCoda2も多い。これらはWeb制作を支援してくれるオーサリングソフトという（有料）。
エディタがいいならこちら。
１２．ワイヤーフレーム
ワイヤーフレームはWebサイトの設計図のこと。手書きやIllustratorで作る人も多いが、オンライン・ドローイングツールも使える。すでに色んな部品が用意されているのが利点。
１３．HTML/CSS
HTML/CSSは、まずはドットインストールなどで始めて、それから自分にあった書籍を見つけて体系的に学び、ステップアップするのがいいだろう。
それでも、いつまでたってもリファレンスは手放せない。
１４．スマホ対応、レスポンシブデザイン
今やアクセスの半分以上はモバイルからの時代。スマホ対応は、制作側も必須のスキルになってきている。
レスポンシブサイトの見た目チェックができる。
WordPress
もうWordPressなしにはWeb制作業界は語れない。世界のWebサイトの２５％はWordPressで作られている。
１５．WordPress基礎知識
WordPressを使うなら、多少なりともPHPとMySQLの知識は必要になる。この記事がわかりやすいだろう。
テンプレートタグも全部覚える必要はないが、常に最新の情報にアプデートしよう。すぐ非推奨や廃止になったりするので古い記事を参照する時は注意。
１６．WordPressテーマ
WordPressテーマを購入してカスタマイズするのも選択肢の一つ。制作スピードが格段に上がる。TCDのテーマはクオリティが高い。クラウドテンプレートは種類が豊富で値段も安め。
プログラミング
仕組みを作れる技術があれば、それは大きな財産になる。プログラミングできれば、Web制作全体の見え方も違ってくる。
一つ一つ言語をとりあげるとキリが無いので、ネット上で各言語を学習できるサイトのみをあげておく。
１７．プログラミング学習
HTML/CSS、jQuery、Ruby、PHPなど、とにかく入門レベルの人はここから入っていい。動画で解説してくれる。
paizaやProgateも主要言語を無料で学べる。paizaはプログラマ・ITエンジニア向け転職サイトなので仕事も案内してくれる。
ドメイン取得＆サーバー
１８．FTPクライアントソフト
ローカルで開発したWebサイトデータをサーバーに転送するソフト。
１９．ドメイン取得
ドメイン取得ならこちらで。
２０．レンタルサーバー
クライアントが個人または中小規模の事業主なら、だいたい下のサーバーのうちどれかで十分間に合うだろう。もちろん探せば他にいくらでもある。
ローカル環境
フリーランスでWeb制作するなら、ローカル環境（自分のPC内の仮想サーバー環境）を構築しなくてはいけない。開発・保守工程では、ローカル環境内でテストし尽くしてから本番サーバーにアップロード。
２１．XAMPP
WindowsでWeb制作する人はXAMPPでローカル環境を構築するのが主流。
XAMPPの設定手順。
２２．MAMP
MacでWeb制作する人はMAMP環境が主流だろう。Windowsでも使える。ぼくはWin10+MAMPで開発している。
MAMPの設定手順。
SEO
Web制作をする上でSEOは欠かせない。SEOは集客に直結するので、SEOに関して深い知識があれば、あなたは単なる制作者で終わらずクライアントから重宝される。もちろん、単なる制作者でも最低限のSEO知識は必要。
２３．Googleツール
Webで生計を立てるならGoogleのツールは使わざるを得ない。AnalyticsだけでなくSearch Consoleも必須。Adwardsアカウント作って「キーワード・プランナー」も利用しよう。
２４．SEO基礎知識
とにかくバズ部の記事を読んでおこう。良質なコンテンツとはなにかを理解してWeb制作すると取り組み方がかなり違う。
２５．検索順位チェック
設定キーワードの順位を一発で検索できるツール。クライアントワークでは欠かせない。無料版は制限ありだが、十分使える。
２６．SEO解析ツール
自分の管理するサイトの状況把握に便利。
２７．Webサイト・サーバー情報チェック
２８．サイト評価サービス
自分の管理サイトも競合サイトも丸裸に。特にsimilarwebとWooRank.comは要チェック。細かい数値は正確ではないが、Webサイトの全容をつかむのには便利。
https://www.similarweb.com
WooRank.com | SEO Checker - Website Review
PageSpeed Insights
Nibbler - Test any website
仕事
２９．クラウドワーク
コネのないクリエイターがネット上で仕事を得るには、クラウドワークしかない。日本でメジャーなのは下の２つ。そこそこ力があれば月１０万前後は稼げるだろう。しかし、これだけで食っていくには相当な腕が必要。単価は安い。
３０．パートナー契約
フリーランスの仕事探しにはレバテックいいらしい。
インターネット広告（バナー・LP）制作専門ならここで案件を貰える。デザインで食べていきたい人ならパートナー契約を目指すのもよいだろう。スキルチェック有。
書類関係
ここからはフリーランスを目指す人に必要な事務仕事の情報。
３１．契約書
ありがたいことに、Web制作の契約書の実物をダウンロードできる。これをベースに案件に合わせて微修正するだけで、立派な契約書が作成完了。特に立場の弱いフリーランスは契約書でしっかり自分を守ろう。うやむやは危険。
クラウドサービスもある。
３２．見積書・請求書
見積書から請求書まで全て作成してくれるWebサービス。個人でWeb制作する人は書類業務も仕事のうちなので、無料で一括管理できるのは便利。ほんとうに毎日お世話になっている。
３３．会計・確定申告
書類業務と並んで面倒なのが、会計や確定申告関連。ぼくは全てExcelで済ませているが、日々の記帳は本当に面倒なので、有料でもよいならWebサービスを使って手軽に管理するのが良い。