今回は絶対に気に入っていただける、便利でしかも無料のWeb UIとワイヤーフレームを50個もご紹介したいと思います。Webデザイナーは、Webサイトであろうとソフトウエアであろうとユーザーインターフェースモデルを生成する為に、常にいくつかの基本的なユーザーインターフェイス用を必要としています。その為に、ユーザーインターフェースを複製するのに便利なワイヤーフレームやUIデザインキットも必要としています。

50freewireframes WEB UI/ワイヤーフレーム50のお役立ちツール

こちらのアーティクルではプロジェクトのLo-Fiイラストを作成する際に役立つであろう、Web用または携帯用のユーザーインターフェースキットを集めています。このコンパイルが気に入っていただけるとよいのですが・・・。何かご意見ご要望があれば是非お聞かせくださいね。

この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。

【無料】Web UI+ワイヤーフレームキットまとめ

Black UI Kit

Alex PatrascuによってデザインされたPSD UIキットで勿論無料です。ファイルは完璧にレイヤー化されており、非常に使い勝手よく出来ています。Webサイトやアプリを作る際に必要な共通要素をうまく押さえています。

webuikits1 WEB UI/ワイヤーフレーム50のお役立ちツール

Lion UI Kit

Lion UI Kitは最新OS Xの編集可能で完璧にレイヤー化されている要素を含んだ、手軽なPSDモックアップツールで、。

webuikits2 WEB UI/ワイヤーフレーム50のお役立ちツール

Small Blue UI Kit

ブルーをポイント色に使ったコンパクトなUIキットで、リミットセレクター、トグル、ボタン、ローディングバーなどを備えています。

webuikits3 WEB UI/ワイヤーフレーム50のお役立ちツール

Simple To-Do List

こちらの無料のPSDダウンロードは、とてもクリーンなデザインで編集も可能なシンプルTO-DOリストです。

webuikits4 WEB UI/ワイヤーフレーム50のお役立ちツール

Blaubarry UI Kit

Blaubarry UI Kitはとても便利なボタン、スライダー、スクロールバーやフォーム要素を含んだUIキットです。シェイプレイヤーのサイズ変更や編集も容易に出来ます。

webuikits5 WEB UI/ワイヤーフレーム50のお役立ちツール

Minimalistic UI kit the color Google+

Google Plusはお好きですか?そのサービスが?それともインターフェースが?いや、ひょっとしたらそれ以外の何かでしょうか・・・。

webuikits6 WEB UI/ワイヤーフレーム50のお役立ちツール

Flex 3 Stencil

こちらのステンシルセットはFlex3のスタイルガイドからパネル、データグリッド、ボタン、フィールド、リンク、トグル、データピッカー、ツールチップ、エラー、メニュー、スクロール、アコーディオン、タブ、リストなど全てのFlexコンポーネントを含んでいます。

webuikits7 WEB UI/ワイヤーフレーム50のお役立ちツール

Sleek UI Elements

Webサイトを作るにせよ携帯アプリを作るにせよ、よくデザインされたUIエレメントはユーザーエクスペリエンスへの重要なカギとなります。こちらのPSDは近代的で洗練されたスタイルの有用なエレメントが多数含まれています。

webuikits8 WEB UI/ワイヤーフレーム50のお役立ちツール

GMUI SlixUI

Slix UI controlsはWebデザイナーやアプリデザイナーの負担を軽減する為に作られたセットです。全体的にアプリ中心に作られていますが、勿論Web用に使っても支障をきたしません。インターフェースを構築する際に必要な項目の大部分を、きっと解決してくれると思いますよ。

webuikits9 WEB UI/ワイヤーフレーム50のお役立ちツール

Solid UI Kit

こちらのキットはSixbaseのAlvin Thongさんによって作成された斬新なデザインです。ダウンロードにはよく整理され簡単に編集可能なPSDファイルが含まれています。

webuikits10 WEB UI/ワイヤーフレーム50のお役立ちツール

TRAK

オープンソースのTRAK enterprise architecture frameworkを使用することにより生産される、アーキテクチャ記述のViewを有効化する定型のシェイプとコネクターを提供しています。

webuikits11 WEB UI/ワイヤーフレーム50のお役立ちツール

Simple UI element pack

とてもシンプルなキットで、勿論無料です。是非ご利用ください♪

webuikits12 WEB UI/ワイヤーフレーム50のお役立ちツール

Eclipse GUI Design

EclipseとMac OS X用のウィジェットです。

webuikits13 WEB UI/ワイヤーフレーム50のお役立ちツール

Interactive Sketching Notation 1.1

こちらのInteractive Sketching NotationはOmniGraffle用の最新のステンシルです。手書き風なのが特徴です。

webuikits14 WEB UI/ワイヤーフレーム50のお役立ちツール

Watchguard

こちらは「.gstencil」に変換可能なVisioステンシルで、いくつかのウォッチガード、セキュリティアプライアンス/ファイアウォールオブジェクトが含まれています。

webuikits15 WEB UI/ワイヤーフレーム50のお役立ちツール

Web Sketch Cursors

CSS3に準拠した、Web UXデザインのモックアップ用の手書き風カーソルです。デフォルト、クロスヘア、ポインタ、移動、テキスト、待ち時間、ヘルプ、動作中、不許可、垂直テキストや矢印等を含みます。

webuikits16 WEB UI/ワイヤーフレーム50のお役立ちツール

Wireframe Magnets

こちらの「自分で作ろう♪」型マグネットテンプレートは、Konigi wireframe stencilsを基にしており、ホワイトボードのプロトタイプに適していそうな3枚の要素から成り立ちます。単純にダウンロードしてPDFファイルをマグネットシートに印刷し、切り取ってお使いください。もし水性マーカーなどを使用する場合は必要に応じてラミネート加工を施してください。

webuikits17 WEB UI/ワイヤーフレーム50のお役立ちツール

iOS Design Stencils for OmniGraffle

iOS Design Stencilsは現在Githubで管理されているので、必要に応じてブックマークやリンクを更新してiPhone4用など最新バージョンをチェックしてみてください。




webuikits18 WEB UI/ワイヤーフレーム50のお役立ちツール

Facebook Applications

Facebookに関連した膨大なコレクションは、Facebookアプリケーションのワイヤーフレームを作成する際に役立つこと間違いなしです。

webuikits19 WEB UI/ワイヤーフレーム50のお役立ちツール

Mac OS X Interface 2

Leopardyなインターフェースステンシルキットです。ピクセルの精度を維持しながら、素晴らしく柔軟性の高いテーブルを実現します。

webuikits20 WEB UI/ワイヤーフレーム50のお役立ちツール

Simple UI Elements

Simple UI Elementsはクリーンでよく整理されたPSDファイルで、Webデザインにもアプリデザインにも共通するユーザーインターフェース要素を提供しています。

webuikits21 WEB UI/ワイヤーフレーム50のお役立ちツール

Blue Modern Web UI

こちらのBlue Modern Web UIもクリーンでよく整理されたPSDファイルで、ボタンやフォームの要素を提供しています。

webuikits22 WEB UI/ワイヤーフレーム50のお役立ちツール

Web kit interface layout pack

アイコン、ボタン、矢印、メニューバー、Webボックス、UIスクロールバーチェックボックスなどのWeb要素を提供している無料のキットです。

webuikits23 WEB UI/ワイヤーフレーム50のお役立ちツール

Wireframe Shapes

こちらはOmniGraffle version 5.x (Mac OS X)でワイヤーフレーム(Lo-FiのWebページ回路図)を作成する為のシェイプセットです。

webuikits24 WEB UI/ワイヤーフレーム50のお役立ちツール

Controls

ControlsはYahoo! Design Pattern Library内のDesign Stencil kitからダウンロードが可能です。

webuikits25 WEB UI/ワイヤーフレーム50のお役立ちツール

Sqetch, an Illustrator Wireframe Toolkit

Sqetchはコンパクトなイラレツールキットです。ブラウザ、iPad縦置き、iPad横置き、スマートフォン、GUIベースの要素、フォーム要素など対応しています。

webuikits26 WEB UI/ワイヤーフレーム50のお役立ちツール

Sleek Video Player

Sleek Video Playerは3種類のインターフェースを持つPSDファイルです。独自のカスタムプレイヤーを作成するにはもってこいなキットです。

webuikits27 WEB UI/ワイヤーフレーム50のお役立ちツール

Free Sketching & Wireframing Kit

こちらはスケッチやワイヤフレーム用要素の無料セットです。フォーム、アイコン、インジケーター、フィードバックメッセージ、ツールチップ、イメージプレースホルダー、スライダーやナビゲーション要素を提供しています。




webuikits28 WEB UI/ワイヤーフレーム50のお役立ちツール

Modern Web UI Set

洗練された最新のWeb UIセットで、Webデザイン、アプリケーション、プリント用に使用することが出来ます。

webuikits29 WEB UI/ワイヤーフレーム50のお役立ちツール

Free Full Layered Facebook GUI PSD Kit

このキットはFacebookアプリケーションUIとFacebookファンページのプロトタイプのスピードアップを最大の目的として作られました。

webuikits31 WEB UI/ワイヤーフレーム50のお役立ちツール

Eclipse Stencil for OmniGraffle

こちらのステンシルはOmniGraffleでEclipse(ウィザード)ダイアログのプロトタイプを簡単に作成することが出来ます。

webuikits32 WEB UI/ワイヤーフレーム50のお役立ちツール

Browser Form Elements PSD

MacのFirefox 3とVistaのIE7用のフォーム要素がPSDファイルに含まれています。

webuikits33 WEB UI/ワイヤーフレーム50のお役立ちツール

WEB UI Treasure Chest

こちらのレイヤー化されたPSDファイルはファイルのほとんどが編集可能でWebデザイン用の100以上のエレメントを保有しています。

webuikits34 WEB UI/ワイヤーフレーム50のお役立ちツール

Web Form Elements

Volume1には、Photoshop形式のフォーム用のWebユーザーインターフェイス要素が多数含まれています。

webuikits35 WEB UI/ワイヤーフレーム50のお役立ちツール

【無料】モバイル関連のGUI要素

iUnits

iUnitsはApple社のiPhone、iPad、NANOなどのアイコンデザイン用のPSDを提供しています。それぞれのアイコンは全てレイヤー化されておりカスタマイズ可能です。

webuikits36 WEB UI/ワイヤーフレーム50のお役立ちツール

Android 2.3.4 GUI PSD

こちらは完璧にベクトル化されたAndroid用のGUI PSDです。テンプレートはデフォルトのAndroidスキンに基づき、最も一般的な画面サイズ(ノーマル)と画素密度(高)に対応しています。

webuikits37 WEB UI/ワイヤーフレーム50のお役立ちツール

iPad GUI PSD – Version 2

こちらのPSDにはPOC(概念実証)や生産準備資産をデザインする為に必要な要素が全て含まれています。

webuikits38 WEB UI/ワイヤーフレーム50のお役立ちツール

iPad Sketch Elements AI

共通なiPadの要素を手書き風に描いたコレクションで、カスタム・ワイヤーフレーム・スクリーンのフローを簡単かつ迅速にモックアップすることが出来ます。

webuikits39 WEB UI/ワイヤーフレーム50のお役立ちツール

iPhone Sketch Elements AI

こちらは上記とほぼ同じですが、iPhone用のコレクションです。

webuikits40 WEB UI/ワイヤーフレーム50のお役立ちツール

Palm Pre GUI PSD

こちらはデザイナーならみんな使い慣れているフォトショップを使って、洗練されたコンセプトの開発を速めてくれるPSDです。

webuikits41 WEB UI/ワイヤーフレーム50のお役立ちツール

iPhone PSD Vector Kit

iPhone PSD Vector Kitは幾つかのボタン用要素だけでなく、iPhone用の6種類のインターフェースオプションも含有しています。

webuikits42 WEB UI/ワイヤーフレーム50のお役立ちツール

iPhone UIKits light remake

このPSDにはスイッチコントローラー、セグメントコントローラー、ページコントローラー、スライダー、シンプルなテキストフィールド、そして検索ボックスとボタンが含まれています。

webuikits43 WEB UI/ワイヤーフレーム50のお役立ちツール

iPhone 4 PSD : HD

タイトルがすべてを物語っていますが、より現実的でかつ最高解像度を誇るiPhone 4用のPSDで、3000x4000のフォトショップドキュメントです。

webuikits44 WEB UI/ワイヤーフレーム50のお役立ちツール

iPhone GUI PSD Version 4

このバージョンのテンプレートは徹底的に作り直されました。iOS4に基づきPOC(概念実証)や生産準備資産をデザインするのに必要な要素を含んでいます。

webuikits45 WEB UI/ワイヤーフレーム50のお役立ちツール

iPad GUI PSD Kit

こちらのセットはフルサイズのグラフィックだけではなく、256px、128px、64pxのアイコンサイズも含みます。

webuikits46 WEB UI/ワイヤーフレーム50のお役立ちツール

iPad Stencil for Omnigraffle

このセットは背景、タイトルバー、ボタン、セレクター及びiPhoneの他のUI要素等を含んでいます。リストやタイトルバー、ボタン、スクロールウィールのテキストはいずれも編集可能です。

webuikits47 WEB UI/ワイヤーフレーム50のお役立ちツール

All elements of Maemo 5 GUI in PSD

こちらのPSDファイルにはMaemoプラットフォーム用のGUI要素テンプレートが含まれています。Maemoデバイス上で動作するGUIアプリケーションをプロトタイプするには極めて必要なものです。

webuikits48 WEB UI/ワイヤーフレーム50のお役立ちツール

Android 2.2 GUI

このキットはSmashing MagazineのAndroid 1.5 GUI kitに基づいており、既にAndroid 2.2 (Froyo)の機能が更新されています。

webuikits49 WEB UI/ワイヤーフレーム50のお役立ちツール

HTC G2 .PSD

HTC携帯電話モデルの高解像度インターフェースです。

webuikits50 WEB UI/ワイヤーフレーム50のお役立ちツール

Samsung i9000 Galaxy S .PSD

非常に細かいところまで徹底したサムソンの携帯電話モデル用のインターフェースです。

webuikits51 WEB UI/ワイヤーフレーム50のお役立ちツール

まとめ

今回はデザイナーのみなさんが、より時間短縮し簡単にそしてスムーズな方法でWebや携帯開発初期のプロトタイプステージを作成する有益なリソースをご紹介いたしました。こちらのアーティクルでご紹介した全てのデザインキットは編集可能であり、多数のフォーマットがご利用いただけます。どんなフォーマットがお好みであろうと、きっと今回のキットの中から役立つものが見つけられるのではないかと思います。

こちらのアーティクルに対する感想や、普段使っているお気に入りのキットなどがあれば是非お知らせください。それともし他に役立つデザインキットをご存知でしたら、そちらも是非教えてくださいね。