ホームページ修正のしやすさを考えた設計についてお伝えしていきます。主に画像制作のあり方としてホームページの仕組みを理解した上で画像を制作する重要性について触れていきます。
ホームページ制作において重要となる要素のひとつは、変更可能性を想定したホームページ設計であり、後の修正のしやすさを考えた全体設計です。
ホームページのWebデザインを決める場合やWebデザインに沿って画像を制作する場合において、PC版のホームページの見え方やスマートフォン版のホームページの見え方を考えるのはもちろん、グローバルメニューなど今後も項目が追加される可能性がある部分の変更可能性を念頭に置いて全体設計を行っていく必要があります。
ホームページ運営を続けていく中や、ホームページ制作を進めていく段階で、それまでは見えなかった「不足している情報」が見えてくることがあります。
そこでホームページ修正に取り掛かることになります。しかしながらその部分の修正については、その部分がどのように作られているかで修正のしやすさが異なります。
ホームページ運営後のホームページ修正依頼時はもちろん、ホームページ制作の完了直前に、修正依頼がよく来るのもそのためです。ある程度の期間運営を続けたり、ホームページ制作が具体的に形になってからしか気づかない点がたくさん出てきます。
弊社でもホームページ修正のご依頼を承っておりますが、修正の難易度が高く修正費用が高額になる場合には、代替手段をご提案させていただくケースもよくあります。
変更可能性を想定したホームページ設計
ホームページ制作自体は、いろいろな方法、いろいろな設計で行うことができるため、表面上の見栄えに違いがなくても、その裏側の仕様は千差万別です。
ホームページ自体の改良を前提として、変更可能性を想定した設計にすることこそ、ホームページ制作において重要なポイントになります。
なぜなら、情報は常に更新されホームページは進化をしていくものだからです。
企業ホームページであれば事業内容や取扱商品、サービス、求人状況などは常に変化していきます。大きくは変化しなくても「どの事業に力を入れるか」という重要度も時期によって変化することもありますし、例えば、「普段はさほど注目されなくても良いが、書き入れ時には前に押し出すべき情報」というものもあるはずです。
そうした変化に応じてホームページ掲載情報も修正したりページ追加や削除を行ったりする必要があります。
この時に大切になるのが改良のしやすさです。
簡単にできそうで修正が困難なケース
軽微なホームページ修正やカスタマイズの場合にも、簡単にできそうで修正が困難なケースがよくあります。
根本的なホームページ仕様の変更などを伴うケースでは、大掛かりな仕組みの変更が必要になるため、どうしてもその分だけ修正費用やカスタマイズ費用がかかります。
例としては、画像で横並びメニューを作成している場合（項目追加の場合に画像サイズの変更が必要になる場合があります）や画像内に文字を挿入している場合です。
もし、ホームページ自体のもつ意味を把握し、時代とともに改良していくという視点をしっかりと持てている場合であれば、運用後の変更のしやすさの重要性を元に、その後柔軟な対応ができるように設計できるはずです。
こうした視点を持つためには、ホームページ制作の全体像を把握しておく必要があります。
ホームページの特性や変更可能性が考慮されていないデザイン案
取引先の広告代理店等、グラフィックデザインやチラシデザインを手掛けている事業者の方から「デザイン案を送るのでその通りにホームページを仕上げて欲しい」と、デザイン案をいただくことがあります。いただいたデザインそのものは素晴らしく美しい仕上がりになっています。
ただ、ご依頼いただいておいて恐縮ですが、Webに関する点は全く畑違いであるという場合、どうしてもホームページの特性や変更可能性が考慮されていないデザイン案になっている場合があります（かなり古い話で言うとスクロールバーの出方が逆だったりということもありました）。
その通りに仕上げることもできますが、「PC版はそれで良いとして、スマートフォン版の表示はどうするのか？レスポンシブだけでは厳しいのではないか？」という問題が出てきたり、「その方式でメニューを作成すると、後々の修正が大掛かりになってしまう」という状態になっている場合もよくあります。
PC版とSP（スマホ）版の見え方の違いを考えたデザイン
PC版とSP（スマホ）版の見え方の違いを考えたデザインも重要です。
例えば画像制作の点で言えば、PCで表示した場合は余裕を持って読める大きさであるものの、スマートフォンの画面に縮小された場合、その画像内の文字は小さくて読めないのではないかというような設計になっている場合があります。
画像内の文字の修正
ホームページ制作やホームページ修正において、表面的な見栄えが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日）
ホームページ更新や修正の価格、料金については以下のページをご参照ください。
ホームページ更新・修正についてのよくあるご相談内容やよくあるご質問については「ホームページ更新・修正についてのよくあるご質問・ご相談」をご参照ください。
