・勉強を始めようと思うけれど製作全体の流れがよく分からないし副業でどこまで知っておくべき？
・そもそも副業で製作の一部分だけ受注できるの？
・一部分だけで受注できるならWeb制作の全体の流れを知っておく必要あるの？
- 副業でWeb制作手順を知っておくべき理由と稼げるポイントが分かる。
実体験をベースに記事を作成していますので参考になれば幸いです。
副業で知っておくべきWeb制作５つの手順
副業だからWeb制作の手順を全て知る必要はないのでは？
もしくは、
副業でもWeb制作の全ての工程ができないとダメなんじゃないか？
と思っていませんか？
Web制作一部の工程（デザイン、コーディング）だけできても副業できます。また、手順全てを知らなくてもいいかというと知らなくても案件はこなせます。
ただ、Web制作の全体の流れ、制作手順を知っておくことで以下のメリットがあります。
- デザイン、コーディングだけ対応している場合前後の工程が分かっていることで自分がやるべきこと、求められていることが明確に理解できる
- 制作手順を知っていることでディレクションもできWeb制作を全て請け負うことができる（できない部分はできる人にお願いする）
さらに知っているだけではなくデザインもコーディングもそれなりにできると、
- コーディングしやすいデザイン制作ができる、デザイナーに正確な指示だしをできるコーダーになれる
企画も設計もできると
- ユーザビリティの高いUI設計（とっても使いやすいサイト設計）を意識したデザイン制作、SEOを意識したコーディングまで考えられるようになる
全部できればそれ応じたレベルのWebサイトが制作できます。ただ全部できなくても「Web制作全体の流れ、Web制作手順を知っておくこと」で全体の流れを意識して自分が対応すべきことを的確に実施することが可能となります。
この記事では、「Webサイトをオリジナルデザインで０から制作する手順」を５つの手順に分けて説明します。
- １：企画（目的整理、ターゲット分析）
- ２：設計（サイトマップ作成、ワイヤーフレーム作成）
- ３：制作（コンテンツ用意、デザイン制作、コーディング、WordPressテーマ化）
- ４：サーバーアップロード
- ５：運用
一部分だけを副業にする場合は、
デザイン制作
コーディング
WordPressカスタム
だけを対応する、ということになります。
自分は、通学制スクール（デジタルハリウッド by LIG）に通いこの一連の流れを卒業制作を通して一通り経験しました。なので、スクール卒業後に一部分だけの案件受注もできましたしWeb制作案件丸ごと受注もできました。
１：企画（目的整理、ターゲット分析）
企画とは
・誰がそのWebサイトを見て（ターゲット）
・他のWebサイトと何が違うのか（競合分析）
を考えることです。
なぜこれを考えるかというと、
「見る人にとって欲しい情報を分かりやすくするため」
自己満足なWebサイトにしても、見る人にとって必要な情報が分かりにくければ見てくれないというわけです。
相手の立場にたって、自分が提供できるものを分かりやすく伝える
ということをまず整理する、ということ。
企画はざっくり以下の流れで考えます。
- ①Webサイトの目的と目標を決める
- ②自分の特徴を洗い出す（自分を知る）
- ③Webサイトを見てもらいたい人をはっきりさせる（相手を知る）
- ④競合分析をする（他を知る）
- ⑤ポイントを整理してサイト概要（コンテンツ、デザイン）を決める
２：設計（サイトマップ作成、ワイヤーフレーム作成）
設計とは
Webサイトの全体像を一覧にする →サイトマップ
各ページのレイアウト設計図を書く →ワイヤーフレーム
を整理することです。
・それぞれどう繋がっていて（リンクされていて）
・各ページどんなレイアウトで何を配置して
ということが分かればいい、ということになります。
サイトマップ
上記図のように、
・それぞれどう繋がっていて（リンクされていて）
ということを可視化します。つまり、
Webサイトの全体像を一覧にする
ということが必要で、それを
サイトマップ
と言います。
全体像が分かることと、どのページがどこから繋がっているか（リンクされているか）が分かるかがポイント。
どんなコンテンツがどうやって繋がっているかを可視化します。
ワイヤーフレーム
上記図のように、
各ページのレイアウト設計図を書く
こととなり、それを
ワイヤーフレーム
と言います。
どんなモノを、どこに、どんな風に
画面上に配置していくかを簡略的に書いてみる、ということ。
「どこに」→ヘッダー（一番上の場所）右上、メインコンテンツ中央、フッター（一番下の場所）下段
「どんな風に」→クリックしたら別ページにリンク、画像がスライドして変化する、クリックしたらページトップへ戻る
これが全てのページ整理できたら配置が分かるので後はデザインを詰めていけばいいということになります。
３：制作（コンテンツ用意、デザイン制作、コーディング、WordPressテーマ化）
制作という工程では、設計で制作した「ワイヤーフレーム」という下書きを目安に完成デザインを制作してブラウザで表示させるようにします。
コンテンツ用意
コンテンツとは、
・画像、イラスト
・文章
のことです。
設計ができたら、その中にあてこむ内容を決めていきます。設計前でも集められるものは集めておけば楽です。
まずお客様に用意してもらうようにしましょう。コンテンツを全てこちらで用意するのはけっこう大変。理由はお金と労力がかかるから。
それぞれどんな感じで調達するのかを書いてみます。
写真
- カメラマンに撮影してもらう
- 画像販売サイトでいい感じのを見つけて買う →これが無難
- 自分で写真を撮る
- お客様が持っている画像を利用する
イラスト
- グラフィックデザイナーに外注してイラストを書いてもらう
- イラスト販売サイトでいい感じのを見つけて買う →これが無難
- 自分で図やイラストを作る →簡単なものは作りましょう
- お客様が持っているイラスト（ロゴなど）を利用する →ロゴはもらいましょう
文章
- ライターに書いてもらう
- 自分でお客様にヒアリングして書く
- お客様に用意してもらう →お願いするのが無難
と検索すれば色々な画像を購入できるサイトが見つかります。
中小企業のWebサイトリニューアル案件に関わったとき、会社外観をカメラマンにお願いして撮影しました。できあがった写真をお客様に見せると「電線を消してほしい」「カラーコーンを消してほしい」と色々不満を言われ仕方なく自分でphotoshopを使い修正加工をしました。写真加工けっこう時間がかかる、、最初から加工作業は別料金にして切り分けるべきだったと反省した経験でした。
デザイン制作
ここからデザイン制作です。完成画面をphotoshopをベースに作っていきます。
ワイヤーフレームがありコンテンツも用意されていればそれをデザインしていく、ということになります。
じゃあデザイン素人はどうやって制作をすすめていくのか？と疑問に思うはず。
参考までに最初にWebサイトをオリジナルで制作した時の僕のやり方は、以下の流れで進めました。
- その１：デザイン制作ツール（Adobe製品）の使い方を学ぶ
- その２：簡単に「デザインの理屈」を知る
- その３：既存Webサイトからサイトを何個もピックアップする
- その４：「目的」＋「デザインの理屈」→おススメデザインを選ぶ
- その５：混ぜ合わせて完成させる
デザインのみでできる副業
photoshopを利用してデザインだけをする、という案件があります。
・ランディングページ（縦に長い1ページWebサイト）のデザイン案件
・インタビュー記事サイトデザイン案件
などがあり、1案件3万円～10万円程度。
ただ、それなりにデザインスキルとphotoshopを使いこなすスキルも必要なので、副業としてデザインのみの案件を対応するには模写をたくさんしてスキルを伸ばさないといけません。
コーディング
コーディングとは、制作した完成デザインをブラウザ（Webページを見るソフト）で見ることができるようにする作業のことをいいます。
コーディングは、「エディタ」と呼ばれるツールを使って、
- html
- css
- jQuery(javascript)
という言語を書いていく作業になります。
htmlは、Webページを作るための最も基本的な言語でWebサイトの文書構造を作ってくれる
cssは、色、文字サイズ、背景色や配置などを指定する（Webサイトの見栄えをよくする）
jQuery(javascript)は、Webサイトに動きを加えてくれる
ざっくりこんな感じ。
スマホ対応のコーディングをすることも普通なので、パソコン用、スマホ用とコーディングしていくことになります。
コーディングのみでできる副業
コーディングができると、デザインをpsdデータ（photoshopデータのこと）をもらってそのデザインをブラウザで表示する、という副業が可能になります。1案件1.5万円～5万円くらいで自分はWeb制作会社から案件もらってます。ランディングページ（縦にながい1ページWebサイト）コーディング案件で5万円とかスマホ対応コーディング数ページとかで3万円などです。
WordPressテーマ化
WordPressとは無料で使えるコンテンツ管理システム（略してCMSともいう）のことです。
コンテンツ管理システムとは、技術的な知識がなくてもテキストや画像などの「コンテンツ」を用意できれば、Webサイトを作れるシステムのこと。
WordPressは世界で最も人気のあるコンテンツ管理システムなので、WordPress案件は世の中に沢山あります。
WordPressの利点は、
・安価に簡単にWebサイトを作れる（テンプレートがあるため）
・コーディング知識の無いお客様がブログ・ニュースを簡単に更新できる管理機能を用意できる
・問い合わせフォームを難しいプログラミング技術を使うことなく利用できるようにする
などです。
そもそも無料のシステムだったら仕事にならないのでは？と思うかもですが、仕事になります。
WordPress自体は無料なのですが、
- インターネットで配布されている無料もしくは有料のWordPressテーマをカスタマイズする
- ０から制作したWebサイトをWordPressテーマ化する
ということをしたい場合、コーディングの知識とWordPressカスタムの知識が必要になります。
とは何かというと、ブログのテンプレートみたいなものでWordPress管理画面から好みのテーマを選んでWebサイトの外観を一瞬で変えてくれます。
WordPressのみでできる副業
このスキルを身につけると、単価も上がります。
既存WordPressサイト修正案件（トップページ修正、下層ページ一部修正）を8万円
で受注できました。1ページ＋αの作業レベルなので単純なコーディング案件と比較すると高い受注金額となります。
４：サーバーアップロード
コーディングまで終了した後は、サーバーにデータをアップロードします。
サーバーとは、コーディングしたファイル（HTMLファイル）を設置する場所のことです。
そうすることで、必要な設定をした後Webサイト上で表示されるようになります。
手順はざっくり
- レンタルサーバーを借りる
- WordPressをインストールする（WordPressを利用する場合）
- ドメイン設定をする（～.com、～.jp等のこと）
- 作成したHTMLファイルをファイル転送ソフトを使ってサーバーにアップロードする
という流れです。
テストサーバーにファイルをアップロードする必要があったり、自分のポートフォリオサイトをWebサイトに表示させる時に必要な作業になります。
レンタルサーバーを借りたり、ドメインを取得するのにお金がかかります。
ファイル転送ソフトは無料でインターネットからダウンロード可能です。
５：運用
Webサイトで表示されるようになったら、運用になります。
- 新着ニュースを更新したり
- サイトに追加で必要な情報を更新したり
- どれだけの人に見てもらえているか測定したり
- WordPressのアップデートしてセキュリティ対策をしたり
- データのバックアップをとって何か不具合が起きた時にデータを元に戻したり
- ドメインの契約が切れそうだから契約更新したり
と運用と一口にいっても色々やることがあります。
ここのどれかの作業を
運用保守
という名目で月額（もしくは年額）で契約できると継続収入となります。
まとめ：全体の流れを知っておけば稼ぎやすい！
「Webサイトをオリジナルデザインで０から制作する手順」を５つの手順に分けて説明しました。
- １：企画（目的整理、ターゲット分析）
- ２：設計（サイトマップ作成、ワイヤーフレーム作成）
- ３：制作（コンテンツ用意、デザイン制作、コーディング、WordPressテーマ化）
- ４：サーバーアップロード
- ５：運用
副業という意味では、
デザイン
コーディング
だけで月10万円を得ることはできます。
ただ、全体の制作フローを知っておくと
- デザイン、コーディングだけ対応している場合前後の工程が分かっていることで自分がやるべきこと、求められていることが明確に理解できる
- 制作手順を知っていることでディレクションもできWeb制作を全て請け負うことができる（できない部分はできる人にお願いする）
というメリットがあります。
一度は企画から制作してみると大変身になりますし
- デザインもコーディングもそれなりにできると、コーディングしやすいデザイン制作ができる、デザイナーに正確な指示だしをできるコーダーになれる
- 企画も設計もできるとユーザビリティの高いUI設計（とっても使いやすいサイト設計）を意識したデザイン制作、SEOを意識したコーディングまで考えられるようになる
というメリットがでてきます。
つまり、制作全体の流れを知っておくと
- 稼ぎやすい
ということ。
この記事では簡単に全体の制作フローを書きましたが独学での勉強方法やより具体的な内容は
「独学」で効率よく０からWeb制作スキルを身につける手順【案件受注につなげる勉強法】
に書きましたので興味がある方は是非参考にしてみてください。
またより詳細な制作フローを知りたい方は
Web制作「企画」手順を制作事例から５ステップでご紹介【Web制作の流れ①】から５つの記事にわたって
企画→設計→デザイン制作→コーディング→WordPressテーマ化
と制作手順を詳しく書きましたのでそちらも参考にしてみてください。
この記事はここまでです。