最近はスマホサイトのデザインをする機会がだいぶ増えてきました。
『そろそろ慣れてきたかな』と思っても、
毎回あのスマホ特有の狭い画面に苦戦させられます。。
さて、今回は今までの経験で得た知識&参考サイトをご紹介いたします。
お役に立てれば幸いです。。
では優れたUIを、エリア毎に分けて紹介していきます。
ヘッダーエリア
スルガ銀行ANA支店
http://www.surugabank.co.jp/ana/
ロゴの下に敷いてある雲模様が大胆!
そしてフッターにも雲が使われています。
サイト全体で空の感じが出ていて、飛行機が飛んでいるように見えます。
いいアイデアですね。
しゅんおき！旬香周島おきなわ
ロゴが真ん中にどん！と可愛らしいです。
左にホームボタン、右にメニューボタンが配置されているため
見た目のバランスも良くていいですね。
===
なるほど!
思い切ったデザインで、サイトを開いた瞬間から楽しめますね。
ついつい私はありきたりなデザインをしてしまうので、
サイトにひと味出したい時にヘッダーにこだわりを出すこともアリですね！
((でも形にこだわりすぎて、高さがですぎないように注意すべきです。))
メインエリア
左:エステならグランモア 右:大阪経済法科大学
http://www.granmore.co.jp/sp/
http://www.keiho-u.ac.jp/sphone/
前後にあるバナーがちらりと見えることで、
左右に矢印ボタンを置かなくても『続きがある』とユーザーに認識してもらえます。
スマホの幅は狭いので、ちょっとでもデザイン要素を減らしたいときに有効です。
さらにバナーの下に地が敷いてあることで、奥行きが出て、小さい画面でも広くみえますね
左:リボンブラ 右:アディダス
http://www.lalan.jp/sp/ribbonbra/
http://adidas.jp/jfa/
メインの写真の高さが画面いっぱい分ほどあります。
最近はこのようにメインエリアを大きく見せるサイトが良くみられます。
ファッション系やスポーツ系のサイトなど、インパクトを与えるには使えますね！
写真の上にコピーが載る場合は字数や大きさなどもこだわると
さらに良くなりそうです。
===
ヘッダー同様、サイトを開いたときに一番に見られます。
色んなデザインパターンがあるので
たくさんのサイトを見て研究することが大事です、、！
コンテンツエリア
FELISSIMO フェリシモ
写真と詳細が一つのかたまりになっていて見やすいデザインですね。
また、タップするエリアも広くなり、とても使いやすいです。
このようなデザインを採用する場合は、詳細の字数や級数にも気をつけると
クリック率が上がりそうです！
左:つくろう女子旅 右:Aylesbury
http://jtpj.jp/sp/
http://aylesbury.jp/sp/
※サイトの一部を掲載しています。
内容ごとに背景の色がわかれて、境目が分かりやすです。
また、見た目にも変化が出るのでたいくつしないデザインですね。
ジンズPC
http://www.jins-jp.com/sp/st/jins-pc/
※サイトの一部を掲載しています。
詳細などが多い時にはアコーディオンがおすすめです！
ユーザーも見たいところにすぐたどりつける事ができます。
以上、いくつかご紹介させていただきました。
最近はどんどんスマホサイトデザインも新しくなってきました。
いろんな工夫が見られますね。
私も味気あるサイトを作れるよう日々勉強していきます〜！
