Webサイトのアイデアを形にする!ワイヤーフレームやフローチャートに使える素材のまとめ
Post on:2016年6月21日
最近のWebサイトで使われているさまざまなレイアウト、ヘッダやフッタやナビゲーションやコンテンツのパターンがキット化されたワイヤーフレームやフローチャートを作成するのに役立つ無料素材を紹介します。
ランディングページや縦長ページをはじめ、コマースサイト、企業サイトなど、多種多様な案件に対応できます。スマホ用ナビゲーション100種類とかは勉強にもいいですね。

Platforma Web Wireframe Kit(.psd, .ai, .sketch)
最近のWebサイトで使用されているさまざまなコンポーネントがキット化されており、組み合わせるだけでさまざまなページのワイヤーフレームを作成できます。無料版と有料版があり、無料版でもかなりのボリュームです。
iOS Wireframe Kitも無料でダウンロードできます。

Material Mockups(.psd, .sketch)
15個のアートボードにコマースサイト用のスクリーンが用意されており、エレメントはすべて分かれて管理されています。

Bootflat UI Kit(.psd)
Bootstrapをフラットなスタイルにする「Bootflat」のUIキット。Bootstrapで実装できるコンポーネントが揃っています。

Responsive Wireframe Template(.sketch)
デスクトップ・タブレット・スマホの各スクリーンサイズが用意されたシンプルなテンプレート。

100 Navigation Style - Sketch UI Kit & Wireframe(.sketch)
ナビゲーションのさまざまなスタイルが揃ったUIキット。無料版では15種類のナビゲーションが揃っています。

UI Tiles(.psd, .ai, .sketch)
最近のWebデザインでよく利用される基本的なグリッドをはじめ、さまざまなレイアウトが用意された素材。

Wyre: Web Layout Flowcharts(.ai, .eps, .svg)
こちらも最近よく利用されるさまざまなレイアウトが揃ったフローチャート用の素材で、ベクターデータ完備です。

UX Flowchart Cards(.sketch, .png)
128種類のコンテンツがカード状になっており、それらを自由に繋げてフローチャートを作成できます。
sponsors