【大手企業Webデザイナーが教える】Web制作のフローとは？
Webデザインに興味があるんだけど、Webサイトの制作フローってどんな感じなの？
と気になっている方向けに、
・元東証一部上場企業のインハウスWebデザイナー(6年)
・在宅勤務(リモートワーク)
・Webデザインオンラインスクールのメンター
・秘書技能検定１級、色彩検定１級を保持
・Webデザイナー新卒採用にも携わっていた
が「Web制作のフロー」について解説していきます。
目次
Web制作のフロー
- Webサイトの企画
- Webサイトの設計
- Webデザイン制作
- コーディング(HTML・CSS・JavaScript)
各Web制作フローの項目について、細かく解説していきます。
1. Webサイトの企画
Webサイトを作成する時は、いきなりWebデザイン(見た目)から作成していくわけではありません。
まずは、Webサイト作成を依頼してきたクライアント(依頼主)から「Webサイト作成の目的」「Webサイトを利用するターゲットユーザーの想定(ペルソナ)」などについてヒアリングしつつ、Webサイトのゴールを設定していきます。
その際、どんなWebサイトの見た目にしていくかについても参考になるWebサイトを見せつつイメージを膨らませていきます。
企画段階では、クライアント(依頼主)のWebサイトに対する要望をしっかりとヒアリングしてお互いの認識に間違いがないようにしておきます！
2.Webサイトの設計
上記の企画内容をもとに、作成するWebサイトに必要なページを洗い出し掲載する情報を整理していきます。下図は、あくまでも参考ですがある企業のWebサイトにどんな情報を盛り込むかを情報設計している図です。情報の洗い出し、分類、整理、構造化していくのもWebデザイナーの仕事となります。
また、クライアントにもしっかりとWebサイトの設計を共有し、認識を合わせておくことが重要です。なぜなら、これ以降はWebデザイン作業に入るため「Webサイトに入れる内容のイメージが違った」となった場合、設計段階へ戻りや修正が発生してしまう可能性があるからです。
Webサイトの設計は重要なポイントなので、しっかりとクライアントと認識を揃えましょう！
3. Webデザイン制作(デザインカンプ)
ここからは、実際にWebデザインをしていきます。
上記のWebサイトの設計でサイトの骨格ができているため、それをもとにWebデザインを行います。Webデザインをする際に使うデザインツールは下記があります。
- Adobe Illustrator(アドビ イラストレータ)
- Adobe Photoshop(アドビ フォトショップ)
- Adobe Xd (アドビ エックスディー)
- Figma (フィグマ)
- Sketch (スケッチ)
色々なデザインツールが存在しますが、デザイン業界において代表的なAdobe Photoshop(アドビ フォトショップ)や、Adobe Illustrator(アドビ イラストレータ)を使用すると良いでしょう。
Webサイトの骨格ができたとしても、下記のような事柄を決めながらデザインしていく必要があります。
- サイト全体の配色
- 使用するフォント
- 具体的なレイアウト
- サイト内の文章(テキスト)
- 使用する写真や画像
Webデザインをする前に、クライアントがイメージしているサイトデザインをヒアリングしておくことも大切です。例えば、ピンタレストやWeb制作参考サイトなどを共有して、イメージしているデザインをお互いに認識しておくと後々になってちゃぶ台返しなどがなくなります。
Webデザイン段階で、こちらが伝えたいイメージをWebサイトを見る人に伝わるようにデザインしていきます！
4. コーディング(HTML・CSS・JavaScript)
Webデザインが出来上がったら、実際にWebサイトとして触ったり見られるように「コーディング」という作業をしていきます。実際のWebサイトとして形にしていくには「HTML」「CSS」「JavaScript」といった技術を使ってWebサイトを構築していきます。
HTML
HTML(エイチティーエムエル、HyperText Markup Language)とは、Webサイトを作る時に用いる言語です。今あなたが見ているこのWebサイトも、HTMLで作られています。建物でいう「骨格となる鉄骨や木造部分」にあたります。
HTMLでは、見出し・段落・表・リストといったWebサイトの骨格となる情報を記述していきます。この段階では、見た目に関する色や、文字サイズやレイアウトなどは設定していきません。
CSS
HTMLでWebサイトの骨格をマークアップした後、このCSS(Cascading Style Sheets、カスケーディング・スタイル・シート)を使い見た目(文字サイズ・色・レイアウト)を設定していきます。建物でいう「外壁や、内装部分」にあたります。
JavaScript
JavaScriptは、Webサイトに動きや見た目を動的に変えたりするなど、HTMLやCSSだけでは実現できない複雑な処理を加えるときに用います。JavaScriptはプログラミング言語のため、ある程度知識が必要となります。Webデザイナーを目指す場合、プログラミング言語も扱えるようになると収入も高くなりますし、重宝されます。
5. レンタルサーバーへアップロード
コーディングまで行なったら、レンタルサーバーへアップロードし、インターネット上で見られるように設定を行います。また、基本的にレンタルサーバーとセットでドメインも設定することが多いです。レンタルサーバーやドメインについて詳しく知りたい方は下記の記事をご覧ください。
まとめ
いかがだったでしょうか。
Web制作会社やWebデザイナーによっては多少違いはあれど、大まかなWeb制作の流れはあっています。Webデザインを学ぶ事に興味がある方は、下記の記事を参考にしてみてください。
