ホームページ修正のしやすさを考えた設計についてお伝えしていきます。主に画像制作のあり方としてホームページの仕組みを理解した上で画像を制作する重要性について触れていきます。
ホームページ制作において重要となる要素のひとつは、変更可能性を想定したホームページ設計であり、後の修正のしやすさを考えた全体設計です。
ホームページのWebデザインを決める場合やWebデザインに沿って画像を制作する場合において、PC版のホームページの見え方やスマートフォン版のホームページの見え方を考えるのはもちろん、グローバルメニューなど今後も項目が追加される可能性がある部分の変更可能性を念頭に置いて全体設計を行っていく必要があります。
ホームページ運営を続けていく中や、ホームページ制作を進めていく段階で、それまでは見えなかった「不足している情報」が見えてくることがあります。
そこでホームページ修正に取り掛かることになります。しかしながらその部分の修正については、その部分がどのように作られているかで修正のしやすさが異なります。
ホームページ運営後のホームページ修正依頼時はもちろん、ホームページ制作の完了直前に、修正依頼がよく来るのもそのためです。ある程度の期間運営を続けたり、ホームページ制作が具体的に形になってからしか気づかない点がたくさん出てきます。
弊社でもホームページ修正のご依頼を承っておりますが、修正の難易度が高く修正費用が高額になる場合には、代替手段をご提案させていただくケースもよくあります。
変更可能性を想定したホームページ設計
ホームページ制作自体は、いろいろな方法、いろいろな設計で行うことができるため、表面上の見栄えに違いがなくても、その裏側の仕様は千差万別です。
ホームページ自体の改良を前提として、変更可能性を想定した設計にすることこそ、ホームページ制作において重要なポイントになります。
なぜなら、情報は常に更新されホームページは進化をしていくものだからです。
企業ホームページであれば事業内容や取扱商品、サービス、求人状況などは常に変化していきます。大きくは変化しなくても「どの事業に力を入れるか」という重要度も時期によって変化することもありますし、例えば、「普段はさほど注目されなくても良いが、書き入れ時には前に押し出すべき情報」というものもあるはずです。
そうした変化に応じてホームページ掲載情報も修正したりページ追加や削除を行ったりする必要があります。
この時に大切になるのが改良のしやすさです。
簡単にできそうで修正が困難なケース
軽微なホームページ修正やカスタマイズの場合にも、簡単にできそうで修正が困難なケースがよくあります。
根本的なホームページ仕様の変更などを伴うケースでは、大掛かりな仕組みの変更が必要になるため、どうしてもその分だけ修正費用やカスタマイズ費用がかかります。
例としては、画像で横並びメニューを作成している場合（項目追加の場合に画像サイズの変更が必要になる場合があります）や画像内に文字を挿入している場合です。
もし、ホームページ自体のもつ意味を把握し、時代とともに改良していくという視点をしっかりと持てている場合であれば、運用後の変更のしやすさの重要性を元に、その後柔軟な対応ができるように設計できるはずです。
こうした視点を持つためには、ホームページ制作の全体像を把握しておく必要があります。
ホームページ制作の段階で事業の予定や方向性を予め制作会社に伝えておく
ホームページの制作を依頼する際、「今、どういうページが欲しいか」という点ばかりに気を取られがちです。しかし、本当に大切なのは「このホームページを使って、これから何をしていきたいか」という未来のイメージをWeb制作会社と共有することです。
ホームページ制作の段階で事業の予定や方向性を予め制作会社に伝えておくと良いかもしれませんね。
たとえば、「将来的に新規事業を立ち上げる予定がある」「今の商品ラインナップが倍になるかもしれない」「海外展開も視野に入れている」といった、少し先の計画でも構いません。そうした情報を事前に伝えておくだけでWeb制作会社は未来を見据えた設計を提案してくれるようになるかもしれませんし、変更可能性を考慮してホームページの設計をしてくれるかもしれません。
なぜ未来の事業の予定や方向性、計画が重要なのか
もし将来的にメニュー項目が増える可能性がある場合、例えばホームページ制作の段階で最初からメニューバーにゆとりを持たせたり、フレキシブルなレイアウトを組み込んでおくことができます。求人情報を頻繁に更新したいのであれば、担当者自身が簡単に修正・追加できる仕組み（CMS）を導入する提案ができます。
逆に、こうした将来の予定や方向性を伝えないまま制作を進めてしまうとどうなるでしょう。いざ変更が必要になったときに、全体的な構造から作り直さなければならず想定外の費用や手間がかかってしまう可能性があります。
それは、ホームページ制作という事業の長期的な費用対効果を考えると非常にもったいないことです。
どんなことを伝えればいいのか
具体的には、以下のような「ホームページの役割」や「使い方」を言語化して伝えてみてください。
採用活動を強化したい
ホームページを通して会社や働く人の魅力を伝えたい。社員インタビューや募集職種をどんどん追加していく予定。
集客の要にしたい
ホームページ経由の問い合わせを増やしたい。商品やサービスの詳細ページを充実させたり、キャンペーン情報を頻繁に更新したい。
顧客との接点にしたい
新着情報やお知らせをまめに発信したい。すでに顧客になっている方々がいつでも最新情報をチェックできるような場所を提供したい。
Web制作会社は、これらの情報をもとに、単なるデザインや機能の提案だけでなく、「いかに長く、有効に使えるか」という視点も含めた提案をしてくれます。
ホームページの特性や変更可能性が考慮されていないデザイン案
取引先の広告代理店等、グラフィックデザインやチラシデザインを手掛けている事業者の方から「デザイン案を送るのでその通りにホームページを仕上げて欲しい」と、デザイン案をいただくことがあります。いただいたデザインそのものは素晴らしく美しい仕上がりになっています。
ただ、ご依頼いただいておいて恐縮ですが、Webに関する点は全く畑違いであるという場合、どうしてもホームページの特性や変更可能性が考慮されていないデザイン案になっている場合があります（かなり古い話で言うとスクロールバーの出方が逆だったりということもありました）。
その通りに仕上げることもできますが、「PC版はそれで良いとして、スマートフォン版の表示はどうするのか？レスポンシブだけでは厳しいのではないか？」という問題が出てきたり、「その方式でメニューを作成すると、後々の修正が大掛かりになってしまう」という状態になっている場合もよくあります。
PC版とSP（スマホ）版の見え方の違いを考えたデザイン
PC版とSP（スマホ）版の見え方の違いを考えたデザインも重要です。
例えば画像制作の点で言えば、PCで表示した場合は余裕を持って読める大きさであるものの、スマートフォンの画面に縮小された場合、その画像内の文字は小さくて読めないのではないかというような設計になっている場合があります。
実際の修正作業を想像してみる
ホームページの修正作業は、大きく分けて「見た目の変更」と「仕組みの変更」の二つに分けられます。この違いを理解しておくと、修正依頼をする際に「これは簡単かな」「これは大がかりな作業になりそうだな」と、費用や期間の目安を立てやすくなります。
「見た目」の変更 小さな修正
これは、ホームページに掲載されているテキストや画像の差し替え、ブログ記事の追加などが当てはまります。
たとえば、営業時間の変更や、代表者の挨拶文を書き換える。新商品の写真を追加する。こうした修正は、ホームページの根本的な構造には手を加えないため、比較的簡単に対応できます。CMS（コンテンツ管理システム）が導入されていれば、担当者自身で修正できることがほとんどです。
「仕組み」の変更 大きな修正
こちらは、ホームページのレイアウトやメニュー構成、機能そのものを変える作業です。
- メニュー項目の追加 「サービス内容」というメニューの下に、新しく「コンサルティング事業」という項目を加えたい。
- レイアウトの変更 トップページのデザインを一新したい。商品の表示方法を変えて、より魅力的に見せたい。
- 機能の追加 予約フォーム、会員登録機能、オンライン決済機能など、新しいシステムを導入したい。
これらの修正は、ホームページの骨格から見直す必要が出てくるため、専門的な知識と技術が求められます。
なぜ「大きな修正」が大変なのか
ホームページは、一見すると一枚の絵のように見えますが、実はHTMLという骨格とCSSという骨格を美しく見せるためのスタイルで成り立っています。メニュー項目を一つ増やすだけでも、その項目が崩れずにパソコンでもスマートフォンでもきちんと表示されるように骨格とスタイルを全体的に調整しなければなりません。
もしホームページの設計が「将来の変更」を想定していない場合、少しの修正が思わぬ部分に影響を及ぼし、想定外のバグが発生することもあります。場合によっては、大幅な改修費用がかかってしまうことも珍しくありません。
Web制作会社に「将来的に新しい事業やサービスを追加する可能性がある」と伝えておくことで、最初からメニューバーをフレキシブルに作ったり、新しいページを追加しやすい構造にしておくことができます。そうすれば、大きな変更が必要になったときでも、スムーズかつ低コストで対応できる可能性が高まります。
その方が発注側も受注側も楽です。そして費用も安価ですみます。
画像内の文字の修正
ホームページ制作やホームページ修正において、表面的な見栄えがHTMLやCSSで完結する場合と画像の変更が必要な場合とでは難易度が異なる場合があります。
画像内の文字の修正は、背景が単色であれば修正はしやすいものの、背景が複雑な画像になっている場合は、代替画像を作成している方が楽かつ安価な場合がよくあります。
HTMLやCSSで表現されたものは、コードの記述で作成されているため、幅や大きさ、色合いを数値などの変更で行うことができます。
しかしながら、画像の変更が必要な場合は、画像を再作成したりする必要があるため、修正の際には手間がかかります。
HTMLやCSSの変更で文字のカスタマイズが完結するのであれば楽
例えば、HTMLやCSSの変更でカスタマイズが完結するのであれば、第三者がサイトカスタマイズを手がけるとしてもほとんど影響がありませんが、画像自体を変更する場合は、画像の元データを持っている担当者でない限り難しい場合があります。
背景画像の上に文字が載っている場合、修正は困難になるケースがあります。
画像内の文字を消す際に、背景画像も部分的に消えてしまい、不自然な画像ができあがることがあるからです。
背景が単色であれば修正はしやすいですが、背景が複雑な模様をしていたり、人物等であった場合は、画像内の文字の修正は困難になる場合があります。
AI解析によるオブジェクト消去の限界
近年ではAI解析によって背景画像をある程度復元できるような仕組みもありますが、現段階ではその技術にも限界があります。
AI解析によるオブジェクト消去で、画像内の文字だけをうまく消すという技術がありますが、背景画像の種類によってはこの仕組みもうまく使うことができません。細かいドット背景ですら、うまく文字だけが消えずに、背景のドットも狂わせてしまうことがあります（文字の線との区別がつかない場合があるのでしょう）。
画像の背景に使用されている元画像が手元にあるか、画像に埋め込まれた使用フォントが何かという点が、カスタマイズや修正の難易度に大きく影響します。
ホームページの仕組みを理解した画像制作
画像制作においても、ホームページの仕組みを理解し、さらにメディアクエリの利用にも慣れていれば、ホームページに適した画像の利用を行うことができます。
メニュー等に関しては可能であれば画像ではなくCSSで作成しておくと後の変更が楽になりまし、画像内に文字が埋め込まれている場合でも、ある程度文字の大きさが大きいとPC版、SP版に振り分ける必要はありません。
ホームページのレイアウト構造を設計する時に、「この構造ならレスポンシブにしやすい」とか「このメニューの作りなら、後で変更になっても差し替えやすい」ということが制作設計段階で頭に浮かべることができます。
画像の再作成と差し替えやスマートフォン表示への調整といった手間
一方、ホームページの仕組みを検討せずに見栄えのみを考えたデザインになると、ホームページ修正の際に画像の再作成と差し替えが必要だったり、スマートフォン版のホームページ表示の際に手こずるような設計になっていたりと、ホームページ制作自体の作業時間の長期化や後の改良に手間がかかる設計になってしまったりということが想定できます。
たとえWebデザインを担当し、分業の上で画像パーツの作成などを行っているときでも、ホームページそのものやホームページ制作に対する全体像を把握しておく必要があります。
メディアクエリなどを利用してPC版とSP版で画像を切り替える工夫
強調したいメッセージや特定のページへの画像バナーなど、どうしても画像でインパクトを与えたい場合があります。
ただ、一方でPC表示の時に合わせて作成された画像の場合、画像内の文字が小さすぎて読みにくいといった状況も起こり得ます。
例としてパソコン版に合わせて作成された画像は横幅が1200pxある中、スマートフォン表示の場合は、閲覧環境上、横幅300px程度に縮小されるのですから、画像のサイズとしては横幅が1/4程度になります。
そうした時は、メディアクエリなどを利用してPC版とSP版で画像を切り替える工夫をすることで、画像をうまく利用していくことができます。
スマートフォン版用の画像を作成し、該当部分の画像が切り替わるようにする工夫です。
同じような画像であっても、中にある文章を短く要約し、文字のサイズを大きめに調整することで、該当部分のメッセージ性を保つことができます。
こうした工夫もすることはできますが、PC版とSP版の画像をそれぞれ用意する必要がある他、閲覧環境による表示画像の切り替えの施策をする必要が出てくるため作業量は増えます（外注する場合は費用が増えます）。
特に切り替えが必要ないように、画像内のメッセージの文字の大きさを工夫するというのも一つですし、逆に作業量は増えてもいいので、それぞれの閲覧環境ごとに最適な画像を用意して意図的に切り替えを行うというのも一つです。
ブラウザごとにホームページ描画が若干異なる点
また、ブラウザごとにホームページの描写の表現が若干異なることを把握した上でホームページ制作を実施する必要があります。
設計図となるワイヤーフレーム画像に忠実なページ制作にこだわると、細かな余白などの調整に異常なほどの時間を費やしてしまい、高コストになってしまうことがあります。
少なくとも私たちは、「色合いの軽微な違いによるこだわり」や「ジャストの余白」などによる「Webデザイン力」に関してはほとんど無関心です。
作業時間の長さが制作費用に転嫁されるのであれば、その分のコストをコンテンツマーケティングやWeb広告費用に回したほうが、本来の目的である「ホームページを通じた集客」につながると考えているからです。
ホームページ制作に関する細かなこだわりを追求しようと思えばどこまでも追求することができますが、やはり時間や制作費用にも限りがあります。
あくまでホームページを通じた問い合わせ獲得などのWebマーケティングのゴールを最優先として予算を配分していくべきであると考えています。
（初回投稿日 2024年2月9日）
ホームページ更新や修正の価格、料金については以下のページをご参照ください。
ホームページ更新・修正についてのよくあるご相談内容やよくあるご質問については「ホームページ更新・修正についてのよくあるご質問・ご相談」をご参照ください。
