【制作・開発の背景】
トランクルーム事業を展開する株式会社ストレージ王様。
以前よりマーケティング支援やUI改善など、広い範囲でプロモーション支援を担当させていただいておりました。
サービスサイトは、全店舗のカタログや申し込みシステムの役割も担っており、まさにサービスの要となる重要なもの。
ニーズやトレンドに合わせたデザイン刷新とともに、UXの向上や新たな機能の追加によるユーザー満足度向上のため、ウェブアクセシビリティにも配慮しリニューアルを行いました。
今回のリニューアルでは、フロントエンドだけでなくバックエンドも含む全面リニューアルとなっており、セキュリティの向上も実施しています。

【制作・開発のポイント】
フロントエンドのデザインでは、ユーザーが求める情報に迅速かつ迷いなくアクセスできるよう、直感的で操作性に優れたUIデザインを目指し、以下の3点を重視して制作しました。

1. ユーザビリティを最優先にしたボタンデザイン

最新のUIトレンドを取り入れつつ、操作可能性を直感的に伝えるボタンデザインを採用しました。
特にスマートフォンでの利用が多いユーザー層を考慮し、ホバーアニメーションに依存せず、視覚だけでアクションを誘発できる設計としています。
さらに、ページ遷移などの重要な要素には統一されたアイコンを配置することで、色の識別が困難なユーザーにも直感的に導線を認識できるよう配慮しました。

2. 視線を誘導する自然な動線設計

コンテンツ量が多くてもユーザーが目的の情報へスムーズに到達できるよう、情報にメリハリを持たせたデザインを採用することで視線の誘導を実現しています。
ファーストビューには、利用頻度が高い「店舗検索」を配置し、既存顧客の利便性を確保しています。
新規ユーザー向けのサービス案内は、視認性を高めた配置とデザインで自然と目に入る設計としました。

3. ブランドカラーを活かした認知度向上

メインカラーにストレージ王様のブランドカラーであるグリーンを使用。
これは、店舗や看板で広く親しまれているイメージをウェブサイトにもしっかり反映させる意図があります。
「緑色のトランクルーム」として、ブランド認知をさらに高め、既存顧客だけでなく新規顧客にも安心感を与えるデザインを目指しました。

【ウェブアクセシビリティ実装のポイント】
ストレージ王様のサービスサイトでは、全ての人にとって使いやすいWebを目指し、アクセシビリティ向上のために以下の取り組みを行っています。
特に今回のプロジェクトでは、キーボード操作や読み上げ順序に注力し、ユーザーが直感的かつ効率的に操作できるよう細部にわたって設計を行いました。

◾️1.1.1 非テキストコンテンツ
◾️1.3.1 情報及び関係性
◾️1.4.13 ホバー又はフォーカスで表示されるコンテンツ
◾️2.1.1 キーボード, 2.1.2 キーボードトラップなし
◾️2.4.3 フォーカス順序
◾️2.4.7 フォーカスの可視化
◾️3.1.1 ページの言語
◾️3.3.1 エラーの特定
◾️3.3.2 ラベル又は説明
◾️4.1.1 構文解析, 4.1.2 名前 (name)・役割 (role)・値 (value)

詳しくはノベルティメディアで解説します。