Webサイトのアイデアを形にする！ワイヤーフレームやフローチャートに使える素材のまとめ

最近の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種類のコンテンツがカード状になっており、それらを自由に繋げてフローチャートを作成できます。