WEBサイト制作までの流れ
突然ですが、
Web制作会社が
Webサイトを受注して
制作する際の流れを
ご存知でしょうか？
コードを打つだけでいいんでしょ
と思われている方いらっしゃると思います。
僕もそうでした。
ただ、
コードを打つだけだと
いつまでもプログラマーのままで
終わってしまいます。
ブラック企業に就職し、
誰でもできる仕事、
上司からのパワハラ、
低収入で仕事へのやりがいがなくなり、
自分の時間、
睡眠時間が削られます。
収入はすべて生活費に消え、
最小限の食事しかできなくなり、
頭が回らなくなります。
さらに仕事が終わらず、
パワハラが増え、
ストレスを抱えてしまいます。
最悪、自ら命を立ってしまいます。
そのようなことにならないために、
より高収入を目指すには
上流工程を担当する
必要があります。
そのためには、
全体の流れを
しっかり
理解する必要があります。
新車を買い、
新型の家具を買い、
タワーマンションに住めます。
お金をできるだけ使い、
自己投資にお金をかける
ことができます。
アニメ鑑賞、映画鑑賞、旅行などの
趣味にも
お金や時間を
使えるようなり、
人生を楽しみながら生きことができます。
格闘技などの今までに
やったことのない事にも
積極的に行え、
自らの可能性を
見つけていくことができます。
今回は
Webサイト制作までの
一般的な流れを
ご説明していきたい思います。
役割
まず、大きく分けて役割が4つ存在します。
1つ目は、ディレクターです。
クライアントと話し合い、
どのようなサイトを作るのかを考え、
全体を指揮します。
次に、デザイナーです。
レイアウトや配色など
サイトの見た目を決定して
完成イメージを作ります。
そして、フロントエンドエンジニアです。
利用者が直接、見たり操作したり
する部分を作成します。
最後に、バックエンドエンジニアです。
データベースとの連携など、
フロントエンドだけでは
実現できない目に見えない部分を
実装します。
このように、
四つの役割を説明してきましたが、
デザイナーとフロントエンドエンジニアを
同じ人が兼ねたり、
フロントエンドとバックエンドを
同じ人が実装したりなど、
フルスタックエンジニアも存在します。
企画・要件定義
ディレクターが中心となって
クライアントと話し合い、
どんな情報を載せ、
どんな機能を実装したいのかを、
ヒアリングします。
この流れを要件定義と呼んでいます。
クライアントにとって
何が必要で、
何を実装するのが重要なのかを
明確にします。
サイト設計
ワイヤーフレーム制作
要件を元にディレクターやデザイナーが
サイトの骨組みを考えます。
サイトのページ構成や、
各ページにどんな機能を持たせるか
を決めます。
この時に作るラフスケッチを
ワイヤーフレームと呼んでいます。
この時、大まかなデザインが
伝わればいいので
手書きの方もいます。
カンプ制作
ワイヤーフレームを元に
デザイナーが完成形の
見本を作ります。
完成形の見た目を
ページごとに一枚の画像
として作ります。
この画像のことを
カンプと呼んでいます。
画像なのでボタンやリンクを
クリックしても反応しません。
プロトタイプ制作
カンプ画像を使って、
クリックなどの操作に反応する
紙芝居のようなものを作ります。
これをプロトタイプと呼びます。
プロトタイプは実際にブラウザ上で動きます。
実際のユーザーと同じ感覚でサイトを
眺めることができます。
中身の機能はまだできておらず、
あくまで使い勝手が良いかどうかを
確認するためのものです。
コーディング（実装）
ここから皆さんがご存知の
本格的に使っていきます。
デザイナーが作った素材から、
フロントエンドエンジニアが、
実際にブラウザ上で動くよう実装していきます。
この作業をコーディングと呼びます。
サーバサイド処理が必要な場合は
バックエンドエンジニアと協力して、
開発を行います。
コーディングによって実装された制作物を
ソースコードと呼んでいます。
テスト
本番とほぼ同じテストサイトを用意して、
不具合がないかどうか確認し、
クライアントと一緒に最終確認を行います。
公開
ソースコードや画像など
一式を本番環境にアップロードして
公開すればWebサイトの完成です。
Webサイト制作までの流れを
簡単に
説明してきました。
収入アップには、
必要な知識なので覚えましょう。
P.S.
プログラミングを
学びたいが
何をすればいいのか
わからない方や、
独学で勉強している方
に向けて、
Webサービスを作れる
までに必要だと思う
プログラミングの知識を、
LINE@で発信し
始めました！！
無料で登録できますので、
これから
プログラミングのスキルを
本気で
身に着けたい人、
大歓迎です！！
ぜひ、この機会に
登録してみてください！！
⇩ ⇩ ⇩ ⇩ ⇩ ⇩ ⇩
ここでやるかやらないかで、
将来後悔するかが決まります！
