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

ウェブサイト・ホームページを構成するパーツである「画像」。ホームページ制作で使用するホームページ用の画像には、写真素材をはじめ、Illustratorなどで制作されたGIFボタン、PNGボタンなどがあります。

このGIFボタンなどには、テキスト（文字）が埋めこまれていることがよくあります（ボタンなのですからそれが一般的です）。もちろんボタンに限らず、掲載写真（jpeg、Webp）に文字入れされている場合もよくあります。

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

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

今回は、そんな元データがない状態でのホームページ素材の画像について「特殊加工」、「画像再作成」の事例、そして現代のボタン制作事情と費用相場や制作効率を劇的に変えるAIと最新ツールの活用をお伝えします。

現代のボタン制作事情と費用相場

ホームページ（ウェブサイト）制作の現場では、技術の進化とともにボタンの作り方も大きく変化しています。以前はPhotoshopなどで作成した画像をそのまま貼り付ける手法が一般的でしたが、現在ではより柔軟で高品質な表示が求められています。ここでは、現在の主流技術と、それを外注する際の費用感について少し触れていきましょう。

主流はCSSとベクター画像（SVG）へ

かつては角丸やグラデーション、影といった表現をするために、必ず画像としてボタンを書き出す必要がありました。しかし現在は、これらの視覚効果のほとんどをCSSというコード記述だけで表現できます。さらに、アイコンや複雑な図形には、拡大縮小しても画質が劣化しないベクター形式（SVG）が使われるケースが増えています。

Retina対応の画質問題を解決するSVGボタン

スマートフォンや高解像度ディスプレイ（Retinaディスプレイなど）が普及した現在、従来の画像（JPEGやPNG）で作られたボタンは、画面上でぼやけて見えてしまうことがあります。これを防ぐために画像のサイズを2倍、3倍で作る手法もありますが、データ容量が重くなり、ページの表示速度を遅くする原因になりかねません。SVG形式やCSSで描画されたボタンであれば、どれだけ高精細な画面で見ても、くっきりと美しい表示を保つことができます。これはユーザーに信頼感を与えるためにも重要です。

画像ボタンとCSSボタンの役割分担

では、画像ボタンは完全に不要になったのでしょうか？

そんなことははありません。

写真を使ったボタンや、手書きの質感をそのまま活かしたい場合など、CSSでの表現が難しいデザインには、依然として画像ボタンが有効です。テキストの変更頻度が高いボタンやシンプルな形状のボタンはCSSで作成し、キャンペーンバナーのような訴求力の高いボタンは画像で作るなど、用途に合わせて使い分けることが重要です。

ボタン制作の外注料金の考え方

「ボタン制作」の費用感ですが、これは「素材としての画像作成」か「ホームページ上で動く部品としての実装」かによって大きく異なります。

単純な画像加工・再作成の費用目安

すでにホームページにある画像の文字を打ち替えたり、色味を調整したりするだけの「画像処理」であれば、比較的安価に依頼できる傾向があります。素材の支給がある場合、1点あたり数千円程度から対応可能な制作会社やフリーランスも存在します。ただし、元データがなく、ゼロからデザインを書き起こす場合は、デザイン費として別途費用がかかることを想定しておく必要があります。

アニメーションやレスポンシブ対応を含む新規制作の費用目安

現代のホームページ制作において標準的となっている、マウスを乗せたときの動き（ホバーエフェクト）や、スマートフォン表示時のサイズ調整（レスポンシブ対応）を含めて依頼する場合、コーディング作業が必要になります。この場合、単なる画像制作費に加えて、実装費用（コーディング費）が発生します。

特に動きにこだわったJavascript制御のアニメーションなどを組み込む場合は、工数に応じた費用が必要です。事業の予算計画を立てる際は、単に画像の値段だけでなく、実装にかかる技術料も考慮に入れておくことをおすすめします。

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

ホームページ内の画像設置は、その内容が変更になった場合、修正が困難である側面があります。その根本は、ホームページ自体が文書であるということに起因しています。

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

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

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

こだわりフォントやグラデーションなどを画像で表現

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

グラデーション背景の上に有料フォント 横並びメニューボタン

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

背景画像としてグラデーションの描画がなされ、その上に有料フォント（標準フォント以外のフォント）で書かれた文字が乗っているという画像ボタンが作成され、横並びメニューやサイドバーメニュのメニューボタンとして設置されるケースが増えました。

修正が必要になった時に画像の元データがない場合

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

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

ホームページ制作を手掛けた方であれば、Illustratorのaiデータを持っていることがあります。

Illustratorのaiデータがない場合

しかし、例えばホームページ制作を依頼したホームページ制作会社が廃業していたり、自社制作のホームページで、担当者の方が退職されていたりと、場合によっては元のデータが無い場合があります。

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

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

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

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

文字は乗っているものの、他のボタンと同じ背景パターンの擬似的な元データです。基本的には、背景色をスポイト抽出して、フォント部分を塗りつぶして、擬似的な元データを作るという方法をとります。

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

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

近年ではオブジェクト消去機能によってこうした作業が楽になってきていますが、背景画像のパターンによってはうまく修正できない場合もあります。

使用フォントの問題

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

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

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

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

前景色（文字色）の問題

前景色（文字色）は、グラデーション化されていない場合が多いため、スポイトでカラーの抽出をすることで文字色は周りのものと合わせることができます。

しかし、もしグラデーション化されていた場合は、グラデーションの両端などを抽出して調整する必要が生じてきます。

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

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

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

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

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

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

現在ではホームページ制作において単一の画像の透明度をCSSで変化させるのが一般的ですが、一昔前は、画像ボタン+背景色を若干変えた画像ボタンという組み合わせで、画像を差し替える様な工夫で実装されていました。

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

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

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

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

画像をすべて入れ替える

こうした画像の再作成において、もっとも確実で手っ取り早い方法は、画像をすべて入れ替えるという方法です。

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

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

全ての画像を再作成

サイト内部に同じような画像がある場合は、完全一致のためにはすべての画像を再作成して総入れ替えが必要になります。

例えば類似フォントで横並びメニューだけの再作成のみであっても、その部分の一貫性などは保つことができます。

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

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

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

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

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

制作効率を劇的に変えるAIと最新ツールの活用

デザインの現場にもAI技術が浸透し、従来の「職人技」が必要だった工程の一部は、ツールによって大幅に効率化されています。これらを活用することで、コストを抑えつつクオリティの高いボタン素材を作ることが可能です。

AIによるデザインの方向性とバリエーションの生成

新しいボタンのデザインを考える際、ゼロからアイデアを出すのは時間がかかります。画像生成AIなどを活用すれば、「未来的」「レトロ」「手書き風」といったキーワードを入力するだけで、数秒で数十パターンのデザイン案を出すことができます。これをそのまま使うのではなく、デザイナーがインスピレーションを得るためのラフ案として活用することで、意思決定のスピードを早めることができます。

AI画像編集ツールを活用した素材加工の時短術

Photoshopなどの主要な画像編集ソフトには、すでに強力なAI機能が搭載されています。これらを活用することで、従来は時間の掛かっていた作業を一瞬で終わらせることができます。

背景切り抜きや色調調整の自動化

商品写真や人物写真をボタンの中に組み込みたい場合、以前はペンツールを使って手作業で切り抜く必要がありました。最新のツールでは、被写体を選択するだけでAIが自動的に背景を削除してくれます。また、写真の色味をホームページ全体のトーンに合わせる作業も、AIによる自動補正機能を使うことで、高い精度で短時間に調整可能です。

生成AIによるテクスチャ素材の作成

ボタンに特殊な質感（紙、布、金属など）を持たせたい場合、これまでは素材サイトから適切な画像を探すのに多くの時間を費やしていました。生成AIを使えば、「錆びた鉄のテクスチャ」「和紙の質感」などを指示するだけで、著作権の問題が少ないオリジナルのテクスチャ素材を即座に生成できます。これをボタンの背景に敷くことで、オリジナリティのあるデザインを効率よく制作できます。

ユーザー体験（UX）を意識した「使える」ボタンの作り方

ホームページにおけるボタンは、単なる飾りではなく、ユーザーに行動を促すための機能部品です。「加工事例 ホームページ 作り方」を調べる際は、見た目の加工だけでなく、使いやすさ（ユーザビリティ）の視点を取り入れることが重要です。

見た目よりもクリックしやすさを重視する

デザイン性が高くても、押しにくいボタンはユーザーにストレスを与え、離脱の原因になります。特にスマートフォンなどのタッチデバイスでの操作性を最優先に考える必要があります。

タッチデバイスにおける理想的なボタンサイズ

指でタップする操作において、誤操作なく快適に押せるサイズは、一般的に44px〜48px四方以上と言われています。見た目のデザインとしてボタンが小さくても、透明な余白を含めることで、実際の反応領域（タップエリア）を十分に確保する工夫が必要です。

「更新ボタン」など重要なボタンに求められる設計

「申し込み」や「購入」、「更新」といった、事業において重要なアクションを担うボタン（CTAボタン）は、他の要素よりも明確に目立たせる必要があります。周囲に十分な余白（ホワイトスペース）を設けたり、ベースカラーの補色を使ったりして視認性を高めます。また、立体感のあるデザインや影（ドロップシャドウ）をつけることで、「押せるもの」であることを直感的に伝える手法も有効です。

ユーザーを迷わせないためのフィードバック設計

ボタンを押したのに反応がないと、ユーザーは「押せていないのか？」と不安になり、何度も連打してしまうことがあります。システムへの負荷を防ぎ、ユーザーに安心感を与えるために、視覚的なフィードバックは重要です。

押したことがわかるホバー・クリックアニメーション

パソコンであればマウスカーソルを乗せたとき（ホバー時）、スマートフォンであればタップした瞬間に、ボタンの色が変わる、凹む、枠線が光るといった変化をつけます。この「マイクロインタラクション」と呼ばれる微細な動きが、ユーザーとホームページ（ウェブサイト）との対話をスムーズにします。

ボタンが無効な状態（Disabled）の適切な視覚表現

入力フォームなどで、必須項目が未入力の間はボタンを押せないようにするケースがあります。このとき、ボタンをグレーアウト（灰色にして薄くする）させ、カーソルの形状を変えることで、「現在は押せない」という状態を明確に伝えます。この処理を怠ると、ユーザーはなぜ進めないのかわからず、混乱してしまう可能性があります。

特殊加工が活きる！現代のデザイン事例

CSSやSVGが主流になった現在でも、あえて画像加工を施したボタンを採用することで、他社との差別化を図る事例があります。ここでは、画像加工技術が特に活きるデザインケースを紹介します。

レトロ・アナログ表現を追求する際の画像ボタンの強み

デジタル全盛の時代だからこそ、温かみのあるアナログ表現や、懐かしいレトロデザインが注目されることがあります。かすれたスタンプのような風合い、古い紙の黄ばみ、手書きの不揃いな線などは、CSSのコードだけで再現するのは非常に困難です。こうした世界観を大切にするブランドサイトやキャンペーンページでは、手間をかけて作られた画像ボタンが、その世界観を決定づける重要な要素となります。

CSSでは表現が難しいテクスチャと質感の具体事例

例えば、高級感のある革製品のブランドサイトで、ボタン自体に革のステッチやシボ感（表面の凸凹）を持たせたい場合などは、高解像度の画像素材を使用するのがベストです。また、メタリックな輝きや、複雑な光の反射、ガラスのような透明感をリアルに表現する場合も、画像合成技術の出番です。

画像とベクター画像を組み合わせるハイブリッド手法

現代的な解決策として、画像とコードを組み合わせる手法も増えています。例えば、ボタンの背景にはリッチな質感の画像を使い、その上の文字やアイコンはSVGやWebフォントで配置します。こうすることで、複雑なテクスチャ表現と、修正の容易さや鮮明な文字表示を両立させることができます。これが、現代における「ホームページ素材の特殊加工」の賢いアプローチと言えるでしょう。

背景がCSS、文字がテキストデータであれば修正しやすい

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

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

ホームページ修正のしやすさを考えた設計

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

特にスマートフォンが普及してからはサイト仕様を大きく変更する必要が生じました。PC用の横並びメニューの他にスマートフォン版用のメニューを新設するケースもよくあります。

「たった1ヶ所の文字の修正」でも想像以上の手間や費用が必要に

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

画像の再作成が難しくなる今回のケースはもちろん、画像の修正に時間と費用がかかってしまうことはホームページの費用対効果を下げてしまう要因になります。

特にデータを計測しながらSEOなどを実施する場合には、ページタイトル・大見出し変更に伴いメニュー項目の文字を変更するケースが頻繁に出てきます。

ホームページ制作時に改良前提でメニューなどを設計しておくと、画像の再作成などの問題をパスすることができるので、見栄えだけにこだわらず柔軟に対応することのできるWebデザイン・ホームページの設計を心がけることが大切ではないでしょうか。

こうした画像ボタンの再作成などホームページ素材の特殊加工が必要な場合、画像の加工、再作成に大掛かりな費用が必要になる場合があるため、現在のグローバルメニューを廃止して、新しいタイプのメニューを新設させていただく代替方法をご案内させていただく場合があります。

ホームページに設置した画像内の文字の修正

ホームページの更新・修正料金 価格表

ホームページ更新・修正についてのよくあるご相談内容やご質問事項につきましては「ホームページ更新・修正についてのよくあるご質問・ご相談」をご参照ください。

（初回投稿日 2016年7月15日）