皆さま、こんにちは。
WordPressでWEBサイトを構築する時に必要となる”コーディング指示書”についてシリーズで解説しています。コーディング指示書は、コーディング作業時に必要な情報を、WEBデザインと合わせてコーディング担当者（コーダー）さんや制作会社さんにお渡しするものです。
今回のトピックは【メニュー、ナビゲーション、フォーム】です。
その他のパーツについては過去記事は以下の過去記事をご参照ください。
・コーディング指示書の作成におすすめのツール紹介
・ディレクトリマップの作り方
・サイト基本情報の伝え方
・スライダー、アニメーション
さて、【メニュー、ナビゲーション、フォーム】に関するコーディング指示ですが、ページが多くならないとわからない部分や通常のWEBサイトの閲覧時には出てこない裏側の作業にあたる部分も多く、指示を出しづらいパーツでもあると思います。
WEBサイトが公開されてから気になることが出てくることも多い部分かと思いますので、当記事をご一読いただき、コーディング指示の参考にしていただけますと幸いです。
特に以下の項目がWEBサイトで採用されていることが多いと思いますので、今回の記事でピックアップして指示出しの方法をご紹介します。
- グローバルメニュー（グロナビ）の動き
- ハンバーガーメニューの動き
- 固定する（追従）
- ページネーション
- カスタムフィールド入力項目
- メールフォーム
以下で例を出して指示の出し方をご紹介します。皆さまがこれから制作するWEBサイトの動きとピッタリではないかもしれませんが、一例として参考にしていただけますと幸いです。
１．グローバルメニュー（グロナビ）の動き
グローバルメニューはほぼ全ページに共通設置される、WEBサイトでメインとなるメニューで、訪問者様が探しているページに誘導する役割があります。
ほとんどのWEBサイトで設置され、特に目立つ部分に設置することが多いので、デザインや動き方も大切にしたいところです。
近年よく採用されている2つのデザインパターンのグローバルメニューについてコーディング指示の出し方をご紹介します。
＜指示の書き方例①上部やサイドに固定される場合＞
例に↑あげたパターンは訪問者様のページ間の移動を楽にするため、画面上部に設置されたメニューがスクロールしても付いてくるタイプのメニューです。背景に来る画像や文字に影響をうけないよう背景色を付けるのが一般的です。どの辺までスクロールしたら固定されるかなども希望があれば指示出ししましょう。
サイドにメニューを出し、同じように固定するパターンもあります。同じようにスクロールさせたときの動きについて指示を出しましょう。
動きのイメージは参考URLを付けて伝えることで間違いがありません。専門用語がわからなくても、希望するイメージを言葉にすればOKです。
＜指示の書き方例②ドロップダウンで項目が出る場合＞
メニュー項目が多く、グローバルメニューが1行でおさまりきらないときは、マウスオーバー（マウスを載せたり、タップしたりする動き）でドロップダウンを出して対応します。そのときは出現させる項目やデザイン、動きの指示を出します。
画像を使うときはドロップダウン時のデザインデータも作成するとイメージとズレがないコーディングができます。
２．ハンバーガーメニューの動き
ハンバーガーメニューは３本線のアイコンで表示されているメニューのことで、スマホ版のデザインでよく利用されます。メニューを出すスペースがない場合に、ハンバーガーメニューで内容を隠しておき、利用者様が必要なときにマウスを乗せたりタップしたりして広げて利用していただきます。
ハンバーガーメニューを利用するためには、メニューが展開されたときのデザインデータが必要です。それプラス動きがあればコーディングの指示を出します。
＜指示の書き方例＞
レスポンシブデザインのときは、画面幅が狭くなるとハンバーガーメニューに切り替わる設定を実装すると思います。画面幅がどれくらい狭くなったら通常のグロナビからハンバーガーメニューへ切り替えるかも指示を出します。特にはっきりとしたイメージがなければ「コーダーさんにお任せします」と一言付け加えるとスムーズな作業進行ができます。
３．固定する（追従）
画面をスクロールしても動かず固定されている要素のあるデザインも増えてきました。これは「動かない」というコーディングが必要です。画面スクロール時にどのような表示になるか、指示を出します。
＜指示の書き方例＞
画面上の一部を固定してずっと表示させることを「追従」と表現することもあります。企業ロゴなどを追従させてブランディングに活用することもありますし、訪問者様にPRしたいページへの誘導を目的にすることもあります。
■追従コンテンツ活用例
・プレゼントなど企画ページへ誘導
・資料請求フォームへ誘導
・お問い合わせフォームへ誘導
・オンラインショップへ誘導 など
常時表示させるメリットはたくさんあります。くまWEBのWEBサイトでも導入しているおすすめの機能です。ぜひご検討ください。
４．ページネーション
ページネーションとは、ページ番号を割り当てるという意味があります。WEBサイトでは記事一覧や商品一覧ページなどページ数が多くなるカテゴリで、ページを複数ページに割って表示させることを指します。
＜指示の書き方例＞
1ページあたりの表示数や、時系列の並び方などを指示します。
５．カスタムフィールド入力項目
WordPressで構築すると標準で付いてくるのが「カスタムフィールド」です。カスタムフィールドは管理画面の投稿画面内に入力枠を好みで追加できる機能で、同じ項目を多数のページで入力する（例えば商品紹介ページ、店舗紹介ページなど）ときに実装しておくと便利です。
カスタムフィールドの実装はコーダー担当者の仕事ですが、デザインからはどこをカスタムフィールドにするかわからないため、WEBデザイン上のどこをカスタムフィールドとして設定するか指示が必要です。
＜指示の書き方例＞
カスタムフィールドはテキストのほか、画像・PDFのアップロードなども設定できます。
カスタムフィールドを利用するメリットは記入漏れの防止です。枠が事前に作られていれば埋めていくだけで記載漏れがなくなるので、同じようなページをたくさん作るカテゴリに事前に導入しておくと安心です。
カスタムフィールドは訪問者様には見えない管理画面側のみの設定です。そのため、いろいろなページでカスタムフィールドを導入しても訪問者様にはわかりません。ページを作成される方の都合に合わせて設定できます。
６．メールフォーム
メールフォームはデザインや項目の他に、入力確認画面を出すのか、エラーメッセージはどのように出すのかなど裏側の準備が必要です。
問い合わせフォームの使いやすさ、わかりやすさによって売上にも関わってくるともいいます。デザイナーさん以外のディレクターさんやマーケターさんがコーディング担当者へ指示を出すことをおすすめします。
＜指示の書き方例／メールフォームの入力画面＞
必須項目を決める以外にも、全角・半角やハイフンなど入力のバラツキをOKとするか、エラーとするかも判断が必要です。
デザイン面では項目が多い場合は、入力モレがないように未入力の項目はグレーアウトさせておくなど配慮するとスムーズに送信していただけると思います。送信を諦めてしまわないようエラーが出づらいようにするのもポイントです。
＜指示の書き方例／メールフォームの確認画面＞
メールフォームの確認画面へ遷移させず、そのまま送信完了とするパターンもあります。どのような形がターゲットと合っているかも検討が必要です。
■メールフォームから飛ぶメールについて
メールフォームから担当者のメールへ内容が飛ぶため、そのメールを受け取る担当者が読みやすいメールになっているかもチェックが必要です。メールの件名や項目の記述が読みやすいかどうかなど、フォームからテスト配信を何度か行い、微調整することをおすすめします。
WordPressのプラグインを使うと、メールフォームから飛ぶメールの文面も管理画面から修正できます。
もしWordPressで構築されていてプラグインでメールフォームを作っておられるなら、「読みづらいなぁ」というメールも管理画面から整理できますので、チェックしてみてください。
ただ、このメールパネルが間違っていると、お客様がフォームに入力した内容が届かない（送信と同時に消えてしまう）というミスも起こり得ますので、十分にお気をつけになってください。もしご不安があれば、コーディング担当者さんや制作会社担当者さんにご相談ください。
まとめ
WEBサイト上の動きには、お客様を誘導する役割やスムーズにWEB上で情報を見つけていただくという役割もあります。何を目立たせるか、どのような配置にするかなど考えることはたくさんあり、大変な作業ではありますが、コーディング指示が上手く出せると、皆さまのイメージ通りのWEBサイトが迅速に仕上がります。
コーディング作業が順調に進むよう、くまWEBではこれからも情報発信してまいりますので引き続きよろしくお願いいたします。