デザインの参考になる! 最近のWebサイトやスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
Post on:2023年7月27日
最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。
デザインのアイデアを探している時に、ブックマークしておくと便利です。
![最近のWebサイトやスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ](http://coliss.com/wp-content/uploads-202303/2023072201@2x.gif)
画像: 最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-01@2x.png)
400種類以上のスマホアプリ、100,000パターンのUIがまとめられたギャラリー。一つのアプリで、さまざまなUIが収録されているので、非常に便利です。iOS, Android, Web対応で、気に入ったアイデアは保存(要ログイン)もできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-08@2x.png)
Mobbinにインスパイアされ、App Storeでのスクリーンショットがなかったのでそれに特化されたギャラリー。アプリを売り込むためにスクリーンショットがどのように使用されているかの資料になります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-03@2x.png)
UIデザインのギャラリー「Screenlane」の運営者がこれからは「Page Flows」と「Page Collective」の更新に注力するとのことで、まずは、より良いユーザーフローが設計されたデスクトップとスマホのギャラリー。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-04@2x.png)
もう一つの「Page Collective」は、ランディングページのギャラリーで、ページの属性やページの要素ごとにカテゴリがまとめられています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-06@2x.png)
インタラクティブなUIデザインのパターンのギャラリー。レイアウト・ナビゲーション、フォーム、データ・コンテンツマネジメントなど5つの大カテゴリに、ボタンナビゲーション、カード、タブなどの小カテゴリがあります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-07@2x.png)
サインアップ、ログイン、削除、検索、保存、移動など、スマホアプリのさまざまなユーザーフローの各スクリーンショットが一覧できるギャラリー。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-09@2x.png)
Figmaのリソース、Dribbbleで人気している作品、フォントやカラーやツールなどの最新情報をまとめて見られるブラウザの機能拡張。現在、Chrome版とEdge版とBrave版がリリースされています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-10@2x.png)
WebサイトとUIコンポーネントの大カテゴリに、ランディング・ブログ・ポートフォリオ・プロダクトなどの小カテゴリにまとめられたギャラリー。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-13@2x.png)
ペライチ、1ページのWebサイトのインスピレーション、テンプレート、リソースがまとめられています。老舗のギャラリーですが、現在も更新が続けられており、現在は8,000ページを超えています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-11@2x.png)
5,000を超えるランディングページと無料のUIキットを特集したギャラリー。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-12@2x.png)
ランディングページ、テンプレート、コンポーネントがまとめられたギャラリー。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-05@2x.png)
スマホ、タブレット、デスクトップ、ワイドスクリーン、各スクリーンサイズでどのように表示されるかがまとめられたギャラリー。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202303/2023072202-02@2x.png)
名の通り、アプリのアニメーションに特化されたギャラリー。パターンではナビゲーション・ボタン・ローディング・スワイプで見ることができ、スタイルではフリップ・ピンチ・スライドなど各アプリを縦断して表示できます。
sponsors