はじめに
こちらの記事 を参考にしてモバイルデザインを作る際の重要ポイントを(今更)まとめていく。
ユーザの前提
「PCで見栄えがいいのは当たり前。どのデバイスで見ても当たり前のように綺麗な見た目」。これはフロントエンドの人間からしたら実に地獄のような話だがユーザの前提である。どんなにコンテンツが良くてもスマホで見れないんじゃ仕方ないのだ。
さて、どのようなデザインがいいのかを8つ学ぼう。
なぜモバイルフレンドリーなデザインが大切か
1. モバイルでの学習がより増えていること
2. 学習コースは全ユーザが利用できないといけない
3. ユーザはデバイスによらず最高の学習経験を求める
また、レスポンシブデザインというのは他の様々なデバイスに対して応用力が強いのも特徴です。
5個のチップ
1. スクロールをちゃんと使おう：
「一つの話題を中心にしたスクロールページ」なんだかんだこれは効果的なデザインなのだ。ほとんどすべての記事はこのデザインなのだから参考にしよう。
2. 「最小限の努力での学習」を大切に
ユーザは情報を最速で手にしたいと考えている。これをまずは肝に銘じよう。分野ごとに分けるなどの（当たり前のような）デザインも最高の学習体験への一歩である。
3. クリック数を減らそう
クリックして進んでいくタイプのコースは最悪だ。不要な画面やクリックは削除してしまおう。
4. 少ないほど良い
一つの学習コンテンツをあまりにも重く作りすぎるな。きれいで読みやすく、親指に優しいものにしよう。
5. スキャンを簡単にできるようにしよう
スクロールの快適さはもちろんのこと、重要なところを目立たせたりすることも大切だ。番号付きのポイントやアイコンも使っていこう。
より多くのチップスについてはこちらから
レスポンシブe-learninデザインに向けた8個の具体例
1. 美しく見やすいスクロールページ
かつて、スクロールというのはe-learningと相性が悪いとされていたが、今では最高の学習体験の鍵になるとされている。
[例はこちら] (https://www.elucidat.com/showcase/#interactive-storytelling)
めちゃめちゃ長い行がないのもポイントだ
2. 動画で解説しちゃう
・メニューをデスクトップでは画像の行として、モバイルでは積み上げらた列のようにしよう。
・ビデオの後に選択式の問題演習があるのは最高だ
動画+解説もよいかもしれないね
3.見やすさ向上
こういったわかりやすいデザインはユーザの時間節約になって良い。数回タップするだけで見たいコンテンツを知れるのは重要だ。
4.問題を作る
問題ページを作るのも大切だ。どのデバイスでも動くようにしよう。
しかもいろいろなデザインの問題を作ろう
・ユーザの興味を維持し、何回も同じものを繰り返し見なくてよくなるようにモバイルフレンドリーなデザインで作っていこう
・問題ページは問題を目立たせるためにシングルページで構わない
5. ゲーミフィケーション要素を持たせよう
多くの人が手の中でゲームをする時代である。webサイトにもそれをもたせることをためらうな
・サイトに本当にふさわしいか見極める必要があるが、ゲーミフィケーションの例として、タイマー、ポイント、レベル、バッジなどは有名なものだ
6. 「やるべきこと」を明確にさせよう
このサイトのように最終ゴールが見えていないユーザにむけて道のりページみたいなものを作るのもよいだろう。シングルページはこれを作るのに最適だ。