Webサイトを作ってみたいけど「サイト制作がどんな手順なのかわからない。」「全体像がつかめない…。」そんな方に向けて、本記事ではWeb制作の全体の流れをわかりやすく解説します。
Webサイト制作は一見難しそうに思えますが、全体の流れを知れば自信にも繋がり、次になにをすればよいのか見えてくるのでサイト制作がスムーズに行えるようになります。
それでは、一緒に学んでいきましょう。
Web制作の流れを理解しよう
Web制作は、「企画」→「デザイン」→「構築」→「公開」 という大きなステップで進められます。
それぞれに細かい作業が含まれていますが、ひとつずつしっかり進めていけば心配ありません。
ここでは、初心者でもイメージしやすいよう、具体的な手順と解説を入れて詳しく見ていきます。
また、ここで全てを覚えようとしなくて大丈夫です。見出し毎におおまかに覚えて、理解が深まってきたら、あとから肉付けしていきましょう。
案件の立ち上げと企画
Web制作の最初のステップは「案件の立ち上げと企画」です。
案件の立ち上げ
クライアントと打ち合わせを行い、「サイトを作る目的」 や「ターゲット」を明確にします。
たとえば、「商品の販売促進」や「ブランドの認知向上」など、目的によってサイトの内容・種類が変わります。
店舗など持っている集客用サイトの場合、Googleマイビジネス登録や設定も依頼されることがあるので立ち上げ段階で確認しておきましょう！
※初心者がいきなりクライアントワークで実践することはないと思うので現段階では、そんな作業もあるのね。程度で頭の片隅においておいてもらえばOKです。
構成とスケジュールの作成
次に、サイト全体の大まかな内容（ページ構成）を決めます。
たとえば、トップページ、サービスページ、会社概要ページ、問い合わせフォームなどをリストアップし、作業スケジュールを組みます。
クライアントがいる場合、このあたりで原稿をいただけるか確認しましょう！コピーライティングが必要であれば制作期間を長めにとる必要があります。
テキスト量でもレイアウトが変わってしまうため、構成段階でテキストを決めておくと安心です。
クライアントが原稿準備している場合は、デザインに進んだ段階には必ずもらえるようにしておきましょう。
ワイヤーフレームの作成
サイトの構成が決まったら、次はワイヤーフレームを作成します。ワイヤーフレームとは、Webサイトの設計図のようなものです。
テキストの配置や画像の位置を簡単に示し、デザインのベースを作ります。
初心者の方は手書きでノートなどにワイヤーを書いて進めていく方針でも良いですが、クライアントがいる場合には承認をいただくため、無料でも使用できる「figma」などのデザインツールなどを使ってワイヤーフレームを作ってみましょう！
デザイン制作と素材準備
ワイヤーフレームが完成したら、次はデザインカンプ（完成イメージのデザイン案）の作成に進みます。
この段階では、以下のことを行います。
- PC、スマホ両方のデザインを用意（必要に応じてタブレット版も）
- サイト内で使用するバナーや素材を準備（スマホ用に適した画像も準備する）
- 配色やフォントの調整
クライアントと密にコミュニケーションを取りながら、デザインを確定させます（デザインFIX）。
テストサイト構築とコーディング
デザインが確定したら、テストサイト（本番環境に公開する前の仮のWebサイト）を構築します。
ここでは、まだ制作段階のため、他の人が見れないようベーシック認証（サイトにパスワードをかけて見れないようにする）などをして非公開状態にしましょう。
テストサイトの準備が出来たら、次はコーディングに進みます。コーディングとは、デザインをWeb上で動く形にする作業です。
最終確認とサイト公開
コーディングが終わったら、サイトの表示や動作確認を行います。以下に表示確認、動作確認の代表的な項目をあげます。
- 表示速度の確認（遅いと離脱されてしまう可能性があるため、遅い場合は対応）
- リンクチェック（内部リンク、外部リンクが問題なく動作しているか、リンク先は適切か）
- ボタンの大きさやユーザーが触れるスペースは適切か
- PC、スマホ、タブレットの見え方は問題ないか
- 各デバイス、各ブラウザで問題なく表示されているか、動きは正常か
など
以下のステップで、最終確認を行います。
各デバイスPC、スマホ、タブレットやOS（Windows、Mac、iPad、iPhone、androidなど）で表示と動作確認
各ブラウザ（Chrome、Safari、Edgeなど）で表示と動作確認
クライアントが契約したサーバーやドメインを準備して、テストサイトから本番環境に反映
テストサイト同様に各デバイス、各ブラウザ毎に確認
特にテスト環境と本番環境が違う場合、表示に違いが出る事が多いので、要チェックです。
すべてが確認できたら、いよいよWebサイトを公開します！
ベーシック認証（サイトにパスワード）をかけていたら、外してください。
Googleサーチコンソールを使用して、サイトをインデックス（Google検索エンジンにこのサイト新しくできましたよ～と報告）させよう！
まとめ
Web制作は、難しそうに思いますが、基本の流れを押さえておけば内容は違えど、フローは同じなので、安心して進められます。
初心者の方は、以下のポイントを意識しましょう。
- 企画をしっかり行い、ゴールを明確にする
- 作業ごとのチェックを怠らない
- クライアントとの密なコミュニケーションを心がける
少しずつ「自分が理解してきている！」と実感できると、Web制作がもっと楽しくなるはずです。
それでは、またお会いしましょう！
コメント