ウェブサイト・ホームページを構成するパーツである「画像」。
ホームページ制作で使用するホームページ用の画像には、写真素材をはじめ、Illustratorなどで制作されたGIFボタンなどがあります。
このGIFボタンなどには、テキスト（文字）が埋めこまれていることがよくあります（ボタンなのですからそれが一般的です）。
最近では外部フォントの呼び出し（Webフォント）等、CSSでもある程度のフォントが選べるようになってきましたが、少し前まではフォントの種類に限りがあったため、デザイン面での他サイトとの差別化にあたり、文字を画像で作成してホームページに設置することが一般的でした。
しかしながら、ふとしたことで埋め込まれたテキストの文言の修正が必要になった時、元々の制作データがあれば良いのですが、自社での社内制作の場合、制作担当者の方が退職されたり転勤されて既にいなかったり、制作外注の場合でも既にその業者が廃業していたりと、画像の元データが手に入らない場合があります。
今回は、そんな元データがない状態でのホームページ素材の画像について「特殊加工」、「画像再作成」の事例をお伝えします。
ホームページ内の画像設置は修正が困難
ホームページ内の画像設置は、その内容が変更になった場合、修正が困難である側面があります。その根本は、ホームページ自体が文書であるということに起因しています。
ホームページ（ウェブサイト）は、基本的には文書のような構造になっています。
一般的な文書にも画像が挿入されている事がありますが、基本的にベースとなるのは「テキスト」です。
書籍や論文などと同じように、「大切なのは言語としての情報で、補足的に参考画像を掲示する」ということが基本形になっており、どうしてもそのビジュアル的な「表現」に関しては後回しといった印象があります。
こだわりフォントやグラデーションなどを画像で表現
しかし、ホームページの使い方として広告的要素が強くなってきてからは、ホームページ制作においてビジュアル面にも工夫が必要になってきた経緯があり、ウェブで表現できるフォントの制限や、かつてのCSSでは表現できなかったグラデーションなどを画像を用いて表現する流れになりました。なお、現在では、背景色などをCSSでグラデーション表現することができます。
この時代に制作されたウェブサイト・ホームページは、グラデーション背景の上に文字が表示されている物が多く、横並びメニューボタンもそのような仕様で制作されているものが多いと推測されます。
背景画像としてグラデーションの描画がなされ、その上に標準フォント以外のフォントで書かれた文字が乗っているという画像ボタンが作成され、横並びメニューやサイドバーメニュのメニューボタンとして設置されるケースが増えました。
修正が必要になった時に画像の元データがない場合
もし、サイトの修正が必要になった時に、特にこの「グラデーション背景の上に文字が埋め込まれた画像」を修正しようとする場合、画像制作の元データがあれば、グラフィックソフトで文字を修正して吐き出せば事足りるのですが、場合によっては、その元データを手に入れられないケースがあります。
その場合、たった1ヶ所の文字の修正であっても、うまく修正できない場合があります。
ホームページ制作を手掛けた方であれば、Illustratorのaiデータを持っていることがあります。しかし、例えばホームページ制作を依頼したホームページ制作会社が廃業していたり、自社制作のホームページで、担当者の方が退職されていたりと、場合によっては元のデータが無い場合があります。
弊社でもサイトのカスタマイズやサイトのWordPress化に合わせて、メニューボタンの修正をご依頼いただくことがありますが、元のサイトの制作者の方が既にいらっしゃらない場合など、元データ無しで修正をすることがあります。
この場合の修正は、①無理やり画像を再作成、②画像をすべて入れ替え、のどちらかの選択肢になります。
無理やり画像を再作成する
ホームページに既に設置された画像をブラウザやFTPソフトでダウンロードすることによって、「元データ」とまではいかないものの、特殊加工修正の対象となる画像をひとまずローカルに準備することができます。
文字は乗っているものの、他のボタンと同じ背景パターンの擬似的な元データです。基本的には、背景色をスポイト抽出して、フォント部分を塗りつぶして、擬似的な元データを作るという方法をとります。
GIF画像などの背景が単色であれば、比較的修正は簡単にできるのですが、フォントの問題や前景色（文字色）の問題など、いくつか問題があります。
そして、背景が「写真」であったり、グラデーションカラーになっている画像は、修正がより困難になります。
使用フォントの問題
まずはフォントの問題です。
横並びメニューボタンのうち、例えば5つボタンがある中の1ヶ所を修正するの場合、異なるフォントを用いると当然周りのフォントに対して違和感が生じます。
元々画像化されているものは、見栄えをよくするためにウェブ用に使用される標準フォント以外のものを使用されていることが多く、使用フォントの見極めが重要になります。
しかしながら、新しく画像ボタンを作成しようと思っても、完全に同一のフォントを所有していない場合もあり、全く同一の画像を制作できないケースもあります。
前景色（文字色）の問題
前景色（文字色）は、グラデーション化されていない場合が多いため、スポイトでカラーの抽出をすることで文字色は周りのものと合わせることができます。
しかし、もしグラデーション化されていた場合は、グラデーションの両端などを抽出して調整する必要が生じてきます。
背景が写真やグラデーションカラーの場合
背景が単色ではなくグラデーション化されていたり、写真の上に文字が乗っている場合は、元データ無しの修正は困難を極めます。
基本的に無理やり画像を再作成する場合は、使用カラーをスポイトで抽出してカラーを合わせながら、まず文字を消して、文字が乗る前の背景のみの画像を作成します。
その際に消した文字の影響を完全に無くすにあたり、背景が複雑なものは、それだけ修正も手間がかかります。
マウスを乗せると画像が変化するパターンのボタン
最近では、CSSを利用してボタンの上にマウスカーソルを乗せると、透明度を変化させるといったメニューボタンの仕様が多くなってきました。しかしながら、旧来からマウスカーソルを載せた時に画像自体が変化するパターンのボタンがよくあります。
現在ではホームページ制作において単一の画像の透明度をCSSで変化させるのが一般的ですが、一昔前は、画像ボタン+背景色を若干変えた画像ボタンという組み合わせで、画像を差し替える様な工夫で実装されていました。
このタイプのボタンの場合、画像を二つ用意する必要があります。
ここで問題となるのが文字の位置です。
何とか背景をプレーンの状態に加工する事ができても、二枚の画像の文字位置をピッタリと合わせる必要があります。
画像の元データがあればそれほど問題とならない文字位置も、無理やり画像を再作成する場合には、ピクセル単位の細かな調整が必要になります。
画像をすべて入れ替える
こうした画像の再作成において、もっとも確実で手っ取り早い方法は、画像をすべて入れ替えるという方法です。
背景色、前景色（文字色）それぞれがグラデーションであっても、それぞれの開始色をスポイトで抽出しながら画像を再作成するか、背景をCSSグラデーションなどを用いつつ、文字だけを背景透過画像として上に描画するという方法を用います。
この方法であれば、フォントは均一になるため、フォントの問題を解決することができます。
全ての画像を再作成
サイト内部に同じような画像がある場合は、完全一致のためにはすべての画像を再作成して総入れ替えが必要になります。
例えば類似フォントで横並びメニューだけの再作成のみであっても、その部分の一貫性などは保つことができます。
画像の数だけ修正の手間がかかりますが、「1ヶ所の修正」が困難な場合は、こちらのほうが簡単でキレイに修正できることがあります。
グラデーション背景に文字を乗せるパターンのボタンの作成
ホームページに使用するグラデーション背景に文字を乗せるパターンのボタンの作成にも、たくさんの方法があります。
旧来からの一般的な方法は、「グラデーション背景に文字を乗せた一枚物の画像」ですが、お伝えしたとおり、元データがない状態では修正が簡単には行かないケースが出てくるリスクがあります。
この他、グラデーション背景と文字を別の画像として作成し、ボタン自体をブロック要素化して、背景をbackground、文字をimgで乗せる方法や、背景、文字それぞれをCSSで表現する方法があります。
背景がCSS、文字がテキストデータであれば修正しやすい
もっとも簡単に修正できるパターンは、メニューボタンの作成において背景がCSSで表現され、文字が画像ではなく「テキストデータ」のパターンです。
もし、サイトの細かな修正が想定されるようなケースであれば、画像の元データを確実に確保するか、上記のようなパターンでメニューボタンなどを制作するほうが良いと考えられます。
ウェブサイト・ホームページは、単発的ではなく長期にわたって稼働・運営する性質がありますので、事業の変化とともにある程度の修正の必要性も出てくることが想定されます。
「たった1ヶ所の文字の修正」にも、場合によっては想像以上の手間や費用が発生することがありますので注意が必要です。
画像の再作成が難しくなる今回のケースはもちろん、画像の修正に時間と費用がかかってしまうことはホームページの費用対効果を下げてしまう要因になります。
特にデータを計測しながらSEOなどを実施する場合には、ページタイトル・大見出し変更に伴いメニュー項目の文字を変更するケースが頻繁に出てきます。
ホームページ制作時に改良前提でメニューなどを設計しておくと、画像の再作成などの問題をパスすることができるので、見栄えだけにこだわらず柔軟に対応することのできるWebデザイン・ホームページの設計を心がけることが大切ではないでしょうか。
