ぼくがWebデザインに携わってからこれまで約5年半、Web上の多くの優良なサイトから知恵を借りて、ド素人からなんとかフリーで仕事を貰えるまでになった。そして常々、Webから与えてもらった知識や情報を還元したいと思っていた。
こうしてブログを始め自ら情報を発信する場を得たので、一度Web制作に関する良質な情報をまとめて提供してみたい。
このエントリーでは、Web制作の初心者もしくはWeb制作に興味があってこれから始めてみたいという人が、うまくWebの世界に入っていくのに役立つような情報を厳選して紹介している。
一人でWeb制作全般を見れるようになるための基礎的な情報を広く列挙してあるが、必要な箇所だけ断片的に取り上げてもらっても役立つと思う。またできるだけ日本語の中で閉じるよう、海外サイトは最低限にとどめた。
目次
とにかく１ページに詰め込むことを優先したのでかなり長いが、下の目次から必要な部分だけ必要なときにチェックしてもらえれば良い。
- 目次
- Web制作全般の優良サイト
- 誰もが読んでいる!? Web制作・Webデザインおすすめ本
- デザイン制作
- Webサイト構築
- WordPress
- プログラミング
- ドメイン取得＆サーバー
- ローカル環境
- SEO
- 仕事
- 書類関係
Web制作全般の優良サイト
まずはじめに、Web制作全般に関する優良なサイトをあげておく。
Webの仕事をしていると、問題にぶつかる。その度に自分で検索して解決していくことになるのだが、何度も繰り返していると、いつも自分の納得いく答えをくれるのが、同じサイト達であることに気づく。そうして「いつも使うサイト」になっていく。
それはやはり、そのサイトに知恵が詰まっていて、わかりやすく解説してくれているからだ。そんなサイトの代表例をあげておく。
Web制作に関することなら、このサイトでだいたいのことが解決するだろう。
また、このブログでもWebデザイン初心者向けにWebデザインに関する記事を書いているので参考にしてもらいたい。
素人でも簡単に一流のホームページが作れる無料Webサイト作成サービス７選＋α
Web初心者でも高品質なホームページを数時間で簡単に作る方法とその手順
【Webデザイン】初心者向けの独学におすすめのオンラインスクール学習講座を紹介
誰もが読んでいる!? Web制作・Webデザインおすすめ本
Webに限らずデザインの基礎知識を身につけたいなら、この本が有名。Webデザイン系のサイトならどこでも推薦されている。
上のノンデザイナーズ・デザインブックもいいが、個人的に初心者に最もオススメしたいのが「なるほどデザイン」。デザイン本だけあって、中身のデザインが丁寧でわかりやすい。デザイン初心者が一番最初に読むべき本といっていい。
いまは、Web・ホームページ制作はワードプレスが主流。
WordPressでWebサイト作成をはじめたいと考えている初心者にはこの本が入門書としておすすめ。わかりやすい説明で、実際に1つサイトが作れるようになっている。
上の本で、基礎がある程度わかったら次はこちらがいい。中級以上の内容になっているので、実践力がつく。この本をクリアできれば、ホームページ制作を仕事にできる日も近い。
デザイン制作
デザインの知識があるとWeb制作はもちろん、生活の色んな場面で役立つ。道具は必要だが、投資して損はない。なによりデザインは楽しい。
０１．デザインに必要なソフト
Webデザイナーを志すなら、まずAdobe製品（photoshopやIllustrator）を自分への投資として購入するところから始まる。
Adobeツールは、以下の「アカデミック版（12ヶ月）」を利用するとお得。もちろん商用可。各ツールのオンライン講座とセットで29,800円（※2018年9月現在）。期間限定なのでお早めに！
【格安2,483円／月】Adobe CC（Adobe Creative Cloud）を安く手に入れる
どうしても無料で済ませたいという方はGIMPもあるが、Webデザインを生業にするならオススメしない。無料ツールで仕事をしているWebデザイナーは見たことがない。
０２．写真素材（無料）
※2016/07追記
世界中の画像を一括検索できるサイトをまとめた。
いい写真は質の高いデザインには不可欠。ありがたいことにネット上には無料の素材が溢れている。
初心者なら、きっと誰もが一度はお世話になるサイト。クレジット表記不要。（※クレジット表記とは著作権表示のこと）
全３０の素材サイトを横断的に一括検索できるのがこちら。
ブログなんかで「お、この写真かっこいいな」と思ったら、たいていその写真は下の３つのどれかで見つけれる。ハイクオリティな写真が並ぶ超貴重サイト。これであなたもワンランクアップ。Pixabayは素人写真も混ざるが種類豊富、UnsplashとFindAは海外サイトなので検索は英単語で入力。
有料サイトだが無料素材もある。「いいね！」すればクレジット表記無しで使える。
風景・背景など人物以外の素材が揃う。
０３．写真素材（有料）
デザイン制作をしていると必ず無料素材では限界がくる。多少出費をしても有料素材を使うと効率的でクオリティの高い作業ができる。fotoliaかPIXTAを使っている人が多いだろう。安く入れるのはfotolia。
手元においておきたい人は１冊買ってしまうのもいい。少ない投資で大量の素材が手に入る。このあたりの人物素材はよく使われている良質素材。
０４．イラスト素材
かわいいイラストが豊富にある。商用は要連絡だが、社内掲示や刊行物には最適。
０５．ピクトグラム、アイコン、ロゴ、他（無料、商用OK）
ピクトグラムやシルエット素材は色んな場面で使えるので貴重。
無料ロゴ素材が手に入る。ロゴ作成まではできないという方は重宝する。簡単なモノで良ければ十分間に合う。
無料ボタン素材が手に入る。ボタンもWeb制作には欠かせない。
ワンポイントでアイコンを置くだけでデザインは全然変わる。ユーザーもアイコンがあった方が直感的にわかりやすい。
フレームや吹き出しもWebデザインでよく使う。
背景要のテクスチャ素材集。質感を意識するとデザインも一歩上達する。
０６．フォント
多少なりともデザインで仕事するなら全1000書体近くが自由に使えるMORISAWAフォントは持っていて損はない。デザインの幅は広げたければPCのデフォルトのフォントだけでは物足りない。特に日本語フォントは無料ではあまりいいのはないし、探す時間がもったいない。
欧文フォンならフリーでも選択肢は広い。
０７．デザインテイスト・色彩関連
デザイン上達のコツは、まず良書で基本ルールを学び、身の回りの良いデザインを徹底的にマネするのが近道。この２冊はまず読むに値する。
配色に困ったらこちら。
色の使い方に関しては、PCCSのトーンを覚えておけばだいぶ違う。
デザインテイストのマトリクス表示。
０８．バナーデザイン制作
バナー制作に関する知識や参考サイトなどをまとめた。
バナーデザインの制作ができれば、Web広告単体の仕事があるので、それだけでも稼ぐことはできる。
バナーデザインのギャラリーサイト。色んなWeb広告のサンプルが一覧で見られる。デザインのアイデアや構想を練るときに役立つ。
Webバナーの作り方はここら辺の記事が参考になる。
０９．Webサイトデザイン制作
Webサイトのギャラリーサイト。これら以外にも、サイトデザインを考えるときは、制作会社の実績紹介なども参考になる。
１０．その他デザイン関連
複数枚の画像からGIFアニメーションを生成してくれる。たまに必要になる。
Webサイト構築
１１．オーサリングソフト＆エディタ
Webサイト構築には、HTML/CSSを書くためのソフトが必要だ。AdobeCCコンプリートプランを契約したならDreamweaver CCでまずはいいだろう。Macの人はCoda2も多い。これらはWeb制作を支援してくれるオーサリングソフトという（有料）。
エディタがいいならこちら。イチオシはAdobeの「Brachet」、無料で初めから日本語環境で使いやすい。
１２．ワイヤーフレーム
ワイヤーフレームはWebサイトの設計図のこと。手書きやIllustratorで作る人も多いが、オンライン・ドローイングツールも使える。すでに色んな部品が用意されているのが利点。
１３．HTML/CSS
HTML/CSSは、まずはドットインストールなどで始めて、それから自分にあった書籍を見つけて体系的に学び、ステップアップするのがいいだろう。
それでも、いつまでたってもリファレンスは手放せない。
１４．スマホ対応、レスポンシブデザイン
今やアクセスの半分以上はモバイルからの時代。スマホ対応は、制作側も必須のスキルになってきている。
レスポンシブサイトの見た目チェックができる。
WordPress
もうWordPressなしにはWeb制作業界は語れない。世界のWebサイトの２５％はWordPressで作られている。
１５．WordPress基礎知識
WordPressを使うなら、多少なりともPHPとMySQLの知識は必要になる。この記事がわかりやすいだろう。
WordPressのテンプレートタグも全部覚える必要はないが、常に最新の情報にアプデートしよう。すぐ非推奨や廃止になったりするのでネット上の古い記事を参照する時は注意。
WordPressでブログだけでなくビジネスサイトも作れるようになれば、WordPressで商売ができる。まずは、自分にあった書籍で基本を体系的に学んで自分でゼロから作ってみよう。この２冊をオススメする。
１６．WordPressテーマ
WordPressテーマを購入してカスタマイズするのも選択肢の一つ。制作スピードが格段に上がる。
ブログ形式なら、初心者でもキレイなホームページが作れるOPEN CAGEのシリーズが一押し。
企業サイト、ビジネスサイトを作るなら、TCDのテーマはクオリティが高くてGOOD。僕もたまにお世話になる。サポートページやカスタマイズ指南のブログもあるので利用しやすい。
高級感のあるサイトには「LUXE」、ニュースメディア等には「Opinion」、医療機関は「BIRTH」がおすすめ。その他多数。
PR
プログラミング
仕組みを作れる技術があれば、それは大きな財産になる。プログラミングができれば、Web制作全体の見え方も違ってくる。
一つ一つ言語をとりあげるとキリが無いので、ネット上で各言語を学習できるサイトのみをあげておく。
１７．プログラミング学習
プログラミング初心者、未経験者でも、無料でWebデザインが学べて就職サポートまでしてくれる「GEEK JOB」というサービスもある。
おすすめプログラミング無料講座＆転職コース｜GEEK JOB
HTML/CSS、jQuery、Ruby、PHPなど、とにかく入門レベルの人はドットインストールを利用して学習してもいい。動画で解説してくれる。
paizaやProgateも主要言語を無料で学べる。paizaはプログラマ・ITエンジニア向け転職サイトなので仕事も案内してくれる。
ドメイン取得＆サーバー
１８．FTPクライアントソフト
ローカルで開発したWebサイトデータをサーバーに転送するソフト。
１９．ドメイン取得
ドメイン取得ならこちらで。
２０．レンタルサーバー
クライアントが個人または中小規模の事業主なら、だいたい下のサーバーのうちどれかで十分間に合うだろう。もちろん探せば他にいくらでもある。
レンタルサーバー｜さくらインターネット - 無料お試し実施中
高機能レンタルサーバー｜無料お試し15日間『ヘテムル』 
ローカル環境
フリーランスで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制作すると取り組み方がかなり違う。
２５．検索順位チェック
Google/Yahooのキーワードの順位を一発で検索できるツール。無料版は制限ありだけれど十分使える。
２６．SEO解析ツール
自分の管理するサイトの状況把握に便利。
２７．Webサイト・サーバー情報チェック
２８．サイト評価サービス
自分の管理サイトも競合サイトも丸裸に。特にSimilarWebとWooRank.comは要チェック。細かい数値は正確ではないが、Webサイトの全容をつかむのには便利。
SimilarWeb
Mobile Website Speed Testing Tool - Google
Nibbler - Test any website
WooRank.com | SEO Checker - Website Review
詳しい使い方はこちら。
仕事
２９．クラウドワーク
コネのないクリエイターがネット上で仕事を得るには、クラウドワークしかない。
「Crowd Works」や「CrowdTech」を利用すれば、そこそこ力があれば月10万前後は稼げるだろう。単価は安いが腕試しには最適。
しかし、これだけで食っていくには相当な腕が必要なのであくまで練習の場、または副業という位置付けで利用しよう。
３０．パートナー契約
初心者、未経験者には、無料でWebデザインが学べて就職サポートまでしてくれる「TechAcademy」がおすすめ。
おすすめTechAcademyキャリア
フリーランスの仕事探しには「レバテックフリーランス」がいい。
書類関係
ここからはフリーランスを目指す人に必要な事務仕事の情報。
３１．契約書
ありがたいことに、Web制作の契約書の実物をダウンロードできる。これをベースに案件に合わせて微修正するだけで、立派な契約書が作成完了。特に立場の弱いフリーランスは契約書でしっかり自分を守ろう。うやむやは危険。
クラウドサービスもある。
３２．見積書・請求書
「Misoca」は見積書から請求書まで全て作成してくれる便利な無料サービス。フリーランスは書類業務も仕事のうちなので、無料で一括管理できるのは本当に助かる。毎日お世話になっている。
３３．会計・確定申告
書類業務と並んで面倒なのが、会計や確定申告関連。ぼくは全てExcelで済ませているが、日々の記帳は本当に面倒なので、有料でもよいならWebサービスを使って手軽に管理するのが良い。
