Advertisement

 

 

ウェブサイト制作をするときに重要なプロセスのひとつとして使用するボタンなどのUIデザインパーツの作成があります。

効率的にウェブサイト制作を行うには、テキスト、サイズなどを編集可能な無料UIデザインキットを利用してみてはいかがでしょう。

 

海外デザインブログSpeckyboy Design Magazineで、そのままウェブサイト制作で利用することが可能な無料ウェブUIキットを50個まとめたエントリー「50 Free PSD UI Kits and Templates for Web Designers」が公開されていたので、今回はご紹介します。

 

ダウンロードした素材をスタンプ感覚で簡単にモックアップを作成することもできますし、細かい部分までデザインされた素材を利用することでクリエイティブなデザインを完成させることができます。

どれもPhotoshopで編集可能なPSDファイルでダウンロード可能となっており、パーツごとにジャンル分けしているのでお気に入りのデザインアイテムを探してみてはいかがでしょう。

 

 

詳細は以下から。

 

 

無料ダウンロード可能、ウェブサイトに使えるデザインUIキットまとめ

 

GUIコンプリートセット

 

Light UI PSD

淡いグラデーションを利用したapple風ウェブUIデザインをまとめた無料素材キットのひとつで、パンくずリストやボタン、ツールチップ、動画プレイヤーなど統一性のあるデザインが揃っています。

 

 

Simple UI Elements

ザラザラとした質感の壁紙に合わせてデザインされた立体的な無料UIデザインキット。

どんなデザインにも合わせやすい色使いが魅力的。

 

 

Apple Styled UIElements

itunesなどで利用されているapple風UIデザインを忠実に再現した無料キットで、やさしい色使いのグラデーションを利用しています。

 

 

Bloom UI Kit

こちらもapple風UIスタイルをパロディしたデザイン素材キット。

 

 

Spring GUI

名前の通り「春」を感じるさわやかな緑色のGUIデザインが特長の無料素材キット。

ボタンも通常、ホバー、アクティブ時の3種類がそれぞれ用意されています。

 

 

Web Elements

レトロ、ビンテージな印象を与える色使いでそれぞれデザインされた素材パーツをまとめた無料セット。

 

 

UI for Japan

「日本用UIデザイン」に特化したデザインパーツで、清潔感のある白色を中心にデザインされています。

 

 

Small UI Set

利用できるテーマデザインを選ばないシンプルなボックス、ボタン、ラジオボタンなどを収録した素材セット。

 

 

Orange Interactive Elements

オレンジ色を基調に立体的なUIデザインパーツをまとめた素材セットのひとつで、必要なパーツが一通り揃っています。

 

 

 

ボタン、メニュー用PSDファイル

 

Dropdown and Standard Button Set with All States

カラフルにデザインされた3種類のボタンファイルのほかにドロップダウン用メニューボタンが用意されています。

 

 

Chunky 3D Web Buttons

10色の彩りゆたかなボタンデザインをそれぞれ3種類ずつデザインした素材セット。

 

 

Slick Modern Buttons PSD

9種類のバリエーション豊かなボタンデザインをまとめてダウンロード可能な無料素材セット。

 

 

Big Ass Button

つやつやとした質感で立体的にデザインされたボタンパーツで通常、アクティブ時の2スタイルを用意。

 

 

Simple Buttons PSD

6色でデザインされたそれぞれ色合いの異なるボタンデザインを合計30個まとめたお得な無料素材セット。

 

 

On/Off Switches and Toggles

iphone風のスライド式トグルデザインをやわらかい色使いでデザインした素材パーツ。

 

 

Dark Button navigation PSD

ダーク系ウェブサイトデザイン制作を行うときに利用したいボタンデザインと検索フォームをまとめた素材セット。

 

 

Simple Breadcrumbs

パンくずリストにスタイリングを適用したいときに便利なシンプルなデザイン素材。

 

 

Simple Dark Navigation Menu

ノイズエフェクトを適用した質感の高いダーク形ナビゲーションメニューバー用デザイン。

 

 

Simple Tabbed Navigation

上記デザインパーツと同じデザイナーさんが作成したホワイトバージョン用ナビゲーションメニュー素材。

 

 

Dark Button Navigation 2

縦型ナビゲーションメニューを利用するときに使いたいダーク形ナビゲーションメニューバー。

 

 

 

フォームエレメント用パーツ

 

Form Elemtns Styling

やさしい色使いでデザインされたフォーム用デザインUIパーツで、どんなデザインにもなじみやすいデザインが印象的。

 

 

Gray & White Form Elements

apple風UIデザインをモチーフに型押し(レタープレス)デザインでまとめられたフォーム用デザインパーツまとめ。

 

 

Grey Comment Form PSD

お問い合わせやコメントフォーム用デザインとして利用可能な立体的なUIデザインパーツ。

 

 

 

サインイン、ログインフォーム用パーツ

 

Sexy Sign-up Form

背景画像が透けて見えるセクシーなログインフォーム用PSD素材パーツ。

 

 

Sign-up Modal Box

ポップアップで表示されるサインアップ用フォームをデザインしたUIパーツセット。

 

 

User Registration

メタリックなデザインが特長的な個人情報登録用フォーム。

 

 

 

プログレスバー

 

Color Changing Progress Bar

進行状況によって色を変化させたカラフルなプログレスバーをデザインした素材キット。

 

 

Loading Bar by Stuart Regan

進行状況をツールチップで表示するシンプルなプログレスバー用デザインキット。

 

 

 

オーディオ、ビデオプレイヤー用パーツ

 

Audio/Video Interface Controls

モダンなデザインを使ったスタイリッシュなプレイヤー用素材パーツのひとつで、html5で組まれたサイトなどにいかがでしょう。

 

 

Sleek Video Player

再生ボタンなどの他に、音量調整用トグルやフルスクリーン表示用ボタンなどがあらかじめデザインされています。

 

 

 

その他のデザインパーツ

 

Custom Lightbox Skin

Lightboxを利用している方にオススメしたいスキン用PSDテンプレート素材のひとつ。

 

 

Clean Slideshow PSD

ウェブサイトにスライドショーを利用したいときに便利なスライドショー用PSDテンプレート素材で、影をつけることで立体的なデザインに仕上がっています。

 

 

Sleek Calendar

グラデーションを効果的に利用することで立体感を表現したカレンダー用PSDテンプレートファイル。

 

どれも自分で作成するとなると時間のかかりそうな素材が多く集められており、効果的に利用することでデザイン制作時間の短縮、節約にもなりそうですね。

 

[参照元 : 50 Free PSD UI Kits and Templates for Web Designers – Speckyboy.com]