ウェブサイトデザインはどのような手順で行いますか。
オンラインツールを使い複数人で共有したり、ウェブデザイン用スケッチノートを印刷し手書きしたり方法はさまざまですね。
ジャンルや運営規模などに関わらず、モックアップデザインパーツを利用することで時間の節約にもなります。
海外デザインブログSpeckyboy Design Magaineで、ウェブデザインのモックアップに便利なUIデザイン素材きっとを20個まとめたエントリー「20 Free Web UI Element Kits & Stencils」が公開されていたので、今回はご紹介します。
PhotoshopやIllustratorなどカテゴリーごとに分けてありますので、お好みに合わせてダウンロードしてみてはいかがでしょう。
詳細は以下から。
モックアップ用UIデザイン素材キットまとめ
Photoshop用ファイル
Modern Web UI Set (.psdファイル)
apple風のシンプルなモノクロUIデザイン素材キットのひとつ。
ナビゲーションメニューからドロップダウンメニュー、ボタン、スクロールバーなど必要なアイテムが一式揃っています。
Massive Web UI & Button Set (.psdファイル)
オレンジや青、緑、黄色など全７色のカラフルなデザインが特徴のUIデザイン素材。
ボタンやメニューデザインはもちろん、パン屑リスト、コメントフォームなど豊富なデザインに対応することができそうです。
サンプル画像が表示されませんが、ダウンロードは行うことができます。
Facebook GUI Free PSD (.psdファイル)
映画公開も決定し、日本においてもじわじわと人気が出ているfacebookをカスタマイズする素材キット。
アプリケーション画面すべてがレイヤーに分かれているので、簡単にオリジナルデザインを作成することができます。
Web Designer Toolkit (.psdファイル)
シンプルで機能性も高いボタンデザインなどに加え、コメントフォームなどもあらかじめデザインされています。
基本的セットなのでダウンロードしておくと時間の節約にもなりそうですよ。
Free Web UI Wireframe Kit (.psdファイル)
ラフカンプを作成するときに便利なモノクロのUIデザインパーツのひとつ。
シンプルなデザインなのでどんなコンテンツ、プロジェクトデザインにも利用することができそうです。
The All in One Web Elements Kit (.psdファイル)
グラデーションを利用した立体的なデザインパーツを４色（赤、青、緑、灰）でまとめた素材キット。
Flex Darskin UI (.psdファイル)
未来的な青いネオンを利用したデザインがユニークなUIデザイン素材のひとつ。
特にダーク系ウェブサイトデザインを考えている方などにオススメとなっています。
Browser Form Elements PSD (.psdファイル)
OSにWindows VistaとMac、ブラウザにFirefox 3とIE 7の画面をひとつずつレイヤーに分けたPhotoshop用psdファイル。
アイデア次第ではウェブデザイン以外にも利用することができるのではないでしょうか。
Web UI Treasure Chest (.psdファイル)
こちらは何度がご紹介した気もしますが、有名なデザインキットではないでしょうか。
ホームページやブログのアクセントになりそうなボタンや、オンラインショップなどで利用できるクカードアイコンなども豊富です。
Illustrator用ファイル
165 Vector Icons in 5 Colours (.ai, .jpg, .svgファイル)
ボタンや矢印記号などを中心としたUIデザインパーツを165個まとめた素材キット。
色違いで5種類あるので5色x165=825個、ということですね。
Free Sketching & Wireframing Kit (.ai, .eps, .pdf, .svgファイル）
手書きでデザインしているようなラフで直感的に利用することができそうな素材のひとつ。
ホームページやブログなどに取り入れたいと思う機能はほぼ収録されているのではないでしょうか。
Wireframe Symbols (.aiファイル)
ウェブサイトにおけるユーサビリティ面を考えるときに利用したいデザインパーツセットのひとつ。
タブメニューやテキストサイズなども一目で確認することができますよ。
Ominigraffle用ファイル
Omni GraffleはMac OS専用オンラインアプリケーションのひとつ。
ワイヤーフレーム作成に特化したサービスだけあって直感的な操作が魅力のひとつです。
ダウンロード、解凍したファイルをインストールされているフォルダより、~/Library/Application Support/OmniGraffle/Stencils/に格納すると追加用ファイルを使うことができます。
Macをお持ちの方は試してみるとよいかもしれません。
パソコンで利用されている基本UIデザインセットをまとめた素材キット。
twitter専用ステンシル素材キットのひとつで、アイコンからサイドバーに表示するウィジェットデザインなども同時に収録されています。
さきほどPhotoshop用PSDファイルをご紹介しましたが、こちらはOmniffle用となります。
その他のモックアップに便利な素材まとめ
今回まとめたデザインパーツを利用していろいろな形でモックアップデザインを完成させてみてはいかがでしょうか。
以下のエントリーもよろしかったら参考にしてみてはいかがでしょう。
ウェブデザインのワイヤーフレームに使えるPhotoshop関連のフリー素材キット27個まとめ
こちらのエントリーではPhotoshopで使えるPSDファイルを中心にUIデザイン素材をまとめています。
印刷可能、UIデザインのモックアップ用無料スケッチPDFファイルまとめ
手書きでモックアップをデザインするときに便利、どこにいても印刷するだけで利用できるのはうれしいですね。
ウェブデザインのワイヤーフレーム作成に使えるオンラインツール10選まとめ
複数人で行うプロジェクトや、クライアントとの打ち合わせなどで簡単にデザインを共有することができる、便利ツールをまとめています。
グリッドを使ったウェブレイアウトのデザイン方法＆具体的サンプル
最近多くのホームページで利用されているグリッドを利用したレイアウト方法について触れています。
[参照元 : 20 Free Web UI Element Kits and Stencils – Speckyboy Design Magazine]
