最近のWeb制作の勉強になる!Webサイトのワイヤーフレームやプロトタイプのまとめ
Post on:2016年11月8日
プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。
最近の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を取り入れたスマホアプリ用のワイヤーフレームのキット。
sponsors