Advertisement

29illustratordesignkit

 

ホームページやモバイルサイト、アプリなどのデザインを行うときに何を使いますか。

個人的にはPhotoshopを利用する機会が多いのですが、Illustratorを使ってデザインしてみてはいかがでしょう。

Illustratorでベクター素材を扱う場合、自由に拡大縮小することができることがポイントのひとつでもあります。

 

海外デザインブログSpeckyboy Design Magazineで、Illustratorを使ってウェブサイトやモバイルサイトをデザインするときに便利なフリー素材29個をまとめたエントリー「Illustrator Template Toolbox for Web, Mobile and App Developers」が公開されていたので、今回はご紹介します。

 

 

詳細は以下から。

 

 

Illustratorで利用できるデザインテンプレートまとめ


 

iPad Wireframe Template 

Photoshop素材は多くありますが、Illustratorで編集、加工を行うiPad用ワイヤーフレームテンプレート素材。

アイコンなどの大きさなども記述されているので、使い勝手がよさそうですね。

illustrator_toolbox_01

download

 

 

iPad Vector GUI Elements

こちらもiPadをモチーフにデザインされたGUIデザイン素材のひとつで、ボタンやキーボードなどパーツごとに細かくデザインされています。

illustrator_toolbox_02

download

 

 

iPhone Sketch Elements AI

iPhoneアプリ用のワイヤーフレームをするときに便利な手書き風スケッチでデザインされたパーツ素材のひとつ。

illustrator_toolbox_04(2)

download

 

 

iPhone UI Vector Elements

iPhoneで使われているUIデザインをそのままベクター素材でデザインした良質フリー素材のひとつ。

ワイヤーフレームやモックアップ以外にもデザインとして利用することもできるのではないでしょうか。

illustrator_toolbox_05

download

 

 

Illustrator Template for iPhone Design

アイデアを形にするモックアップで便利なデザインテンプレート素材のひとつ。

ページごとにまとめてデザインすることができるので、まとめて確認することができ便利かもしれません。

illustrator_toolbox_07

download

 

 

iphone 4 Vector Template

本物そっくりにデザインされたiPhone 4をベクター素材で編集、加工可能なデザインパーツのひとつ。

illustrator_toolbox_08

download

 

 

Windows Phone 7 Design Template

まだ日本では未発売のWindowsを搭載したスマートフォンを忠実に再現したベクター素材。

レイヤーごとに細かく設定されているので、お好みでカスタマイズすることが可能となっています。

ダウンロードにはWindows Live IDが必要となります。

illustrator_toolbox_11

download

 

 

Gesturecons

タッチスクリーン特有の操作をシンプルなピクトグラム風デザインで作成されたフリー素材。

取り扱い説明書などを作成するときに便利かもしれません。

illustrator_toolbox_12

download

 

 

iOS Icon Template for Illustrator CS5

iPhoneやiPadなどのapple製デバイス機器で利用されているアイコンを簡単にカスタマイズすることができるテンプレート素材のひとつ。

サイズもあらかじめ3種類用意されています。

illustrator_toolbox_13

download

 

 

User Interface Design Framework

以前ご紹介しましたが、Illustrator用素材のまとめとして再エントリー。

GUIベクター素材やアイコン、ボタンなどに利用することができるスタイルライブラリーなど合計1000個以上のパーツが揃っています。

詳しくはこちらのエントリーで触れています。

uidesignkit1

download

 

 

Free Sketching & Wireframing Kit

ウェブサイトやホームページ制作のモックアップデザインとして利用することができるシンプルなUIデザインをまとめたフリー素材のひとつ。

illustrator_toolbox_18

download

 

 

Browser Screens and Website Elements

ブラウザ画面とよく利用されているUIデザインパーツをまとめてデザインしたベクター素材。

illustrator_toolbox_20

download

 

 

Wireframe Symbols

こちらもあらゆるUIデザインをまとめてセットにしたお得なフリー素材のひとつ。

タブやボタン、サムネイルなどワイヤーフレームに必要なデザインパーツが収録されています。

illustrator_toolbox_21

download

 

 

960 Grid System Illustrator Template

最近のトレンドのひとつでもあるグリッドを利用したウェブサイト制作を考えている方にオススメしたいテンプレート素材のひとつ。

ファイルは圧縮されており、.zipまたは.tarファイルでダウンロード可能となっています。

illustrator_toolbox_23

download

 

 

Divine Proportion Template

黄金比を使ったサムネイルやバナーなどをデザインしたいときに便利なテンプレート素材。

あらかじめグリッドラインが表示されているので、形を合わせるだけで簡単に作成することができます。

illustrator_toolbox_34

download

 

 

Symbol Signs

公共機関で利用されている様なわかりやすいピクトグラムデザインをIllustratorで編集可能な.epsファイルでダウンロードすることが可能。

illustrator_toolbox_24

download

 

 

135 Free Vector Icons

こちらもシンプルでかわいい&ユニークなピクトグラム風アイコンを135個セットにした無料素材のひとつ。

カテゴリーごとにアイコンをまとめてレイアウトすることで統一感を表現することができるのではないでしょうか。

ダウンロードはRapidShareを利用しているようです。

illustrator_toolbox_26

download

 

 

72 Free Vector Glass Buttons and Bars

ツルツルと光沢感のあるガラス風ボタンデザインをまとめたデザインパーツ素材のひとつ。

数字やアルファベットをデザインした素材もまとめて収録されています。

illustrator_toolbox_32

download

 

 

Pie Charts in Illustrator

立体的にデザインされた円グラフをデザインすることができるユニークなテンプレート素材。

色や数値の変更も簡単に行うことができるので、ドロップシャドウなども装着することができます。

illustrator_toolbox_28

download

 

 

The Graphs 2

169種類にも及ぶデザインプリセットが収録されており、カラーリングもクールなグラフデザイン用テンプレート素材。

個人的に探していたので、メモとしてエントリー。

.ai, .svgファイルでダウンロードすることが可能となっています。

illustrator_toolbox_27

download

 

 

Photoshopを利用してウェブサイトなどのデザイン、モックアップ用フリー素材をお探しの方は以下のエントリーも参考にしていただくとよいかもしれません。

モバイル、ウェブサイトなどのワイヤーフレーム、UIデザイン用Photoshopフリー素材まとめ 

50uidesignkit1

 

[参照元 : Illsutrator Template Toolbox for Web, Mobile and App Developers – Speckyboy Design Magazine]