スマホwebでこのUIの流れいい感じ!

最近見た中で、一連の流れがいい感じのUIだと思ったサイトをまとめてみました。

「流れ」を見せたかったのでgifで操作を撮影しました。

 

トップで見せたい検索窓とカルーセルの組み合わせがいい感じ

WEAR

http://wear.jp/

f:id:imakagi:20160304203906g:plain

 

WEARのトップも最初から検索的にテキストが入っていて、文字カーソルが点滅しているだけでそれがすぐに分かるデザインなのが面白いですね。
3枠ローテで、トレンドだったり人気のユーザーが切り替わるアニメーションも、ただカルーセルするより効果的だと思います。
検索することで、トレンドやおしゃれな人が見つかるメッセージにもなってる。


あえて言うなら「コロチキ」で検索してる人はコロチキ探してるので、検索結果よりユーザーページにダイレクトに遷移しても良いような気もしました。

その後の検索体験もいい感じなのでキャプチャ取りました。

 

検索のUXがいい感じ

MERRY

http://mery.jp/

f:id:imakagi:20160304203946g:plain

 

意識しないと気が付かなかったけど、右上の検索アイコンをタップすると、検索窓がすぐに開いてカーソルが当たってる状態になる。
キーボードも開いているのでそのまますぐに検索出来る。
検索ボタン押した後に検索窓タップする1タップがないだけで、すごくスムーズに感じます。

 

ちなみに遷移先のページ、検索した場合と下にあるタグを押した場合で別のページに遷移しています。
見ている方はそんなの全く気が付かない。

 

商品を選んで見るUXがいい感じ

ZARA

http://m.zara.com/jp/

f:id:imakagi:20160304204019g:plain

 

 

スマホwebでこんなアプリみたいな動きが作れるだと結構びっくりしました。
横スライドしてる時ちゃんとURLが変わってるのに、スマホで触っててページ遷移を全然感じさせない。


商品を縦スライドで詳しく見て、左右スライドでどんどん見て行けるし、上部固定の戻るボタンですぐに一覧に戻れるし、買う時も下部固定のボタン&右上のカートでスムーズ!

 

最近スマホwebサイトとアプリの差が段々なくなってきている気がします。

 

ちなみに

 

画面のキャプチャを動画撮影するのに使ったアプリはこちら。

簡単にすぐ好きな範囲の動画を撮影してgifにしてくれるので便利です。

Recordit: Record screencasts fast & free! with GIF Support!