スマホサイトをつくることに関わる事、4年目。
うっ。4年前とサイズや機能が全くちがう・・・
GoogleからMaterial designも発表され、トレンドがどんどん変わっています。
トレンドだけじゃなくて画面全体のサイズや機能もかわってきているので、過去の懐かしさもふりかえりながら、そしておさらいも含めた、最近のスマホサイトのサイズ感や機能で配慮したい10のあれこれを紹介したいと思います。
これからスマホサイト改善したいよー！なんてひとのお役に立てたら幸いです。
Attention!
通常の業務では、minサイズのiPhone 5にあわせてデザインを作成していますので、iPhone 5で検証しているっという前提で読んでくださいね！
目次
【目次】
1.文字サイズ、行間
2.タップエリア
3.ヘッダ固定メニュー
4.マージン(余白)
5.リッチなスライドメニュー
6.横スライドのタブ
7.戻るボタンの配置
8.続く横スライド
9.両端メニューのリッチ検索
10.ハンバーガーメニューのアニメーション
まとめ
おさらいもかねて、ここからいきましょう！↓
1.文字サイズ、行間
・文字サイズ 14px-16px
・行間 140%-160%
わたしがこの仕事をはじめたころは12pxを標準として、スマホサイトを作っていました。
端末幅の大きいスマートフォンが出てきており、もっと読みやすいサイズに変わっています。
MERYやcakesなど読み物系サイトの文字サイズを確認してみると、やはり14px-15pxで表示されています。
2.タップエリア
画像とテキストまとめた範囲でタップ可能！
テキストや画像に別々にリンクがありましたが、最近では画像とテキストをまるっとまとめてタップできるように
タップエリアが変わっています。
もちろん、青文字リンクと画像リンクは別でタップするのも健在です！
赤枠で囲ったところがタップエリアになります。
3.ページ上部固定メニュー
ページ上部に戻らなくても。
最近のスマホサイトはページ上部固定メニューがよく見られますね。4年前は見なかったな・・。
ページ上部固定メニューが邪魔だなーと思うサイトもあれば、なんか気にならない！というサイトの差異はなんだろう？という疑問からサイズを調べてみたところ44px-50px!が気にならないサイズではないかという結論に至りました。
その理由としてアプリのページ上下にあるメニュー、これを基準とすると
iPhoneに搭載されているメールアプリやLINE、messenger、これらの上にあるバーの高さは上、下50pxです。
(時計、充電アイコン、キャリアが書かれたメニューバーを除く。)
個人的に使いやすいなと思うBUYMAのページ上部の固定メニューの高さも45pxになっています。
実は・・・・サイズだけではなく、表示のされかたにも色々な種類があるんです。
--Club UCC
https://club-ucc.jp/sp/top/
スクロールすると、見えなくなって、スクロールをやめるとヘッダ固定メニューが表示されるタイプ
--RUNWAY channel
http://runway-webstore.com/
ページ下部に固定されているタイプ
--PhotoshopVIP
http://photoshopvip.net/
上にスクロールしたときのみ、表示されるタイプ
--BUYMA
http://www.buyma.com/
常にヘッダに固定されているタイプ
--JOURNAL STANDARD
http://journal-standard.jp/special/jsl/2015ss/sp/top.php
ページ上部にあるハンバーガーメニューだけが追従するタイプ
4.マージン(余白)
ひとつひとつのコンテンツのまとまりをわかりやすくする
過去に情報をつめこみすぎて、余白が少ないというサイトがたくさんありました。
いまは、情報を整理し、必要なコンテンツだけをだすというのが主流です。
余白がしっかりととれているだけで、各コンテンツのまとまりがよりわかりやすくなります。
それだけでなく、ほかのコンテンツにぶつかることなく目的のリンクやボタンをタップすることができます。
5.リッチなスライドメニュー
メニューを開けばだいたいわかる
ただ、メニューをテキストで表示するだけでなく、会員情報ををいれる、ログインボタンをいれるなどスライドメニューの中身がリッチになってきています。
ニッセンはボタンをたくさんいれていますが、タップしやすいサイズなので使い心地もいいです。
ZOZOTOWNはタブでうまくとりいれて、たくさんの情報をうまく整理しています。
WEARは自分に関わる情報を直感的にわかるようにしています。
6.横スライドのメニュー
メニューが多すぎる！というときは出番です。
FacebookやGoogleで採用されている「横スライドメニュー」。
7/1 0:00(JST)に開始されたApple Musicのサイトもまさに「横スライドメニュー」ですね。(画像の赤枠で囲んだ部分です。)
たくさんメニューがあったときは、これって便利！と思う反面、、全体のメニューの内容が見えない、全体をみるためにはスライドするという1アクションをユーザーがしなければならないというデメリットも。
7.戻るボタンの配置
たかが戻る、されど戻る
もうずいぶんの前の話ですが、iOS7からiPhoneのブラウザバックボタンは一度ページ下部をタップする、もしくは上にスライドしないとブラウザバックボタンのバーが表示されなくなりました。
商品一覧ページと商品詳細ページの関係に注目すると、一覧で気にいったものをみつけて商品詳細ページを見る、気に入らなければもう一度、一覧ページに戻るの繰り返しをユーザーはすることになります。
この場合の戻るボタンは、ブラウザバックボタンまたはそのサイトについている一覧へ戻るボタンを使うことになりますね。
ブラウザバックボタンがずっと出てないのってなんかめんどくさいと思った方もいらっしゃるかと思います。
そんな方のために、ヘッダに戻るボタンがついたのではないか？と考えています。もしくは、アプリの戻るボタンをヒントにつけられたのかもしれません。
もうちょっと深堀りしてみようかな。。
ZARAのECサイトです。縦横にスライドして、アプリのような楽しさがありますよ。
8.続く横スライド
ページを短くするコツ
App storeの影響もあるのでしょうか。
メイン画像以外のコンテンツも横スライドで見せるサイトが多くなりました。
画像自体も大きく表示でき、次の画像が表示されていることで横にスライドできるんだなというのがユーザーにも伝わります。
これもページが長くしすぎないという工夫の一つですね。
指の稼働域を考えれば、たしかに縦にスクロールするよりも横にスクロールしたほうがなんだか楽だなあなんて思います。(これも次回深堀しようかな。)
Amazonのtopページでも採用されています。
今、世界で話題となっている音楽や映画、ファッション情報をまとめているQUETIC。
写真も大きく見る事が出来てついつい、タップしてしまいます。
9.両端メニューのリッチ検索
検索に特化。
キュレーションサイトや、コーディネートサイトで見られるようになったリッチな検索についてお話したいと思います。
右に検索アイコン、左にハンバーガーメニューで両方のメニューが開くUIになっています。
本当にここ最近でみるようになったUIです。読み物サイトでなくても、必ず検索機能はついてまわるものです。
ECサイトにもいかせそうだな♡なんて注目している機能です。
記事のはじめで紹介したMERYの検索メニューです。
WEARの検索メニューです。
10.メニューのcss3からのアニメーション
細部に小技を。
css3を使ったハンバーガーメニューのアニメーションです。
ちょっとした小技でサイトの質をあげてくれます。
http://nijilog.info/2014/07/07/396
MIKIYA KOBAYASHIのwebサイトです。するっと動きます。
まとめ
日々デザインをつくりながら、デザインのトレンドを感じながら、仕事をしています。
トレンドだけではなく、サイズや機能も日々変わっていく中で、自分の中だけでためていたものを皆様やチームに共有できることができればと思い、この記事を書きました。
変わっていくものなので、必ず調査や更新が定期的に必要になってきます、次の変化が起きた際にこの記事の続きを書こうと思っています。
また今回、いろいろと調べる中でアプリとスマホサイトの境界線がだんだんなくなってきたかのように感じました。
スマホサイトを作るうえで、アプリも意識していくことも重要です。
指で使う「使い心地」を考えた情報設計・機能設計・サイズの調整まで配慮することでもっとユーザーに親切なサイトになるのでは。と考えます。
