地図シェアサイトのリニューアル

当店が運営しているサービスの一つに「地図シェアサイト(n.freemap.jp)」があります。ウェブ上で地図に色を塗って、ツイッターやフェイスブックなどのSNSでシェアできるサービスです。
スマートフォンの進歩や一般ユーザの行動の変化などから、今後はこのサービスに力を入れていこうと考えています。

そこで、以前のスマートフォンなどのメディアでは微妙に使いにくいレイアウトを一新しました。

リニューアル前

リニューアル前

リニューアル後(作成中…)

リニューアル後(作成中…)

大きな変更は無いように見えますが、下記の変更点があります。

  • 白地図専門店の共通ナビゲーションバーを全ページのトップ部分に導入
  • スマートフォンで利用しやすいようにレスポンシブデザイン化
  • 地図の内部構造を変更して縦横1200pxサイズにスケールアップ

スマートフォンではこのように見えます↓

スマートフォンでの表示例

スマートフォンでの表示例

なお、現時点(2015年3月10日)ではまだサーバ上の更新はしていないため、リニューアル前のサイトが表示されます(;^ω^)
他の部分も改良して、早急に更新を終えたいものです。

効率的にサイトをテスト

ウェブサイトのHTML構文からソーシャルネットワーク周りまで、様々な項目を自動的にテストできる「Nibbler – Test any website(http://nibbler.silktide.com/)」で、白地図専門店のサイトをチェックしました。

改良前

改良前

ご覧のとおり、SNS関連(Facebook page, Google+ page, Twitter)が0.0という最低スコアーです(;´Д`) また、Code quality(HTML構文の正しさを評価)も低いです:(;゙゚’ω゚’):

今回はこの二項目を修正しました。

SNS関連は既にFacebook pageとTwitterを運営開始していたため、ページのフッターにリンクを設置。
Code qualityはHTML5の構文チェックが出来る「Another HTML Lint 5(http://www.htmllint.net/)」でトライ&エラーで修正。

その結果……

改良後

改良後

全体のスコアーが上昇(*´∀`*)

もちろん、スコアー上げることはサイトを通じて利益を得ることの手段の一つにすぎないですが、目に見える変化は嬉しいものです。

モバイル対応のススメ

白地図専門店は今までPC向けサイトとして運営しておりました。そのため、モバイル環境(スマホやタブレットなど)で快適な閲覧が困難なのが現状です(;^ω^)

現在の来訪者の方の環境はこのような比率になっています。

  • PC環境(windowsやmacなど):85%
  • モバイル環境:15%
PCとスマホ・タブレットの割合

PCとスマホ・タブレットの割合

モバイル環境の方の比率は15%ですが、実数では月間15,000名ほどの方がご来場されています。そして、その方々の直帰率が60%以上ととても高いです。

当店では「地図ぬりぬり」という、スマホやタブレットなどのモバイル環境でも白地図を作れるサービスを提供しております。そちらへとモバイルユーザの方を誘導できるように対策を練っていきたいと思います。