皆さま、こんにちは。
今回はWordPressでWEBサイトを構築する時に必要となる”コーディング指示書”。コーディング指示書は、コーディング作業時に必要な情報を、WEBデザインと合わせてコーディング担当者（コーダー）さんや制作会社さんにお渡しするものです。
コーディング指示書はWEBサイトに掲載されるものではないですが、コーディングにはなくてはならない作業の要です。デザインデータと合わせてコーディング担当者に共有しましょう。
今回はコーディング依頼時に【基本情報】として伝えておくと作業がスムーズな7項目についてお伝えします。コーディング担当者や制作会社からシートなどに記載を求められることもあると思いますし、フォームへ記入するパターンもあります。
伝え方はエクセルやWordファイルなど使いやすいファイル形式に記入してOKです。
①公開URL（トップページURL）
②サイトタイトル、ディスクリプション
③フォント関連情報
④SNS情報
⑤対応ブラウザ範囲
⑥ディレクトリ構造
⑦コーディングの種類
コーディング指示のために専用のシートを作成せずとも、デザイナーさんに制作依頼を出す際に作成したシート等での代用も可能です。
前回記事にしたディレクトリマップ、今回の基本情報、そしてレイアウトやアニメーション、フォームなどへの作業指示や動きのイメージをまとめて”コーディング指示書”が完成します。なかなか大変な作業ですが、しっかり共有して思い描くWEBサイトを仕上げていきましょう！
基本情報①公開URL（確定済みであれば）
本番（公開）のトップページURLが確定していたら共有します。
WordPressには設定項目にURLの記入欄があり、公開時には必ず設定が必要です。
コーディング時も階層を作るなどさまざまな指定に利用します。
基本情報②サイトタイトル、ディスクリプション
サイトタイトルとディスクリプションは検索エンジン上に表示される大事な項目です。WordPressでは設定欄がある他、画像のaltに入れたり、WEBサイト上部に表示させたりします。SEO対策等も加味して決めておきます。
WordPressの設定画面では、ディスクリプション＝キャッチフレーズと記載されています。
基本情報③フォント関連
基準として使うフォント、カラー、サイズ、文字の太さなどを指示します。
デザインデータからどんなフォントを使っているかはわかるものではありますが、基本的な方針を共有すると作業がスムーズです。コーディング時、スタイルシートにベースとなるフォントを記載するからです。
■特殊なフォントをWEBデザインに使っている場合
→書体の共有
→類似フォントに置き換えてもよい
などコーダーさんの作業環境でどう対応すればよいかを伝えます。
■WEBフォントやフリーフォントを使用する場合
配信サイトのURLを共有します。
基本情報④SNS情報
多くの企業、お店がSNSを活用するようになり、WEBサイトからSNSへリンクを貼ったり、フィードを埋め込んだりする作業も増えています。SNSアイコンを多く配置するデザインも多いため、運営中のSNSのアカウント情報はまとめて共有すると作業が早くなります。
ディレクトリマップ上に記載してもOKです。※URLの共有や作業に応じてログイン情報の共有が必要な場合もあります。
デザインだけでは何のフィードを読み込むのかわからないため、どのアカウントの何を埋め込むか指示を出します。
基本情報⑤対応ブラウザ範囲
ブラウザは端末によって初期設定が異なり、Windowsの「Microsoft Edge」、iPhoneの「Safari」、Androidの「Google Chrome」となっています。そのため人によって使っているブラウザはさまざまなのですが、利用ブラウザによりWEBサイトの見え方が異なることがあるため、各ブラウザで同じ表示になるよう注意を払ってコーディングする必要があります。
ただ、さまざまなブラウザがあり、さらにブラウザのバージョンもあります。全てに対応するのは難しいため、これから作成するWEBサイトが正常に見えるブラウザの範囲をどうするか制作チームは考える必要があります。
WordPressは2021年にInternet Explorerのサポートを終了しており、動作保証をしていません。WordPressを利用するのであれば、WordPressが正式にサポートしている範囲内を対応ブラウザとするのが良いかもしれません。
■WordPressがサポートするブラウザ
- Android 最新バージョンのみ
- ChromeAndroid 最新バージョンのみ
- Chrome の最新から2バージョン
- Firefox の最新から2バージョン
- Safari の最新から2バージョン
- iOS の最新から2バージョン
- Opera の最新から2バージョン
※最新情報はWordPressブラウザサポートでご確認ください
基本情報⑥ディレクトリ構造
サーバーにWordPressをインストールしたらデザイン→コーディングを進めるとともに、WEBサイトで公開する画像やPDFなど素材をアップロードします。その時、例えばWordPressのデフォルト設定では記事内からアップする画像（メディア）のURLは「…/wp-content/uploads/…」となります。もし変更の希望があれば指示を出します。
＜指示例＞
・記事内からアップロードされるファイルは「images」フォルダに入れる
・毎年公開するPDFファイルは「public」フォルダに入れる
・広告に使用する素材は「bnr」にいれる
ご自身がサーバー内でファイルの上書きなどをする可能性があれば、特にアップロードするファイルの保存先がわかりやすいと便利です。そのような希望は先に伝えておきましょう。
基本情報⑦コーディングの種類
コーディングには種類（パターン）があり、選択によって作業量や見積額が変わります。
https://kumaweb-coding.jp/contact/
・PCのみ：パソコンからの閲覧のみを想定
・スマートフォンのみ：スマホからの閲覧のみを想定
・レスポンシブ対応：スマホ、タブレット、PCなど端末ごとにデザインを切り替える
・フルレスポンシブ対応：デバイスの種類や画面幅に左右されず、デザインの全画面表示をさせる
この項目はコーディング作業の見積もり時に必要になるので、当該WEBサイトが想定する訪問者や端末での見え方などを確定しておく必要があります。デザイン作業の時点で決まっていることが多いと思いますが、デザインが未完成でコーディングの見積もりが必要な場合は、この種別だけでも決めておくとズレが少なく安心です。
まとめ
コーディング作業の前に提出する情報として、ディレクトリマップに次いでサイト基本情報についてまとめました。今後のコーディング依頼時の参考になれば幸いです。