デザインデータ
デザイナーが作成したデザインデータを受け取る。
Web制作副業とは？
コーディング・サイト構築の
仕事内容と始め方
Web制作副業は、HTMLやCSSなどを使い、
デザインを実際のWebページとして形にする仕事です。
仕事内容、必要な技術、学ぶ順番を紹介します。
Web制作副業は、Webページを実装する仕事
Web制作副業は、デザインのデザインをもとに、HTMLやCSS、JavaScriptなどを使ってWebページを実装し、
ブラウザで見る時のデザインにして反映・動作するように調整する仕事です。
コーディング
HTMLやCSSなどを使ってページを実装する。
表示確認
パソコン・スマートフォンなどで表示や動作を確認する。
納品・公開
問題がなければクライアントに納品し、公開作業を行う。
Web制作副業の 主な仕事
LPのコーディング
ランディングページを、HTML・CSSでコーディングし、実際に表示できるようにします。
企業サイトのページ制作
企業のホームページなどの下層ページをコーディングし、Webサイトを構築します。
WordPressの構築・更新
WordPressを使ったサイトの構築や、既存サイトの更新・カスタマイズを行います。
サイトの修正・保守
既存のWebサイトの修正対応やテキスト・画像の差し替えなど、運用のサポートを行います。
Webデザインとの役割の 違い
Webデザイン
見た目・情報設計・使いやすさを考えるどのような見た目にするか、
情報をどう見せるか、使いやすいレイアウトを考えます。
Web制作
デザインをコードにし、ブラウザで動く形にするデザインをもとに、HTML・CSS・JavaScriptなどで実際にWebページを実装し、ブラウザで正しく表示・動作するようにします。
必要な技術と、初心者が 学ぶ順番
HTMLで構造を作って見る
見出し・段落・画像など、ページの構造を作ります。
CSSで見た目を整える
文字の大きさや色、レイアウトを整えます。
スマートフォン対応、分けする
さまざまな画面サイズで見やすく表示できるようにします。
JavaScriptの基礎を知る
動きのある表現や、簡単なインタラクションを実装します。
WordPressの基本を学ぶ
WordPressを使ったサイトの構築や更新方法を覚えます。
はじめはシンプルなページから制作し、少しずつできることを増やしていきましょう。
受注から納品までの 5つの 流れ
依頼内容を確認する
クライアントの要望や目的、必要なページなどを確認します。
デザイン・素材を受け取る
デザイナーから必要な画像など、制作に必要な素材を受け取ります。
コーディングする
デザインに沿ってHTML・CSS・JavaScriptなどでページを実装します。
表示・動作を確認する
さまざまなデバイスやブラウザで、正しく表示・動作するかを確認します。
修正して納品する
必要に応じて修正対応を行い、問題がなければ納品し、公開作業を行います。
Web制作案件で、受注前に 確認すること
制作するページ数
トップページ・下層ページなど、どのページを制作するかを確認します。
デザイン・文章・画像の支給範囲
デザインデータや文章、画像など、どこまで支給されるかを確認します。
スマートフォン対応の有無
レスポンシブ対応が必要かどうかを確認します。
WordPress対応の有無
WordPressでの構築・更新が必要か、どの範囲まで対応するかを確認します。
サーバー・ドメイン公開作業
サーバーやドメインの準備、設定が必要かどうかを確認します。
納品・修正回数・納品方法
納品の期限や修正回数、納品データの形式などを確認します。
作業範囲と納品条件を、始める前に書面やメッセージで確認します。
BLUE FLAMEで、制作から 仕事の準備まで
基礎からページを制作する
HTML・CSSなどの基礎を学び、
実際にシンプルなページを制作します。
案件を想定し、実践する
さまざまなデザインの制作を経験し、
より実践に近い課題での制作に慣れます。
納品を想定して仕上げる
実際の制作をイメージしながら、
納品までを見据えて制作します。
よくある質問
未経験でもWeb制作副業を始められますか？
基礎から順番に学び、小さな課題を完成させるところから始められます。現在の経験やパソコン操作の状況を整理し、無理のない課題と学習計画を立てましょう。仕事を受ける段階では、対応できる範囲を確認することが大切です。
WebデザインとWeb制作は何が違いますか？
Webデザインは見た目や使いやすさの設計、Web制作は設計をもとにWebサイトとして動く形にする作業が中心です。両者はつながっているため、まずは興味のある側から基礎を学び、役割の違いを理解しましょう。
HTMLとCSSだけでも仕事はできますか？
静的なページ制作や一部の修正など、HTML・CSSを使う仕事があります。ただし案件によって必要な技術は異なるため、スマートフォン対応や公開方法も学び、募集内容に対応できるか確認しましょう。
WordPressを使えば初心者でもできますか？
基礎から順番に学び、小さな課題を完成させるところから始められます。現在の経験やパソコン操作の状況を整理し、無理のない課題と学習計画を立てましょう。仕事を受ける段階では、対応できる範囲を確認することが大切です。
案件を受ける前に何を確認すればよいですか？
仕事内容、納期、報酬、支払い時期、修正回数、素材の権利、連絡方法を確認しましょう。条件が不明確なまま着手せず、合意内容を契約書やメッセージで残しておくことが大切です。