2017年12月11日(月)

【Web開発の用語】ワイヤーフレーム、プロトタイプ、モックアップの違い、正確に把握していますか？

• 0
• 8
• 1
• 7

ワイヤーフレーム、プロトタイプ、モックアップはしばしば互換的に使用される言い方ですが、それぞれ同じであるわけではありません。

一方のプロジェクトではワイヤーフレームが必要だけど、他方ではプロトタイプでなければならない、というようなケースもあるのです。

本記事では、その違いとそれぞれの使われ方を解説します。

１．まずはワイヤーフレームから

Usability.govによると、「ワイヤーフレームとは、それぞれのアイテムをページ上のどこに配置するかを示すために、ウェブサイトをイラスト化したもの」だそうです。

チームでワイヤーフレーミングを行う場合は、参加者同士で新しいアイデアや新たなインプット、さらにユーザビリティの面から必要となったもの等をその場ですぐにまとめていくことができるので、比較的早く作業が進みます。ワイヤーフレームは細かいディテールを示すものではありませんが、プロジェクトを導いていく大枠のデザインを作り出すものです。

・ウェブページの基本的なエレメンツを視覚化したものがワイヤーフレーム

・作成も修正も素早く進んでいく

・（ユーザに対して）インタラクティブではない

ワイヤーフレームをさらにインタラクティブ（ユーザが実際に使用して試せる形...