Advertisement

 

Webサイトやブログを閲覧するときに必要となる、ボタンや検索ボックスなどのUI(略: User Interface)素材。

サイトデザインの邪魔をせずに、読者ユーザーの目にもとまりやすいデザインを選ぶことが重要ではないでしょうか。

 

海外デザインブログNoupeで、Webサイト制作で活用したいPhotohsop無料UIセットを20個まとめたエントリー「20 Free Top Shelf UI Kits for Web Designers」が公開されていたので、今回はご紹介します。

統一感のあるデザインパーツを利用することで、よりわかりやすく、伝えやすいWebサイトをつくってみてはいかがでしょう。

 

 

詳細は以下から。

 

 

Webデザインのアクセント、Photoshop用UIデザイン素材まとめ

 

Soft UI Kit

目にもやさしい水色をベースに1px単位でデザインされた無料UIセット、PSD素材をダウンロード可能なのでテキスト変更なども簡単。

 

 

Transparent Glass UI

パーツの背景を透かしたガラス風UIデザインをまとめたUIキット素材。

 

 

Got Wood? UI Design Elements

ウッドテクスチャを利用したユニークなUIデザイン素材、参照元サイトでEメールアドレスを入力することでダウンロード可能となっています。

 

 

Black UI Kit

ダーク系Webデザインを制作するときに利用したいUI素材で、水色ネオンが印象的なボタンやボックスデザインが一通り揃っています。

 

 

Black UI Kit

こちらもダーク系ウェブサイトとの相性が良さそうな立体的なボタンデザイン、スタイリッシュなグラデーションが表現されています。

 

 

Moonify UI

ほどよいメタリック感を表現したUIデザイン素材で、スタイリッシュなデザインを完成させる事ができそうです。

 

 

Dark UI Element Set

グランジテクスチャ素材を利用することで質感を高めたUIキット、紫と黒のコントラストがきれい。

 

 

Web Elements

レトロ、ビンテージ風味の色使いでデザインされたダーク系ウェブUI素材。

 

 

Snow Modern UI Kit

すっきりとしたデザインが印象的な雪をモチーフにデザインされたUI素材キット。ホバー時のやわらかいネオンなどユーザーに配慮したデザインとなっています。

 

 

Clean and Sexy Form Elements

枠線に灰色を使ったシンプルデザインが魅力的なボタン素材などが揃ったUIデザインパーツ。

 

 

Web Kit Interface Layout Pack

Webデザイン制作で必要であろうデザインパーツを一通り揃え、カラフルな6色から選択可能となっています。

 

 

DD Freebie – UI Kit

ダーク系でよく利用されるネオン風ボックスシャドウを白ベースでデザインしたUI素材キット。

 

 

Light UI PSD

iTunesで利用されている繊細なグラデーションを使ったナビゲーションバーやボタンデザインをまとめて収録。

 

 

E-Commerce Steps UI

ショッピングサイトの会員登録やお届け先入力など、面倒な作業をステップごとに表示するUIデザイン素材。

 

 

Surface iPhone UI Kit

ざらざらとしたノイズテクスチャを組み合わせたiPhone用UIデザインキット。アプリ制作などにも利用することができそうです。

 

 

画像を使わないCSSによるUIデザインまとめ

 

最近のHTML5やCSS3などの進化によって、今までは画像を使わなければ難しかったデザインもCSSのスタイリングのみで完成させている場合があります。

参照元サイトではソースごとダウンロード可能となっていますので、Web制作の参考にいかがでしょう。

ブラウザによっては対応してい場合もありますの利用するときは確認する必要があります。

 

Glowformデモページ | ダウンロード

フォームの周りをネオングラデーションがアニメーションするCSS3によるスタイリング、デモページがわかりやすいかもしれません。

 

 

UI Kit (デモページ | ダウンロード

ほとんど(チェックマークとグラデーション部分以外)画像を利用せずにCSSのみでデザインされたUIデザイン。

 

 

Create a Stylish Contact From with HTML5 & CSS3デモページ | ダウンロード

はじめにPhotoshopでデザインしていますが、HTML5とCSS3のみでデザインされたコンタクトフォーム用UIデザイン。

 

 

ステップ順にスライドする会員登録、ログイン画面を作成する方法デモページ | ダウンロード)

HTML5とCSS3で作成された、ショッピングサイトなど会員登録やお届け先入力など作業量の多い部分をスライダーで細かく分別。

入力ミス時のアニメーションなどもスタイリングされています。

 

 

スムーズなスライドが魅力的なステップ別ログインフォームのつくり方デモページ | ダウンロード

こちらはjQueryが必要となりますが、ショッピングサイトなどに活用できそうだったのでメモとして。

入力ミスがある場合に分かりやすくアイコンで表示した親切設計がナイス。

 

 

apple社のナビゲーションメニューバーをHTML5とCSS3でデザインする方法デモページ | ダウンロード

タイトルのままとなりますが、グラデーションまで忠実に再現してしまっています。ブラウザによって表示されない場合があるのでご注意ください。

 

 

CSS3でスタイリッシュなコンタクトフォームをデザインする方法デモページ | ダウンロード

1px単位でデザインされたリッチなUIコンタクトフォーム、ステップごとに分かりやすく解説されているので、他の色で作成する際に参考によいかもしれません。

 

 

ボタン関連のUIデザインパーツは以下のエントリーからどうぞ。CSS3のみで実装可能なボタンUIパーツも一緒にまとめています。

クリックしたくなる「ボタン」デザインのPHOTOSHOP無料PSD素材50個まとめ

 

[参照元 : 20 Free Top Shelf UI Kits for Web Designers – Noupe]

[参照元 : Top 10 CSS3 Forms Tutorials – Cats Who Code]