デザイン事務所の問い合わせフォームをスマホに対応させるという話は、画面幅に収まって表示されればよい、という話ではありません。相談する側が小さい画面で最後まで入力できるかどうかと、受ける側が外出先で状況を確かめて一次返信を出せるかどうかの、二つの問題が同時に存在します。この記事では、送る側と受ける側の両面から、小さい画面で取りこぼさないための設計を整理します。読み終えたときに、いまのフォームと運用のどこに手を入れればよいかが分かる状態を目指します。
相談する側の多くはスマホから見ている
デザイン事務所のサイトを見る人は、事務所を探している途中にいます。移動中、打ち合わせの合間、退勤後の時間帯といった、机に向かっていない時間に見ていることが多くなります。
このとき、実績の画像を見て良さそうだと感じ、そのまま問い合わせフォームを開きます。開いた先が横に長い表になっていたり、拡大しないと文字が読めなかったりすると、そこで閉じられます。閉じた人は戻ってきません。
つまりスマホ対応は、装飾の話ではなく、相談が届くかどうかの話です。デザイン事務所の場合、サイトの見栄えは制作物の信用に直結するため、フォームの画面だけが雑になっていると、そこで評価が下がります。
制作物の相談は入力量が多くなりがち
デザイン事務所のフォームが難しいのは、聞くことが多いからです。何を作りたいか、部数はいくつか、納期はいつか、支給素材はあるか。これらをすべて聞こうとすると、画面が縦に長くなります。
パソコンの画面なら、縦に長くても全体が見えるので圧迫感はありません。スマホでは、一画面に入る設問が3項目ほどしかないため、同じ設問数でもスクロールが延々と続きます。
対処は、設問を減らすことと、入力の負担が軽い形にすることの二つです。減らす判断の基準は、その設問が無いときに聞き返しが発生するかどうかです。発生しない設問は削ります。
自由記述を減らすと送信率が上がる
スマホでの入力で最も負担が大きいのが、長い自由記述です。フリック入力で数百文字を打つのは、机の上でキーボードを叩くのとは別の作業です。
デザイン事務所のフォームには、「ご希望の内容を詳しくお書きください」という大きな自由記述欄が置かれていることが多くあります。この欄は、パソコンからの相談では豊かな情報が返ってきますが、スマホからの相談では空欄か一行で終わります。
対処は、自由記述で聞いていた内容のうち、選択式にできる部分を選択式に移すことです。作りたいものの種類、部数の幅、納期の目安、支給素材の有無。これらは選択式にできます。残った自由記述は最後に一つだけ置き、任意にします。
二画面に分けるという選択肢
設問をどうしても減らせない場合、二画面に分ける方法があります。最初の画面で作りたいものと連絡先だけを聞き、送信後に詳しい仕様を聞く画面へ案内する形です。
利点は、最初の画面の入力が短くなるので、送信までたどり着く人が増えることです。連絡先さえ取れていれば、あとは返信でやり取りできます。
欠点は、二画面目に進む人が減ることです。一画面目で終わったつもりになる人がいます。進んでもらいたいなら、一画面目の送信後に「あと3項目お答えいただくと、お見積もりが早くなります」と理由を添えて案内します。
どちらが合うかは、事務所の受注の形によります。連絡先だけ取れれば電話で詰められる事務所は二画面に向き、文面のやり取りだけで進めたい事務所は一画面で必要な項目をそろえるほうが向きます。
小さい画面での設問の並べ方
設問を減らしたら、次は並べ方です。原則は、答えやすいものから答えにくいものへ、選択式から自由記述へ、です。
先頭に置くのは、作りたいものの種類です。氏名や連絡先ではありません。連絡先を最初に置くと、「まだ名乗る段階ではない」と感じさせ、そこで閉じられます。
選択式の設問は、ラジオボタンかセレクトで作ります。スマホでは、選択肢が5個を超えるとセレクトのほうが操作しやすくなります。それ以下ならラジオボタンのほうが、選択肢の全体が見えるぶん迷いません。
指で押せる大きさを確保する
選択肢やボタンは、指で押せる大きさが要ります。小さすぎると、隣を押してしまい、押し直す手間が発生します。押し直しが続くと、その時点で閉じられます。
大きさの目安は、押せる範囲の一辺が44ピクセル以上です。この数字は、モバイル端末のインターフェースの指針として広く使われています。テキストのリンクを選択肢に使っている場合は、行の高さが足りているかを確かめます。
デザイン事務所であれば、この種の指針は制作の側で日常的に扱っているはずの内容です。自社のフォームだけが古いまま置かれていないか、一度確かめる価値があります。
入力欄の種類を正しく指定する
電話番号の欄で数字のキーボードが出るか、メールアドレスの欄で記号の入ったキーボードが出るか。この指定があるかないかで、入力の手数が変わります。
指定が無いと、通常の日本語入力のキーボードが出て、送る側が切り替える操作を挟むことになります。一つの欄で数秒の差ですが、欄が並ぶと積み上がります。
日付の欄も同じです。カレンダーから選べる形になっていれば、打ち込む必要がありません。納期を聞く設問では、この差がそのまま入力の完了率に効きます。
写真とファイルをスマホから受け取る
デザイン事務所の受付は、他の業種に比べてファイルが届く割合が高い窓口です。既存の名刺、現行のパンフレット、看板の現物、参考にしたい画像。
スマホからの相談では、これらが写真として届きます。手元にある印刷物をその場で撮って送る、という形です。この経路を用意しておくかどうかで、往復の回数が変わります。
用意していないと、「メールで送ってください」という返信を書き、相手のメールを待ち、届いたメールと元の問い合わせを手で結び付ける作業が発生します。件数が増えると、この結び付けで取り違えが起きます。
何を撮ってほしいかを設問文に書く
スマホから写真を送ってもらう場合、何を撮ってほしいかを設問文に書きます。書かないと、関係のない画像が届きます。
「作り直したい印刷物の全体が入るように撮影したもの」「現在お使いのロゴが入っている名刺や封筒」のように具体的に書きます。あわせて枚数の上限を3点程度と書いておくと、送る側も選んで撮ります。
写真の解像度については、制作に使える品質かどうかを気にする必要がありますが、問い合わせの段階では気にしません。判断がつく程度に写っていれば足ります。制作に入る段階で、元データを改めて依頼します。
添付できる容量の上限も、設問文に書いておきます。書かないと、上限を超えたときに送信が失敗し、原因が分からないまま閉じられます。スマホで撮った写真は一枚あたり数メガバイトになることがあるので、複数枚を送る場面では上限に当たりやすくなります。
なお、動画を送りたいという相談も届きます。看板の設置場所を歩きながら撮る、といった使い方です。動画は容量が大きいので、フォームで受けるより、別の共有の手段を案内するほうが現実的な場合があります。どちらにするかを先に決めておくと、届いたときに迷いません。
受け取ったファイルがどこに残るか
もう一つ決めておくのが、受け取ったファイルの置き場所です。メールの添付として受け取ると、やり取りの履歴の中に埋もれ、制作に入る段階で探し直すことになります。
問い合わせの記録とファイルが同じ場所にまとまっているかどうかは、道具を選ぶときの分かれ目になります。この点はできることの一覧で、受け取ったファイルが回答と一緒に残るかどうかを確かめられます。
送信の直前で止まる場所を潰す
入力を最後まで進めた人が、送信の直前で止まることがあります。止まる場所は決まっています。
一つ目は、必須の項目が空欄で、どこが空欄か分からない場合です。エラーの表示が画面の上のほうにあると、スマホでは見えません。空欄の欄そのものに表示が出る形になっているかを確かめます。
二つ目は、確認画面が長い場合です。入力した内容を全部並べた確認画面は、スマホでは延々とスクロールすることになります。確認画面を省いて、送信後に控えのメールで内容を全文返す形にすると、送る側の負担が減ります。
三つ目は、個人情報の扱いへの同意です。同意のチェックだけを求めて、内容へのリンクが小さいと、不安を感じて止まります。リンクは押せる大きさにし、別の画面ではなく同じ画面の中で開ける形にすると止まりにくくなります。
個人情報取扱事業者は、個人情報を取り扱うに当たっては、その利用の目的をできる限り特定しなければならない。 出典: 個人情報保護委員会
どこまで書けばよいかは事務所の状況によって変わります。所管の窓口や専門家に確かめてください。よく聞かれる内容は固定ページにまとめておくと、返信で毎回説明せずに済みます。よくある質問のように、質問文をそのまま見出しにして、答えを二文か三文で書く形が読みやすくなります。
入力の途中で消える事故を防ぐ
スマホでは、入力の途中で電話がかかってくる、別のアプリに切り替わる、といったことが起きます。戻ってきたときに入力内容が消えていると、書き直す人はほとんどいません。
入力内容が保持されるかどうかは、フォームの作りによります。確かめ方は、自分で途中まで入力して、別のアプリに切り替え、戻ってくることです。1分で確かめられます。
保持されない場合は、設問を減らして入力の時間そのものを短くするのが現実的な対処です。入力が2分で終わる分量なら、途中で中断される確率は下がります。
フォームへの入口を小さい画面に合わせる
フォームそのものを整えても、そこにたどり着けなければ相談は届きません。デザイン事務所のサイトは、実績の画像を大きく見せる作りになっていることが多く、その中で問い合わせへの入口が埋もれがちです。
パソコンでは画面の右上に固定の導線があれば見つかりますが、スマホではメニューが折りたたまれています。折りたたまれた中に入っている問い合わせの項目は、押されにくくなります。
対処は二つあります。一つは、実績の一覧や個別のページの末尾に、問い合わせへの導線を置くことです。実績を見て良いと感じた直後が、最も相談したくなる瞬間です。もう一つは、画面の下部に固定の帯を置く形です。ただし帯は制作物の見え方を邪魔するので、透過や高さの調整が要ります。
実績のページから直接相談に入れるようにする
もう一歩進めるなら、実績のページから問い合わせに入ったときに、どの実績を見ていたかが記録に残る形にします。
「このパンフレットのような雰囲気で作りたい」という相談は、デザイン事務所では非常に多く届きます。しかし言葉で説明するのは難しいため、スマホからの相談では省略されがちです。どの実績を見ていたかが分かれば、返信で方向性の見当を付けられます。
実装の方法は道具によって変わりますが、フォームに隠しの項目を持たせて、実績のページ名を入れる形が一般的です。持たせられるかどうかは、選ぶときに確かめておくとよい点です。
文字の大きさと読みやすさ
デザイン事務所のサイトでは、余白を広く取って文字を小さく置く作りが好まれます。パソコンの大きな画面では美しく見えますが、スマホでは読めなくなることがあります。
特に問題になるのが、設問の補足文です。「部数が未定の場合は概算で構いません」といった補足は、小さく置かれることが多く、スマホでは読み飛ばされます。読み飛ばされると、補足が無いのと同じです。
補足の文字を本文と同じ大きさにすると、画面が説明で埋まって見えます。現実的な落としどころは、補足を短く書き直すことです。20文字以内に収まる補足なら、小さくても読まれます。
色の薄い文字を使わない
もう一つ避けたいのが、薄いグレーの文字です。パソコンの画面では上品に見えますが、スマホを屋外で見ると、日差しの下ではほとんど見えません。
相談する側が移動中に見ている前提に立つと、背景と文字の明度差は十分に取る必要があります。この点も、デザイン事務所であれば制作の側で日常的に扱っている内容です。自社のフォームだけが例外になっていないかを確かめる価値があります。
入力した文字が読めるかを確かめる
見落とされやすいのが、入力欄の中の文字の大きさです。設問の文字は読めても、打ち込んだ文字が小さいと、書いた内容を確かめられません。
確かめ方は、自分のスマホで実際に入力してみることです。打った文字が読めるか、改行が入る欄で複数行が見えるか、カーソルの位置が分かるか。この三つを見れば、入力欄の作りが十分かどうかが判断できます。
受ける側もスマホで見ている
ここまでは送る側の話ですが、デザイン事務所の場合、受ける側もスマホで見ている時間がかなりあります。
撮影の立ち会い、印刷の色校正、クライアント先での打ち合わせ、展示会場での設営。制作の仕事は、机の前に座っていない時間が長くあります。その時間に届いた相談を、そのまま数時間放置するかどうかで、返信の速さが変わります。
外出先でできることは限られています。工数の見積もりも、印刷会社への確認も、その場ではできません。できるのは、届いたことを確かめること、担当を決めること、一次返信を出すことの三つです。
外出先でできる三つを軽くする
この三つが外出先でできる形になっていれば、返信までの日数は縮みます。
届いたことを確かめるには、一覧がスマホで開ける必要があります。受け付けた内容と、担当者と、いまの状態が同じ画面にそろっているかどうかで、この確認にかかる時間が変わります。実際の動きは動くところを見るで確かめられます。
担当を決めるのは、名前を選ぶだけの操作です。これが外出先でできれば、事務所に戻るまで宙に浮くことがなくなります。
一次返信は、型があれば数十秒で出せます。「お問い合わせありがとうございます。内容を確認のうえ、3営業日以内にお見積もりをお送りします」という定型を用意しておけば、移動中に押すだけで済みます。
外出先で見るのは一日一回で足りる
外出先での確認は、頻度を上げすぎないほうが続きます。撮影や設営の最中に何度も確かめると、現場の仕事が雑になります。
移動の合間に一日一回、まとまった時間で見る。この一回で、届いたものに担当を付けて一次返信を出せば、宙に浮くものはなくなります。事務所に戻ってから、見積もりと手配を進めます。
この一回を確実に取るには、いつ見るかを決めておきます。移動の電車の中、昼食の後、といった具体的な場面で決めると、忘れにくくなります。
見積もりは外出先で出さない
逆に、外出先でやらないと決めておくべきなのが、金額を出すことです。
記憶を頼りに概算を返すと、あとで正式な見積もりを出したときに数字が食い違います。相手は先に聞いた数字を覚えているので、そこから上がると不信につながります。
外出先では「確認して改めてご連絡します」までにとどめる。この線引きを事務所として決めておくと、迷わずに済みます。
一覧を小さい画面で見せる工夫
受ける側の一覧を小さい画面で見るときは、表示する情報を絞る必要があります。パソコンの表をそのまま縮めると、何も読めません。
一行に出すのは三つで足ります。相手の名前か会社名、作りたいものの種類、いまの状態。この三つがあれば、押すべき行が分かります。
並び順は、期限の近いものが上に来る形にします。届いた順に並べると、古いものが下に流れて見えなくなります。
一行に出す三つのうち、状態は色や記号で表すと場所を取りません。文字で「未対応」と書くと横幅を使うので、小さい画面では他の情報が押し出されます。ただし、色だけで意味を伝えると、屋外の明るい場所では見分けがつきません。色と短い記号を組み合わせるのが安全です。
絞り込みが使えると外出先で役に立つ
もう一つあると便利なのが、絞り込みです。自分が担当しているものだけ、返信していないものだけ、といった形で絞れると、外出先の短い時間で見るべきものだけが出ます。
絞り込みができない場合は、並び順の工夫で代用します。状態と期限で並べれば、上のほうに手当てが要るものが集まります。上から順に見ていって、手当てが不要なものが出てきたところで止めれば、全部を見なくて済みます。この見方なら、件数が増えても確認の時間は伸びません。
この種の機能がどこまであるかは道具によって変わります。集めるところは無料の道具でも問題なく動きますが、集めたあとを小さい画面で扱えるかどうかは別の話です。Googleフォームとの比較では、この集めたあとの扱いを軸に違いが整理されています。
表計算ソフトはスマホで扱いにくい
回答を表計算ソフトに貯めている事務所は多くありますが、この形はスマホでの確認に向きません。列が多いと横に流れ、目的の行を探すだけで時間がかかります。
外出先で確かめようとして、開いたものの読めずに閉じる。これが繰り返されると、結局は事務所に戻ってから見ることになり、返信が遅れます。
送信されたあとの道具がそろっているかどうかは、この場面で効いてきます。自社サイトに埋め込んだフォームを使い続けたい場合は、Contact Form 7との比較で、送信後の記録をどこでどう見られるかを確かめておくと判断しやすくなります。
電話番号を出すかどうか
スマホから見ている人にとって、電話番号は最も手数の少ない連絡手段です。押せばかかります。フォームを最後まで入力するより、はるかに楽です。
だから電話番号を目立つ場所に置くと、フォームからの相談は減り、電話が増えます。これが良いか悪いかは、事務所の回し方によります。
電話の利点は、その場で条件を聞き取れることです。往復が発生しません。欠点は、受ける側の作業を止めることと、記録が残らないことです。制作中に電話が入ると、そこから集中を戻すのに時間がかかります。
判断の目安は、制作の時間をどれだけ守りたいかです。守りたい事務所は、電話番号を出さないか、受付の時間帯を明記します。急ぎの相談だけを電話で受けたい事務所は、「お急ぎの場合はお電話ください」と条件を添えて出します。
電話で受けた相談も同じ場所に記録する
電話を残す場合に必ず決めておくのが、受けた内容をどこに残すかです。残さないと、フォームから来たものだけが一覧に載り、電話の相談は受けた人の頭に残ります。
現実的な対処は、受けた人が同じフォームに代理で入力することです。入力の手間は2分ほどで、そのぶん取りこぼしが減ります。設問に「受付の経路」を一つ足しておくと、あとから経路ごとの件数も数えられます。
外出先で電話を受けたときは、その場でスマホから入力します。事務所に戻ってから入力するつもりでいると、戻った時点で別の作業が始まり、飛びます。
通知の受け方を決める
外出先で気づくためには、通知が届く必要があります。ただし、通知が多すぎると見なくなります。
決めることは二つです。どの端末に届けるかと、どこまで通知するかです。
全員のスマホに全件を通知すると、通知が日常の雑音になります。当番の人にだけ届ける、急ぎのものだけ届ける、といった絞り方をします。
雑音になった通知は、押されなくなります。押されなくなった通知は、無いのと同じです。件数が一日10件を超えるなら、絞る仕組みを入れる時期です。
通知の文面に何を入れるかも決めます。「お問い合わせがありました」だけでは、開かないと中身が分かりません。作りたいものの種類が文面に入っていれば、開く前に優先度を判断できます。
通知が生きているかを月に一度確かめる
通知は、設定の変更やメールの判定で止まることがあります。止まっていることに気づくのは、相手から催促の連絡が来たときです。
確かめ方は簡単で、月に一度、自分でフォームから送信してみることです。1分で終わる作業で、通知の経路と自動返信の両方が生きていることを確認できます。
このとき、スマホで送信してみるのが重要です。パソコンからの送信では、小さい画面での見え方も入力の負担も分かりません。
パソコンからの相談と中身が違う
スマホから届く相談と、パソコンから届く相談は、中身が違います。この違いを知っておくと、返信の書き方を変えられます。
スマホからの相談は、文章が短くなります。作りたいものの種類と、ざっくりした希望だけが書かれていることが多くなります。パソコンからの相談は、背景の事情や社内の状況まで書かれていることがあります。
これは相談する人の熱意の差ではなく、入力の負担の差です。スマホから短い相談を送ってきた相手が、真剣でないとは限りません。むしろ、移動中に思い立って送ってくるのは、急いでいる証拠であることもあります。
だから短い相談に対しては、返信で足りない情報を聞きます。聞き方も、スマホで答えられる形にします。選択肢を示して「どちらに近いでしょうか」と聞くほうが、自由に書いてもらうより返ってきます。
送信の時間帯にも差が出る
スマホからの相談は、業務時間外に届く割合が高くなります。通勤中の朝、退勤後の夜、休日。机に向かっていない時間に見ているためです。
このとき、業務時間外に届いたものへの対応をどうするかを決めておきます。すぐ返す必要はありませんが、自動返信で受け付けた事実を伝えることは、時間帯に関係なくできます。
自動返信の文面に、営業日と返信の目安を書いておくと、夜に送った人が翌朝まで不安にならずに済みます。「営業日2日以内にご返信します」と書き、営業日の定義も添えます。
変えたあとに効果を数える
スマホ対応に手を入れたら、効果を確かめます。見るのは三つです。
一つ目は、届く相談の件数です。設問を減らしたあとに増えていれば、入力の負担が原因で閉じられていたことになります。
二つ目は、スマホからの相談の割合です。全体の何割かを数えます。この割合が低いままなら、フォームへの入口が見つかっていない可能性があります。
三つ目は、聞き返しの回数です。設問を減らすと聞き返しが増えるので、増えすぎていないかを見ます。増えているなら、削った設問のどれかは必要だったということです。
数え方は手作業で構いません。30件ほど数えれば傾向は見えます。件数が増えて手作業で追えなくなったら、そこが道具を見直す時期です。
減らしすぎたときの戻し方
設問を減らしすぎて聞き返しが増えた場合は、戻す設問を一つずつ選びます。全部を戻すと元に戻るだけです。
戻す優先順位は、聞き返しの多い順です。返信の一往復目に何を聞いているかを20件ほど数えれば、上位の二つか三つが分かります。その二つか三つだけを戻します。
戻すときは、自由記述ではなく選択式で戻します。選択式なら、設問が一つ増えても入力の負担はほとんど変わりません。
スマホ対応を整えたあとに残る仕事
送る側の入力を軽くし、受ける側が外出先で三つの操作をできるようにすると、返信の速さは変わります。ただし、それで解決するのは受付の部分だけです。
デザイン事務所で残る仕事は三つあります。相談の内容から工数を見積もること、印刷や外注の手配を進めること、そして制作そのものです。前の二つは机の前でしかできません。
問い合わせの受付の場面で共通して起きているのは、集めるところまでは無料の道具で足りているのに、集めたあとを表計算ソフトと受信箱と付箋で継ぎ足していることです。継ぎ足した部分は小さい画面では扱えず、外出の多い業種では取りこぼしにつながります。
同じ構造は、他の業種でも繰り返し現れます。会場での受付をしながら申し込みの状況を確かめるイベントの受付がその例です。デザイン事務所の担当が撮影や設営の現場から状況を見るのと同じで、机の前にいない時間に確認が要る型です。この型では、パソコンでしか扱えない仕組みを選ぶと、確認そのものが行われなくなります。
最後に、スマホ対応で判断が要る場面を並べておきます。設問を何個まで減らすか、自由記述をどこまで選択式に移すか、選択肢をラジオボタンにするかセレクトにするか、押せる大きさを確保できているか、入力欄の種類を指定しているか、写真の添付を受けるか、何を撮ってほしいと書くか、確認画面を置くか省くか、通知を誰の端末に届けるか、一覧に何を三つ出すか、外出先で金額を出さないと決めるか。この十一個を決めれば、小さい画面でも取りこぼさない窓口になります。決め切れないものは、実際に自分のスマホで送信してみるところから始めれば、答えの半分は見えます。
Q1. デザイン事務所のフォームでスマホ対応が特に難しいのはどこですか？
聞くことが多い業種なので、設問数がそのまま入力の負担になる点です。パソコンなら縦に長くても全体が見えますが、スマホでは一画面に3項目ほどしか入らず、同じ設問数でもスクロールが延々と続きます。対処は、聞き返しが発生しない設問を削ることと、自由記述で聞いていた内容のうち選択式にできる部分を移すことの二つです。
Q2. 大きな自由記述欄は残すべきですか？
最後に一つだけ、任意で残すのが現実的です。フリック入力で数百文字を打つのは負担が大きく、スマホからの相談では空欄か一行で終わります。作りたいものの種類、部数の幅、納期の目安、支給素材の有無は選択式にできるので、そちらへ移してください。自由記述に長い文章を書く人は本気度が高いので、返信の優先度を上げる手がかりにもなります。
Q3. スマホから写真を送ってもらうときの注意点はありますか？
何を撮ってほしいかを設問文に具体的に書くことです。「作り直したい印刷物の全体が入るように撮影したもの」のように書かないと、関係のない画像が届きます。枚数の上限も3点程度と書いておくと、送る側が選んで撮ります。解像度は問い合わせの段階では気にせず、判断がつく程度に写っていれば足ります。制作に入る段階で元データを改めて依頼してください。
Q4. 受ける側が外出先でできることは何ですか？
届いたことを確かめること、担当を決めること、一次返信を出すことの三つです。工数の見積もりも印刷会社への確認も、その場ではできません。逆に、外出先でやらないと決めておくべきなのが金額を出すことです。記憶を頼りに概算を返すと、正式な見積もりと数字が食い違い、相手は先に聞いた数字を覚えているため不信につながります。
Q5. 回答を表計算ソフトに貯めている場合、スマホでの確認はどうすればよいですか？
表計算ソフトは列が多いと横に流れ、目的の行を探すだけで時間がかかるため、小さい画面での確認には向きません。外出先で開いても読めずに閉じることが続くと、結局は事務所に戻ってから見ることになり返信が遅れます。一行に出す情報を、相手の名前、作りたいものの種類、いまの状態の三つに絞れる形にできるかどうかが分かれ目になります。