![見出し画像](https://assets.st-note.com/production/uploads/images/67862805/rectangle_large_type_2_dde4f78e1f61ff1282b157ef0461cf9c.jpg?width=800)
デザインのアイデアが溢れ出す!現役デザイナー厳選10の参考サイト
はじめに
こんにちは、i3DESIGNデザイナーチームです。
今日は、普段メンバーがWebサイトやスマホアプリ制作、ビジュアルデザインなど様々なシーンで使っている良質な情報をインプットするためのサイトを皆さんにご紹介したいと思います。
もちろん、このサイトは普段から見ている!と思う方もいらっしゃると思いますが、意外と見ることのない海外のサイトや流し見ているだけだとわからない便利な機能もしっかり触れているので、ぜひ最後までご覧ください。
モバイルアプリ
![画像1](https://assets.st-note.com/production/uploads/images/67865145/picture_pc_4a71a0ba293f1f03b8f1bde7d2533f10.png?width=800)
おすすめポイント
・アプリのスクリーンショットが実際にアプリを操作する順で見れる
・アップデート前とアップデート後のデザインを比較できる
・アプリ内のエレメント(ボタンなど)でフィルターできる
Mobbinはアプリごとに収録した画面キャプチャを見ることができるサイトです。同じアプリのiOSとAndroidの比較をすることもできます。
こんな人におすすめ!
・アプリの細かい動線をインプットしたい
・アプリのiOSとAndroidの差分を見たい
・トンマナを意識したアプリのデザインがしたい
![画像2](https://assets.st-note.com/production/uploads/images/67866653/picture_pc_5fa470923215950a11784b92ce1c3ad5.png?width=800)
おすすめポイント
・ぱっと見でアプリのフローを確認できる
・それぞれのスクリーンショットに現在地が併記されている
・Screens,Elements,Product categoriesなど細かいカテゴリでスクリーンショットを検索できる
・User flowsからユーザーがアプリを使う動画を見れる
screenlaneはLPでアプリの主なフローを自動再生してくれる機能がついたモバイルアプリのギャラリーです!
こんな人におすすめ!
・アプリのモーションを見たい
・「サインイン」など特定のスクリーンショットだけを集めたい
LP
![画像3](https://assets.st-note.com/production/uploads/images/67866811/picture_pc_528a910c09412006867664d01946ae7b.png?width=800)
おすすめポイント
・日本のLPが業種別など様々なカテゴリから見れる
・カテゴリやカラーだけではなくインパクト・力強い系など○○系というタイプからの検索ができる
・キャッチコピー一覧という各業種別の「グッと」きたキャッチコピーを見れる
LP advanceとは日本語のLPのみを1,700件以上集めたLPデザインまとめリンク集です。〜系などのニュアンスで検索出来るのでデザインの方針を決める時に便利です!
こんな人におすすめ!
・日本のLPをとにかくたくさん見たい!
・LPを作る時参考になるサイトがジャンル別で見たい
・LPはできたけどキャッチコピーが思いつかない
![画像4](https://assets.st-note.com/production/uploads/images/67877842/picture_pc_d150fc9c00fc9b8dd31204649601dbff.png?width=800)
おすすめポイント
・リンク先にいかずにLPのスクリーンショットを見れる
・無料のUI kitやイラスト、HTMLソースなどが入手できる
・UXデザインやデザインシステム、ビジュアルデザインに関する無料の書籍が読める
Lapaは海外の優れたLPを簡単に見ることができる、LPギャラリーです。充実したカテゴリ検索は勿論、無料で入手できるUI kitや様々なデザインに関する無料の書籍も読めます!
こんな人におすすめ!
・オシャレな海外のLPを沢山みたい
・細かいカテゴリで絞り込み検索したい
・Figmaで使えるUI kitが欲しい
デザインシステム
![画像5](https://assets.st-note.com/production/uploads/images/67878031/picture_pc_954e8b97f0107fa3192e341dcab83792.png?width=800)
おすすめポイント
・様々な企業のデザインシステム・パターンライブラリを検索できる
・GitHubなどのリンクにすぐアクセスできる
Adeleでは様々な企業のデザインシステム やパターンライブラリを検索できます。
こんな人におすすめ!
・デザインシステム を導入したいので一流企業を参考にしたい
・リポジトリやUI kitの形式で絞り込み検索がしたい
![画像6](https://assets.st-note.com/production/uploads/images/67878451/picture_pc_a670f35551e4cc2d75f8c4bc9690cbeb.png?width=800)
おすすめポイント
・Figmaにコンポーネントを載せている厳選された企業がまとめられている
・一流企業の実際のコンポーネントライブラリがダウンロードできる
Design Systems For Figmaでは一流企業が作るUI/UXデザインの設計をFigma上で簡単に閲覧することができます。Draftに複製することで見比べたりすぐに参考になる便利なツールです。
こんな人におすすめ!
・自分が作っているデザインと一流企業のデザインをFigmaで比較できる
・Figmaで各社のデザインのトンマナなどのルールを簡単に見れる
バナー
![画像7](https://assets.st-note.com/production/uploads/images/67878683/picture_pc_38a6d7997e312318e65b7d816a29416b.png?width=800)
おすすめポイント
・カテゴリが豊富でサイズなどでも絞り込み検索ができる
・それぞれのバナーにタグがついておりハッシュタグ検索も可能
・いいね機能が付いているのでお気に入りのバナーはまとめて見られる
BANNER LIBRARYは日本のおしゃれなバナーを集めたギャラリーサイトです。各バナーにハッシュタグがついており雰囲気での検索がしやすいことが最大の特徴です。
こんな人におすすめ!
・バナーのサイズを指定して検索したい
・日本のおしゃれなバナーを参考にしたい
![画像8](https://assets.st-note.com/production/uploads/images/67878816/picture_pc_7346e7357bfc9d1e49d4bdcefaa9e9f7.png?width=800)
おすすめポイント
・「テキストのみ」で構成されるバナーの検索など、他の参考サイトにはないカテゴリがある
・バナーサイズが分かりやすく見れる
bannner.comは日本のバナーギャラリーサイトで、カテゴリ豊富で「テキストのみ」「写真のみ」など各ニーズを満たす検索機能が充実しています。
こんな人におすすめ!
・カテゴリーからインスピレーションを得たい
・GIFのバナーも見たい
イラスト素材
![画像9](https://assets.st-note.com/production/uploads/images/67878993/picture_pc_dafb8dbb7953087454bd607917cc5d8d.png?width=800)
おすすめポイント
・無料〜有料コンテンツまで幅広いハイクオリティなイラストがダウンロードできる
・月額制でイラストを無制限にダウンロードできる
Illustrationsは商用利用可能なイラストを使うことができるサイトです。イラストは有料のものから無料のものまで揃っており、月額制にすると全てのイラストがダウンロードできます。
デザインにイラストを組み込みたい時などに手軽にハイクオリティなイラストを使えます。
こんな人におすすめ!
・忙しいがデザインにイラストを盛り込みたい
・イラストの色だけ変更して自身のデザインに合ったイラストを作りたい
アイコン
![画像10](https://assets.st-note.com/production/uploads/images/67879124/picture_pc_eb25effddc95227354c58ce716c28842.png?width=800)
おすすめポイント
・iOSにリリースされているアプリのアイコンが見れる
・気になったアイコンをクリックすると色味などが似ているアイコンが表示される
・App Storeでの評価も確認できる
iconsfeedはiOSにリリースされたアプリのアイコンをまとめたギャラリーです。実際リリースされているものしか表示されないのでクオリティの高さは保証されています。ジャンル別や類似色での検索もできるので使い勝手も抜群です。
こんな人におすすめ!
・iOSアプリのアイコンを作りたい
・トレンドのアイコンを知りたい
・カテゴリごとのアイコンを見比べたい
まだまだ他にもある!サイト一覧
Webサイト
https://sankoudesign.com/
モバイルアプリ
https://androidniceties.tumblr.com/
https://www.mobile-patterns.com/
https://inspired-ui.com/
https://inspirationmobile.tumblr.com
いろいろ
https://collectui.com/designs
https://www.awwwards.com/sites/isi-global
https://uigarage.net/
https://www.designspiration.com/popular/?marker=5597541197580
アイコン
https://www.iosicongallery.com/
おわりに
いかがでしたか?同じカテゴリの参考サイトでも、使いたいシーンによってどのサイトを見るか選択肢が広がるかと思います。
アイスリーデザインでは、日々手に入れる情報から光るモノはキャッチアップし、チームで共有します。自ら情報を掴みにいく姿勢やメンバーが収集した情報を見て目を肥やすことで切磋琢磨する環境が自然と構築されています。
------
🌱i3DESIGNで一緒に働きませんか?
私たちi3DESIGNは、デザイナーを絶賛募集中です。
デザイナーチームは、今回ご紹介した内容のようにデザインの考察・UIの考察をメンバー同士で深く議論しあったり、定期的に勉強会を開催するなど、個人だけでなくチームでも成長できる環境です。ご自身の経験を活かし、私たちと一緒により成長していきませんか?
少しでもi3DESIGNデザイナーチームが気になったという方は、以下からお気軽にご連絡ください。
📌チームのことを知りたい方はこちら
📌Hrmos
📌Wantedly
-----
🐣デザイナーチームのTwitter
弊社デザイナーチームのTwitterはこちら。フォロー大歓迎です。
はじめまして!i3DESIGNデザイナーチームでTwitterを始めました。UI/UXに関するTipsやチームでの取り組みを日々つぶやいていきます📝
— i3DESIGN デザインチーム (@i3_designers) May 23, 2022
どうぞよろしくお願いします!
noteでも発信しているのでぜひ覗いてみてください👀https://t.co/VcMfy76i56
-----
💭お問い合わせ
i3DESIGNでは、アプリやWebサービスなどの情報設計・デザインを行っております。プロダクト/サービスのリニューアル、改善のご相談やUIレビューのご依頼は、こちらからお気軽にお問い合わせください。
-----