Advertisement

20webuidesignkit

 

ウェブサイトデザインはどのような手順で行いますか。

オンラインツールを使い複数人で共有したり、ウェブデザイン用スケッチノートを印刷し手書きしたり方法はさまざまですね。

ジャンルや運営規模などに関わらず、モックアップデザインパーツを利用することで時間の節約にもなります。

 

海外デザインブログSpeckyboy Design Magaineで、ウェブデザインのモックアップに便利なUIデザイン素材きっとを20個まとめたエントリー「20 Free Web UI Element Kits & Stencils」が公開されていたので、今回はご紹介します。

PhotoshopやIllustratorなどカテゴリーごとに分けてありますので、お好みに合わせてダウンロードしてみてはいかがでしょう。

 

 

詳細は以下から。

 

 

モックアップ用UIデザイン素材キットまとめ


 

Photoshop用ファイル

 

Modern Web UI Set (.psdファイル)

apple風のシンプルなモノクロUIデザイン素材キットのひとつ。

ナビゲーションメニューからドロップダウンメニュー、ボタン、スクロールバーなど必要なアイテムが一式揃っています。

web_ui_01

 

 

Massive Web UI & Button Set (.psdファイル)

オレンジや青、緑、黄色など全7色のカラフルなデザインが特徴のUIデザイン素材。

ボタンやメニューデザインはもちろん、パン屑リスト、コメントフォームなど豊富なデザインに対応することができそうです。

サンプル画像が表示されませんが、ダウンロードは行うことができます。

web_ui_02

 

 

Facebook GUI Free PSD (.psdファイル)

映画公開も決定し、日本においてもじわじわと人気が出ているfacebookをカスタマイズする素材キット。

アプリケーション画面すべてがレイヤーに分かれているので、簡単にオリジナルデザインを作成することができます。

web_ui_16

 

 

Web Designer Toolkit (.psdファイル)

シンプルで機能性も高いボタンデザインなどに加え、コメントフォームなどもあらかじめデザインされています。

基本的セットなのでダウンロードしておくと時間の節約にもなりそうですよ。

web_ui_15

 

 

Free Web UI Wireframe Kit (.psdファイル)

ラフカンプを作成するときに便利なモノクロのUIデザインパーツのひとつ。

シンプルなデザインなのでどんなコンテンツ、プロジェクトデザインにも利用することができそうです。

web_ui_04

 

 

The All in One Web Elements Kit (.psdファイル)

グラデーションを利用した立体的なデザインパーツを4色(赤、青、緑、灰)でまとめた素材キット。

web_ui_17

 

 

Flex Darskin UI (.psdファイル)

未来的な青いネオンを利用したデザインがユニークなUIデザイン素材のひとつ。

特にダーク系ウェブサイトデザインを考えている方などにオススメとなっています。

web_ui_18

 

 

Browser Form Elements PSD (.psdファイル)

OSにWindows VistaとMac、ブラウザにFirefox 3とIE 7の画面をひとつずつレイヤーに分けたPhotoshop用psdファイル。

アイデア次第ではウェブデザイン以外にも利用することができるのではないでしょうか。

browser_form_elements

 

 

Web UI Treasure Chest (.psdファイル)

こちらは何度がご紹介した気もしますが、有名なデザインキットではないでしょうか。

ホームページやブログのアクセントになりそうなボタンや、オンラインショップなどで利用できるクカードアイコンなども豊富です。

web_ui_19

 

 

Illustrator用ファイル

 

165 Vector Icons in 5 Colours (.ai, .jpg, .svgファイル)

ボタンや矢印記号などを中心としたUIデザインパーツを165個まとめた素材キット。

色違いで5種類あるので5色x165=825個、ということですね。

Icon_Set_1_green_small

 

 

Free Sketching & Wireframing Kit (.ai, .eps, .pdf, .svgファイル)

手書きでデザインしているようなラフで直感的に利用することができそうな素材のひとつ。

ホームページやブログなどに取り入れたいと思う機能はほぼ収録されているのではないでしょうか。

web_ui_08

 

 

Wireframe Symbols (.aiファイル)

ウェブサイトにおけるユーサビリティ面を考えるときに利用したいデザインパーツセットのひとつ。

タブメニューやテキストサイズなども一目で確認することができますよ。

wireframe510px1

 

 

Ominigraffle用ファイル

 

OmniGraffle-overview-hero-1

Omni GraffleはMac OS専用オンラインアプリケーションのひとつ。

ワイヤーフレーム作成に特化したサービスだけあって直感的な操作が魅力のひとつです。

 

ダウンロード、解凍したファイルをインストールされているフォルダより、~/Library/Application Support/OmniGraffle/Stencils/に格納すると追加用ファイルを使うことができます。

Macをお持ちの方は試してみるとよいかもしれません。

 

Flex 3 Stencil

パソコンで利用されている基本UIデザインセットをまとめた素材キット。

web_ui_13

 

 

Twitter Widget Stencil

twitter専用ステンシル素材キットのひとつで、アイコンからサイドバーに表示するウィジェットデザインなども同時に収録されています。

web_ui_14

 

 

Facebook Applications

さきほどPhotoshop用PSDファイルをご紹介しましたが、こちらはOmniffle用となります。

web_ui_17a

 

 

その他のモックアップに便利な素材まとめ


 

今回まとめたデザインパーツを利用していろいろな形でモックアップデザインを完成させてみてはいかがでしょうか。

以下のエントリーもよろしかったら参考にしてみてはいかがでしょう。

 

ウェブデザインのワイヤーフレームに使えるPhotoshop関連のフリー素材キット27個まとめ

こちらのエントリーではPhotoshopで使えるPSDファイルを中心にUIデザイン素材をまとめています。

27uidesignkit1

 

印刷可能、UIデザインのモックアップ用無料スケッチPDFファイルまとめ

手書きでモックアップをデザインするときに便利、どこにいても印刷するだけで利用できるのはうれしいですね。

printpdf1

 

ウェブデザインのワイヤーフレーム作成に使えるオンラインツール10選まとめ

複数人で行うプロジェクトや、クライアントとの打ち合わせなどで簡単にデザインを共有することができる、便利ツールをまとめています。

10wireframetool

 

グリッドを使ったウェブレイアウトのデザイン方法&具体的サンプル

最近多くのホームページで利用されているグリッドを利用したレイアウト方法について触れています。

gridbasedlayout2

 

[参照元 : 20 Free Web UI Element Kits and Stencils – Speckyboy Design Magazine]