スマホ最適化事例

藤野金属株式会社「公式サイト」

藤野金属株式会社様

Webサイトのスマートデバイス最適化サービス「Mobify(モビファイ)」(Google推奨)が、藤野金属株式会社の「公式サイト」に採用されました。また、藤野金属株式会社「公式サイト」においては、スマートフォン最適化だけでなく、PCサイトのリニューアルも担当させていただきました。

PCサイトのリニューアル

Mobify(モビファイ)採用の背景

  1. 金属販売、金属加工・修理をする藤野金属株式会社は、これまでは自社でwebサイトの構築・運用を行っておりました。金属販売・加工という特殊な分野においても、モバイルによるアクセスの増加、webサイトでの利便性向上が求められる傾向にあり、最適化を行うこととなりました。併せて、既存のPC用サイトについてもユーザビリティ向上を目的としてリニューアルを行い、今回のプロジェクトでは、webサイトの構築とモバイルへの最適化を実現しました。
  2. Mobify(モビファイ)は、PC用のHTMLを流用してスマートフォンに最適化を行う仕組みのため、webサイトの運用はこれまで通り実行できること、さらにはスマートフォン用に軽量化した画像をCDN(Contents Delivery Network)から配信すること、スマートフォンには不要な要素を読み込まない設計が可能なため、コンテンツ表示のパフォーマンス向上が期待できることから採用にいたりました。 サイトリニューアル、モバイル最適化実施後は、離脱軽減・PV増加はもちろん、web問い合わせも順調に推移し全体的な効率化を実現しています。

藤野金属株式会社「公式サイト」

http://fujino-kinzoku.co.jp/


パーソルテクノロジースタッフの求職者向け「マイページ」

パーソルテクノロジースタッフ株式会社様

パーソルテクノロジースタッフの求職者向け「マイページ」は以前、モバイル対応としてガラケー(フィーチャーフォン)版を提供していました。しかし時代の変遷によってフィーチャーフォンを所有するユーザーが極端に少なくなったことから、普及率の高いスマートフォンに対応させ、来訪率アップを目指す施策の一環として、Mobify(モビファイ)によるスマートフォン最適化を行いました。

構築のポイント

  1. すでにスマートフォン対応を行っていたページのデザインに合わせて構築を行うことで、既存のサイトイメージを保ちユーザーが違和感なく新規対応ページも閲覧できるようにしました。また登録ステータスの違いによるお知らせ枠の出し分けなど特有の機能も、Mobifyの柔軟な設計によってPCと同様に再現しています。
  2. さらにサービス登録画面や各種情報の閲覧においてユーザーの利便性を向上させるため、ドロワーメニュー(ハンバーガーメニュー)の設置やフォームのレイアウト調整なども行っています。また、CDN(コンテンツデリバリーネットワーク)を活用したMobifyならではの高速表示は、サイト全体の使いやすさに貢献しています。

パーソルテクノロジースタッフの求職者向け「マイページ」

https://staff.persol-tech-s.co.jp/smp/top/menu/

※Mobifyの対応範囲はログイン後のページです

成功事例インタビューを見る


フジクラ「融着接続機」専用サイト

株式会社フジクラ様

こちらのサイトで扱っているのは社会に必要不可欠なインフラ関連の製品で、主に法人を対象としたサイトです。自然検索での流入はパソコンからが中心となりますが、融着接続機などを扱う通信工事の現場ではスマートフォンでの閲覧が中心となっている現状を踏まえ、既存の顧客にとっての利便性を高めること、また新たな顧客との接点をさらに拡大することを目的としてMobify(モビファイ)によるスマートフォン最適化を行いました。

「融着接続機」専用サイト

http://www.fusionsplicer.fujikura.com/jp/


スローヴィレッジ 公式通販サイト

株式会社スローヴィレッジ様

スローヴィレッジが提供する「スローヴィレッジ公式通販サイト」では、もともとスマートフォン向けのページを運用していましたが、サイトにアクセスしてからコンテンツが表示されるまでに時間を要してしまうことが課題としてありました。
Mobifyは、PC用のHTMLを流用してスマートフォンに最適化を行う仕組みで、スマートフォン用に軽量化した画像をCDN(Contents Delivery Network)から配信することや、スマートフォンには不要な要素を読み込まない設計が可能なため、コンテンツ表示のパフォーマンス向上が期待できるため採用にいたりました。

スローヴィレッジ 公式通販サイト

http://shop.slow-village.jp/


SUNSTAR コーポレートサイト

サンスター株式会社様

近年のスマートフォン普及に伴い、スマートフォンからのアクセスが急速に増えてきたことから、企業としての様々な取り組みを知っていただく大切な顧客接点の場でもあるため、ユーザビリティを高め、その接点をさらに拡大するためにスマートフォンへの最適化を行うため、Mobify(モビファイ)を採用していただきました。

導入の理由

  1. One Web(PCサイトと同一URL)で、検索時の上位表示やアクセス分析においてメリットが高い
  2. モバイル環境のアクセスにおいてコンテンツ表示速度が速く、離脱率・直帰率の低減につながる
  3. 制作着手・導入後の運営のしやすさ。導入後もPC向けサイトのコンテンツをつくり続けるだけで、スマートフォンサイトが自動生成できる

構築のポイント

デザインはブランドイメージを損うことのないよう、PCサイトのトーン&マナーを踏襲し、既存のユーザーに違和感なくスマートフォンサイトを閲覧していただけるよう心掛けました。PCサイトにはほとんど手を入れることなく、スマートフォンサイトの構築を行い、回遊率を上げるために各コンテンツの配置場所を考慮しました。PCのマークアップはそのままに、スマートフォンの配置を自由に設計できるのは、Mobifyの特長のひとつとなっております。


グレコ(GRACO)

アップリカ・チルドレンズプロダクツ合同会社様

スマートフォンからのアクセスが増加傾向にあった「グレコ(GRACO)」サイト。よりサイトアクセスが増える時期に合わせて早期対応を目指し、コンテンツ情報の見やすさ、検索の利便性等、ユーザビリティ向上のためにMobify(モビファイ)を採用していただきました。

導入の理由

  1. One Web(PCサイトと同一URL)であり、SEO対策に影響がないこと
  2. スマートフォンでアクセスした際の表示速度
  3. 最も重要な点として「グレコ(GRACO)」の楽しさを伝えられる自由度の高いデザインサイトを構築できること
  4. 限られたスケジュールの中で、より速く最適化を実現できるという点

構築のポイント

メインターゲットの20代~30代主婦が隙間時間でアクセスした際に、求める情報に辿りつきやすいUIと導線に配慮しました。また、視認性と操作性を考慮しつつ、PCサイトのデザインを踏襲することで、新規・既存ユーザー共に使いやすいユーザーフレンドリーな設計となっています。

グレコ(GRACO)

http://www.gracobaby.jp/


おとなの週末.com

株式会社講談社様

「おとなの週末.com」は、PCだけではなく、スマートフォンからの流入も急増していたことから、コンテンツの見やすさ、高速表示、ユーザビリティ向上のために早急にスマートフォン対応をするべく、Mobify(モビファイ)によるスマートフォン最適化をおこないました。

構築のポイント

スマートフォン独自の閲覧性を加味して、シンプルかつ可読性を重視したレイアウトとなっています。 また、ドロワーメニューを導入し、グローバルナビゲーションを格納することで記事自体へのアクセスをスムーズにし、かつページ間の移動も片手での操作が可能となるように工夫いたしました。

おとなの週末.com

http://otonano-shumatsu.com


with online

株式会社講談社様

「with online」は、女性読者によるスマートフォンやタブレットからのアクセス率が急増している中、編集部目線での各種ニュースの発信や、「with girls委員会」(読者会員組織)による情報発信の活性化を目的として、タブレットデザインによるリニューアルおよびMobify(モビファイ)によるスマートフォン最適化を行いました。

構築のポイント

タブレットデザインによるPCサイトとの機能を同一に保ち、さらに高速表示と、優れたデザインの再現を実現し「with online」全体の利便性向上を図っています。

スマートフォンのデザインにおいては、カテゴリ間の遷移をしやすいドロワーメニューの導入や記事の読みやすさを考慮したレイアウトなど、サイト全体を利用しやすいように、フラットなデザインでスッキリと見せる工夫をいたしました。


関西国際空港オフィシャルサイト

新関西国際空港株式会社様

「いまのフライト状況が知りたい」などお客さまの利用シーンを考慮して、即時反映性を求められるフライト情報を中心にどんなお客さまでも利用しやすいインターフェースによるスマートフォン最適化をおこないました。 国内・国外のお客さまが年間1600万人以上も利用する関西国際空港では、日本語のみならず英語対応も必須であり、Mobifyによる共通化によって情報更新の運用負荷の低減、アクセシビリティの向上なども考慮されたスマートフォンサイトを構築することができました。

構築のポイント

  1. ユーザーの利用頻度の高いコンテンツ、特にお問い合わせの多いフライト情報やアクセス情報を目立つように配置させるなど、お客様にとっての利用のしやすさ、分かりやすさに重点を置いてレイアウトしました。
  2. 本日のフライト情報では、一つの便情報がモバイルで表示するには情報量が多い為、構築の際はアコーディオン表示を取り入れ、スマートフォンに適したUIに考慮しました。
  3. 日本語サイト・英語サイトを共通化させたかたちでMobifyでは構築することが可能で、情報更新の運用負荷の低減をはかる事ができました。

関西国際空港オフィシャルサイト

http://www.kansai-airport.or.jp/


健康家族公式オンラインショップ

株式会社健康家族様

「にんにく卵黄」を主力として幅広い商品を展開している公式オンラインショップページの最適化を行いました。

構築のポイント

  1. 新規会員登録ページ、購入フローでの離脱回避のため、ユーザーフレンドリーな設計を考慮しました。
  2. 今までご利用いただいていたユーザーに違和感なく使っていただくために、現行サイトのデザインを反映しながらも、ボタンの大きさや色、文字の見せ方などを工夫し、スマートフォンからでも快適にお買いものができるようにしました。
  3. 商品ページでは購入までの導線や、スマホ画面での表示という限られた領域内での情報の見せ方を工夫しました。

健康家族公式オンラインショップ

http://www.kenkoukazoku.co.jp/


サンリオ公式サイト

株式会社サンリオ様

Web公式サイトのリニューアルに伴い、フィーチャーフォンサイトからスマートフォンへの切り替えを行った「サンリオ公式サイト」。ブランドサイトとして、ユーザーに情報をきちんと届られるデザイン設計を心掛けました。

担当者さまからのコメント

サイトリューアルの際に、スマートフォンサイト構築についてはいくつかのアプローチやソリューションを検討しました。まず、レスポンシブウェブデザインは、本サイトでは画像を多く使うため、表示スピードが遅くなるということが懸念されました。 また、IE7/8のユーザーが多かったためにレスポンシブウェブデザインは除外しました。

次にサーバーサイド・テンプレート調整は、コスト面で厳しいことと、私としては「CMSに多くの機能を持たせるべきではない」との判断から見送りました。

最後にコンバートサービスをすべて比較検討し、最終的には、プロキシーソリューションではURLが異なることが懸念されたため、One Webの「モビファイ」を選びました。 デザインの自由度とともに表示スピードにも満足しています。


ローチケ.com

株式会社ローソンHMVエンタテイメント様

ローチケ.comはチケット情報検索・チケット予約などのローソンチケットの総合エンタテイメント情報サイトです。多くのチケット情報から、ユーザーが求める情報を直感的に選択できるよう設計し、ストレスなく閲覧できるよう心がけています。

構築のポイント

  1. PCコンテンツと連動し、モバイル端末に合わせた画像、文字サイズとUIの調整で、商品の良さをより明確に伝えています。
  2. 目的のチケット情報にすぐに到達できるようコンテンツの配置に考慮し、直感的にわかるジャンル分け、あらゆる角度から検索できるサーチボックスやジャンル毎の検索が可能なドラムメニューを配置しました。
  3. イチオシのチケット情報や動画情報を素早く閲覧できるようアコーディオンメニューやカルーセルを多用し、ユーザーが一画面内でスクロールする長さが短くなるよう工夫しました。

ローチケ.com

http://l-tike.com/


※コメントやキャプチャはリリース当時のものです。

モバイル・マルチデバイス研究

日々マルチデバイスの研究を続けています。

お役立ち資料の一覧はこちらから!

お問い合わせ

資料請求や説明のご依頼は、下記電話番号・お問い合わせフォームよりお気軽にお問い合わせください。

  • TEL03-6228-4616
  • 受付時間月~金 9:30~18:30

ご質問・ご相談各種受け付けております。※祝日除く