Webサイトやアプリのボタンを外注するとき、完成画像を1枚だけ依頼すれば足りるとは限りません。
ユーザーが触っていない通常時、カーソルを重ねたとき、押している途中、操作できない状態では、同じボタンでも役割が異なります。
状態差分を決めずに通常時の画像だけ制作すると、実装段階で追加素材が必要になり、納期や費用が増える原因になります。
先に整理すべきなのは、見た目の好みよりも「どの画面で、どの操作状態が発生するか」です。
Webサイト、アプリ、ゲームで使用するボタンやアイコンを1点から依頼できるサービスです。通常時だけでなく、マウスオーバー、アクティブ、ディセーブルなど、実装に必要な状態への展開も相談できます。
Webボタンの状態差分は最低何種類必要か
一般的なWebボタンでは、通常、ホバー、押下、非活性の4種類を検討します。
すべての案件で4種類が必須になるわけではありません。スマートフォン専用画面にはマウスオーバーがなく、常に操作可能なボタンなら非活性状態も不要です。
| 状態 | 表示される場面 | 見た目の変化例 |
|---|---|---|
| 通常 | 何も操作していない | 基準となる色、影、枠線 |
| ホバー | PCでカーソルを重ねた | 色を明るくする、枠線を強める |
| 押下 | クリックやタップの途中 | 影を減らす、位置を少し下げる |
| 非活性 | 条件未達で操作できない | 彩度を下げる、薄いグレーにする |
| フォーカス | キーボード操作で選択した | 外周に線やリングを表示する |
| 選択済み | タブやフィルターを選んだ | 背景色、文字色、アイコンを変える |
| 読み込み中 | 処理が完了していない | スピナーを表示し、再操作を防ぐ |
PC向けの申し込みボタンなら、通常、ホバー、押下、フォーカスの4状態が候補です。
入力フォームの送信ボタンなら、必須項目を入力する前の非活性状態も必要になります。
状態差分がないと起こりやすい問題
ボタンを押せたのか分からない
クリックしても見た目が変わらないと、ユーザーは操作が受け付けられたか判断できません。
反応がないと思い、同じボタンを何度も押すこともあります。
押下時に次のような変化を入れると、操作した感覚を伝えやすくなります。
- ボタンを1〜2ピクセル下へ移動する
- 下側の影を薄くする
- 背景色を少し濃くする
- アイコンの明るさを変える
- 枠線を内側へ表示する
変化は大きくする必要がありません。通常時と比較して判別できる程度で十分です。
押せないボタンが押せるように見える
非活性ボタンの見た目が通常時と同じだと、ユーザーは何度も操作を試します。
反対に、薄くしすぎると文字が読めなくなります。
非活性状態では、次の要素を組み合わせます。
- 背景色の彩度を下げる
- 影をなくす
- カーソルを変更する
- 文字と背景の差は残す
- 必要に応じて操作できない理由を表示する
色を薄くするだけでなく、立体感やカーソルの変化も使うと、通常時との差を伝えやすくなります。
既存画面とボタンだけ雰囲気が違う
単体ではきれいなボタンでも、画面内で浮くことがあります。
原因になりやすいのは、次の不一致です。
- 角丸の大きさ
- 影の方向と濃さ
- アイコンの線幅
- 文字の太さ
- グラデーションの有無
- 枠線の太さ
- 他のパーツとの立体感
ボタンだけを外注する場合も、使用予定の画面や既存サイトのURLを共有することが重要です。
Web・アプリ・ゲームで必要な差分は変わる
一般的なWebサイト
コーポレートサイトやランディングページでは、通常とホバーの2種類で足りる場合があります。
ただし、問い合わせフォームや会員登録では非活性状態も必要です。
検討する状態は次のとおりです。
- 通常
- ホバー
- 押下
- フォーカス
- 非活性
- 読み込み中
CSSで色や影を変更できるボタンなら、画像差分をすべて用意せず、デザイン仕様だけ作る方法もあります。
装飾が複雑な画像ボタンは、状態ごとの画像が必要になる場合があります。
スマートフォンアプリ
スマートフォンにはカーソルがないため、通常はホバー状態を使用しません。
代わりに、タップ中、選択済み、非活性などを優先します。
- 通常
- タップ中
- 選択済み
- 非活性
- 読み込み中
iOSとAndroidの両方で使用する場合は、画面密度や書き出しサイズも確認します。
ゲームUI
ゲームでは、Webサイトより多くの状態差分が必要になることがあります。
コントローラー、キーボード、マウス、タッチ操作が混在するためです。
- 通常
- カーソル選択中
- 押下
- 選択済み
- ロック中
- 非活性
- クリア済み
- 新着通知付き
ゲーム内のボタンは装飾が複雑になりやすく、色だけでなく発光、枠、アイコン、質感まで変わることがあります。
「ボタン1点」の数え方を発注前に確認する
外注時に誤解が起こりやすいのが、制作点数の数え方です。
通常、ホバー、押下、非活性の4画像を制作する場合、依頼者は「ボタン1個」と考え、制作者は「4点」と考える可能性があります。
見積もり前に、次のように一覧化します。
| ボタン名 | 通常 | ホバー | 押下 | 非活性 | 合計 |
|---|---|---|---|---|---|
| 購入する | 1 | 1 | 1 | 1 | 4点 |
| 戻る | 1 | 1 | 1 | 不要 | 3点 |
| 次へ | 1 | 不要 | 1 | 1 | 3点 |
| メニュー | 1 | 1 | 不要 | 不要 | 2点 |
この例では、ボタンの種類は4つでも、画像素材は合計12点です。
状態差分が基本料金に含まれるか、1状態ごとに追加料金になるかはサービスによって異なります。必ず見積もり時に確認します。
ボタン画像を自作する場合と外注する場合の違い
| 比較項目 | 自作 | 外注 |
|---|---|---|
| 費用 | 制作費はかからない | 点数や難易度に応じた費用が必要 |
| 制作時間 | 自分で確保する | 指示と確認に集中できる |
| 既存画面との統一 | 自分で調整する | 画面を共有して調整を依頼できる |
| 状態差分 | 実装を理解して作る必要がある | 必要な状態を伝えて展開を相談できる |
| 元データ | 自分で管理できる | 別料金になる場合がある |
| 修正 | 何度でも可能 | 無料回数や変更範囲に制限がある |
単純な角丸ボタンであれば、CSSやデザインツールを使って自作できます。
外注が向いているのは、次のようなケースです。
- 装飾や描き込みが多い
- ゲームやアプリ独自の世界観がある
- アイコンとボタンを統一したい
- 既存UIに合う形へ修正したい
- 複数の状態差分をまとめて用意したい
- 社内にデザイナーがいない
- 開発担当者がデザイン制作まで手を回せない
外注時に伝えるべき7項目
1. 使用する画面と目的
「青いボタンを作ってください」だけでは、適切なデザインを判断できません。
次のように用途を伝えます。
- ECサイトの商品購入ボタン
- スマートフォンアプリの次へボタン
- ゲームのステージ選択ボタン
- 管理画面の保存ボタン
- 会員登録フォームの送信ボタン
関連するサイトURL、アプリ画面、スクリーンショットがある場合は共有します。
2. 必要なボタンの種類
ボタンに表示する文言と役割を一覧にします。
- 購入する
- カートに入れる
- 次へ
- 戻る
- 保存
- キャンセル
- ログイン
- 詳細を見る
文言は画像へ直接入れるのか、実装時にHTMLやアプリ側で重ねるのかも決めます。
3. 必要な状態差分
各ボタンについて、必要な状態を記載します。
依頼文の例は次のとおりです。
「購入ボタンは通常、ホバー、押下、非活性の4状態を希望します。戻るボタンは通常とホバーの2状態で構いません」
必要な差分が未確定なら、使用環境を伝えて相談します。
4. サイズ
画像の横幅と高さをピクセルで指定します。
- 240×64ピクセル
- 320×80ピクセル
- 正方形64×64ピクセル
- 横幅可変を想定
- スマートフォン用に2倍サイズも必要
リサイズが追加料金になるサービスもあるため、使用サイズは制作前に確定させます。
5. 納品形式
実装担当者に確認し、必要な形式を指定します。
- PNG
- JPG
- SVG
- PSD
- AI
- XD
- 背景透過の有無
ボタンの周囲が透明である必要がある場合は、透過PNGなどを指定します。
編集可能な制作データは、画像納品とは別料金になる場合があります。
6. 参考デザイン
参考画像は、完成形を完全に指定するためではなく、方向性を共有するために使います。
次の要素を説明します。
- シンプル
- かっこいい
- かわいい
- 高級感
- ゲームらしい
- フラット
- 立体的
- レトロ
- 近未来的
参考画像のどこを気に入っているのかも書きます。
「色ではなく、角丸と影の付け方を参考にしたい」と伝えると認識を合わせやすくなります。
7. 素材と権利関係
使用したいロゴ、写真、既存アイコンがある場合は、利用権限を確認して渡します。
他社のゲームやアニメの素材をそのまま模倣させる依頼は避けます。
既存作品に近い雰囲気を希望する場合も、固有のキャラクターや装飾をコピーするのではなく、配色、質感、年代などの要素へ分解して伝えます。
状態差分をまとめて依頼する場合の指示例
次のような形式で送ると、見積もりに必要な情報を整理できます。
- 用途：PC向け会員サイト
- ボタン：ログイン、登録、キャンセルの3種類
- サイズ：各240×64ピクセル
- 必要状態：通常、ホバー、押下、非活性
- 文字：画像内へ入れる
- 納品形式：背景透過PNG
- デザイン：既存画面に合わせた濃紺と水色
- 参考資料：現在のログイン画面のスクリーンショット
- 希望納期：実装開始日の1週間前
- 元データ：今後文言を変更するため必要
- 実績公開：不可
元データが必要な場合は、制作開始後ではなく見積もり段階で伝えます。
シンプルで描き込みの少ないUIボタンやアイコンは1点2,500円から、凝ったデザインは1点3,500円から相談できます。
マウスオーバー、アクティブ、ディセーブルなどの状態展開にも対応しています。無料修正は3回までで、実績上のお届け日数は約5日です。点数、難易度、状態差分、希望納期によって料金と制作期間が変わるため、購入前の見積もり相談が必要です。
修正回数を消費しやすい依頼の失敗
通常時だけ確認して制作を進める
通常時のデザインを確認せず、すべての差分を同時に作ってもらうと、方向性が違った場合の修正量が増えます。
進め方は次の順番が安全です。
- 通常時のデザインを確認する
- 形、色、文字、アイコンを確定する
- ホバーや押下へ展開する
- 非活性とフォーカスを確認する
- 実際の画面へ仮配置する
通常時を基準として固めてから差分を作ると、全画像の作り直しを防げます。
デザイン完成後にサイズを変える
縦横比が変わるリサイズは、単純な縮小では対応できない場合があります。
横長ボタンを正方形へ変更すると、文字、アイコン、余白を再配置する必要があります。
使用する画面と実装サイズを決めてから依頼します。
納品後に文言を差し替える予定を伝えていない
キャンペーン名や商品名を頻繁に変更する場合、文字を画像へ直接入れる方法は管理しにくくなります。
次のいずれかを検討します。
- 背景ボタンだけ制作し、文字は実装側で重ねる
- 編集可能な元データを購入する
- 文言差分をまとめて依頼する
- テキスト部分の余白を広めに確保する
運用方法まで伝えると、納品後に使いやすい素材になります。
制作データは必要か
PNGやJPGだけで実装できるなら、元データは必須ではありません。
ただし、次の予定がある場合は検討します。
- ボタンの文言を変更する
- カラーバリエーションを追加する
- サイズを増やす
- 別サービスへ転用する
- 社内デザイナーが継続編集する
- 多言語版を作る
編集可能なXD、PSD、AIなどの制作データは、追加料金になることがあります。
今回のサービスでは制作データが追加料金4,000円とされているため、必要性を見積もり時に伝えます。
納品後に確認する項目
画像を受け取ったら、見た目だけでなく実装状態でも確認します。
- 指定したサイズになっている
- 背景透過が正しく処理されている
- ファイル名で状態を区別できる
- 通常とホバーの違いが分かる
- 押下時に沈んで見える
- 非活性状態の文字が読める
- 既存画面の配色と合っている
- 高解像度画面でぼやけない
- スマートフォンで小さすぎない
- フォーカス表示が見える
- 実装担当者が形式を扱える
ファイル名は次のように統一すると管理しやすくなります。
- button-buy-default.png
- button-buy-hover.png
- button-buy-active.png
- button-buy-disabled.png
「通常」「押下」だけの日本語名でも構いませんが、開発ルールに合わせて命名します。
まとめ
Webボタンを外注するときは、ボタンの種類だけでなく状態差分まで数えます。
最低限検討するのは、次の4状態です。
- 通常
- ホバー
- 押下
- 非活性
キーボード操作に対応するWebサービスでは、フォーカス状態も必要です。ゲームやアプリでは、選択済み、ロック中、読み込み中などが追加されます。
依頼前に整理する項目は、用途、点数、状態、サイズ、形式、参考デザイン、素材の7つです。
実装直前に不足へ気づくと、追加発注と確認作業が発生します。画面設計の段階で必要な状態を洗い出し、通常時のデザインを確定してから差分へ展開すると、手戻りを抑えられます。
