最近の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を取り入れたスマホアプリ用のワイヤーフレームのキット。