フォームのデザインを見直すときの考え方｜入力しやすい配置とボタンの決め方

2026年1月5日

＠SOHO編集部

この記事のポイント

✓フォームのデザインを見直すときの考え方を
✓ボタンの配置と色の順に解説します
✓デジタル庁デザインシステムの指針を手がかりに

問い合わせや申し込みのフォームは、見た目を整えるだけでは使いやすくなりません。項目が多すぎる、どこに何を書けばよいか分からない、送信ボタンを押したら何がいけなかったのか分からないまま戻される。こうした小さなつまずきが重なると、入力の途中で画面を閉じてしまう人が増えます。

フォームのデザインを見直すときは、色や角の丸みより先に、項目の数、ラベルと入力欄の配置、必須と任意の示し方、エラーの出し方、ボタンの配置の5つを順に確かめると、効果の大きい所から直せます。この記事では、それぞれの考え方を、行政のサービスで使われる画面の部品の決まりをまとめたデジタル庁デザインシステムの指針を手がかりに説明します。フォームから届いた回答を、担当を決めて返信まで一つの画面で進めたいときは、Halictのような受付から対応までをまとめた道具もあります。

フォームのデザインで何を決めるのか

フォームのデザインとは、入力する人が迷わずに最後まで入力し、送信を終えられるように、項目、配置、言葉、ボタンを決めることです。見た目の美しさも大事ですが、それは入力のしやすさを支えるためのものです。

見直す順番

フォームを見直すときは、次の順番で進めると、効果の大きい所から手を付けられます。

項目の数：本当に必要な項目だけになっているか
配置：ラベルと入力欄の位置が分かりやすいか
必須と任意：どれを必ず書けばよいかが分かるか
エラー：間違えたときに、何をどう直せばよいかが分かるか
ボタン：送信のボタンが分かりやすく、押し間違えないか

色や書体は、この5つが整ったあとに整えます。先に見た目を整えても、項目が多すぎるフォームは使いにくいままです。

この記事では、この5つに加えて、入力欄の補足の説明、選択肢の部品の選び方、送信したあとの画面と対応についても順に取り上げます。入力のしやすさは、フォームの中だけでなく、送信のあとまで続いているからです。

手がかりになる指針

フォームのデザインには、参考にできる公的な指針があります。デジタル庁は、行政のウェブサービスで使う画面の部品の決まりを「デジタル庁デザインシステム」として公開しています。入力欄、ボタン、チェックボックスなどの部品ごとに、使い方と、使うときの注意がまとめられています。行政のための決まりですが、誰が使っても迷わない画面を目指して作られているので、民間のフォームを見直すときにも大いに参考になります。

項目の数を絞る

項目が多いほど、途中で離れる人が増える

入力する項目が多いフォームほど、途中で入力をやめる人が増えるのが一般的な傾向です。項目の1つ1つが、入力する人にとっては手間であり、「なぜこれを聞くのか」と考えさせる理由になるからです。最初にやるべきことは、項目を1つずつ見て、本当に必要かを確かめることです。

必要かどうかを確かめる問い

項目ごとに、次の問いを当てはめます。

この項目がないと、返信や対応ができないか
この項目の情報は、受け取ったあと実際に使っているか
最初の問い合わせの段階で聞く必要があるか。あとのやりとりで聞けないか

たとえば、問い合わせのフォームで住所と電話番号を必須にしていても、返信がメールだけなら、住所はいりません。会社名、部署名、役職を分けて聞いていても、受け取ったあとに使っていなければ、まとめて1つにするか、削除します。

個人の情報は必要な分だけにする

項目を絞ることは、個人の情報を守ることにもつながります。個人情報保護法の第21条では、本人から書面で直接個人の情報を取得する場合、あらかじめ本人に利用の目的を明示しなければならないとされています。この書面には、電子的な記録も含まれます。

個人情報取扱事業者は、前項の規定にかかわらず、本人との間で契約を締結することに伴って契約書その他の書面（電磁的記録を含む。以下この項において同じ。）に記載された当該本人の個人情報を取得する場合その他本人から直接書面に記載された当該本人の個人情報を取得する場合は、あらかじめ、本人に対し、その利用目的を明示しなければならない。出典: e-Gov法令検索個人情報の保護に関する法律

ウェブのフォームで名前やメールアドレスを受け取るときは、何のために使うのかをフォームの近くに書き、プライバシーポリシーへのリンクを設けます。利用の目的を書くときに「この項目は何に使うのか」を考えると、使い道のない項目が自然に見えてきます。個別の場面でどこまで書けばよいかは、扱う情報や事業の内容で変わるので、個人情報保護委員会の案内や専門家に確かめてください。

1画面に詰め込みすぎない

項目を絞っても多くなる申し込みのフォームでは、内容のまとまりごとに見出しを付けて区切るか、画面を分けて段階的に進める形にします。何段階あって、今どこにいるかを示す表示があると、入力する人は終わりが見えて安心します。

ラベルと入力欄の配置

ラベルは入力欄の上に配置する

ラベルとは、入力欄が何を入れる場所かを示す見出しの言葉です。「お名前」「メールアドレス」などがこれに当たります。

デジタル庁デザインシステムの入力欄の使い方では、ラベルと補足の説明、入力欄とエラーの文を、それぞれ縦に積み重ねる配置を示しています。縦に積む配置は、さまざまな部品を含められ、スマートフォンの表示にも強く、多くの場合で推奨できるとされています。ラベルを入力欄の左に横並びにする配置もありますが、スマートフォンでは画面の幅が足りず、ラベルが折り返して読みにくくなります。迷ったら、ラベルは入力欄の上に配置します。

入力欄の幅は、入れる内容に合わせる

同じ指針では、入力欄の横幅を入力内容にふさわしい長さにするよう示しています。郵便番号のように短い内容を入れる欄が画面いっぱいに広がっていると、何を入れるのかがかえって分かりにくくなります。反対に、メールアドレスや住所の欄が短すぎると、入力した内容が途中で見えなくなります。入れる内容の長さに合わせて幅を決めると、入力欄の形そのものが「ここには何をどのくらい書くか」の手がかりになります。

同じ種類の項目の欄は、同じ幅にそろえると画面が整って見えます。たとえば、電話番号と郵便番号のように短い数字の欄は短く、名前とメールアドレスの欄は中くらい、住所の欄は長く、という3段階程度に決めておくと、フォームを増やすときにも迷いません。

穴埋めの文章にしない

「名前は＿＿＿で、年齢は＿＿歳です」のような、文章の中に入力欄を埋め込む形は避けます。デジタル庁の指針でも、入力欄で穴埋めの文章を表現することはできないとし、項目ごとにラベルと入力欄を組み合わせて並べるよう示しています。年齢の「歳」や日付の「年」「月」「日」のように、単位だけを入力欄に添えることはできるとされています。

1列に並べる

入力欄は、基本的に1列で上から下へ並べます。2列に並べると、どの順番で入力すればよいかが分かりにくくなり、見落としも増えます。姓と名、年と月と日のように、まとまりのある短い項目だけを横に並べるのは問題ありません。

補足の説明とプレースホルダーの使い方

補足の説明は前もって見せる

補足の説明とは、ラベルの下に添える、入力の形式や条件の短い説明です。「半角数字で入力してください」「例：03-1234-5678」などがこれに当たります。

デジタル庁の指針では、入力の形式の条件や例を、簡潔かつ具体的に書くよう示しています。そして、補足の説明がなく、エラーが出て初めて入力の条件が分かる形を悪い例として挙げています。条件は、入力する前に見える場所に書いておくことが大切です。

プレースホルダーに説明を任せない

プレースホルダーとは、入力欄の中に薄い色で表示され、入力を始めると消える文字のことです。デジタル庁の指針では、補足の説明のつもりでプレースホルダーを使ってはならないとしています。

プレースホルダーは入力を始めると消えるので、入力の途中で条件を確かめ直すことができません。薄い色の文字は読みにくく、すでに入力されている文字と見分けにくいこともあります。入力の例や条件は、入力欄の外の補足の説明として書きます。

入力できる文字の種類を限らない

電話番号は半角数字だけ、フリガナは全角カタカナだけ、のように、入力できる文字の種類を限っているフォームは少なくありません。デジタル庁の指針は、原則として入力できる文字の種類を限らないようにするとしています。

どうしても限る必要がある場合は、入力しにくい文字の種類を求めるときに自動で変換して入力を助けることを勧めています。変換するのは、送信ボタンを押したときか確認の画面を表示するときが望ましく、入力の直後に変換すると、入力した内容と違う値が表示されて混乱を招くことがあるとされています。全角で入力した電話番号を、送信のときに半角に直して受け付ける、という形にすれば、入力する人は文字の種類を気にせずに済みます。

必須と任意の示し方

どちらかに統一して示す

すべての項目に印を付けると、かえって分かりにくくなります。必須の項目が多いフォームでは任意の項目に印を付け、任意の項目が多いフォームでは必須の項目に印を付ける、というように、少ない方に印を付けると見やすくなります。

デジタル庁の指針では、入力項目の必要性に応じて、必須か任意かを示すラベルを付けられるとしています。印は色だけで示さず、「必須」「任意」と文字で書きます。色だけで区別すると、色の見分けが難しい人には伝わらないからです。

任意の項目は本当に必要か

任意の項目が多いフォームは、もう一度項目の数を見直す合図です。任意の項目も、入力する人には「書いたほうがよいのか」と迷わせる原因になります。受け取ったあとに使っていない任意の項目は、思い切って削除します。

エラーの出し方

何が誤りで、どう直せばよいかを書く

入力に誤りがあったときに表示する文は、フォームの使いやすさを大きく左右します。デジタル庁の指針では、入力内容に誤りがある場合に、具体的な誤りの内容と直し方を書くよう示しています。何が誤りなのかが示されていない文、何が正しい入力なのかが示されていない文は、直し方が分かりにくい悪い例として挙げられています。

分かりにくい例	分かりやすい例
入力内容に誤りがあります	メールアドレスに「@」が入っていません。例：[email protected]
正しく入力してください	郵便番号は7桁の数字で入力してください
エラー	電話番号が入力されていません。日中に連絡がつく番号を入力してください

エラーはその項目のすぐ近くに出す

エラーの文は、フォームの一番上にまとめて出すだけでなく、誤りのある項目のすぐ近くにも出します。どの項目を直せばよいかが一目で分かるからです。項目が多いフォームでは、上にまとめてエラーの一覧を出し、それぞれの項目へ移れるようにすると、見落としを防げます。

エラーを出す時期

入力の途中、1文字ごとにエラーを出すと、入力している人は落ち着いて入力できません。デジタル庁の指針でも、入力の直後や入力欄から離れたときにエラーを表示すると、表示の位置がずれたり、正しい値を入れようとしている途中で煩わしかったりするため、避けたほうが望ましいとしています。エラーを表示するのは、送信ボタンを押したときか、押したあとが望ましいとされています。

入力した内容を消さない

エラーで画面が戻ったとき、それまでに入力した内容が消えていると、入力する人は最初からやり直すことになり、多くの人がそこで離れてしまいます。エラーがあっても、入力された内容は残したまま、誤りのある項目だけを直せるようにします。

ボタンの配置と決め方

ボタンは1画面に主役を1つ

ボタンのデザインで一番大事なのは、どれが主役のボタンかをはっきりさせることです。デジタル庁デザインシステムのボタンの指針では、ボタンを重要度で3つに分けています。

プライマリー（重要度が高い）：色で塗りつぶしたボタン。画面で最も重要な操作に使い、1つの画面に原則1つまで
セカンダリー（重要度が中くらい）：枠線のボタン。プライマリー以外の選択肢に使い、原則として同時に3つまで
ターシャリー（重要度が低い）：下線の付いた文字のボタン。中断や取り消しに使い、1つの画面に原則1つまで

フォームでは、「送信する」「確認画面へ進む」がプライマリーです。「入力内容をリセット」のようなボタンを、送信のボタンと同じ見た目で並べると、押し間違えて入力内容が消えてしまうことがあります。リセットのボタンはそもそも必要か、を考えるところから始めます。

進むボタンは右、戻るボタンは左

同じ指針は、ボタンの配置について次のように説明しています。

これにより、決定や完了といったタスクを進めるボタンは右側に、キャンセルや中止といったタスクを進行させないボタンは左側に配置することが、ユーザーのメンタルモデルとも整合がとれたものとなります。出典: デジタル庁デザインシステムボタン

ウェブの閲覧ソフトでは、戻るボタンが左、進むボタンが右にあります。そのため、未来は右、過去は左という感覚が多くの人に身についています。フォームでも、「送信する」「次へ」を右、「戻る」「キャンセル」を左に配置すると、迷わずに押せます。スマートフォンで縦に積む場合も、同じ意味の順番で並べるとされています。

押しやすい大きさにする

ボタンは、指で押しやすい大きさにします。デジタル庁の指針では、ボタンの押せる範囲を44 CSSピクセル以上に保つよう示しています。CSSピクセルとは、ウェブの画面で大きさを指定するときの単位です。小さなボタンを使う場合も、上下に余白を設けて押せる範囲を確保します。

ボタンの文字は、押すと何が起きるかを書く

ボタンの文字は「OK」「実行」よりも、「送信する」「確認画面へ進む」「申し込みを確定する」のように、押すと何が起きるかが分かる言葉にします。確認の画面がある場合は、最初の画面のボタンを「確認画面へ進む」とし、確認の画面のボタンを「この内容で送信する」とすると、まだ送信されていないことと、次で送信されることがはっきりします。

送信ボタンを押せない状態にしない

必須の項目が埋まるまで送信のボタンを押せない状態にしているフォームがあります。デジタル庁の指針では、ボタンを押せない状態にする設計は、そもそも必要かを注意深く確かめるよう求めています。ボタンがあるのに押せないと、なぜ押せないのかが分からず、操作が止まったり、画面から離れたりする可能性が高まるからです。

ボタンは押せるようにしておき、入力が足りないまま押されたら、何を入力すればよいかをエラーの文で案内します。どうしても押せない状態にする場合は、そのすぐ近くに、なぜ押せないのか、どうすれば押せるようになるのかを具体的に表示するよう示されています。

選択肢の部品の選び方

入力欄には、文字を入れる欄のほかに、選択肢から選ぶ部品があります。選ぶ部品を正しく使い分けると、入力の手間が減り、回答の書き方のばらつきもなくなります。

ラジオボタン

ラジオボタンは、複数の選択肢から1つだけを選ぶ部品です。丸い印が並び、1つを選ぶとほかの選択が外れます。選択肢が2つから5つ程度で、全部を見せて比べてもらいたいときに向いています。「性別」「連絡の方法」のような項目です。

チェックボックス

チェックボックスは、複数の選択肢から当てはまるものをいくつでも選べる部品です。四角い印が並びます。「興味のある分野をすべて選んでください」のような項目に使います。1つだけのチェックボックスは、「利用規約に同意する」のように、はいかいいえを確かめるときに使います。

プルダウン（セレクトボックス）

プルダウンは、押すと選択肢の一覧が開き、その中から1つを選ぶ部品です。都道府県のように選択肢が多いときに、画面を広く使わずに済みます。一方で、開くまで選択肢が見えないので、選択肢が少ないときはラジオボタンのほうが選びやすくなります。

自由に書く欄

選択肢で答えられない内容は、自由に書ける欄で受け取ります。1行で足りる内容には1行の入力欄、問い合わせの本文のように長くなる内容には複数行の入力欄を使います。複数行の欄は、あらかじめ数行分の高さを取っておくと、どのくらい書けばよいかの目安になります。

選び方の目安

1つだけ選ぶ、選択肢が少ない：ラジオボタン
1つだけ選ぶ、選択肢が多い：プルダウン
いくつでも選べる：チェックボックス
選択肢で答えられない：自由に書く欄

選択肢で答えられる項目は、自由に書く欄より選ぶ部品にしたほうが、入力する人は楽になり、受け取る側も集計しやすくなります。選択肢には「その他」を用意し、当てはまらない人も答えられるようにしておきます。

フォームの種類ごとの項目の例

フォームの種類によって、必要な項目は違います。よく使われるフォームについて、最低限の項目の例を示します。ここから、自分たちの対応に本当に必要なものだけを残します。

問い合わせのフォーム

お名前
メールアドレス
問い合わせの種類（ラジオボタンかプルダウン）
問い合わせの内容（複数行の自由に書く欄）

返信をメールで行うなら、電話番号や住所は必須にしなくてかまいません。問い合わせの種類を選んでもらうと、担当の振り分けが速くなります。

申し込みのフォーム（講座やイベント）

お名前とフリガナ
メールアドレス
参加する日程（ラジオボタン）
参加の人数
連絡事項（任意の自由に書く欄）

当日の受付で名前を読み上げる場合はフリガナが役に立ちますが、使わないなら削除します。

出欠のフォーム

お名前
出席か欠席か（ラジオボタン）
出席の場合の人数や食事の要否
一言（任意）

出欠のフォームは、項目が少ないほど回答が集まりやすくなります。欠席を選んだ人には、出席の場合の項目を見せないようにできる道具もあります。

注文のフォーム

お名前
連絡先（メールアドレス、電話番号）
届け先の住所
商品と数量
支払いの方法
備考（任意）

注文のフォームは、住所や支払いの情報を扱うので、項目は増えます。その分、確認の画面で入力内容を一覧で見せ、誤りがないかを確かめてもらう形にすると、届け先の誤りなどのトラブルを防げます。

確認の画面は必要か

入力した内容を送信する前に一覧で見せる確認の画面は、注文や申し込みのように、誤りがあると困るフォームでは役に立ちます。一方、短い問い合わせのフォームでは、確認の画面がかえって手間になることもあります。項目の数と、誤りがあったときの影響で、付けるかどうかを決めます。

送信したあとの画面と自動返信

完了の画面で次に起きることを伝える

フォームのデザインは、送信ボタンで終わりではありません。送信のあとに表示する完了の画面で、受け付けたこと、次に何が起きるか、いつごろ返事が来るかを伝えます。

受け付けたことの確認：「お問い合わせを受け付けました」
次に起きること：「確認のメールをお送りしました」「担当者から連絡いたします」
時期の目安：「3営業日以内にご返信いたします」
届かないときの案内：迷惑メールのフォルダを確かめる、別の連絡先

自動返信のメールを送る

送信した人に、受け付けたことを知らせる自動返信のメールを送ると、相手は送れたかどうかを心配せずに済みます。自動返信には、入力された内容の控えを入れておくと、相手が自分の書いた内容をあとで確かめられます。

届いた回答を誰がどう対応するか

送信されたあとの対応も、フォームの使いやすさの一部です。せっかく入力しやすいフォームを作っても、届いた問い合わせに返事が来なければ、相手の印象は悪くなります。

問い合わせが少ないうちは、届いたメールを担当者が見て返事をすれば足ります。件数が増えたり、複数の人で対応したりするようになると、誰が担当しているのか、返事をしたのか、が分からなくなりがちです。表計算のファイルに担当と状況の列を作って手で埋め、返信はメールソフトから送る、という形で回している職場も多いはずです。

受付から対応までをまとめる道具

この「届いたあと」の手間をまとめたいときの候補がHalictです。公式サイトによると、フォームで受け付けた回答を1件ごとに担当、ステージ、タグを付けて管理し、同じ画面から返信まで送れて、開封まで記録されます。

フォームのデザインの面では、回答する人に1画面に1問だけを見せる対話の形、12種類の入力項目、自動返信の機能が用意されています。作りたいフォームを短い言葉で伝えると、AIが質問の構成まで組み立てて下書きを作る機能もあります。公式の料金ページでは、無料のプランはメンバー1人まで、フォームの数と回答の数は無制限とされ、3人まで使えるスタータープランは月額2,980円（税抜）です。

Googleフォームのような無料で手軽に使える道具で十分な場面も多くあります。回答を集めて表計算で集計するだけなら、使い慣れた道具で困ることはありません。回答のあとに担当を決めて返信までを複数の人で回したい、という場面で、こうした道具を比べてみる価値があります。

Halictは、@SOHOを運営する株式会社ライフスケープが開発・提供しています。

色と見た目の整え方

ここまでの5つが整ったら、色と見た目を整えます。

色だけで意味を伝えない

エラーを赤い文字だけで示す、必須の項目を赤い印だけで示す、といった形は、色の見分けが難しい人には伝わりません。色に加えて、文字や記号でも意味を伝えます。デジタル庁の指針でも、色の違いだけで階層を示すことはできないとして、ボタンの枠線を変えるなどの方法を示しています。

文字と背景の明るさの差を十分に取る

入力欄の枠線やラベルの文字が薄い灰色で、背景との差が小さいと、読みにくくなります。特に屋外でスマートフォンを使うときは、画面が見えにくくなります。文字と背景、入力欄の枠線と背景の明るさの差を十分に取ります。

サイト全体の見た目とそろえる

フォームだけが、サイトのほかのページと違う色や書体になっていると、入力する人は「別のサイトに移ったのでは」と不安になります。ボタンの色や書体は、サイト全体の決まりにそろえます。

スマートフォンでの見直し

いまは多くの人がスマートフォンからフォームに入力します。パソコンの画面で作ったフォームは、必ずスマートフォンでも試します。

確かめる点

ラベルと入力欄が縦に並び、横にはみ出していないか
入力欄を押したときに、入力する内容に合ったキーボードが出るか（電話番号なら数字、メールアドレスなら「@」の付いたキーボード）
ボタンが指で押しやすい大きさか。ほかのボタンと近すぎないか
エラーの文が画面の外に出て見えなくなっていないか

入力する内容に合ったキーボードを出すには、入力欄の種類を正しく指定します。ウェブのフォームの作り方によって設定の方法は違うので、使っている道具の説明で確かめます。

見直したあとに確かめること

フォームを直したら、実際に使ってもらって確かめます。

身近な人に入力してもらう

作った人は、フォームのどこに何があるかを知っているので、つまずきに気づけません。家族や同僚など、フォームを初めて見る人に、何も説明せずに入力してもらいます。迷った所、手が止まった所を横で見ているだけで、直すべき所が見つかります。

数字で確かめる

フォームを開いた人の数と、送信を終えた人の数を比べると、どのくらいの人が途中で離れているかが分かります。直す前と直したあとで比べると、効果があったかを確かめられます。項目を1つ減らす、ボタンの文字を変える、のように、一度に1か所ずつ直すと、何が効いたのかが分かります。

フォームのデザインを仕事にする

フォームのデザインは、ウェブの制作やデザインの仕事の中でも、成果が数字で見えやすい分野です。問い合わせや申し込みの数が増えれば、依頼する側にとって効果がはっきりするからです。デザインの仕事の報酬の水準は、デザイナーの年収・単価相場で、働き方ごとに整理されています。

フォームの見直しを仕事として受けるときは、直す前の状態を記録しておくことが大切です。項目の数、ボタンの文字、エラーの文などを直す前に画面の写真で残し、開いた人と送信を終えた人の数を控えておけば、直したあとに効果を数字で示せます。依頼する側にとっては、どこをどう直したら何が変わったのかが分かることが、次の依頼の判断材料になります。

在宅ワーク市場から見た、フォームの見直しの仕事

在宅ワークとフリーランスの仲介を2004年から続けてきた運営者として見ていると、フォームの見直しは、依頼する側が自分では気づきにくい問題を扱う仕事です。作った人は使い方を知っているので、つまずきが見えません。外の目で入力してみて、どこで止まるかを示し、直し方を提案できる人は、依頼する側にとって頼りになる存在です。

もう1つ見えているのは、フォームのデザインだけでなく、届いたあとの対応の流れまで一緒に見直せる人が重宝されることです。入力しやすいフォームを作っても、返事が遅ければ成果につながりません。自動返信の文面、完了の画面、担当の決め方まで提案できると、仕事の幅が広がります。

依頼主と直接取引する仕事では、仲介の手数料がかからない分、同じ報酬額でも手元に残る額が厚くなり、依頼する側も同じ予算でより多くの改善を頼めます。画面の使いやすさを考える仕事を広げたい人は、UI/UX・アプリデザインのお仕事で、仕事の内容と求められる力を確かめてみてください。

よくある質問

Q. フォームのラベルは入力欄の上と左のどちらに配置するのがよいですか？

迷ったら上に配置するのがおすすめです。デジタル庁デザインシステムの入力欄の指針では、ラベルと補足の説明、入力欄とエラーの文を縦に積み重ねる配置について、さまざまな部品を含められスマートフォンの表示にも強く、多くの場合で推奨できるとしています。左に横並びにすると、スマートフォンでラベルが折り返して読みにくくなります。