無料相談

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

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

コラム

自社で更新するたびに崩れるホームページ|自由編集と入力欄を選び直す

チップス

更新のたびに見た目が崩れる会社サイトで、自由編集と専用の入力欄を選び直す考え方。長い事例名・縦長写真・写真なしの確認例から、表示の改修と操作説明の範囲を整理します。

同じ形の事例カードの紙試作に、縦長写真を入れ替えて編集する範囲を考える手元のイメージ

文章を直すと写真が下へずれ、実績を一件増やすと一覧の形がそろわない。社内で更新できるはずのホームページなのに、触るたびに見た目を直しているなら、自由に変える情報と、動かさない表示の形を分けて見直しましょう。文章・写真の専用欄を用意する案と、本文の並びを自由に変える案を、担当者が続ける仕事で選びます。

例えば、大阪市の設備メンテナンス会社が、作業実績を社内で追加しているとします。前のページを複製し、事例名と写真を入れ替える方法ですが、長い名前や縦長の写真が来ると、余白や画像の大きさまで毎回調整しています。ここで考えたいのは、担当者が操作を覚えることに加え、そもそも毎回その調整が必要な作りなのか、という点です。

崩れる直前に、何を変えたかを見る

「レイアウトが崩れる」だけでは、直す対象が定まりません。文字を足したのか、写真を差し替えたのか、前の実績を複製したのかを分けます。同じページで、変える前と変えた後を比べ、一覧と詳細のどこへ影響するかを確認します。公開中の内容を試行錯誤で直し続けず、確認用の下書きや環境をどう用意するかも制作会社へ相談できます。

文字が重なるなら、名称が長くなったときの折り返しを確認します。写真の主役が切れるなら、画像を置く枠と切り取り方を見ます。本文を増やした後に案内ボタンまで動くなら、本文と共通の案内を同じ編集範囲へ入れているかもしれません。見た目が似た不具合でも、必要なのは説明の追加、表示の修正、入力方法の変更などに分かれます。

繰り返す情報は欄へ、説明の流れは本文へ

この会社の実績に、毎回「事例名・写真・短い紹介」が入るなら、担当者はその情報を入力し、配置や余白はあらかじめ決めた形で表示する案が考えられます。更新のたびに、文字の大きさや写真の幅を再現する仕事を減らすためです。一方、工程を説明する本文で、見出しや写真の順番が事例ごとに違うなら、その範囲には編集の余地を残します。

更新する仕事表示で決めておく形担当者が変える情報
実績を一件増やす一覧の配置、名称と写真の位置、詳細への入口事例名、写真、紹介文。新規登録から表示までの操作
写真を差し替える枠の比率、写真がない時の表示使う写真と見せたい箇所。切り取りを選ぶ操作の有無
作業の説明を足す本文の横幅、見出しの見え方、共通の問い合わせ案内本文内の説明と写真、その順番。項目を増やせる範囲
架空の会社の分け方です。専用欄にする範囲と、自由に編集できる範囲は、現在の作りと実際の更新内容で決めます。

欄を増やせば使いやすくなるとも限りません。たまにしか使わない項目が並ぶと、何を入れるか迷います。逆に、一つの大きな本文欄だけでは、短い実績を追加するために配置まで扱うことになります。「普段の一件で何を入力するか」と「特別な説明を足す時に何ができるか」を分け、両方を確かめます。

担当者が変える事例名・写真・紹介文と、表示側で決める配置や写真枠を分け、長い名前や写真なしの状態でも確認する図
入力する情報と、表示の形を分ける考え方です。実際の管理画面や特定の機能を示す図ではありません。

きれいに収まる一件だけで決めない

改修案を確かめる時は、普段より長い事例名、縦長の写真、写真を用意できない実績を、同じ入力画面で試します。この会社なら、担当者が素材を登録し、一覧と詳細を見て、どこで迷うかを確認します。短い名称と横長写真が収まるだけでは、次の更新でも使えるかが分かりません。

長い名前を一行に縮めるより、複数行でも内容を読める表示が合うかもしれません。縦長写真は、一覧で切り取る範囲と、詳細で全体を見せるかを別に考えます。写真なしでは、空いた画像枠を残すのか、文章中心にするのかを決めます。どれも担当者がその都度余白を直す前提にせず、表示の決まりと必要な操作をそろえます。

WordPressには、文章や画像などの部品であるブロックの移動・削除を制限する仕組みがあります。ただし、動かせないことと、長い文章や写真が適切に表示されることは、別に確認が必要です。今のテーマや編集画面で使える方法を見て、専用欄、編集範囲の制限、表示の修正をどう組み合わせるか相談します。

改修する画面と、残す更新手順をそろえる

入力方法を変えるなら、既存の実績を新しい欄へ入れ直す仕事も確認します。今後の追加分だけを対象にするのか、過去分もそろえるのかで、調べる内容と作業量が変わります。以前の記事にだけ情報が足りない場合は、誰が補うか、表示をどう扱うかを決めておきます。

操作説明は、改修後の画面で一件を追加する流れに合わせます。素材を入れ、表示を見て、社内で確認し、公開するまでを実際の担当者が試します。困った時に戻す範囲や相談先も残すと、余白を直接いじってしのぐ更新を繰り返さずに済みます。相談する際は、例えば次のように伝えられます。

社内で実績を追加していますが、長い事例名や縦長写真のたびに配置を直しています。普段入れる情報は自社で変え、一覧の形と共通の案内は保ちたいです。今の更新画面を見て、専用欄にする範囲、本文を自由に変える範囲、過去の実績の扱いと操作説明を相談したいです。

みやあじよでは、事業のお話を伺い、ホームページの内容や構成・デザインを整理するところから制作・改修をご相談いただけます。大阪市で、更新する範囲からホームページ改修を相談するから、現在のURLと、更新時に困っていることをお聞かせください。原因や改修方法まで決まっていなくても構いません。入力欄・表示・既存情報の整理・操作説明などの対象と費用は、現在の作りを確かめて相談します。

参考資料

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