ご相談時の状況

ABC Learning Lab Osaka様は、Oxford、Cambridge、Pearson、National Geographic Learning など世界15社以上の出版社の英語教材を、学校・塾・英会話スクールへ提案・販売されている専門商社です。
https://www.abclearninglabosaka.com/

以前のサイトは、かなり前に制作されたもので、テンプレートをほぼそのまま使った構成でした。
デザインを新しくしたい、というのが出発点です。

ただ、社内にWebの管理画面を日常的に触る方がいらっしゃるわけではありません。
「作り直したあと、自分たちで運用できるのか」この点が、最初から最後まで判断の軸になりました。

仕事は二段階に分かれています。
前半がWordPressサイトとしての構築、後半が納品後にいただいた「各出版社から、その教材のページへリンクさせたい」というご相談への対応です。
どちらも判断の分かれ目は同じで、「こちらに依頼しなくても成り立つか」でした。

---

第1部　テンプレートのままのサイトを、オリジナルテーマに置き換える

当社が担当した範囲

デザインは先方でご用意いただきました。トップ、会社概要、お問い合わせ、プライバシーポリシーの4ページ分の静的HTMLです。
当社が担当したのは、それをWordPressのテーマとして構築する部分です。
既製テーマの流用ではなく、そのデザインのためのオリジナルテーマとして組んでいます。
ページごとにCSSを分割して読み込み、ヘッダーとフッターは共通パーツとしてテンプレート化しました。

手をつける前に、差分を三つに分ける

作業に入る前、いただいたデザインと実装の差を「構造の変更／CSSの変更／テキストの変更」の3つに分類し、そのうえで共通パーツ（ヘッダー・フッター）に波及するものを切り分けてから着手しました。

共通パーツは全ページに影響します。影響範囲を先に見えるようにしておかないと、あるページを直したつもりで別のページが崩れ、公開直前にそれを見つける、という展開になりがちです。

デザインどおりに作らなかったところ

いただいたデザインに対して、別の実装を選んだ箇所が三つあります。
いずれも先方からご指摘をいただいて直したものではありません。
作りながら、あとで困りそうな箇所を拾っています。

ナビゲーションの「SNS」項目

デザイン内で、トップページと下層ページの扱いが食い違っていました。そのまま作るとページによってメニューの並びが変わってしまうため、トップページのみに表示する形へ統一しました。

Instagramの埋め込み

デザインには特定の投稿のURLが直接書き込まれていました。
このまま埋め込むと、その投稿を消したくなったとき、別の投稿に差し替えたくなったとき、そのたびに当社へご依頼いただくことになります。
それは避けたかったので、埋め込みは見送り、Instagramへのリンクは残す形にしました。

コピーライトの年号

デザインでは年号が固定されていました。
実装では自動で切り替わる形を維持しています。
毎年1月に、誰かが思い出して直す必要がありません。

デザインを軽んじたわけではありません。
紙面として見れば正しくても、運用が始まると崩れる箇所があります。
そこを拾うのが実装側の役割だと考えています。
あわせて、デザイン変更で使われなくなったCSSも整理し、あとから触る人が読める状態にしました。

---

第2部　追加のご相談：出版社から教材ページへのリンク

いちばん重い条件

最初の納品を終えたあと、ご相談の窓口となった方から追加のご要望をいただきます。
「各出版社から、その教材のページへリンクさせたい」

このとき同時に示されたのが、今回いちばん重い条件でした。
実際に更新を担当されるのは、Webの管理画面を日常的に触る方ではありません。
ですから、その方が無理なく追加・更新できる形にしてほしい、と。
デザイン性よりも運用のしやすさを優先する、という順序がはっきり示されていました。
あわせて、簡易マニュアルの用意や、費用・工数の感覚についてもご相談がありました。

もうひとつ、外せない前提がありました。
ABC Learning Lab Osaka様は、幅広い出版社の教材を扱っていること自体を信用の裏づけと考えておられます。
一方で、サイトが教材の販売リンク集のように見えることは望まれていません。
そこで、トップページの「取扱出版社・パートナー」の帯は”扱っている出版社の顔ぶれ”を示す場所とし、個別のリンクは別途「取扱教材」ページにまとめました。
トップの見え方は変えずに、教材を探したい人だけがリンクを辿れる形です。

採用しなかった案と、その理由

実装方法として、次の選択肢をメリット・デメリットで比較しました。

• 固定ページとWordPress標準のエディタで編集する
• アコーディオン（開閉式）で出版社ごとに折りたたむ
• ACFなどのプラグインで入力欄を用意する
• コードに直接書き込む
• ポップアップで表示する

このうち有力だと考えたのは、いちばん上の「標準のエディタで編集できる一覧ページ」です。プラグインを増やさず、WordPressに元からある機能だけで完結し、作る側の手間も少なく済みます。

ただ、こんな場面を思い浮かべました
。半年後、取扱いの出版社が一社増える。
担当の方が久しぶりに管理画面を開く。前に触ったのはずっと前で、どこをどう操作したかは覚えていない。
目の前には、文章も画像も自由に置ける編集画面がある。

WordPressのブロックエディタは自由度が高く、何でも置けます。
ところがその自由度は、日常的に触らない方にとっては「どこを触ってよいのか分からない」という迷いに変わります。
操作を誤って別のブロックを消してしまえば、レイアウトごと崩れます。
そうなれば、結局こちらへ連絡することになります。

この案は見送りました。自由記述はやめ、専用の管理画面を自作する方針に切り替えています。

手が止まる場所を、先に潰す

1. 入力の自由度を、あえて削る

「出版社名」と「リンクURL」の入力欄が行ごとに並び、「＋追加」「削除」ボタンで行を増やしたり減らしたりできるだけの画面にしました。
プラグインには依存していません。やることは、URLを貼ることだけです。

リンクの仕様も絞りました。
リンク先は各出版社の公式教材ページとし、1出版社につき1リンク。設定項目を最小限にして、迷う余地そのものを減らしています。

2. 更新を重ねても崩れない見せ方にする

試作の段階では、出版社名を文字数に応じて幅が変わるタグのような形で流し込んでいました。
ところが並べてみると、名前の長さがまちまちなため、行ごとの収まりが不揃いになります。
今は問題なく見えても、出版社が増えたり入れ替わったりするうちに見にくくなるのは避けられません。

そこで均等グリッド（同じ大きさのマス目）に変更しました。
文字数に関係なく整列が保たれ、名前が長い場合はマスの中で折り返します。モバイルでは2列に切り替わります。

3. マニュアルを前提にしない

ご相談は「簡易マニュアルを用意してほしい」というものでした。
ただ、渡した資料が必ず読まれるとは限りません。
半年ぶりの更新のたびに、まず資料を探し出して開くという手間も挟まります。

そこで別紙をつくる代わりに、管理画面そのものに使い方ガイドを常設しました。
操作手順、「保存を押す」というリマインド、更新結果を確認できるページへのリンクを、画面のなかに組み込んでいます。
探さなくても、開けば書いてあります。

実装してご確認いただいた際、修正なくご承諾いただきました。

実装した仕組み

管理画面：出版社名とURLを行単位で管理します。追加・削除・並び順の調整ができ、データはサイトの設定として保存されます。初期状態で現在お取り扱いのある出版社（約19社）が入っているので、あとはURLを埋めていくだけです。

表示ページ「取扱教材」：見出し、パンくずリスト、お問い合わせへの導線はテーマ側が自動で表示します。
一覧は管理画面のデータから自動生成されるため、ページ本体に触る必要はありません。

見せ方：均等グリッドで並べ、リンクが設定済みのものは青いマス、URLが未設定のものはグレーの点線のマスで名前だけを表示します。
リンクは別タブで開きます。
トップページの「取扱出版社・パートナー」から、「取扱教材の一覧を見る →」ボタンで誘導しています。

URLが決まっていない出版社も、名前だけ載せておける形にしました。
リンクの有無に関係なく顔ぶれが並ぶので、扱いの幅はそのまま見えます。
先に触れた「幅広さが信用の裏づけになる」という考え方が、いちばん効いているのはここです。

ご依頼にはなかったけれど、対応した箇所

今回の仕事のうち、仕様として指定されたわけではなく、こちらの判断で対応した箇所を並べておきます。

• ナビゲーションの「SNS」項目を、ページによって並びが変わらないよう統一
• Instagram埋め込みを見送り、投稿の差し替え時に依頼が発生しない形へ
• コピーライトの年号を、自動で切り替わる実装のまま維持
• 使われなくなったCSSの整理
• 画像の読み込みに失敗したときのフォールバック
• 反映時のテーマバージョン更新（表示が古いまま残るのを防ぐ）
• テーマの置き換え手順を2通り用意
• 別紙マニュアルではなく、管理画面内に使い方ガイドを常設
• 一覧の並びが崩れないよう、均等グリッドへ変更

どれも、金額に反映されるような大きな作業ではありません。ただ、こういう箇所が積み上がると、あとから困る回数が変わってきます。

判断の基準にしていたこと

前半と後半で、やっていることはまるで違います。ただ、分かれ目はどちらも「こちらに依頼しなくても成り立つか」でした。

正直に言えば、依頼が必要な箇所を残しておいたほうが、制作会社としては仕事になります。それでも、更新のたびに連絡が必要なサイトは、いずれ更新が止まります。止まったサイトは、時間が経つほど直しにくくなります。長く付き合うなら、こちらの手が要らない状態にしておいたほうがいいと考えています。

• 自由度をあえて制限する。 何でもできる編集画面より、入力欄だけのほうが迷いません。できることを絞ることが、機能を足すより価値になる場面があります。
• 依存する先を選ぶ。 プラグインに任せたほうがよいもの（フォーム）と、自作したほうが壊れにくいもの（今回の管理画面）は分かれます。仕組みの大きさと、使い続ける期間から判断しています。
• ドキュメントより、文脈のなかのヘルプ。 読まれない前提で設計します。説明が必要な場所に説明を置くのが、いちばん確実です。
• ブランドの考え方を情報設計に落とし込む。 「幅広さ＝信用」という価値観を崩さないために、ブランディングの要素と販売リンクを別のページに切り分けました。技術的な判断の前に、その会社が何を大切にしているのかを理解する工程があります。

---

「何を頼めばいいのか分からない」状態からで大丈夫です

今回、追加のご相談は「各出版社から、その教材のページへリンクさせたい」という一文から始まりました。
どう作るか、どの機能を使うか、といった指定はありません。それで十分です。

ご相談の段階で必要なのは、専門用語ではありません。誰が、どれくらいの頻度で、何を更新したいのか。
これが分かれば、あとはこちらで整理します。
今回も実装方法の候補を5つ並べ、それぞれの向き不向きをお伝えしたうえで方針を決めました。
判断の材料はこちらで用意します。

分からないことを、その場で聞ける相手がいない。
この状態がいちばん厄介だと思っています。
警告表示ひとつでも、意味が分かれば何でもない話が、分からないままだと放置になります。
そういう質問こそ、遠慮なくお寄せください。

社内にWebに詳しい方がいらっしゃらない会社ほど、サイトは放置されやすくなります。
原因は、その会社のスキル不足ではありません。
多くの場合、更新する人を想定しないまま作られた仕組みのほうにあります。

• テンプレートのままで何年も触っていない
• 更新の仕方が分からず放置している
• 何から相談すればいいのか分からない

この段階でお声がけいただければ、どこから手をつけるべきかの整理からご一緒します。