スマホ重視のWebデザイン - 浜村拓夫（・∀・）作品集

Google Adsenseの活用事例で、フランスのオンライン教育サービス「digiSchool」が紹介されていました。

f:id:hamamuratakuo:20151012100900p:plain

フランスの大手オンライン学習会社、モバイル対応で業績が大幅に向上

http://services.google.com/fh/files/newsletters/adsense_digischol_case_jap.pdf

フランスでのオンライン教育の先駆者である DigiSchool は、モバイルを重視する戦略を取りました。レスポンシブウェブデザインを使ってモバイルサイトを開発し、増え続けるモバイルユーザーにアプローチした結果、ユーザーのサイトでの滞在時間は 20% 増加し、モバイルでの利用 1 回あたりの収益が PC の場合に比べて 20 セント増えました。最新の事例として Digischool のマーケティング手法と成果をご紹介しています。ご自身のモバイル戦略にお役立てください。

www.digischool.fr

www.digischoolgroup.com

●レスポンシブデザイン

http://www.digischool.fr/ のHTMLソースコードを見てみたら、jQueryでレスポンシブデザインを実現しているようでした。

CSSのクラス名の指定方法を見ると、Bootstrap（CSS フレームワーク）も使っているように見えました。

getbootstrap.com

・Bootstrap - Wikipedia

BootstrapはWebサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

Ver2.0以降ではレスポンシブデザインに対応しており、閲覧機器（PC、タブレット、携帯電話）の仕様に応じてWebページのレイアウトが動的に調整される。

・とほほのBootstrap入門

Bootstrap とは

Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。

レスポンシブデザインとは

スマートフォン、タブレット、デスクトップなどの画面の広さに応じて、横並びを縦並びにしたり、狭い画面ではサイドバーを表示しないなどを自動的に調整し、同じデザインで異なる大きさの画面に対応するためのデザイン技術です。

●digiSchool

フランスの「digiSchool」というオンライン教育サービスは、ご当地で人気みたいです。

digiSchool は 2014 年に世界展開を果たし、現在のポータルサイトは別の 12 個の無料サイトへの入り口となっています。

それぞれのサイトはすべて、世界中の 15～25 歳の学生が資格を取るための学習をし、また活気あるオンライン学習コミュニティを構築できるように作られています。

・具体的な目標がある＝「資格取得」の支援。

・コミュニティーがある＝質問、やる気の維持に役立つ。

●Webアプリとスマホアプリの使い分け

課題

digiSchool にとってモバイルへの移行は不可欠で、その実現方法を十分に見極める必要がありました。

「ユーザーは使用する端末の種類に応じて、それぞれに合ったインターフェースを求めます。そのため、モバイルサイトとモバイルアプリのどちらの方がコンテンツの利便性が高まるか、見極める必要がありました」と Debarnot 氏は振り返ります。

ユーザーを対象とした広範なテストの末、クイズ、授業、動画といったコンテンツにはモバイルアプリが最適で、ニュースを読むにはモバイルサイトが効果的であることが明確になりました。

この結果を受けて digiSchool は、レスポンシブウェブデザイン（RWD）へと舵を切りました。

・スマホアプリ　→　クイズ、授業、動画

・Webアプリ　→　ニュース

教材はスマホアプリで提供するのが良いみたいですね？

サービスの入口やコミュニティーは、Webサイトにして、その後アプリをダウンロードしてもらう、という設計にすると。

レスポンシブウェブデザイン
digiSchool でモバイルサイトの成功の伴を握ってきたのはレスポンシブウェブデザインです。
この包括的で柔軟なソリューションでは複数のサイトに変更を加える必要がないため、digiSchool のモバイルサイトを迅速に発展させることができました。

また、レスポンシブウェブデザインを導入したコンテンツではユーザーの操作性が上がるため、同社の他のサービスでもレスポンシブウェブデザインの導入が進みました。

digiSchool では、レスポンシブウェブデザインが効果を上げたことをすべてのデータが物語り、Anthony Kuntz 氏は次のように述べています。

「教育と若者に関して言えば、毎月 200 万人以上のユニークユーザーに利用されている当社は、モバイル分野のリーダーです。」
レスポンシブウェブデザインの導入により、モバイルユーザーの利便性は明らかに向上し、モバイルサイトの利用時間は以前に比べて 25% も増えました。

また、モバイルサイトユーザーからの収益は PC サイトユーザーからの収益を 20% も上回っています。