Design デザイン・UI

 
スマホタブレットデザイン・UI

そのUIホント必要? UIデザインまとめ5選

mobile_hires
2015年も残り一か月を切りましたね。今回は一年の総括の意味を込めて、国内外のモバイルUIデザイン集を改めて紹介してみたいと思います。

年代別にも検索できる – spscollection.com

001
よくあるギャラリーサイトですが、特徴のひとつが年代別のデザインパターンを見ることができること! 2012年あたりはパララックスや、フリックスライド、アコーディオンなどさまざまなUIを使ったサイトが数多く収集されていますが、直近の2015年11月あたりになると、メニューは三本線のハンバーガーメニューがデフォルトになり、シンプルな構造になっていることがわかります。また、ファーストビューには大き目のわかりやすいイメージ画像を使うのも共通点といます。

https://spscollection.com/

UIのデザインパターンに困ったときはココ – pttrns.com

002
海外のサイトですが、さまざまなサイトのUIデザインパターンが集められており、困ったときのヒントとして使うことをオススメします。最近新しいUIの見せ方などの提案を求められることが増えてきたので、ここで色々なUIを研究して作業に落とし込むことで、いいものを作り上げることができます。

https://pttrns.com/

スマホサイトのスコアがわかる – mobileawesomeness.com

こちらも海外のサイトになりますが、特徴としては、サイトごとに点数がつけられているところ。一覧ページに並んでいるキャプチャにマウスオンすると総合得点が確認でき、個別のページに進むと、【UI/UX】【design】【concept】の3つの評価基準で点数がつけられています。

004_2
もし、自分が作ったサイトの点数が高くなかった場合は、グローバルモデルには仕上がっていないということになります。評価の高いサイトの特徴を数字でわかりやすく見ることができるのでひじょうに参考になるのではないかと思います。

https://mobileawesomeness.com/

iPhone、iPad、Androidまでを網羅 – inspired-ui.com

003
このサイトには、iPhone、iPad、Androidの3デバイス別のUIパターンが収められています。コンテンツエリア右上のデバイスアイコンで切り替えることで、それぞれのUIパターンを見ていくことができます。このサイトの特徴としては、キャプチャの数が多いところ。サンプルが多いので、他のサイトにはまとめられていない、UIの新しい発見があります。

https://inspired-ui.com/

アプリのアイコンに困ったらここ – icondrop.net

005
あの小さいアイコンエリアをどのようにデザインすればユーザーに気に入ってもらえるかを考えるのは、デザイナーとして悩みどころですよね。そんな時、参考になるのがこのサイト。カテゴリーも多く、カラーで検索したり、フラットデザイン寄りか、リッチデザイン寄りか、など直感的に思っていることで検索できるようになっています。詳細ページでは、各アイコンのデザインコンセプトを解説しているので参考になるのではないかと思います。ライバルとなるアプリのデザインをチェックしてみると良いのではないでしょうか。

https://icondrop.net/

UIも大事だけど、ちゃんとユーザーのことも考えて作ることが重要

今回は、UIパターンの参考サイトをいくつか紹介しましたが、本当に言いたかったことは、「作ったサイトに色々なギミックを入れ込みすぎていませんか?」ということです。リッチなデザインのUIや凝ったつくりのUIは、作る側としては『すごくいいものができたぞ!』と思いますが、実際ユーザーが使った時に、そのUIのせいでページが重くなり結果的にユーザビリティの低下を招いてしまっているなんてことはよくあることです。

良いUIは人が気にならないほど馴染んでいるものと以前海外の記事で見たことがあります。また、最近では「No UI」という言葉も出てきています。2016年は、初めて使ったユーザーが疑問を持たないでコンテンツに集中できるデザインを心がけてみてはいかがでしょうか。

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事