無料相談

売上あげる、
おてつだい。

  1. トップページ
  2. コラム
  3. 記事

コラム

WordPressの更新画面を 外注前に決める

チップス

WordPress構築を外注するデザイナー向けに、公開デザイン、管理画面の入力、表示テンプレート、権限、顧客の検収操作を対応図で整理。制作担当間で渡す仕様を具体化します。

Webデザイナーと構築担当が無記名の画面ラフと入力欄の図を机で照らし合わせる様子

大阪のデザイナーが、顧客のコーポレートサイトの完成デザインをWordPress構築担当へ渡す。公開画面には事例カード、詳細ページ、関連する事例の表示まで描いてある。しかし「事例を追加するとき、顧客は管理画面のどこに何を入れるか」が決まっていない。構築後に担当者が自由入力欄へレイアウトを再現することになり、更新するたびに見た目が変わる。デザインと実装の間で抜けやすいのは、この更新操作の仕様です。

この記事は、制作会社・デザイナー・元請担当者が、WordPress構築を外注する前に決める資料を整理します。中心は公開デザイン・管理画面・表示テンプレートの対応図です。架空の「制作事例を増やす会社サイト」を例に、投稿種類、入力項目、権限、表示、検収を同じ行に置きます。顧客の更新操作まで含めて、依頼範囲を判断できる形にします。以下は設計例であり、特定の顧客サイトや実装方法、費用を示すものではありません。実際の構築方法は既存サイト、利用テーマ、更新担当者の作業に合わせて決めます。

公開デザインを「更新する人の操作」へ翻訳する

まずデザインデータから、公開後に変わる要素へ印を付けます。事例一覧のサムネイル、事例名、業種の表示、概要文、詳細ページの本文、公開日などです。一見すると全て「テキストと写真」でも、一覧と詳細で同じ値を使うのか、ページごとに編集するのかで管理画面の作り方は変わります。デザイナーが見た目を決め、構築担当が入力欄を決めるだけでは、両者の間にある更新の目的が抜けます。

例として事例カードに「写真・事例名・一文の概要・業種ラベル」を載せるなら、それぞれを誰が入力し、未入力ならどう表示するかを決めます。画像の縦横比やトリミング位置も、デザイン上の指定だけでは更新時に再現できません。顧客が横長写真しか持たない場合、管理画面で切り抜きを選べるのか、画像の準備手順で対応するのかを話します。文字数制限を設けるなら、デザインから機械的に決めず、実例の長い名称で確認します。

管理画面を自由なブロック編集にするか、決まった項目を入力する方式にするかも更新内容で決めます。本文の段落を柔軟に書く必要があるページと、同じ形式の事例を毎月増やすページでは、編集の自由度が違います。どちらも「WordPressで更新可能」と表現できますが、顧客が実際に行う操作は大きく異なります。WordPressでコーポレートサイトを作る注意点は発注企業向けにCMS選択や更新担当を扱います。本稿では制作担当間で渡す仕様へ対象を絞ります。

デザイン・管理画面・テンプレートを一行で結ぶ

次の表と図は架空の制作事例ページの仕様台紙です。公開画面のどこを変えるか、その値を入力する画面、一覧・詳細のどちらへ反映するかを同じ行に置きます。実際の案件では、顧客が何を編集できる必要があるかを聞き、対象外の箇所は「制作側で変更」と明記します。

表は左右にスクロールできます。

デザイン・入力・表示・検収の対応(架空例)
公開画面の要素 管理画面の入力 表示テンプレート 検収で試す操作
一覧の事例カード 事例名、概要、サムネイル 一覧カードに同じ値を表示 長い名称と画像なしを試す
詳細の見出しと写真 事例名、メイン画像、本文 詳細ページへ反映 下書き・公開・修正を試す
業種ラベル 決めた分類から選択 一覧・詳細の表示に共用 複数分類と変更を試す
関連事例 自動抽出か手動選択を決める 詳細末尾に表示 候補ゼロ件と重複を試す
並び順 日付・指定順のどちらかを決める 一覧の順番に反映 新規追加後の位置を試す
公開デザイン、管理画面の入力、表示テンプレート、顧客の検収操作を順につなぐ図
架空の制作事例を一件追加する場合の、公開デザイン・管理画面の入力・表示テンプレート・検収操作の対応図。実在案件の仕様ではありません。

表の「管理画面の入力」はプラグイン名やコードを書く欄ではありません。顧客がどんな操作をして何が変わるかを合意する欄です。事例を通常の投稿にするか、独立した投稿種類にするかは、既存の記事やお知らせとの混ざり方を確認して決めます。WordPress公式の開発資料は、独自の投稿種類でタイトル、本文、アイキャッチ画像、カスタムフィールドなどの対応を設定できると示しています。ただし、公式に機能があることと、この案件で独立した投稿種類が必要なことは別です。

一覧カードの概要を詳細ページ冒頭にも表示するなら、一つの入力値を共用する方が食い違いを減らせる場合があります。一方、一覧だけ短い紹介文を使うなら、別の欄が必要かもしれません。デザインだけを見ると二つの文章が同じに見えても、更新目的が違えば項目を分けます。逆に同じ情報を二度入力させる仕様にするなら、そうする理由を明記します。対応図は、入力量を増やすためではなく、表示の根拠を追えるようにする資料です。

同じ入力値が複数の画面に出る場合、画面ごとに許容する長さも確認します。パソコンの一覧カードでは一行に収まる事例名が、スマートフォンでは三行になるかもしれません。長い名前を省略するなら、省略後でも意味が通るか、全文を詳細で読めるかを決めます。画像の代替表示や写真が未登録の状態も、一覧と詳細の両方で扱います。デザインデータに完成状態しかなければ、構築担当は推測して決めることになるため、例外の見本を一枚追加して渡します。

投稿種類と入力欄は、増える内容から決める

サイトに「お知らせ」「制作事例」「採用情報」があるなら、公開後に何が追加されるかをまず聞きます。毎回ほぼ同じ形の制作事例を登録するなら、事例の入力欄を決めてテンプレートへ流す設計が候補です。年に一度しか変わらない会社概要なら、固定ページの編集で足りるかもしれません。名称だけで「カスタム投稿」にすると、管理画面のメニューや更新手順が増えるため、更新頻度と担当者の作業から判断します。

繰り返し現れる項目も具体的にします。一つの事例に写真が三枚なのか、案件ごとに枚数が変わるのか。成果を数字で載せる場合、測定資料がない事例はどう表示するのか。顧客名を非公開にする場合、仮名や空欄をどう扱うのか。要素の有無で余白や見出しが崩れないかを、完成デザインにない状態でも確認します。実在の顧客名や未承諾の写真をテストデータへ使わず、架空の素材で試せます。

入力項目が多いほど親切とは限りません。事例の公開までに毎回十数欄を埋める必要があるなら、顧客の更新担当者が続けられるか確かめます。必須と任意を分け、任意項目が空のときの表示を設計します。画像の代替テキストなど、公開品質に関わる項目を誰が確認するかも決めます。デザイナー、構築担当、顧客編集者のどこが入力例を作るかを明らかにすると、管理画面の実装後に「使い方は別途」とならずに済みます。

無記名のサイト画面ラフと入力項目のカードを並べて確認する制作担当者の手元

権限は「誰が何を確定するか」から書く

制作事例の原稿を書く人と、公開を承認する人が違うなら、管理画面でその流れを試します。WordPressは役割と権限によって、投稿の作成、編集、公開、他人の投稿の管理などを分けられます。公式資料の標準的な「編集者」「投稿者」などを参考にできますが、サイトごとの設定や追加機能によって実際の画面は変わります。役割名だけを仕様書に書いて終えず、テスト用アカウントで対象の投稿種類を作成・修正・公開できるか確認します。

独自の投稿種類を作る場合は、通常の投稿で使う権限がそのまま期待どおりに当てはまると決めつけません。WordPressの開発資料には投稿種類に関する権限の設定項目があり、設計と実装で確認が必要です。顧客の担当者が実際に編集する事例だけを扱えるか、下書き保存や公開済みの修正ができるかを検収項目にします。管理者アカウントだけで動作を見ても、日々更新する人の画面は分かりません。

外注先へ構築用の権限を渡す話は、顧客の更新権限の設計と分けて扱います。制作会社へWordPressの管理者権限を渡す前に確認することは、外部作業者の権限、期間、回収を中心に説明しています。本稿の対応図には、完成後の顧客編集者と公開承認者の操作を記入します。外注先の作業アカウントの管理方法は、元請と顧客が別途合意し、作業終了時の扱いを記録します。

検収は公開画面と管理画面を往復する

「デザインどおりのページが表示された」で検収を終えると、更新のための画面が使いにくくても見落とします。テストでは顧客の担当者役が管理画面から架空の事例を一件追加し、下書き、プレビュー、公開、修正まで進みます。元請と構築担当は同じデータが一覧、詳細、関連表示にどう出るかを確かめます。顧客が投稿しない項目は、制作担当が更新する方法と依頼先を記録します。

試すデータは、美しく収まる一件だけでは足りません。見出しが長い、画像が縦長、写真がない、関連事例がない、カテゴリーを変更する、同じ日に複数件を公開する、といった状態を用意します。デザインを壊すテストではなく、実際の更新で起こる変化を確かめるテストです。スマートフォンで一覧カードが揃うか、画像が切れすぎないか、公開済みページへのリンクが正しいかまで確認します。

管理画面の項目名も検収対象です。「サムネイル」という開発側の語より、顧客の資料で使う「一覧用写真」の方が分かるなら、表示名を合わせます。入力欄の説明には推奨サイズだけでなく、どのページに出るかを短く書けます。必須項目が未入力なら保存・公開時にどう知らせるかも見ます。操作説明書は画面の全メニューを列挙するより、事例を一件追加する流れに沿って作ると、引き継ぎ後に使いやすくなります。

この検収まで決めたら、元請が渡すものと構築担当が返すものを表にします。元請は確定デザイン、各画面の表示ルール、原稿と画像の例、更新担当者の役割、公開日程を渡します。構築担当は実装方法、管理画面の入力項目、権限ごとのテスト結果、更新手順、未決事項を返します。デザインの再調整が必要になった場合、どちらが顧客に確認し、どの版で修正するかを先に決めます。「WordPress一式」では、検収の範囲が曖昧です。

既存サイトから記事や事例を移す案件なら、新しい入力欄へ旧データをどう割り当てるかも別の作業として記します。旧ページに業種ラベルがなければ、誰が分類を付けるか。画像サイズが足りない事例は、差し替え、仮表示、移行対象外のどれにするか。移行件数と例外の判断者が決まらないままテンプレートだけ納品すると、公開直前に作業が増えます。まず数件を試し、管理画面への入力と公開表示の両方で問題を洗い出してから、残りの範囲と担当を確定します。

大阪の制作会社やデザイナーが構築工程の協業先を探すなら、みやあじよのWordPress構築を相談できる制作パートナーで対応内容を確認できます。同ページはWebデザイン、コーディング、CMS対応などの工程を案内しています。相談時には完成デザインだけでなく、今回の対応図と未決の入力欄、顧客が試す更新操作を共有すると、依頼範囲を具体的に話せます。地域だけを理由に仕様が変わるとは考えず、実際の案件条件で判断します。

更新操作まで伝わる発注資料へ

Web制作パートナーでは、デザイナー・制作会社の工程を補う協業について相談できます。公開デザイン、管理画面の入力、テンプレートの表示、顧客の検収操作を一枚にそろえ、WordPress構築の範囲をご相談ください。

参考にした公開情報

マーケター・コンサルタントの皆様へクライアントの「価値」を伝えるWebトータルパートナー提携Webに関するトータルからスポット作業まで必要な部分だけお任せできるWeb制作パートナー提携