スマートフォンに対応にしました

こんにちは!佐伯です。デザインとかいろいろ社内業務をしたりしてなかったりお茶飲んだりコーヒー飲んだりしてます。

みんさんご存知かもしれませんが、6/20から、 SP対応とあいなりました。
デザイン的に変わったとこをデザイナー目線でそれっぽく書いていこうと思います!

何が変わったの?

ぶっちゃけPC用とSP用の違いなので、ユーザーが見る場所や時間帯もいっぱい変わってくるんですが、特にこの部分がアレしたよねというところを書いていきます。

●今回、PCページと大きく変えないように意識したところ
  • リダイレクト先は同じ(つまり、ページ遷移先が同じ要素で構成されている)
  • ページ全体の雰囲気
    今回、作るときのフローは基本的にPCサイトを作った時と大差ありません。

ブログサイトを作った時のフロー(主にデザイン編)
URL: https://blue-engineerblog.com/post/29

ただ、今回はPC版が先に出来上がっていたので、雰囲気と遷移先が明確になっていました。
ですのでデザイン面などは大きく迷わず作成することができました。


●逆に、PCページと大きく変わったところ
  • TOPのスライドショー的なところの内部構造
  • 各コンテンツの表示の出し方

まあ、言ってしまえばPCとスマートフォンって全然違いますよね。何が違うって、一度に見る画面とかクリック判定とか通信量とかが少しネックでした。
PCだと画面が広いので一目で伝わる部分が多く、気にすることのなかった表示の部分ではSPになると少し変わってきます。
単純にPCだとウインドウサイズを横長で見ることが多いですが、SPは基本的に縦長です。そして画面サイズが比較的小さいですよね。つまり、一度に伝える・見せる情報が少なくなってくる部分の取り回しが随分と変わってきます。


少し具体的に書くと。。。

○スマートフォン環境

PC環境とは明らかに違う環境として、「通信量」に関しては、PCでは動画で表現していたところを少しでも通信料を抑えるためにGIF動画を使用しています。とても簡単に言うと、ギリギリ視覚的に影響のないくらいまで粗くしています。

○コンテンツ部分

PCではコンテンツの区切りをそれぞれのアイコンで賄っていましたが、SPだと若干アプリちっくなものになっています。記事の大カテゴリが追従したり。
などなど・・


と、ここで一つ疑問に思うことが多いかと思います。

○「SP対応する必要って・・・?」

考えてみると、SP対応する必要性はどこにあるのでしょうか。
「PCで見れたらSPでも見れるのが普通でしょ?」
「え、逆になんでSPで見れないの??」


という声もわかります。ごもっともです。いわゆる「当たり前」ってやつですよね。。

WEBページというのは、企業のサービスの一部

今回、自社の魅力を少しでも外部に発信して自社やこのブログに関わる皆さんがハッピーになれるような目的が少なからず存在しています。


そのサービスをもっとよく提供していくために、PCではカバーしきれないという側面がありました。
というのも、今回はPCファーストで作成していて、いざリリース後にアナリティクスを見たらユーザーの半分がスマートフォンからの流入だったのです。
PCで見る人以外にもハッピーになってもらうためにサービスを提供するなら、スマートフォン対応しない手はありませんよね。スマートフォン対応してることが当たり前という前提になってきた昨今はとくにそうですよね!
(まあエンジニアなら大体はPCでサイトとか見ることが多いだろうというタカをくくってたのはありますけどね)



まとめ

今回はもともとSP対応をする予定ではいましたが、PCよりは若干優先度は劣るかなという開発陣の判断で同時リリースできなかったのは少し心苦しいですが、まあ無事にリリースしたので勘弁してください(不遜)




SPのリリースが遅れた言い訳じゃありませんからねっ!
では!!

Shere
  • はてなブログ
  • Twitter
  • Facebook
SP(スマートフォン)対応にあたり〜主にデザインフロー〜

Writer

  • Name

    佐伯 明紀

  • Position

    デザインとか

  • Profile

    もともと紙系のデザインなどをやっていましたが、転職を機にWEBデザイン関係の仕事に就くことになりました。自分なりに頑張っていこうと思いますのでよろしくお願いします。作業用BGMとして映画の予告を延々と流すことにハマってます。