WEB制作の流れ【WEB制作初学者向け】

この記事を書いている人について【About】

• 2021年12月からHTML＆CSSの学習スタート【初学者です】
• 学習はコーディングのみでデザインはまったく未経験
• 2022年5月にWEB制作会社へ転職予定
• 転職先会社のOJTとしてWEB制作の全ての工程を任され中

この記事では主にこんなことを書いています

• WEB制作の流れ
  • どんなことをどんな順番でやるのか

WEB制作と聞いてどんなことを想像しますか？？
おそらく、WEB制作初学者の方は

• WEBデザイン？？
• コーディング

この２つをまず想像するのではないでしょうか？？

こんな人に向けてこの記事は書いています

• プロゲートやドットインストールなどでHTML＆CSSを勉強している人
• WEBデザインを独学して間もない
• WEB制作の全体像をざっくり知りたい

WEB制作の流れ（どんな順番で何をするのか？）

この記事を書こうと思った背景なんですが
転職先の社長から

ということで、WEB制作ってコーディング意外はどんなことをするのか？
コーディングってWEB制作の業務の中でどんな位置づけなのか？
的なことを、調べて、まとめてみました。

「WEB制作ってどんなことをするんだろう？？」
っていまいちわからない。そんな、私を含めた
初学者さん向けの記事になっております。

企画・立案

WEB制作において、一番最上流工程である。

目的

企画立案のフェーズでは以下2点を決める必要があります。

1. どんなサイトにするのか
2. 誰に向けて作るか

まず、どんなサイトにするのか？ってことなんですが

WEBサイトには種類があります。
大体、こんなとこでしょうか。

• コーポレートサイト
  いわゆる、企業のホームページ
• ポートフェリオサイト
  クリエイターの作品集
• ランディングページ
• ECサイト

どんな人に向けて？

• 性別
• 年齢層
• 職業
• 趣味
• 悩み
• 収入
• 国や地域

「誰に向けて」を考えることをペルソナ設定と言ったりします。
ここが明確でないと、デザインが決まらないので、めちゃくちゃ重要です。
何故かというと
10代の女子に向けて
30代後半の男性に向けて
では、明らかにテイストを変えなければならないというのは
想像に難くないはずです。
ざっくりですが、以下のような違いが出てきます。

• 10代女子
  • 丸ゴシック
  • ポップな感じ
• 30代後半の男性
  • 明朝体
  • シックな感じ
    

サイトマップの作成

どんなサイトにするのか
誰に向けての部分が決まった後は
どんな内容にするか？を決めていきます。
xmindやEXCELなど使いやすいツールを使うとよさそうです。

ワイヤーフレームの作成

• 何を目的としたサイトか
• 誰に向けてのサイトか
• どんな内容にするのか

これらが決まった後には、ワイヤーフレームを作成します。
ワイヤーフレームとは、サイトのたたき台。下書きのようなものです。
xdというAdobeのツールを使います。

• やること
  • レイアウトの流れ
    • どこに、どんなコンテンツをどれくらいの領域で配置するか
    • 配色とかどんな画像を配置するとかはまだやらない

デザイン作成

狭義のWEBデザイナーというと
ここだけを担当する人のことを指すと思います。
この工程での制作物をデザインカンプという。

• 目的
  視覚化する
• やること
  • デザインカンプを作成する
    • 画像の選定
    • 画像の作成
    • 配色
      • 色をどこにどんな色を配置するか
  • フォントを決める
• 使用ツール
  • PhotoshopやIllustrator
  • o-danやpixabayなどの画像素材サイト

コーディング

• 目的
  • デザインカンプを元にコーディング（コードを記術）を行う
    
• やること
  • HTML
  • css
  • JavaScript

などのプログラミング言語を使ってコードを記述します。

• 使用ツール
  1. Visual Studio Codeなどのエディター

HTML＆CSSを使ったコーディングというのは
後工程というなんだね。　

リリース

自分のパソコンの中にファイルがあるだけでは
閲覧できるのは、自分だけになります。
世界中に向けて公開するための準備をします。

• サーバーを用意する
• ドメインを取得する

まとめ

はい。ということで、WEB制作における工程と順番をまとめてみました。
大きいWEB制作会社さんだと完全分業制になっているようです。
例えば、デザイン専門を担当する人。
コーディング専門な人。
小規模なWEB制作会社は、兼任をする場合がほとんどなようです。
ちなみに、僕の転職先の会社は小規模なので
兼任できるようになってほしいとのこと。
なかなか、学習することが盛りだくさんで
ひより気味ですが、がんばります。