
株式会社デジタルレイ様 企業サイトリニューアル
業界の大きな変遷を乗り越えていく企業体質の訴求と、ストレスフリーな導線構築
デジタルレイ様は、2002年の創業以来、フィーチャーフォンを主体とするモバイルに特化したコンテンツ企画・開発を事業ドメインとされてきました。モバイル業界では一目置かれる、老舗の部類に入る企業様です。そして、同社のサイトも業歴同様、長年継続運用をされてきたサイトでした。
そのため、当時から大きく変えることなく継続してきたそのサイトは、モバイル業界の大きな変遷とともに、実際の業容との乖離を生んでいました。現在主軸となっている、スマートフォンやタブレットなどのスマートデバイスに対する先進的な取り組みと、モバイルに特化してノウハウを積み上げてきた独自の強みが、サイトからはうかがい知れない状況でした。
デジタルレイ様固有の事情
同社のサイトが持つ問題点は、大きく2つありました。
1つ目の課題:Webブランディング対応の遅れ
長年のサイト運用とモバイル業界の大きな変遷によって生まれた、サイト上におけるギャップを埋めること。さらに、その大きな変遷を乗り越えていく、柔軟で、強固な、企業体質を感じさせること。このWebブランディング活動の推進、サイトイメージの一新が、1つ目の解決課題でした。
2つ目の課題:ストレスフルなユーザビリティを持つサイト構造
長年のサイト運用により、コンテンツ間の遷移は迷路構造となってしまっていました。これはユーザにとって、非常に大きいストレス要因でした。そのため、ユーザが求める情報へ辿り着くための動線から、ストレスを感じさせる余分な要素を極力排除していきました。また、同社はフィーチャーフォンサイトを別に運営していたため、それとは別に、スマートフォンからPCをカバーするサイトという棲み分けが必要でした。これらの条件を踏まえた上で、お問い合わせへのアクションをスムーズにさせること。これらが、私たちが果たさなければならない、もう一つのミッションでした。
プロジェクトが目指した最終目標final Target
- モバイルデバイス対応という同社の強みを表現する、レスポンシブWebデザインの採用。
- 本体サイトと分離していた実績紹介コンテンツの統合。
- 適切なナビゲーションルールによる、ユーザ導線の最適化。
- グランドトップから下層ページへの誘導強化。
- お問い合わせアクションへのスムーズな流れの構築。
従来とは異なるワークフローへの挑戦
複数のプロトタイピングを採用
様々な画面サイズでの閲覧を前提とする、レスポンシブWebデザインでのサイト制作においては、画面設計がこれまで以上により重要で難易度が高く、お客さまとの合意形成も容易ではありません。
レスポンシブWebデザインでは、多くの場合ペーパープトロタイプを作成して、各スクリーンサイズでのだいたいのレイアウトを検討し、画面設計を進めていきます。この手法の場合、様々なスクリーンサイズでのレイアウトの可変状況を横断して検討できる点、実装の裏付けを行える点でメリットがあるのですが、最終イメージが掴みづらく、お客さまにとって「これで本当に良いのか」の判断が難しいのも事実です。
そこで本件では、タブレット・スマートフォン用のレイアウトにはペーパープロトタイプを利用し、デスクトップ用のレイアウトにはモックアップ(ブラウザで動作するプロトタイプ)を採用しました。両者を並行して行うことにより、実装の裏付けと最終イメージの合意形成という大きな課題をクリアすることができました。
PhotoShopでページをデザインしない
レスポンシブWebデザインでは、小さいスクリーンでの情報量の精査や操作性が重要になることから、「PhotoShopを使ってまずデスクトップ用のデザインを完成させる」というフローが適合しません。先の画面設計が概ねできてきたら、いきなりHTMLを組み、マルチスクリーンに対応する可変レイアウトを検証しながら、ナビゲーションや主要なページを作成し、後からデザインを適用するような流れになります。
本件において弊社もまだこの「デザイニング in ブラウザ」の手法は手探り状態で、PhotoShopとブラウザを行ったりきたり、時には大きく手戻りしながらの作業になりました。
このほか、作業の効率化、またモバイルでの閲覧を前提としたサイトの軽量化のため、CSSの記述にはSASSを採用し、画像にはCSSスプライトを利用するなど、多くの「変革」をもたらすプロジェクトになりました。
分かりやすいサービスの訴求と流れの形成

デジタルレイ様のサイトが持つ一番の問題点は、グランドトップにおいて「サービスが見えない」こと、「先進性がアピールできていない」ことでした。そこでこの問題をより効果的に解決するため、同社のサービスについて詳細なヒアリングを実施、グランドトップでの見せ方を入念に設計しました。
特に、昨今のSNSブームによりお問い合わせが増えている「投稿監視サービス」や、マルチデバイス時代の需要を的確にとらえた「実機検証サービス」など、今までは下層に埋もれていた同社のユニークなサービスを前面に引き出し、下層ページへの積極的な誘導を図っています。
また各サービスの詳細ページにおいては、ユーザが学習しやすい構成を心掛け、「お問い合わせ」へのスムーズな導線を構築しています。
- 公開日:2013年3月6日
- 担当範囲:プロジェクト全体