勝手にEFO比較分析【任天堂 x SEGA】（家庭用ゲームソフト販売企業 お問い合わせフォーム編）

皆さん、ゲームと聞いて連想するモノは何でしょうか。
最近のゲームといえばスマートフォン用のネイティブアプリのタイトルをイメージする方も多いかもしれませんが、まだまだ家庭用ゲームやゲームセンターのアーケードゲームもまだまだ侮れません。

とくに家庭用ゲーム機は世代によってそれぞれ象徴的なハード機やソフトがあり、懐しい気分にさせてくれます。
1980年代前半からさまざまな国内企業がゲーム機を発売しており、どの機種にせよ、一度は遊んだことがある方が多いかと思います。

今回は「Wii」「3DS」などのハード機の販売や、ソフトでは最近発売された「スプラトゥーン」が何かと話題の任天堂株式会社様（http://www.nintendo.co.jp/、以下本記事では「任天堂」）と
「ぷよぷよ」「ソニックアドベンチャー」「龍が如く」などのシリーズでおなじみの株式会社セガホールディングス様（http://sega.jp/、以下本記事では「セガ」）のお問い合わせフォームを比較分析していきます。

子供から大人まで、幅広い年齢層が利用するであろうお問い合わせ部門。一体どのような工夫がなされているのでしょうか。

それでは「勝手にEFO分析」していきます。
今回も「勝手に」改善ポイントを指摘していきますので、どうぞ最後までお付き合い下さい。
◎○△×と、ユーザー視点での評価を行っていきます。

まずは基本的項目の確認からです。

いつも通り、基本項目の確認からはじめていきましょう。

入力種類、必須項目ではどちらもかなり厳選して数を絞っています。

また、双方配色はシンプルですが行間や入力欄の大きさ、マージンの取り方などに違いが出ていますね。

それでは以下個別に説明していきます。

ページレイアウト

任天堂は余計なリンクやナビゲーションのない、シンプルなフォーム専用レイアウトを採用。また全体的にパーツが大きく視認性が高い印象です。

一方、セガは他ページと共通のナビゲーション付きレイアウトを採用しているものの、表にスリムに収めた入力項目はひとめでフォームの全体像を確認できるほか、ラベルと入力欄との関連付けがはっきりと明快です。

双方で見せ方やアプローチの仕方が違いますが、使いやすさに考慮されていることが感じられます。

任天堂 ページレイアウト

フォントカラーの明度の高さと余白の取り方がとても良く、「目に優しい・見やすい」という印象です。
ベースになるフォントや枠の色はかなりグレーに近い配色であることに対し、注記の配色は鮮やかな赤が使用されているためコントラストがはっきり映り、とても効果的だと思います。

また入力項目に関しては、大きく余白をとり縦横で綺麗にラインをそろえることで、関連付けが分かりやすいですね。

配色の工夫で視認性の高いフォームになっています。

セガ ページレイアウト

表形式の入力項目で、余白を抑えコンパクトなフォームに設計しています。

入力項目をできるだけファーストビューに収めるのがフォームの基本です。
その点は良い作りだと感じる一方で、幅広い世代で使っていただくには、もう少しフォントサイズやマージンの取り方に余裕がほしかったかなとも思います。

コンパクトではあるが、フォントサイズが全体的に小さい。

フォームタイトルとパンくず表示で差を付けた任天堂

どちらも、何に対するお問い合わせかのジャンルをあらかじめ選択したうえでフォームの入力が始まります。

フォームタイトルを「お問い合わせ」の「カスタマーサポート」としているセガに対し、任天堂では何のジャンルを選択したかをフォームタイトルで表示しています。
また、パンクズ表示を表示しておくことでさりげなく「どういう階層でお問い合わせまで進んできたか」をはっきりとさせ、ユーザーが現在何に対して問合せているのかが明確です。
ここでは任天堂に軍配です。

任天堂 フォームタイトルとパンくず

任天堂はかなり大きめのフォームタイトル。パンクズによって現在地が分かりやすくて良いですね。

セガ フォームタイトル

フォームタイトルでは、何に対する問い合わせ画面かが把握できない

デザインの違いがでた必須マーク

どちらもお手本のような必須マークです。
しかし、セガは必須マークの色がグレー。少し目立たない印象です。

任天堂 必須マーク

必須と任意をの色分けが明快ですね。
すべての項目にどちらかのマークが付いているのでとても分かりやすいです。

お手本のような必須マーク。

セガ 必須マーク

一方こちらの必須マークはグレー。
恐らくは補足情報以外すべて必須項目だったからだと思いますが、必須マークの様に注意してほしい場所にはポイントカラーを使用するのが妥当です。

配色が惜しいです。

フローや補足文、バッジ表示で与えられる安心感

任天堂にはフローがありませんでした。
対してセガはきちんとフローを設置。シンプルですが目を引くデザインです。

入力、確認、完了のシンプルな作りになっている場合にフローを設置しない場合も少なくありませんが、やはりフローがあるだけで安心感は高まります。

セガ フロー

シンプルでも目を引くデザイン。

次に注目したいのは任天堂の補足文。
入力項目に関する補足文でユーザーの不安を解消しています。
あらかじめ間違い易い項目に関して注記しておくことで、ユーザーの迷う時間を減らせますね。

任天堂 補足文

入力前にミスの多い部分をあらかじめ説明することでユーザーの迷いが少なくなります。

ユーザーの疑問や迷い、ミスを減らすため工夫といえますね。

また、セガではセキュリティに関するバッジを表示しています。
フォームはどちらもSSL環境ですが、バッジ表示や個人情報に関する言及はユーザーの安心感に直接つながるものなので、あれば表記することをお奨めします。

セガ バッジの表示

バッジの表示があると安心して入力できますね。

両社残念だったエラー画面

冒頭にメッセージがあり、エラー箇所にも分かりやすい配色で注記というのがお手本です。

ですが任天堂はエラー箇所に対し、一つ一つダイアログで指摘する方法をとっています。
ダイアログのOKを押すと直接エラー箇所にフォーカスされるシステムにはなっているものの、これでは複数同時にミスしているときに、何回も同じ動作を繰り返すことになってしまいます。

任天堂 エラー画面

一つ一つダイアログで表示します。

対してセガはエラー表示そのものがありません。
どんなにミスをしていても確認画面にそのまま遷移してしまいます。
これではユーザーがミスに気が付けないまま送信されてしまいそうですね。

セガ エラー画面なし

エラー画面が無いのでミスしたものはそのまま確認画面へ反映されてしまう。

次に入力支援機能の比較です

入力支援機能の有無

どちらも目立った入力支援機能はありませんでした。

入力支援機能はユーザーのモチベーションの向上につながる機能も多く、利便性も確実に上がります。ぜひ導入をご検討いただきたいですね。

最後は勝手にフォーム改善アドバイスを

今回は家庭用ゲーム機販売を行う企業2サイトの問い合わせフォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

任天堂

フローの設置やバッジ表示、入力支援機能の導入でより優しいフォームに

基本的な項目の中でもフローの設置とエラー画面の追加は安心感につながりやすい項目と言っても良いでしょう。

また、入力支援機能を導入することで「幅広い世代が使いやすいフォーム」により近づくと思います。とくに住所の自動入力機能は半ば常識になりつつある機能。ぜひ導入を検討されてはいかがでしょうか。

セガ

フォントとマージン、必須マークのデザインの再調整と入力支援機能の導入が必要

やはり気になったのはフォントサイズとマージンです。
※印の文が特に見え辛く、全体的に一回り大きくすることをお奨めします。
同時に、入力欄のサイズとフォーム各所のマージンも調整することで、視認性があがり、誰にでも見やすいフォームにしてゆけると思います。

また、必須マークに関しては配色の変更が必要です。
他サイトのフォームで使われている配色を考えると、グレーという色はどうしても「任意項目」という印象が強いため、鮮やかな色で表示したほうが分かりやすくなります。

また、入力支援機能を導入する事で利便性が上がり、入力完了率にも良い効果が期待できると思います。