デザイン
【厳選】クオリティの高いスマホ版サイト10選まとめ
2018年09月19日 21:00 2018年09月28日
こんばんは！
最近「汗かきエステ気分」という入浴剤にハマっている社員Aです👩！
いくつか香りがあるのですが、青色のこのパッケージが一番香りも癒やされて発汗作用もあっておすすめです。
なにより結構コスパが良いです。
さて、本日は「クオリティの高いスマホ版サイト10選」をまとめましたのでご紹介していきます！
もくじ
TOYOTA 高校生向けリクルートサイト
高校生をターゲットにしたポップなデザインでイラストも可愛らしいですね！高校生なんかは特にスマホでの閲覧率が高そうなので、こだわっているのだと思います。
サイトの中間あたりで水玉が背景で流れている部分もインパクト大です。
icecosme
サイトにアクセスするとアイスクリームのイラストが順番に登場し、さらにメインビジュアルがカラフルなイメージで変化していくのが引き付けれます。
そして少しスクロールすると勝手に動いておしゃれなコスメのパッケージやイメージを見せてくれるのが、うっとりします。
NOW
これぞデザインっていう感じですね。スクロールは縦だとは限らないということを教えてくれます。
こんな魅力的なスクロールとアニメーションがあれば、文章も自然と読みたくなってしまいます。
株式会社リブセンス
左上にメニューボタンがありますが、押して見るとヘッダーがふわっと大きくなってメニューが表示されます。
そして途中途中にある文章もフォントの大きさと太さと種類のバランスが良く、可読性が高いです。
高木学園附属幼稚園
スクロールしたときに左上にメニューと、右上に「入園説明会」のボタンが追跡します。
そして、メニューを押すと可愛らしいイラストが多様されたメニューが表示されてページ移動しやすいです。
HOSHINOYA Tokyo
スマホで2カラムっぽいサイトは初めてみました！左側が固定のような感じで右コンテンツだけがスクロールします。
メニューを押すと、星のやの一覧もバランスが良く見やすいですね。
富山県美術館
今日の営業時間や日付が右サイドにデザインされていて、機能性も抜群。
どんぐり
まるい曲線がかわいらしさを感じさせてくれるサイトデザインです。
パンを頬張る写真も素敵です。
さる小
グリーンのバッグに黄色がめちゃくちゃ映えますね！
コンセプトやおすすめの過ごし方などアニメーションとイラストを活用してインパクト大に仕上げてあります。
これからの旅は、冒険に変わる into the local
スクロールするたびメッセージとマッチした写真がふんわりと表示されます。
たまには旅に出かけてみたいなと思わせてくれるサイトです。
まとめ
スマホ閲覧ユーザーが6〜7割となった今、スマホサイトの需要は高いです。
単にデザインにこだわるだけじゃなく、ページ表示速度やユーザビリティを考えて設計することが重要になります。
ページの表示速度が遅いとそれだけで一気に離脱率が上がりますので、スマホ用に画像を最適化したり、パソコン版に入っているコンテンツからピックアップして表示するなどして工夫が必要ですね。
また、私たちはスマホのメニューボタンは見慣れていますが、スマホを購入したばかりの方や年齢層が高い方は、メニューボタンを理解できない可能性もあります。
自分が見るときの目線で作るのではなく、万人が見たときに本当に使いやすいかどうかユーザビリティの視点から制作することも大事です！
スマホサイトのデザインも、スマホの進化に合わせてどんどん変わっていくので追いつくのが大変です！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
