私がこれまでお客様に喜んでいただけた対応をまとめました！
当たり前のものも多いのですが、そんな当たり前のことこそ喜んでいただけたりします。
まず最初に
色々書いていますが、どんなことを実施したとしても「お客様に合わせて伝えること」がとっても大切だと考えています。
- 詳しく知りたい！しっかり把握しておきたい！というお客様には、詳しく細かく。
- ちゃんとできていればOK！というお客様には、要点のみサラッと。
どっちにしたら良いか分からないな…という時は、最初に聞いちゃいます。
「詳しいご説明をご希望ですか？それとも要点のみの方が宜しいでしょうか？」
という感じです！
普段からできること編
スクリーンショットや動画を添付する
ご説明するとき、質問するとき、ご連絡するときなどなど
どんなときでも、スクリーンショットがあることでほんの少しでも分かりやすさが増すと考えられる場合は、必ずスクリーンショットを添付しています。
動画があった方が分かりやすくなると判断したときは、動画を撮影して添付します。
手間は惜しみません！
スクリーンショットや動画に一手間加える
- スクリーンショットには矢印や色枠を。
- 動画内にはキャプションを。
これらをすることで少しでも分かりやすさが増すと考えられる場合は、必ずひと手間かけて加工をします。
ご質問・ご相談には、理由や根拠を添えて回答する
お客様からご質問やご相談をいただいたら、「◯◯と考えます」という回答だけでなく、「なぜそう考えるのか」という、理由や根拠などを添えてご回答します。
ここでも、スクリーンショットや動画が役立ちます！
代替案、改善案を提示する
- いただいたご要望にお応えすることができない場合は、代替案を
- いただいたご要望より良い案がある場合は、改善案を
プラスαで提示させていただいています。
こちらからオンラインミーティングを打診
テキストだけでのやり取りで話がややこしくなってきたなと感じたら、早めにオンラインミーティングを打診させていただきます。
ミーティングで使用する資料の準備はしっかりとしましょう！
未決定事項をリマインドする
長くご回答が無い事項は忘れられている可能性が高いので、お客様専用のリマインダーとなりましょう！
デザイン、内容編
私はデザイナーでなければ校閲者でもないのですが、意外と喜んでいただけるのが、デザインや内容に関するご提案です。
「いちユーザー」として見て、おかしなところや違和感が無いか、使いにくくないかなどを常にチェックしています。
画像の加工もする
私はデザイナーではありませんが、必要であれば画像の加工もします。
- 画像の中で一つだけ中央寄せがズレているものを中央寄せに
- 画像の中で一部だけ線の太さが違っているものを統一
- 画像の中でフォントの太さが1つだけ異なっているものを修正
- 画像の中で一つだけ色が異なっているものを統一 など
明らかな間違いはもちろん、アイコンのマスクサイズ合わせなど、こちらでできる加工をした上で実装し、ご報告させていただきます。
誤字脱字、漢字や言葉の誤用を修正
コンテンツの本文を読んで、誤字や脱字が無いか確認しています。
テキスト自体はコピペするので本来であれば読む必要は無いのかもしれませんが、誤字脱字を見つけるためにあえて読んでいます。
読んで違和感があるところを調べて、間違っていそうなら修正して、「ここ修正しましたよ！」とご報告をさせていただいています。
以下は誤用の例です。
- お越し頂き → お越しいただき
頂く：もらう、食べる、飲むの謙譲語です。
いただく：「～してもらう」という意味で使う場合はこちらです。 - 会って欲しい → 会ってほしい
欲しい：物を入手したいときに使います。
ほしい：「～してほしい」のようなお願いする表現の場合はこちらです。
表記揺れの統一
表記揺れもチェックします。
一見違うものに見えても、実は同じものを表していた！ということもあるので、そのあたりも見逃さないように気を付けています。
意図的に表現を変えていることもあるので、迷う場合は先方に確認します。
以下は表記揺れの例です。
- お問い合わせ / お問い合せ / お問合せ
- 会社概要 / 会社紹介 / (社名)について
- 事業内容 / サービス
ワイヤーフレームでは「会社概要」
⇨ デザインに起こす際に「(社名)について」に変更
⇨ 一箇所だけ変え忘れていた… なんてこともよくあるそうです！
英字の大文字/小文字、単数/複数の統一
英字の表記揺れもあるあるです。
- 全部大文字にする？
- 頭文字だけ大文字にする？
- 2単語目の頭文字は？
- 1単語目と2単語目の間に半角スペースは必要？
- 単数？複数？ など
「こちらの言葉は2単語目の頭文字も大文字なのに、あちらの言葉の2単語目の頭文字は小文字」
「この言葉は単数なのに、あの言葉は複数」など、サイト内で統一されているかもチェックします。
意図的に変化を付けていることもあるので、迷う場合はお客様にご確認します。
以下は、英字の表記揺れの例です。
- Service / service / SERVICE（大文字小文字の違い）
- About Us / AboutUs（半角スペース有無の違い）
- Item / Items（単数/複数の違い）
要素が重なって文章が読みにくい！を修正
実装して動くものができあがってくると、フローティングアイコンやイラストが被ってしまって文章が読みにくい…ということが分かってきたりします。
可能な限りコーディングで解決するようにしますが、中にはそれだけでは解決が難しいものも。
良い解決方法がある時は、実装して「こんなふうにしてみました！どうですか！」とご報告＆相談。
迷う時は、素直にご相談させていただきます。
文字が細くて読みにくい！を修正
デザインツールで見るとfont-weightがThinでも綺麗に見えるのに、Webページにすると読みにくい…ということがあります。
読ませたい文字は、基本的にはRegular以上をご提案するようにしています。（フォントにもよります）
色のせいで読みにくい！を修正
薄い背景色のボタンに白文字など、デザイン的には素敵だけど正直読みにくい…ということがあります。
できるだけ読みやすくなるよう、フォントを少しだけ大きくしたり、文字の太さを少し太くしたりすることをご提案させていただきます。
テーブルの表記の統一
- こっちのテーブルは項目名が中央寄せなのに、あっちは左寄せ
- こっちのテーブルはタイトルが太字なのに、あっちは細字
- こっちのテーブルは価格が中央寄せなのに、あっちは右寄せ
のようなことがある場合、統一して実装/ご提案させていただいています。
箇条書きにはインデントを付ける
インデントの無い箇条書きのデザインをいただくことがよくあります。
読みやすさを考え、全てインデントを付けて実装/ご提案させていただいています。
ブレイクポイント付近での画像の粗さを確認
ブレイクポイント付近では、SPの画像を引き伸ばして表示することで画像が粗くなってしまうことがあります。
デザイン時点では気付けないことも多いので、実装時に確認してお客様にご確認させていただきます。
余白が広すぎない/狭すぎないか確認
画面の幅を変えると、ものによっては余白が広すぎたり狭すぎたりする箇所がでてきたりします。
不自然に感じるものは、調整した上でご相談させていただいています。
トップページに表示される記事数＜アーカイブページの記事数にする
「トップページにニュース記事を最新5件表示、ニュースのアーカイブページに1ページ5件表示」というような要件をいただくことがあります。
この場合、ユーザーがトップページからニュースのアーカイブページに遷移したとき、同じ一覧をもう一度見ることになります。
ユーザー様の貴重な1クリックを無駄にしないため、「ニュースのアーカイブページにはトップページより多くの記事を表示しましょう！」とご提案させていただきます。
実装編
細かいかな…？と思うところもこだわって実装/ご提案させていただいています。
デモを実装して提示する
「こんな実装できますか？」と聞かれたときは、必ずデモを作って先にお見せするようにしています。
過去に作ったもので同様のものがある場合は、そちらをご提示することもあります。
- お客様との認識を高いレベルで合わせることができる
- イメージが違ったらその時点で直すことができる
- 「できると思ったけどできなかった」を防げる
- 実装にかかる時間や難易度を把握することができる
- 「わざわざ作ってくれたんですか！？」と喜んでいただける
少々手間はかかりますが、基本的に良いことばかりなのでデモ実装は本当におすすめです！
ホバーアニメーションを少しだけ豪華にする
ホバーアニメーションには透過だけでなく、プラスアルファの動きを加えてご提案させていただいています。
- 色反転にする
- 矢印を左右にいったりきたりさせる
- アイコンをふわふわゆらゆらさせる
- グラデーションが横にシュッと移動するような動きにする
- 画像を少し大きくする/暗くする など
サイトの雰囲気に合うように考えましょう！
アニメーションを付けてみる
サイトの雰囲気や属性に合わせて、ご要望には無いアニメーションをご提案させていただくこともあります。
- 各セクションにフェードインアニメーションを付ける
- タイトルをスライドインさせる
- 装飾イラストを時間差で表示させてみる など
中でもフェードインアニメーションは多くのサイトに合いやすいのでおすすめです！
GIF画像を並べてご提案する
アニメーションを2パターン以上ご提案させていただくときは、GIF画像にして、スプレッドシートに並べて、「どちらがお好みでしょうか？」とご相談させていただきます。
「こんなことをしていただいたのは初めてです！ありがとうございます！」と嬉しいお言葉をいただけることもありました！
お問い合わせフォームの仕様をしっかり考え、まとめた資料を作成/提出する
お問い合わせフォームは、安全性や使いやすさをしっかり考えて仕様を決定し、実装する必要があります。
適切な仕様でないと、ビジネスのチャンスを逃してしまったり、運用がとっても大変になってしまう可能性があるからです。
- 電話番号が一桁足りないがために、管理者からお客様へ連絡が取れない
- 「ご来店予約日」に過去日付が選択されているため、管理者がお客様へ問い合わせて再調整する必要がある
- 入力規制を厳しくしすぎたら問い合わせが減った など
これらの問題を防ぐために、次にご紹介するような項目を考慮して仕様を決定/実装し、資料化します。
必須項目の選定は適切かチェックする
不要なものまで必須項目に設定されていないかチェックします。
入力可能値(最大/最小、文字種)の設定
- テキスト項目：最大入力可能文字数の設定
- 数値、日付項目：最大値、最小値の設定 など
「どのような値の入力が期待されるのか」「どのような値の入力はしてほしくないのか」をしっかりと考えて設定しましょう！
例えば、「面接希望日」を選んでもらう日付項目の場合、以下を考慮して決定する必要があります。
- 過去日付は入力できないようにする。
- 問い合わせの何日後から受け入れ可能なのか？
- 何日先まで予約が可能なのか？
適切なバリデーションチェックの設定
要件やペルソナに合わせて、適切なレベルでバリデーションチェックを設定します。
- カタカナ項目はカタカナのみOKとする？
- 電話番号は日本の電話番号のみOKとする（ハイフンあり/なし どちらもOK）？
- 郵便番号は数値3桁-4桁の形のみOKとする（ハイフンあり/なし どちらもOK）？ など
私がご提案するときは、電話番号も郵便番号も「ハイフンあり/なし どちらもOK」を基本としています。
規制を厳しくしすぎると、何度も表示されるエラーメッセージのせいで途中で入力するのがイヤになってしまい、途中離脱する可能性が上がってしまうと考えられるからです。
「問い合わせの質は低くても良いので、とにかく問い合わせを増やしたい！」という場合は、さらに緩めのバリデーションチェックにすることも検討します。
「ある程度きちんと入力できる方だけを対象にしたい」という場合は、厳しめのバリデーションチェックにすることを検討します。
inputmodeの設定
以下のような設定を検討します！
- 数値項目：numeric
- 日付項目：date
- メール：email
フォーカスがある要素がパッと見て分かるようにする
アウトラインの枠を太くしたり、色を変えたり。
💡おまけ：アクセシビリティ向上！全項目をタブフォーカスできるようにする
お客様へご報告まではしませんが、こんなところもこだわって実装しています。
ラジオボタンやチェックボックスは、デフォルトスタイルを隠すためにdisplay:noneとすることでタブフォーカスできなくなります。
代わりにposition: absoluteを使用するなどの工夫が必要です。
こちらのサイトがとても参考になります！
チェックボックス・ラジオボタンをtabキーで操作できるようにするCSS〜アクセシビリティ対応〜
最後に、フォームの仕様を全てまとめた資料を作成し、お客様にご提出します。
すると、「こんなにしっかり考えてくださってありがとうございます！」とお言葉をいただけることが多いです！
ページネーションは全てのパターンを網羅して確認
デザインでは1パターンしか提示されていないことが多いのですが、ページネーションは様々なパターンの表示を考慮する必要があります。
考え得る全てのパターンのスクリーンショットを並べて、お客様へご確認いただきます。
これを考慮していないと、ページネーションの表示が増えたときにはみ出してしまったりします😢
自分のためにもしっかり確認しておきましょう！！
はりさんが「デザイナーがコーダーに渡すならこう！」という例を紹介してくれました！！
※私がお客様にご提出するときは全パターンをスクショしてご提示させていただくのですが、「デザイナーからコーダーに仕様を伝える」という意味では、👇️のポストで紹介いただいているように「幅が一番狭くなるパターン」「幅が一番広くなるパターン」を伝えていただけると嬉しいなと思っています！
品質試験結果を送付する
チェックリストをPDF化して送付しています。
こちら、とっても喜んでもらえることが多いです！！
（が、資料作りもチェックもかなりしっかりしないとやぶ蛇になりかねないので注意が必要です。）
その他
マニュアル作りも手を抜かない
手を抜きがちなところも全力投球です！
スクリーンショット、矢印、色分け等、「こうしたらもっと分かりやすくなる」を全て詰め込んで作成します。
最後に
きっと他にも喜んでいただける対応がたくさんあると思います！
他にもあるよ！という方は、Xなどで教えていただけると嬉しいです✨
私も、新たに喜んでいただける事例を見付けたり、過去の物を思い出したら、随時更新していきます！
アイキャッチ画像は ja.pikbest.com 様から引用させていただきました。ありがとうございます！
