おはこんばんちは。最近うほほーいなYMOです。
私はスマホアプリ開発やWEBサイト制作に携わっていますが、
妻に『どんな仕事してるの？』と聞かれた際に、『スマホアプリとかホームページ作っているよ！』と伝えても、 イメージがつかないようで・・・未だに私が何の仕事をしているか理解していないようです・・・。
現在（2020/2/14時点）ストリクスではWEBディレクターを募集していることもあり、
WEBサイト制作にはどんな工程があり、どんなスキルが必要なのかを纏めてみることにしたんだとさ。
募集内容はこちらをご参照ください
案件によりストリクスで担当する範囲は変わりますが、WEB制作には主に以下の工程があります。
要件定義
クライアントが求める要求に対し、実装すべき機能や制作する画面、構造や作り方などを定義していきます。
要件の細分化や優先事項、予算との兼ね合い、経験と知識からくる判断が必要となり、 プロジェクトの大枠を決める必要があるので、シッカリとクライアントさんと議論を重ね、認識に齟齬がないよう進めることが重要です。
画面設計（ワイヤーフレーム）
必要な構成要素の確認とコンテンツの優先順、画面遷移などを決定します。
どのような要素（テキスト、写真など）が必要かなどの検討をして、WEBサイトの目的を果たせるよう見やすい配置、使いやすいUIを作っていきます。
場合によってはHTMLコーディングやシステムロジックを意識した構成にする必要があるので、裏側の仕組みも少しは理解していないといけません。
画面デザイン
設計をもとにデザインを行います。
設計書は通常はデザインの観点は含まれていないので、デザイン工程にて「色」や「フォント」、「細かなサイズや位置」、「装飾」を行ったり、「写真補正」や「イラスト作成」などを行い画面を完成させます。
またHTMLコーディング用のパーツ画像の書き出しや、場合によってはデザインの差異がでないようコーダー向けにデザイン指示書を作ることもあります。
HTMLコーディング
デザインをもとにHTMLコーディングをします。
コーディングを始める前にファイル構造や設計方法を決定します。
また、ファイルの「バージョン管理」や「デプロイ方法」、「共通パーツのモジュール化」や「JavaScriptのポリシー」、「コーディングルール」なども決めて、各メンバーの役割分担した上でコーディングを進めます。
実機試験
HTMLページが正しく表示されるか各実機で試験します。
対応端末にもよりますが、デバイス（PC、スマホ、タブレット）、OS（Windows/Mac、iOS/Android）、ブラウザ（IE、Safari、chrome）など、 多くのパターンでの試験が必要になります。
「デザインが崩れていないか」、「実機でみたときに操作性は担保できているか」などをチェックします。
システムへのデザイン反映
「WordPress」などのCMSやWEBアプリケーション上で動作するサイトの場合は、 制作したHTMLをシステムのデザインテンプレートに組み込む必要があります。
HTMLの知識にプラスしてシステムロジックや場合によってはシステムの独自タグを理解する必要があります。
エンジニアさんがデザインパーツの組み込みをすることが多いですが、ロジックを理解しているコーダーさんが組み込んじゃうケースもあります。
最終試験
システムに組み込んだデザインが正しく表示されるかチェックします。
プロジェクトにより対応範囲は異なりますが、システムと連携してデザインが正しく表示されるか、 クライアントの要件を満たせているかの最終的な試験になります。
※上記はデザインの観点での試験になります。
システムの試験を行う場合は各アプリケーションの連携などの試験なども必要になります。
サイトリリース
クライアントさんの検収が完了したらリリースを進めます。
リリース計画は前もって立てておく必要があります。
サイトリニューアルの場合はメンテナンス画面を出すのか、システムがある場合は切り替え手順などを慎重に決定したのち、 当日のタイムスケジュールを細かく決めていきます。
リリース後にライブ環境で最終チェックを行ない問題なければ無事にリリースが完了です。
あとはリリース祝いに飲みに行くだけですね！！
どうでしたか？ストリクスではこんな感じでWEB制作をやっています。
ストリクスでWEBディレクターとして働いてみたい！もう少し詳しい話が聞きたい！と思ったそこのアナタ！
↓からお気軽にメッセージお待ちしてます！もれなくYMOが喜びます！
それでは、また逢う日まで～バイちゃ！
