会員サイトのデザイン|UXを意識したサイト設計

マイページ・会員サイト
マイページ・会員サイト

会員サイトをデザインする際には優れたUI/UXが不可欠です。本記事では会員サイトに必須とされる機能やUI/UXを設計する際の注意点など、サイト設計に欠かせないポイントをご紹介します。ぜひご参考ください。

デザインが自由自在な会員サイトを構築するなら、クライゼルの会員サイト作成機能をご利用ください。

会員サイトに必要な機能

まずは会員サイトを構築する上で必要とされる機能を紹介します。

会員管理機能

会員サイトの最も基本となる機能です。会員情報にはいろいろな情報が含まれます。個人会員向けであれば氏名、住所、電話番号、メールアドレス顧客ステータス等です。企業向け会員サイトであれば、企業名、部署名、担当者名住所、連絡先番号、お取引種別など多岐にわたるでしょう。

ログイン機能

サイト利用時にマイページに入るためや会員限定ページを閲覧するため必須の機能です。ログイン機能とともにログアウト機能も合わせて設置する必要があります。パッと見てログインできることが重要なため、シンプルなUI設計が求められます。

メッセージング機能

ユーザー向けにメールマガジンなどを配信するための機能です。外部のメール配信ベンダーのサービスを利用しているケースも多く見られます。

管理画面

会員登録しているユーザーの情報を閲覧するなど、会員情報を管理するための機能です。CRMとして利用する際は管理画面からユーザー履歴データを参照することができます。管理画面に表示される内容は多岐にわたるため、管理者が使いやすいようUIデザインを構築する必要があります。

ステータス管理

ユーザの各種ステータスを管理する機能です。会員サイトの目的に応じて多様な項目を管理できる必要があります。

例えば、会員ランク、会員セグメント、有料・無料の判別、サービス申し込みステータス(案内・申請・審査・承認など)などです。

検索機能

サイト内の商品やサービス、過去の記事などを調べる際に利用します。検索スピードや検索精度の高さはユーザーの満足度に直結するため重視したいポイントです。

決算管理

会員サイトの会員料やサイト内で物販などを行う際に導入している外部決済サービスを管理する機能です払い方法は振り込みやカード払いのほか、キャッシュレス決済サービスなど多様化しているため、ユーザーを取りこぼさないようさまざまな方法に対応できるように心がけましょう。

会員サイトに必要な機能に関しては以下の記事で詳しく紹介しています。ぜひご一読ください。

会員サイトの使い勝手は見栄えではなく会員のUX

UXと、「ユーザー エクスペリエンス(サービスなど利用を通じてユーザーが得る体験)」ことを指します。会員サイトの利用を例に取ると、ユーザーが会員サイトに入会し、サービスを利用するという工程すべてがUXとなります。

デザインに凝った見栄えの良い会員サイトは目を引くため多くの人を引き付けますが、実際に利用するとなるとストレスなく欲しい情報アクセスできるUX設計が欠かせません。

特に注力してUIデザインをしたい機能

UIは「ユーザーインターフェイス」の略称ですが、ユーザーがWebサイトなどで目的を達成するまでのプロセスへ誘導するためデザインすること指していますここでは特に、UIデザインに注力したい機能について紹介します。

会員登録のエントリーフォーム

会員サイトの入口とも言えるエントリーフォームはもっとも重要な機能。誰もが素早く簡単に登録できるようなデザインにする必要があります。

会員のログイン後画面

会員になったことで利用できる機能が、ログイン後画面にて一目で分かるようにしましょう。利用しやすい会員サイトは会員の継続率が高まるため、会員のログイン後画面は非常に重要な画面と言えるでしょう。

ASPを活用した会員サイト構築はカスタマイズ性を確認

ASPとは「アプリケーション サービス プロバイダ」の略でプログラムとデータクラウド上に置き、ネット回線を通じてデータにアクセスしてソフトウェア利用できる仕組みのこといいます

ASPを活用して会員サイトを構築する場合は、自社のイメージに合った会員サイト作ることができるか、カスタマイズができるか事前にしっかり確認しましょう。

デザイン自由自在
高セキュリティ・高機能な会員サイトASPといえばクライゼル

会員サイトの管理画面のUIデザインの注意点

管理画面は情報量が多く、表示される内容が多岐にわたるため、UIデザインを構築する際には注意すべき点複数あります。1つずつ見ていきましょう。

一般的なフォントを使う

会員閲覧サイトではサイト印象や世界観を表現するためにはフォント選定も非常に重要です。しかし、管理画面のような読みやすさを重視したいページでは一般的に使用されるフォントを選び、視認性や判読性優先させた方が賢明です。慣れ親しんだフォントは、脳内の処理負荷が下がるため、読む際のストレスを軽減させてくれます。

多くの色を使わない

色の使い方にも注意が必要です。多色使いは情報の優先度が不鮮明になり、画面全体がまとまりのない印象になる可能性あります。「ベースカラー」「メインカラー」「アクセントカラー」の3色を基本に使用することで、色のルールを理解してもらいやすくするようにしてください。

視線誘導を意識したレイアウトにする

Webサイトでは、ユーザーの視線をコントロールする視線誘導という心理効果活用することが多くありますが、管理画面は情報量多いことから視線誘導意識したレイアウトする必要あります線誘導はZ型(ユーザーの視線を左上、右上、左下、右下の順に誘導)とF型(ユーザー視線を左上、右上、左下、右下順に誘導)2パターン大別されるため、管理画面ではこの動き意識し、見てもらうべき情報ゾーニング(配置領域設計)していくようしましょう

構造をできるだけシンプルにする

管理画面は載せるべき情報が多いため、複雑な構造になりがちです。しかし、シンプルにしようと多層構造を選択した場合、管理者の視認性を下げてしまう危険があります。多層構造の場合は3階層以上にならないようにし、2階層の場合も階層ごとタブ見た目を変えるなど、ユーザーが探す情報すぐ辿り着けるよう意識して制作しましょう。

通知がすぐ目につくようにする

管理画面上で管理者がするべきアクションをシステム通知して誘導することで効率的業務行えるようなります。具体的には、

  • サービス提供側からの重要なお知らせ
  • 新着情報の件数と概要
  • 管理者が対応すべき事とその残件数

などの通知が該当します。通知に気づいてもらうために、目留まりやすい場所通知機能を設置し、通知があった場合目立たせるようしてみください。

パーソナライズをできるようにする

管理者が求める情報に迅速アクセスできるよう、管理画面をパーソナライズしたりカスタマイズできたりするようすることも大事な要素です。

会員サイトのエントリーフォームのUIデザイン

会員サイトエントリーフォームは間口を広くする必要があるためUIデザインが非常に重要です。ここではフォーム作成時に心がけたいポイントを紹介します。

選択肢を増やしすぎない

入力項目をできる限り減らし、ユーザーの手間減らすこと優先します。エントリー時点で必ずしも必要でない項目は極力削除し、シンプルなエントリーフォームを心がけましょう。

ボタンの優先度をつける

ユーザーの入力手間を減らすためにボタン採用するは有効な手段ですが、多用しすぎるとページが煩雑な印象になり、シンプルなフォームから遠ざかってしまいます。選択項目が少ない場合はラジオボタン、生年月日など選択の幅が広い場合はプルダウンなど、適切なボタンの使い方を意識してみてください。

必須項目と任意項目を見分けやすくする

フォーム全体の項目数はできるだけ減らし、ユーザーの入力にかかる負担を軽減する必要がありますが、任意入力欄も設置したい場合は、必須項目と見分けやすくしておくようにしましょう「必須」「任意」と入力項目ごとに表示してあると、一目で入力すべき項目を見分けることができ、ユーザーを迷わせることがありません。

エラーは分かりやすく表示する

入力エラーがある場合に、どの部分がエラーとなっているか、分かりやすく表示しましょう。エラー箇所まで自動でスクロールし、間違っている内容と修正方法を明示すれば、ユーザーは直感的に修正方法が分かるため、修正に関わるストレスを軽減することができます。

入力フォーマットを予め明示する

入力欄の外に入力に関する注意事項を記載し、ユーザーがエラー起こしてから入力要件が出るような二度手間になる流れ作らないようしましょう。

余計なリンクを設置しない

余計なリンクを設置することで考えられるが、ユーザーの離脱です。常ページと同じようにヘッダーとフッターを表示している場合、ロゴがトップページにリンクしているはよくあることですが、これもフォームページではなくした方賢明です。入力中に誤ってクリックしてページが遷移ししまうと、ユーザーがそのまま戻っこなくなる危険性あります。

まとめ

会員サイトのデザインは、見た目の美しさ以上にUX/UIデザインにこだわった制作が求められます。シンプルな会員登録フォームは入会希望者の登録へのハードルを大きく下げてくれるので、ユーザー目線に立った使いやすいサイト制作を心がけてみましょう。

高セキュリティなCRMプラットフォーム「クライゼル」では、UX/UIデザインにこだわった会員サイト制作が可能です。

デザインの自由度も高いこともあり、こだわりを持ちつつユーザビリティの高い会員サイトを構築したいとお考え方はぜひクライゼルご活用ください

UIデザイン自由自在
高セキュリティ・高機能な会員サイトASPといえばクライゼル

会員サイト構築(マイページ開発システム)にも使えるCRMプラットフォーム「クライゼル」のカタログは下記からダウンロードいただけます。機能・料金表の記載もありますので、ぜひご覧ください。
服部誠

トライコーン(株)取締役兼マーケティング統括。
Web広告、CRM、CDP、データ可視化などお客様のwebマーケティングの課題解決に長年従事。
Salesforce Marketing cloud メールスペシャリスト / アドミニストレータ / コンサルタントおよび、Salesforce アドミニストレータの各認定資格を保持。

服部誠をフォローする
トライコーンラボ
タイトルとURLをコピーしました