最近のWeb制作の勉強になる!Webサイトのワイヤーフレームやプロトタイプのまとめ

プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。
最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。

UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。

ワイヤーフレームのキャプチャ

Adobe XD Wireframe Kit for UX Designer
for Adobe XD

まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。

ワイヤーフレームのキャプチャ

Wireframe website
for Adobe XD

小規模サイト用のワイヤーフレーム。すべてのエレメントがシンプルな形状で作成されているので、汎用性が高い素材です。

ワイヤーフレームのキャプチャ

Shelter Cat
for Adobe XD

Adobe XDの便利なとこは、作成したXDファイルからプロトタイプも作成できてしまうことです。プロトタイプに使用されているXDファイルもダウンロードできます。

ワイヤーフレームのキャプチャ

Twitter Bootstrap framework
for Adobe XD

BootstrapのUIエレメント・コンポーネントが揃ったXD用の素材。通常のWebサイトで使用されるものは揃っているので、これをベースにしても良いですね。

ワイヤーフレームのキャプチャ

160 Website Flowchart Cards
for Sketch, Photoshop, Illustrator

さまざまなコンテンツをカード状にし、フローチャートを設計するための素材。PNGやSVGも揃っているので、ほとんどのソフトウェアで利用できます。

ワイヤーフレームのキャプチャ

Material Design Wireframe Kit
for Sketch

Material Designの41のスクリーンをまとめたSketch用の素材。
Material Designの公式サイトも先日リニューアルされて、かっこよくなりましたね。

ワイヤーフレームのキャプチャ

Moon wireframe kit
for Sketch

スマホアプリでよく見かける50シーンをまとめたワイヤーフレームのキット。

ワイヤーフレームのキャプチャ

Wirebase
for Sketch

ワイヤーフレームを作成するためのベースになるエレメントが揃った素材。

ワイヤーフレームのキャプチャ

Platforma Wireframe Kit
for Sketch, Photoshop, Illustrator

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

ワイヤーフレームのキャプチャ

Platforma iOS Wireframe Kit
for Sketch, Photoshop, Illustrator

上記の同シリーズのiOS版のワイヤーフレームのキット。プロトタイプのデモも含まれています。

ワイヤーフレームのキャプチャ

Flowy
for Sketch

ブログからコマースまで、108のスクリーンと128のエレメントが用意されたフローチャート用の素材。作成したフローはデジタルだけでなく、プリント用のフォーマットも完備されています。有料版のみ。

ワイヤーフレームのキャプチャ

Sketch Wireframe Kit Mobile
for Sketch

スマホアプリ用のさまざまなコンテンツが用意されたワイヤーフレームのキット。

ワイヤーフレームのキャプチャ

Free UI KIt | Landing
for Sketch, Photoshop

ランディングページ用の80種類以上のレイアウトとUIエレメントのデザインのアイデアがまとめられたUIキット。無料とは思えないほど、ボリューム満点です。

ワイヤーフレームのキャプチャ

Freebie Alert
for Sketch

シンプルなフローで構成されたユーザーフローの素材。こういった小規模のもので勉強するのは有りですね。

ワイヤーフレームのキャプチャ

Bricks - 38 Psd Cards for Flowcharts
for Photoshop

38枚のカードでユーザーフローを作成するPhotoshop用の素材。カードはベクターなので、簡単に扱えます。

ワイヤーフレームのキャプチャ

Wireframe Landing Page Free PSD file
for Photoshop

ランディングページの制作にワイヤーフレームは欠かせません。クライアントの承認だけでなく、制作時にも非常に役立ちます。

ワイヤーフレームのキャプチャ

Free PSD Wireframes for Phones Reviews
for Photoshop

Material Designを取り入れたスマホアプリ用のワイヤーフレームのキット。

top of page

©2017 coliss