UIデザインでサイト制作フローを改善!無料ダウンロードできる素材と使い方まとめ

latestui2016feb-top

 

ウェブサイトやモバイルアプリの骨組みとも言えるプロトタイプは、ウェブデザインを作成するうえで重要な要素のひとつです。しかしもっと手軽に、手早く作成できたらと思ったことはないでしょうか。

 

 

そんなときは、豊富なコンポーネント素材の揃った、UIデザインキットを利用してみましょう。制作時間を短縮することで、ワークフローを改善できるだけでなく、同時にプロの本格的なデザインテクニックを学ぶこともできます。また、以下で紹介するオンラインツールを利用することで、ページ遷移を含めた本格的なプロトタイプを、クリック操作のみで制作することができます。

 

 

 

詳細は以下から。

 

 

 

UIデザインってなんだろう?

 

UI キットは、デザイン制作に役立つコンポーネント(ユーザーインターフェース素材)を揃えたファイルで、通常PSD や Ai, Sketch ファイルなどで収録されています。多くの素材は、バリエーション豊富なカラーリングに、自分のデザインを導入しやすいように、意図的に制作されています。

 

andrew_mcgibbon_animals_small (1)

 

プロジェクトに沿った UI デザインキットを利用することで、ナビゲーションやパンくず、CTA、アイコンなど、制作でしばしば問題となるパーツなどがあらかじめ収録されているので、パズル感覚でワイヤーフレームを組むことができます。

 

 

どうやって制作時間を短縮するの?

800-x-600-mkr_fix

 

たとえば、何でも揃うスーパー店を見つけたと考えてみましょう。必要なほとんどの食材が一度に揃います。もしそれぞれの食材を、違うお店で別々に購入しなければいけないとすると、時間がかかってしまうでしょう。

 

 

UI キットの鍵となるポイントは、さまざまなプロジェクトに利用できるので、ゼロからコンポーエントを探す手順をスキップできるという点です。

 

 

 

プロのデザインから学ぼう。

learn-from-roots (1)

 

ほとんどの UI キットは、コンポーネントやカテゴリー別に、フォルダ分けされており、各レイヤーはスマートオブジェクト機能や、レイヤースタイルを利用することで、複製コピーしやすいよう工夫されています。ファイル形式をじっくり観察することで、どのようにデザインが作成されているのか、本格的なエフェクトを学ぶことができるでしょう。

 

 

直感的で、統一感のあるプロトタイプ制作に。

 

複数人でプロジェクトを進めていて、デザインのフレームワークを共有、フィードバックしたり、クライアントにサイト制作前にプロトタイプを披露したいときは、無料で利用できるオンライン・プロトタイプツールを利用してみましょう。

 

mockup-1 (1)

 

Invision は、PhotoshopやIllustrator、Sketchなどで作成したファイルを利用して、オンライン上でプロトタイプを作成することができるサービスです。

 

 

ファイルの読み込みは、ローカルフォルダのほかに、Dropbox や Google ドライブとも連携でき、4種類に機能を絞った分かりやすいツールで、アニメーション付きページ推移などにも対応したプロトタイプを、手軽に作成することができます。また作成しているファイルを、他のメンバーと共有し、リアルタイムで手描きのフィードバックをもらったり、作成したプロトタイプ用貼り付けコード発行、バージョン管理など便利な機能が揃います。

 

 

以下は実際に、Invision を利用して作成したプロトタイプです。ファイルを取り込んでから、15分ほどで完成しました。自動保存機能付きなので、デザイン途中から続けることができるのも、うれしいポイントのひとつです。スクリーン画面をクリックすると、操作できるポイントが青枠で表示されます。

 

 

 

無料ダウンロードできる、UIコンポーネント素材まとめ

 

無料ダウンロードでき、カスタマイズもしやすく、手軽にプロトタイプを作成できる UI コンポーネントをまとめています。これらのフリー素材を利用して、快適な制作フローを実現してみましょう。

 

 

Kama iOS UI Kit (PSD, Sketch)

使い勝手の良いモバイル向けUIデザインキットで、フレームワークにも最適なシンプルさが特長です。

dribbble

 

 

 

Fair UI Kit (PSD, Sketch)

手軽な使いやすいさに、プロジェクトを素早くデザインに仕上げることができるUIコンポーネントセット。

01_Fair_UI_Kitfair-uikit

 

 

 

Elton UI Kit (PSD)

ブログやオンラインショップ、企業サイトなど多くのプロジェクトに活用できる、ウェブサイト制作に必要なコンポーネントを揃えた、ウィジェット素材が揃います。

elton-uikit-topelton-uikit

 

 

 

Mobile UI Element (PSD)

青色を中心とした、鮮やかで美しいグラデーションがポイントの、モバイル向けUIデザインキット。

01_Mobile_UI_Element

 

 

 

Routes UI Kit (PSD, Sketch)

旅行トラベル関係を想定し、100種類のUIコンポーネントを揃えています。コンセプトを手早くワイヤーフレーム、モックアップ化することができ、作業効率もアップ。

routes-ios-ui-kit-1

 

 

 

Reader UI Kit (PSD)

グリッドやサムネイルなどを利用した、コンテンツ一覧表示レイアウトが素敵な、ダーク系UIキット。シンプルでカスタマイズ性も◎。

mobile-app-free-ui-kit-template-12

 

 

 

Elegance (PSD, Sketch)

ファッションやオンラインショップを想定した UI デザインで、色の変更も自由なベクター素材。

elegance-uikit

 

 

 

Colorado Minimal UI Pack (PSD, Ai)

レトロな配色を利用した、60種類のコンポーネント素材を揃えた、ワイヤーフレーム作成に使いたいGUIキット。

colorado-minimal-ui-kit-60-items

 

 

 

Moon Wireframe Kit

50種類のワイヤーフレームを収録した、モノクロでどんなプロジェクトにも活用できる汎用性のある素材。

moon-wireframe-kit

 

 

 

Anri Kit – Photo Editing Kit (Sketch)

写真加工、レタッチ機能を想定したモバイルアプリのコンセプトUIデザインで、スタイリッシュな雰囲気と使いやすさにもこだわりが。

mobile-app-free-ui-kit-template-02

 

 

 

Anri Kit – Ecommerce Free (Sketch)

上記アイテムのオンラインショップ向けカテゴリー作成用UIキット。

mobile-app-free-ui-kit-template-08

 

 

 

UI Presentation Kit

完成したUIデザインをより魅力的に仕上げる、プレゼンテーションなどにも最適なモックアップ素材。

004-o

 

 

 

Fashion UI Kit (Sketch)

モダンでスタイリッシュさを追求した、Eコマース向けUIデザインキット。

fashion-ui-kit

 

 

 

Sign-in: 50 iOS Screens (Sketch)

iPhone向けiOS 端末を想定した、サインアップとログインページに特会した、合計50種類の画面スクリーンが作成されています。

sign_in_project_by_jardson_almeida (1)

 

 

 

app-ui-kit-for-sketch

 

 

 

Chat UI Kit (PSD, Sketch)

カラフルな全5色のカラーリングに、チャット機能を想定した、80種類以上のコンポーネントと60個のテンプレートを揃えています。

chat-ui

 

 

 

Chameleon (PSD, Sketch)

さまざまなコンポーネントを揃えた、10ページのモバイルアプリ向けUIデザイン。

chameleon-uikit

 

 

 

デザイナーが今年参考にしたい、Web&モバイルの無料UIデザイン30個まとめ

トレンドをうまく取り入れた、高品質なUIコンポーネントに絞ってまとめています。

best-of-ui-2015-top (1)

 

 

サムネイル@ : Weeny iOS UI Kit – Free Sample – Dribbble