日頃からさまざまなウェブサイトを制作しているデザイナーにとって、新しいクリエイティブなデザインアイデアを考えるのもワークフローのひとつ。
今回は、カスタマイズもしやすい無料のUIコンポーネントをまとめてご紹介します。Photoshopだけでなく、IllustratorやSketch、Adobe XDなど幅広いデザインアプリに対応でき、ウェブサイト制作の参考にしたい素材を集めています。また、どの素材も文字テキストや配色、サイズの変更などを自由に行うことができ、iOS 11など最新デザインにもばっちり対応しています。
使いやすくて、分かりやすい無料UIコンポーネント素材まとめ
モバイル向けのショッピングサイトを想定したUIコンポーネント集ですが、落ち着いた控えめなデザインは広い案件に使えるアイテム。
収録ファイル形式: PSD |
iPhone X Mockup & iOS 11 GUI for Adobe XD
新しくアップデートされたばかりのiOS 11 のあらゆるコンポーネントを完全再現したGUIキット。
収録ファイル形式: XD |
Microsoft が新しいUIとして開発した Fluent DesignをコンセプトにしたUIデザインキット。
収録ファイル形式: XD |
モダンでミニマルスタイルのUIキットで、アイテムごとにグループとして整理されるなど使いやすい素材。
収録ファイル形式: PSD | Sketch
カード型とグリッドを組み合わせたレイアウトで、ブログ投稿一覧などにオススメ。
収録ファイル形式: PSD |
iOS 11の新デザインを採用した、フードアプリ向けのダークUIデザインキット。
収録ファイル形式: PSD |
ユーザープロフィール画面を想定した10種類のデザインが揃います。
収録ファイル形式: PSD |
モバイルショップを想定したデザインで、商品プロダクトやブランドページなど3スクリーンが用意されています。
収録ファイル形式: PSD |
オンライン Eコマースやショッピングサイトを想定したUIキットで、使いやすさに工夫を凝らしたアイテム。
収録ファイル形式: Sketch |
トレンドデザインを取り入れた、140スクリーンを超えるモバイル用レイアウトやコンポーネントを揃えた、プレミアム素材なみの豊富さがポイント。
収録ファイル形式: PSD | Sketch
ダーク系UIデザインを制作したいときに便利なコンポーネント集で、配色の参考にもどうぞ。
収録ファイル形式: Sketch |
オンライン航空チケットを想定した、ネオンカラーが印象的なUIコンポーネント。
収録ファイル形式: PSD |
水色をテーマカラーに利用したダーク系UIコンポーネント集。
収録ファイル形式: PSD |
ダーク系UIデザインの参考にしたい、スポーツアプリをコンセプトにしたUIコンポーネント集。
収録ファイル形式: PSD |
テンプレートを選び、お好みのコンポーネントを並べるだけで自由なレイアウトを作成できるデザインキットで、最新iOS 11を採用しています。
収録ファイル形式: Sketch | XD
iOS 11のスクリーン60枚と一緒に、大量のUIコンポーネントをセットにしたUIキット。
収録ファイル形式: Sketch |
こちらもiOS 11のUIをそのまま再現した Sketch用GUIキット。
収録ファイル形式: Sketch |
Googleのマテリアルデザインをふまえて作成されたUIキットで、35種類のスクリーン画面に、１４０種類を超えるコンポーネントが揃います。
収録ファイル形式: PSD | Sketch | Ai
トラベルアプリを想定したUIコンポーネント集ですが、幅広いプロジェクトに利用できるアイテム。
収録ファイル形式: PSD |
9つのカテゴリー合計100種類のUIコンポーネントが揃っており、カスタマイズのしやすさもポイント。
収録ファイル形式: PSD |
各デザイン要素を重ねた新しいレイアウトを採用した、ブログやオンラインショップ向け商品ページ向けテンプレート。
収録ファイル形式: Sketch |
収録ファイル形式: PSD |
ダークとホワイトの2カラーで展開するランディングページで、より実用的なUIデザインが揃います。スモールビジネスやスタートアップ関連にどうぞ。
収録ファイル形式: Sketch |
各カテゴリやページを大小さまざまなタイル状に展開します。
収録ファイル形式: Sketch |
８つのカテゴリに整理された合計82枚のスクリーン画面が揃った、カラフルでスタイリッシュな素材集。
収録ファイル形式: PSD | Sketch | XD
Avsc Free Sketch UI Kit Design
デザインのワークフローをより手軽にスピードアップしてくれるUIコンポーネント集で、ミニマルでスタイリッシュな役立つアイテム。
収録ファイル形式: Sketch |
Flinto – eCommerce Free PSD Template
ショッピングサイトを想定したテンプレート集で、商品カテゴリやプロダクトページなどビジュアルを強調したデザインが素敵。
収録ファイル形式: PSD |
ダーク系とホワイト系UIの2種類が揃い、合計２２のアプリ用スクリーンを収録しています。
収録ファイル形式: Sketch |
メッセージアプリをコンセプトにしたUIスクリーン集。
収録ファイル形式: Sketch |
目的地までの乗り換え情報などを表示するモバイル向けアプリ用UIコンポーネント。
収録ファイル形式: Sketch |
Wires – Wireframe Kits for Adobe XD
ワイヤーフレーム作成を想定した、無駄を省いたミニマルスタイルのUIコンポーネント集で、どんなデザインにも使いやすい万能さ。
収録ファイル形式: PSD |
ウェブサイトで利用することを想定した、シンプルでモダンな見た目のテンプレートが各種揃います。
収録ファイル形式: PSD |
ウェブサイト制作に使えるユニークなヘッダーデザイン12種類の素材集。
収録ファイル形式: Sketch |
ToDoリストを目的としたUIキットで、書体や配色の統一感を合わせやすいミニスタイルガイド付き。
収録ファイル形式: Sketch |
プロトタイプ作成などに便利な、シンプルに省略されたユーザーインターフェースが揃います。
収録ファイル形式: PSD |
収録ファイル形式: PSD |
商品プロダクトの購入ページをコンセプトにした、ポップアップ型カードレイアウト。
収録ファイル形式: XD |
5 Walkthroughs – Adobe XD Freebie
モバイルアプリを開いたときに表示するウェルカム画面を、デザインに応じて5種類揃えたセット。
収録ファイル形式: PSD |
ブログやウェブサイトの記事一覧ページを想定し、カードレイアウトを採用したデザイン。
収録ファイル形式: PSD |
ブログ投稿ページを想定したレイアウトで、グリッドに沿って並べられたデザインは参考に。
収録ファイル形式: Sketch |
写真と文字テキストのみで表現された、シンプルなウェブコンセプト。
収録ファイル形式: Sketch |
さまざまなモバイルアプリに対応できる、シンプルで使い勝手の良いUIコンポーネント集。
収録ファイル形式: Sketch | Sketch
美しいグラデーションカラーを採用し、数値や統計などを表示するUIコンポーネントが中心に揃います。
収録ファイル形式: Sketch |
サムネイル@ : iOS11 App Store GUI (Sketch Freebie) by Jakt – Dribbble
