Webサイトやブログを閲覧するときに必要となる、ボタンや検索ボックスなどのUI(略: User Interface)素材。
サイトデザインの邪魔をせずに、読者ユーザーの目にもとまりやすいデザインを選ぶことが重要ではないでしょうか。
海外デザインブログNoupeで、Webサイト制作で活用したいPhotohsop無料UIセットを20個まとめたエントリー「20 Free Top Shelf UI Kits for Web Designers」が公開されていたので、今回はご紹介します。
統一感のあるデザインパーツを利用することで、よりわかりやすく、伝えやすいWebサイトをつくってみてはいかがでしょう。
詳細は以下から。
Webデザインのアクセント、Photoshop用UIデザイン素材まとめ
目にもやさしい水色をベースに1px単位でデザインされた無料UIセット、PSD素材をダウンロード可能なのでテキスト変更なども簡単。
パーツの背景を透かしたガラス風UIデザインをまとめたUIキット素材。
ウッドテクスチャを利用したユニークなUIデザイン素材、参照元サイトでEメールアドレスを入力することでダウンロード可能となっています。
ダーク系Webデザインを制作するときに利用したいUI素材で、水色ネオンが印象的なボタンやボックスデザインが一通り揃っています。
こちらもダーク系ウェブサイトとの相性が良さそうな立体的なボタンデザイン、スタイリッシュなグラデーションが表現されています。
ほどよいメタリック感を表現したUIデザイン素材で、スタイリッシュなデザインを完成させる事ができそうです。
グランジテクスチャ素材を利用することで質感を高めたUIキット、紫と黒のコントラストがきれい。
レトロ、ビンテージ風味の色使いでデザインされたダーク系ウェブUI素材。
すっきりとしたデザインが印象的な雪をモチーフにデザインされたUI素材キット。ホバー時のやわらかいネオンなどユーザーに配慮したデザインとなっています。
枠線に灰色を使ったシンプルデザインが魅力的なボタン素材などが揃ったUIデザインパーツ。
Webデザイン制作で必要であろうデザインパーツを一通り揃え、カラフルな６色から選択可能となっています。
ダーク系でよく利用されるネオン風ボックスシャドウを白ベースでデザインしたUI素材キット。
iTunesで利用されている繊細なグラデーションを使ったナビゲーションバーやボタンデザインをまとめて収録。
ショッピングサイトの会員登録やお届け先入力など、面倒な作業をステップごとに表示するUIデザイン素材。
ざらざらとしたノイズテクスチャを組み合わせたiPhone用UIデザインキット。アプリ制作などにも利用することができそうです。
画像を使わないCSSによるUIデザインまとめ
最近のHTML5やCSS3などの進化によって、今までは画像を使わなければ難しかったデザインもCSSのスタイリングのみで完成させている場合があります。
参照元サイトではソースごとダウンロード可能となっていますので、Web制作の参考にいかがでしょう。
ブラウザによっては対応してい場合もありますの利用するときは確認する必要があります。
フォームの周りをネオングラデーションがアニメーションするCSS3によるスタイリング、デモページがわかりやすいかもしれません。
ほとんど（チェックマークとグラデーション部分以外）画像を利用せずに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]
