こんにちはTERUです。
フリーランスでWEB制作（コーディング と ディレクション業務）をしています。
読者の悩み
- 制作会社さんからの案件を進める上で何を確認しておかないといけないの？
本記事では、こういった疑問に答えます。
制作会社さん毎に制作のルールは異なります。
僕もフリーランス初めたころは、このルールの認識合わせができてなくて、いくつかトラブルを経験しました。
制作会社さんから受託案件をこなす際に、最低限認識を合わせておいた方がいい項目（ルール）について、僕のこれまでの経験をもとに説明します。
本記事では、WordPressを用いたweb制作を想定しています。
※直案件の場合でも、複数人のチームで制作する場合には、役に立つと思います。
これからフリーランスとしてWeb制作を行いたい方は、参考にしてみてください。
本記事の信頼性
- Web制作会社にてディレクターを経験
- WordPressを使ったWeb制作を数多く経験
- 2019年8月〜フリーランスとして活動開始
Web制作を行う際に最低限確認しておくルール12選
Web制作を行う際に確認しておくルールは、以下になります。
- ガイドラインの有無
- サーバースペックの確認
- 開発環境の確認
- 納品方法
- 動的コンテンツの確認
- プラグインの制限
- アニメーションの確認
- 移行作業の範囲
- レスポンシブサイトの有無
- ブレイクポイントの確認
- IE対応の有無
- 保守作業の有無
１つずつ説明しますね。
ガイドラインの有無
制作会社さんによっては、デザインやコーディングのガイドラインがあります。
ガイドラインとは制作する上での決め事をまとめたものです。
クラス名の付け方やディレクトリ構成など、後からやり直しになるのはシンドイので
ガイドラインの有無は、初めに確認しときましょう。
サーバースペックの確認
現在契約しているサーバースペックを確認しましょう。
PHPのバージョンによっては、WordPressの最新版をインストールできない場合や機能に制限がかかる場合があります。
※状況によっては、サーバー契約の見直しも考慮する必要があります。
開発環境の確認
リニューアル案件の場合、開発環境の確認が必要になります。
開発環境のパターンは、大きく３つです。
- 現行環境の下層ディレクトリに構築
- 制作会社さんの開発環境
- 自分の開発環境
数は多くないですが、自分で開発環境を作って構築してくださいとの依頼を受けることもあります。
なので自分のサーバ環境はもっておくのがオススメです。
ポートフォリオ公開やテスト環境など活用方法はいくつもあります。
※僕はX-SErverを利用しています。月1000円ほどです。
新規案件の場合は、本番環境に構築していく流れが一般的なので、心配ないです。
納品方法
納品方法については、以下のポイントを確認しましょう。
- ファイル一式を提出するだけでいいか
- サーバーに設置するところまでなのか
僕の場合、サーバーに設置して納品するという形が多いです。
また、納品後に修正をお願いされる場合もあるので、納品時のデータは、必ずバックアップを取っておきましょう。
※納品後にコードが触られてて、こちらで修正する際にコードが崩壊しているという惨事を防止できます。
動的コンテンツの確認
WordPress案件の場合、動的コンテンツの確認は必須です。
なぜなら、動的コンテンツの量で作業ボリュームが大きく変わるからです。
具体的には、下記のような項目で作業ボリュームは大きく変わってきます。
- カスタム投稿の有無
- カスタムフィールドの有無
- 検索機能の有無
見積もりにも影響するので、案件相談された時点で確認しましょう。
プラグインの制限
WordPressでは一部の機能をプラグインを用いて実装することがあります。
例えば以下のようなパターン
・問い合わせ機能
→ContactForm7、MWPForm
・SEO対策機能
→Yoast、All in One SEO Pack
他案件でも利用しているので保守しやすなどの理由から、制作会社さんによっては、利用して欲しいプラグインがあるかもしれないので確認しておきましょう。
アニメーションの確認
最近はアニメーションを用いたサイトが増えています。
コーディングに入る前に以下の観点でアニメーションについて確認しましょう。
- マウスホバー
- プリローダー
- メインビジュアル（スライダー等）
デザインデータだけでは伝わりづらい部分なので、しっかりと認識合わせをしておきましょう。
参考までによく使うマウスホバーの例は以下の記事にまとめています。
移行作業の範囲
リプレース案件の場合、移行作業の範囲について確認しておきましょう。
確認するのは、以下のような観点になります。
- 本番環境への切り替えは作業範囲内に入るのか？
- 過去記事の移行作業は含まれるのか？
- 過去記事のリダイレクト処理は必要なのか？
本番環境への切り替えや記事の移行作業が発生する場合、
切り替え作業の内容や過去記事の本数によって、移行作業に時間がかかります。
その点も考慮した上でスケジュールを設定しましょう。
レスポンシブサイトの有無
レスポンシブサイトの有無も念のために確認しておきましょう。
今では、ほとんどの案件がレスポンシブサイトですが、ためにPC用とスマホ用でテンプレートを分けて作成する場合があります。
その場合、デザインやコーディング作業量にも影響があるので注意が必要です。
ブレイクポイントの確認
レスポンシブサイトの場合、ブレイクポイントを確認しておきましょう。
制作会社さんや案件によって、レスポンシブサイトでもどこまで対応するかに違いがあります。
僕の場合、768px（タブレット用）、480px（スマホ用）の２つのブレイクポイントで作成するのが多いです。
制作会社さんに事前に上記のブレイクポイントでいいか確認してから作業しています。
レスポンシブ表示の確認には下記のツールがオススメです。
複数の端末表示を同時に確認でき、各端末表示の単位でスクリーンショットも簡単に取れるので便利です。
IE対応の有無
IE対応に関しても、必ず確認しましょう。
確認作業のボリュームが変わってきます。
具体的には、以下の観点です。
- IEでの表示確認は必要か
- 対応する場合、最新バージョン（IE11）のみでいいか
IEの場合、使えないCSSがあり、レイアウトが崩れるパターンが多くあります。
現状、IEの利用は少ないですが、クライアントによっては利用している環境もあるので確認しておきましょう。
僕も基本的には最新バージョン（IE11）での確認のみ行うパターンが多いです。
参考：WebブラウザシェアランキングTOP10(日本国内・世界)
保守作業の有無
リリース後に保守作業を行うのかどうかも確認しておきましょう。
具体的には、以下のような作業が必要になるかもしれません。
- メタタグの設置→タイトル、ディスクリプション、キーワード
- アクセス解析ツールの導入
- ファビコン/Webクリップの設置
事前に確認して対応することで、制作会社さんとの信頼関係も築くことができます。
今回はWeb制作を行う際に最低限確認しておくルールをテーマに自分の経験を元にまとめてみました。