ホームページ素材の特殊加工 画像ボタンの再作成

ホームページ素材の特殊加工 画像ボタンの再作成


ウェブサイト・ホームページを構成するパーツである「画像」。

ホームページ用の画像には、写真素材をはじめ、Illustratorなどで制作されたGIFボタンなどがあります。

このGIFボタンなどには、テキスト(文字)が埋めこまれていることがよくあります(ボタンなのですからそれが一般的です)。

最近ではCSSでもある程度のフォントが選べるようになってきましたが、少し前まではフォントの種類に限りがあったため、デザイン面での他サイトとの差別化にあたり、文字を画像で作成してホームページに設置することが一般的でした。

しかしながら、ふとしたことで埋め込まれたテキストの文言の修正が必要になった時、元々の制作データがあれば良いのですが、社内制作の場合、制作担当者の方が退職されたり転勤されて既にいなかったり、外注の場合でも既に廃業していたりと、元データが手に入らない場合があります。

今回は、そんな元データがない状態でのホームページ素材の画像について「特殊加工」、「画像再作成」の事例をお伝えします。

ホームページ内の画像設置は修正が困難

ホームページ内の画像設置は修正が困難

ホームページ(ウェブサイト)は、基本的には文書のような構造になっています。

一般的な文書にも画像が挿入されている事がありますが、基本的にベースとなるのは「テキスト」です。

書籍や論文などと同じように、「大切なのは言語としての情報で、補足的に参考画像を掲示する」ということが基本形になっており、どうしてもそのビジュアル的な「表現」に関しては後回しといった印象があります。

しかし、ホームページの使い方として広告的要素が強くなってきてからは、ビジュアル面にも工夫が必要になってきた経緯があり、ウェブで表現できるフォントの制限や、かつてのCSSでは表現できなかったグラデーションなどを画像を用いて表現する流れになりました。なお、現在では、背景色などをCSSでグラデーション表現することができます。

この時代に制作されたウェブサイト・ホームページは、グラデーション背景の上に文字が表示されている物が多く、横並びメニューボタンもそのような仕様で制作されているものが多いと推測されます。

もし、サイトの修正が必要になった時に、特にこの「グラデーション背景の上に文字が埋め込まれた画像」を修正しようとする場合、画像制作の元データがあれば、グラフィックソフトで文字を修正して吐き出せば事足りるのですが、場合によっては、その元データを手に入れられないケースがあります。

その場合、たった1ヶ所の文字の修正であっても、うまく修正できない場合があります。

弊社でもサイトのカスタマイズやサイトのWordPress化に合わせて、メニューボタンの修正をご依頼いただくことがありますが、元のサイトの制作者の方が既にいらっしゃらない場合など、元データ無しで修正をすることがあります。

この場合の修正は、①無理やり画像を再作成、②画像をすべて入れ替え、のどちらかの選択肢になります。

無理やり画像を再作成する

ホームページ用の画像を再作成

ホームページに既に設置された画像をブラウザやFTPソフトでダウンロードすることによって、「元データ」とまではいかないものの、特殊加工修正の対象となる画像をひとまずローカルに準備することができます。

GIF画像などの背景が単色であれば、比較的修正は簡単にできるのですが、フォントの問題や前景色(文字色)の問題など、いくつか問題があります。

そして、背景が「写真」であったり、グラデーションカラーになっている画像は、修正がより困難になります。

使用フォントの問題

まずはフォントの問題です。

横並びメニューボタンのうち、例えば5つボタンがある中の1ヶ所を修正するの場合、異なるフォントを用いると当然周りのフォントに対して違和感が生じます。

元々画像化されているものは、ウェブ用に使用される標準フォント以外のものが多く、使用フォントの見極めが重要になります。

しかしながら、完全に同一のフォントを所有していない場合もあり、全く同一の画像を制作できないケースもあります。

前景色(文字色)の問題

前景色(文字色)は、グラデーション化されていない場合が多いため、スポイトでカラーの抽出をすることで文字色は周りのものと合わせることができまが、もしグラデーション化されていた場合は、グラデーションの両端などを抽出して調整する必要が生じてきます。

背景が写真やグラデーションカラーの場合

背景が単色ではなくグラデーション化されていたり、写真の上に文字が乗っている場合は、元データ無しの修正は困難を極めます。

基本的に無理やり画像を再作成する場合は、使用カラーをスポイトで抽出してカラーを合わせながら、まず文字を消して、文字が乗る前の背景のみの画像を作成します。

その際に消した文字の影響を完全に無くすにあたり、背景が複雑なものは、それだけ修正も手間がかかります。

マウスを乗せると画像が変化するパターンのボタン

最近では、ボタンの上にマウスカーソルを乗せると、透明度を変化させるといったメニューボタンの仕様が多くなってきましたが、旧来からマウスカーソルを載せた時に画像自体が変化するパターンのボタンがよくあります。

このタイプのボタンの場合、画像を二つ用意する必要があります。

ここで問題となるのが文字の位置です。

何とか背景をプレーンの状態に加工する事ができても、二枚の画像の文字位置をピッタリと合わせる必要があります。

画像の元データがあればそれほど問題とならない文字位置も、無理やり画像を再作成する場合には、ピクセル単位の細かな調整が必要になります。

画像をすべて入れ替える

ホームページに設置した画像をすべて入れ替える

もっとも確実で手っ取り早い方法は、背景色、前景色(文字色)それぞれがグラデーションであっても、それぞれの開始色をスポイトで抽出しながら、画像を再作成するか、背景をCSSグラデーションなどを用いつつ、文字だけを背景透過画像として上に描画するという方法です。

この方法であれば、フォントは均一になるため、フォントの問題を解決することができます。

サイト内部に同じような画像がある場合は、完全一致のためにはすべての画像を再作成して総入れ替えが必要になりますが、例えば類似フォントで横並びメニューだけの再作成のみであっても、その部分の一貫性などは保つことができます。

画像の数だけ修正の手間がかかりますが、「1ヶ所の修正」が困難な場合は、こちらのほうが簡単でキレイに修正できることがあります。

グラデーション背景に文字を乗せるパターンのボタンの作成

グラデーション背景に文字を乗せるパターンのボタンの作成

ホームページに使用するグラデーション背景に文字を乗せるパターンのボタンの作成にも、たくさんの方法があります。

旧来からの一般的な方法は、「グラデーション背景に文字を乗せた一枚物の画像」ですが、お伝えしたとおり、元データがない状態では修正が簡単には行かないケースが出てくるリスクがあります。

この他、グラデーション背景と文字を別の画像として作成し、ボタン自体をブロック要素化して、背景をbackground、文字をimgで乗せる方法や、背景、文字それぞれをCSSで表現する方法があります。

もっとも簡単に修正できるパターンは、背景がCSSで表現され、文字が画像ではなく「テキストデータ」のパターンです。

もし、サイトの細かな修正が想定されるようなケースであれば、画像の元データを確実に確保するか、上記のようなパターンでメニューボタンなどを制作するほうが良いと考えられます。

ウェブサイト・ホームページは、単発的ではなく長期にわたって稼働・運営する性質がありますので、事業の変化とともにある程度の修正の必要性も出てくることが想定されます。

「たった1ヶ所の文字の修正」にも、場合によっては想像以上の手間や費用が発生することがありますので注意が必要です。


「ホームページ素材の特殊加工 画像ボタンの再作成」のカテゴリ Web制作・Web関連
タグ: , ,


ホームページ制作、サイトカスタマイズなどのお問い合わせ・ご依頼はこちら