次は構築フェーズです！
実務経験のあるデイトラのWeb制作コース卒業生に依頼する場合はそこそこお任せにしてしまっても上手くいくことが多いですが、特に初心者や駆け出しコーダーは不安に思う事も多いのでできるだけ導いてあげられるとスムーズです！🙌
- 課題3-1-1 「デザイナーに依頼しよう！」
- 課題3-1-2 「デザインをチェックしよう！」
- 課題3-1-3 「クライアントに確認してもらおう！」
- 課題3-2-1 「コーダーに依頼しよう！」
- 課題3-2-2 「Webサイトをチェックしよう！」
課題3-2-1｜コーダーに依頼しよう！
それでは、コーダーに指示出しをするための必要事項を確認していきましょう🙌
コーダーが欲しい情報
コーディングをする際に、揃っていてほしい/あるとスムーズにいく情報をピックアップしました。デザイン面、機能面、マーケティング面でそれぞれ確認していきます。
基本的にはデザインカンプと、情報設計段階で作成したディレクトリマップがあれば良いのですがそれだけでは少し不足するといった内容を付け足していきます。
- バリデーションの仕様
- ボタンやリンクのホバー時挙動
- 上記以外のアニメーション個所の指示
情報がなければ差し戻しが発生するのが上記の項目です。（デザインチェックのチェック項目には入れています🙆）
フォームがWebサイト内に設置してある場合、フォームを使用するユーザーの目線になってチェックします。初期状態、フォーカス時、エラー時は必須で揃っているか確認してください。
ホバーに関しては、経験のあるコーダーだとよしなにやってくれることも多いですが、デザイナーが考えていた意図もあるはずなので指示がない場合はいったんデザイナーに確認しましょう。
動きが発生している部分に関しては、参考サイトがあると親切です。「アコーディオンはぬるっと開いてほしい」と言っても伝わりにくいですよね。「ぬるっと」という感覚にも個人差があるので、このサイトくらいの感じでといった見て分かる情報を揃えてあげると親切です。
- 動的・静的箇所の指示
- 使用するCMS等やプラグインなど指定あれば
- URL（スラッグ、階層が指示できるもの）
機能面では主に、動的になる箇所の確認はするようにしましょう。
コードをベタ打ちした箇所が「ここは毎年テキストを変更するんだけど…」となっては運用が少し面倒です。運用している状態のことを考慮して動的にすべき箇所は指示しましょう。
また、使用するCMSやプラグイン、プラットフォームなど、運用を視野に入れた時に指定をした方がよいものに関しては伝えるようにしましょう。特になければコーダーが「現場でよく使用されているもの」を選んで使用します。時には有料のものを使用することで最大限の効果が得られるといったものもあるので、特殊な実装がある場合はクライアントと確認しましょう。
URL（スラッグ、階層が指示できるもの）も基本的にはディレクトリマップでまとめていますが、書き切れていない指示など特筆すべきものがあれば伝えましょう。
- タイトル・ディスクリプションといったmeta情報
- OGP画像、ファビコン
マーケティング面に関しては、コーディングに着手する段階で必ずしも揃っているべきという訳ではなく、特にWordPressを使用している場合はプラグインを入れることでコーダーでなくとも設定をすることは可能です。
リストに示したものは最低限、Webサイトを公開する際にあったほうがよいです。SEOにこだわって制作するサイトでなくても、検索表示も視野に入れているサイトならばマストで設定しましょう。
どのように準備する？
基本的には作成した設計図・デザインカンプにこれらの情報を埋め込みそのまま渡すことが多いです。ただ、コーダーにとっては必要のない情報が多い場合は作業の妨げになる可能性もあるので削除して渡しても問題ありません！
また、コーダーの確認のためのツールが増えると管理の面でも面倒をかけてしまうこともあるので、1か所にまとめるかリンクを1か所にまとめたNotionページやスプシを共有できると良いでしょう🙆
課題を送信しよう！
ここまでの情報が揃ったら、コーダーに依頼しましょう！
基本的に情報が揃っていればテキストベースのやりとりでも進められるようにはなっていますが、特に口頭で確認しておきたい点等があればミーティングを挟むのも良いです。コーダーはデザインカンプが届いたら不足情報がないかを一番に確認するはずなので、もしコードの知見があまりないといった場合は一緒に確認することを依頼するのも良いですね！
※今回の課題ではテキストでOKです！
※今回は課題の都合上、準備のないものは「後ほどお送りいたします」と伝えてあげてください！