もうスマホで何でもみる時代になって久しいですが、そんな時代になっても、これだと思うスマホページを作る事が、できてないなぁと思う今日この頃、ほぼ自分のためですが経験をメモにしようと思います。
スマートフォン画面ってなんだか縦に長くて、先にどんな情報が出てくるかわかりにくいので、勢いよくフリックしているとあっというまに各コンテンツを通りすぎゆく。。
それはそれでよいけど、もっと情報を丁寧に読んでもらえるように伝えられないかなっと漠然と考えて、とりあえず下記をやってみることにした。
スクロールしていくと出現するやつ
気がついてもらえるには、ユーザーがそのコーナにたどり着いたときにアニメーションして要素を表示されるのがありますね。
あれやってみました。
使っているライブラリ
inview.js
https://github.com/protonet/jquery.inview
Animate.css
https://daneden.github.io/animate.css/
サンプルコード
コードの詳細な説明はしていないので、参考になさる場合は下記のコードをご覧ください。
See the Pen
スクロールすると出てくるやつ by oogai makito (@oogai)
on CodePen.
文字の強調
あと、スマホといえば、文字情報。
基本ななめ読みされるのが、わかっているのでせめて要所要所のポイントだけはしっかりつたえたい。
強調すべき文字はアンダーラインをいれる。などですか・・・
サンプルコード
コードの詳細な説明はしていないので、参考になさる場合は下記のコードをご覧ください。
See the Pen
文字のハイライト＋スクロールすると出てくるやつ by oogai makito (@oogai)
on CodePen.
文字の量
そして、なるべく文字短く、一つの文章は３行から４行にする。
これを実践して続けられるようにがんばる！