読者です 読者をやめる 読者になる 読者になる

浜村拓夫(・∀・)作品集

頭の中にあるイメージを表現できるデザイン力が欲しいです(><)

スマホ重視の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% も上回っています。

 

・モバイルファースト(スマホ向けのサイト設計)

・モバイルユーザーの利用時間を増加させる。

 

●課題

digiSchoolの事例を参考にする場合、いくつかの問題を解決しなければならない。

 

静的サイトジェネレータの調達 → FuelPHPで自作 or 既存のオープンソースを利用。(PukiWikiみたいなCMSが欲しい。)

レスポンシブデザインのブレークポイントスマホ(小)、タブレット(中)、PC(大)の画面の大きさに合わせて、表示の横幅を切り替える点(ブレークポイント)を設定する必要があるけど、Bootstrapを使う場合、簡単にテストする方法はあるか?(ちまちまレイアウトを試すのが面倒)

スマホアプリの開発 → Unityでマルチプラットフォームスマホアプリ開発。

プログラミング言語は、とりあえずJavaScriptでOK。必要に応じてC#を導入。)

個別に開発する場合、iOSSwiftAndroidはKotlinでOK?

 

allabout.co.jp

 

スピード重視で開発するためには、できるだけシンプルに作らんとあかんなー!

せっかく、Illustratorが使えるようになったことだし、今までネックだったWebデザインのショボさを克服して、まともなWebサービス、アプリを作ってみたいです。><

 

 

 

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

 

 

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

 

 

 

Firewind / Maniac (Michael Sembello cover)