デザイナーだけど、クライアントワークでコーディングが必要になり、コーダーへ外注する場合があると思います。

ですが、いざコーディング業務のことを考えると、「コーディング業務の流れをある程度把握しておきたい…」「ディレクションをするけどどんな情報が必要なんだろう…」
といった悩みが出てくるかと思います。

この記事では、そんなデザイナーさん向けにコーディング業務の流れと注意事項を紹介します。
参考にして円滑に案件を進めてください！

コーディング業務の流れ（作業前から納品）

外注することを踏まえて、作業前から納品までの流れを紹介します。

前提として、構成やデザインは確定している状態とします。

コーディング作業開始前

作業開始前のゴールは、見積もりの概算を出し、コーディング作業が着手できる状態になることです。

①状況把握

まずはどの業務においてもですが、現状を把握します。
具体的には、

• 新規構築なのかリニューアルなのか。
• デザインは終わっているのか。
• WordPressなのかそうではないのか。

など、そもそも何をするのか確認します。

△注意事項
当然ですが認識がずれないようにしましょう。
状況によってかかる項数も全く違うので、お互い不明点がないようにしましょう。

②デザイン/構成の把握

現状が把握できたら、コーディングするサイトが何ページくらいになるのか、どんな構成でどんなデザインなのか概要を把握します。

また、デザインの状態によってコーディングの時間も大きく変わってきます。

・デザインデータのソフトはなにか。
→PSD、XD、AI、Figmaなどソフトによってコーディングのしやすさ、得意不得意があります。
・コーディングしやすいデザイン状態になっているか。
→統一感がなかったり、雑な状態だと当然時間がかかります。

詳しくはこちらの記事で紹介しています。

△注意事項
デザインによってコーディングにかかる期間が全く違うので、ここもお互い不明点がないようにしっかり把握してもらいましょう。

③質問事項を確認

どんな構成か把握できたら、作業を開始する上での質問事項を洗い出します。

例えば

• ドメインの変更の有無
• サーバのログイン情報
• WPのログイン情報
• 目的の確認(なんのための案件なのか)
• 納期
• 検証環境はあるのか
• タイトルやファビコンなどSEO関連の内容は決まっているのか
• スケジュール
• 納品後の修正有無
• コーディングルールはあるか
• セキュリティ設定の実装は必要か

などを気にします。

△注意事項
もちろん案件によって確認することは様々です。
上記を参考に、コーダーがあらかじめ質問してきそうな内容はピックアップしておきましょう。

④見積もり

質問事項が確認できたら、ようやく見積もりが出せるようになると思います。
どれくらい予算が掛かりそうか見積もり概算を確認します。

△注意事項
予算感が大きくずれないように、あらかじめコーダーさんへ提示しておくとスムーズです。
また、追加修正や納品後の修正に関しては結構揉めるポイントになります。

追加料金が発生するのか、1回までは無料、1ヶ月は無料など範囲を明確にしておき、トラブルが起きないように決めておきましょう。

コーディング作業開始

作業開始してからは、納品がゴールです。
納品は一般的には、作成したサイトを公開した状態です。

また、コーディングの指示書がある場合は、コーディング作業開始前に共有しておきます。

①フォルダ構成

まずは、コーディング作業をするフォルダの作成をします。
わかりやすく一般的な構成は、以下の構成になります。

• 案件のフォルダ直下にindex.html
• CSSファイルが入る「css」フォルダ
• 画像ファイルが入る「images」フォルダ
• JavaScriptファイルが入る「js」フォルダ

△注意事項
基本的には、コーダーに任せていいと思いますが、分かりづらいフォルダ構成にしてしまう可能性もありますので、事前に共有するか、コーディングの指示書に記載しておきましょう。

フォルダ構成が変わると、修正の手間も大きいので手戻りが起きないように注意しましょう。

②デザイン全体の把握

具体的に色やフォント、共通化できそうなパーツなどデザインをどのようにコーディングしていくかを把握します。

例えば

• 色の種類
• フォントの種類
• パーツの把握
• 余白のルール
• ホバー時の動作

などを確認し、コーディングのゴールをイメージします。

△注意事項
デザイン上の不明点がある場合は、コーダーから質問がくるので認識を合わせます。
余白のルールやホバー時の動作は、質問される可能性が高いので、デザインや指示書であらかじめ通達しておくと良いでしょう。

③クラス名の設計

デザインの全体像を把握したら、クラス名の設計も先にします。

その都度クラス名をつけると、気分で付け方ややり直しが発生する可能性があるので、どのセクションにどのクラス名をつけるかを、紙やデザイン上でメモします。

運用しやすい、わかりやすい構成のクラス名であることが望ましいので、コーダーはそれらを意識しながら設計します。

△注意事項
クラス名のつけ直しをすると、かなり時間もかかりますので、クラスの命名規則がある場合は、デザイン上や指示書にあらかじめ書いておきましょう。

特に命名規則がない場合は、基本コーダーにおまかせでいいと思いますが、ディレクションをやる場合は、命名規則の有無を聞かれる可能性があるので、把握しておきましょう。

④画像準備

画像の準備も一気に実施します。
デザインから画像を書き出す際に形式を選んだり、画像に名前をつけたりサイズ調整したり、結構手間の掛かる工程のため、効率よく一気に実施します。

画像の名前は、クラス名と関連付けて同じ名前にすることが多いです。
また、画像の圧縮も同時に実施します。

△注意事項
画像サイズが大きいとサイトの表示速度が遅くなってしまうので、画像が圧縮されているかは確認しましょう。
また、画像名が日本語のままであったり、わかりにくい命名は望ましくないです。
圧縮の有無や画像名も指示書に記載しておきましょう。

⑤HTML/CSSのコーディング（レスポンシブ）

①〜④の準備ができたら、コーディングを開始します。

ここはやり方が人それぞれで、

1. 一気にHTMLをコーディング→一気にCSSをコーディング→レスポンシブ
2. １セクションのHTMLをコーディング→CSS→レスポンシブ→繰り返し

のパターンがあります。

コーダーの好みやスキルレベルでやり方も変わるので、進捗度合いは注意しましょう。
HTMLは「index.html」、CSSは「style.css」にそれぞれ書いていきます。

△注意事項
コーディングはそもそも時間がかかるので、進捗はこまめに把握しておきましょう。
規模が大きいサイトほど細かいスケジュールを組んで、納期に遅れないように舵取りしましょう。

⑥JavaScript

一通りサイトの見た目が完成したら、JacaScriptでサイトの動きやアニメーションを実装します。
jsフォルダに「script.js」などを作成し、コードを書いていきます。

△注意事項
クライアントの想定しているアニメーションと認識がずれないように注意します。
言葉よりも実際に見たほうがわかりやすいので、参考サイトを利用すると認識がずれにくいです。
また、コーダーへは、デザインまたは指示書にどういったアニメーションを実装するか記載しつつ参考サイトを載せて伝えましょう。

⑦SEO関連の設定

順番はコーダーによりますが、JavaScriptの実装前か後に、SEO関連の設定を実施します。

• description（ページの説明）
• title（サイトタイトル）
• alt属性（画像の説明）
• OGP（SNSのリンク共有時の表示）
• ファビコン

△注意事項
クライアント側で文言や画像を用意するのか、こちらで文言や画像を用意するのか事前に確認必須です。
そもそもSEO関連の項目を考慮しないコーダーさんもいるので、ディレクター側で舵取りを忘れないようにしましょう。

SEO関連の項目もデザインした指示書に記載して、認識齟齬が起きないようにしましょう。

⑧WordPressの場合はPHP化

WordPressに実装する場合は、一通りコーディングしたものをPHPに変換します。

必要に応じて、プラグインの導入も実施します。

また、クライアントの使いやすさを求めて、WordPressの管理画面の設計をどうするか考える必要があるので相談しながら実施していきます。

△注意事項
プラグインは、入れると重くなったりするので入れすぎには注意が必要です。
また、WordPressはセキュリティの設定も必要な場合が多いので、忘れずに確認しましょう。

管理画面の設計はコーダーにおまかせでもいいとは思いますが、クライアントファーストで使いやすいサイトとなるよう、ある程度WordPressの基本機能は把握しておき、コーダーと相談しながら進められるのが良いでしょう。

⑨公開前確認

サイトの表示や、認識が間違っていないかなど、公開しても問題ないかの確認をします。

確認内容の詳細に関してはこちらの記事で紹介しています。

△注意事項
確認は、コーダーにすべて任せるのではなくディレクターも確認しましょう。
ダブルチェックをすることで高品質な納品をすることが望ましいです。

⑩クライアント確認

確認が完了したら、クライアントへ確認してもらいます。

修正がある場合は、都度対応します。

△注意事項
修正がある場合がほとんどです。
修正ある前提でスケジュールを組むことをおすすめします。

⑪納品（公開）

クライアント確認が完了したら納品です。
作成したサイトをクライアントの環境へアップロードします。

△注意事項
作業する日時は、事前にクライアントへ通達しておきましょう。
リニューアルの際は、既存のサイトが止まってしまうのがNGなクライアントもいます。

もちろん止まらないように作業をするのがベストですが、万が一に備えてサイトの閲覧者が多い時間は避けるなどの、認識は合わせましょう。

最後に

コーディング業務の流れと注意事項を紹介しました。

実際は人によって違うので、紹介した順番は前後する可能性はありますので、臨機応変に対応しましょう。

注意事項を記載しましたが、一番重要なのは、認識齟齬が起きないようにすることです。

クライアントへも、コーダーへもコミュニケーションを細かいくらいとり、納品までトラブルのないよう尽くしましょう！