ワイヤーフレーミングとプロトタイピングの歴史

私たちは最近、ワイヤーフレームとプロトタイプの世界、そしてそれらが設計と開発のプロセスで何ができるかについてかなり調べています。しかし、この分野の歴史、特にワイヤーフレームの歴史については、まだ触れていません。この投稿では、まさにそれを行います。

「ワイヤーフレーム」という言葉はどこから来たのですか?

ワイヤーフレームという用語は、実際にはWebデザインで使用される前から存在しています。もともと、ワイヤーフレームはコンピューター支援設計(CAD)で3Dオブジェクトを表示するために使用されていました。製造現場では、細部にこだわらずに車のデザインを表現するために使用され、図面がワイヤーでできているように見えるスタイルに見覚えがあるでしょう。

ウェブデザインでは、「ワイヤーフレーム」は、ページやアプリ画面の骨格を表す視覚的なガイドです。これらは通常、インターフェイス要素やナビゲーションシステムなどの機能的なレイアウトを表しています。ワイヤーフレームには通常、コンテンツの機能、動作、優先度に主な焦点があるため、タイポグラフィのスタイル、色、またはグラフィックが不足しています。これは、彼らのCAD履歴の直接的な結果です。言い換えれば、画面がどのように見えるかではなく、画面が何をするかに焦点を当てています。

謙虚なワイヤーフレームの歴史は複雑で、ウェブやアプリで使用するためのこの用語を誰が作ったのかについては議論があります。この種のものによくあることですが、同じ時期に多くの関係者が同じ用語を作り出したようです。

ワイヤーフレームは、最も一般的には忠実な鉛筆と紙のスケッチの形をとりますが、より忠実度の高いバージョンや、アニメーション化されたクリック可能なバージョン(プロトタイプが本当に本領を発揮する場所)にもその場所があります。

本当に機能的なワイヤーフレームは開発者にとっては素晴らしいものですが、視覚的な評価を行う手段はあまりありません。独自のIndigo Studioのようなツールは、この種のワイヤーフレームだけでなく、はるかに「設計された」バリエーションをサポートし、さらにはユースケースのストーリーボードも豊富に取り揃えています。

静的なデザインから、より多くのグラフィックス(さらにはアニメーション)を備えたワイヤーフレームへのこの変化は、アプリの人気が指数関数的に高まるにつれてますます重要になっている成熟したUXに対応する必要性によって推進されています。ワイヤーフレームでユーザー体験をより重視するという選択は、その兄弟であるプロトタイプに似ています。

The Prototype Timeline

タイムラインに関しては、プロトタイプは比較的短いものです。以下は、この分野が70年代以降に成し遂げた進歩の簡単なタイムラインです。

1970年 – ウィンストン・ロイスがウォーターフォール・モデルを発表

1980年 - フローチャートに似た最初の基本的なプロトタイプが登場

1985年 – 紙のプロトタイピングをユーザビリティテスト用に統合しました

1987– Microsoft PowerPoint – 大まかなワイヤーフレームを作成するための一般的なツール

1988 – Boehm founds The Spiral Model

1990– Adobe Photoshop – 多くのUXデザイナーのお気に入りのツール

1991 – IBM introduces RAD (Rapid Application Development) software development

2001 – Agile Manifesto released

2005年 – Webベース(SaaS)プロトタイピングの影響力が増す

2008 – Lean UX movement is born

2010年 – 技術の進歩により、コーディング不要の忠実度の高いSaaSプロトタイピングが可能に

 

そして、それが私たちを最新の状態に保ちます。プロトタイピングの進歩は容易に見て取れますし、その勢いは衰える気配がありません。ワイヤーフレームとプロトタイプはどちらも、開発者の作業を容易にするために常に適応し、進化しています。

将来はどうですか?

最近では、ワイヤーフレームがよりインタラクティブになり、プロトタイプがより便利になるにつれて、2つの用語が統合されています。優れたUXデザイナーやUI開発者に尋ねれば、彼らは彼らを同じものとして見るでしょう。さまざまなタイプのワイヤーフレームとプロトタイプ(ローファイ、ハイファイ、アニメーション、スケッチなど)は常に必要です。そしてもちろん、それぞれにはプロジェクトのニーズに応じた長所と短所があります。

また、デザインツールは、この分野が成熟し、変化するにつれて対応する必要があります。Indigo Studioの最新リリースでは、静的なワイヤーフレーム、クリック可能なプロトタイプなど、あらゆるものを作成することができます。Indigo Studio では、コードを 1 行も書かずにプロトタイプを作成することもできます。

新しいストーリーボード機能は、よりインタラクティブなプロトタイプの世界で特に役立ちます。これは、ユーザーストーリーとアプリストーリーを一緒に統合し、発展させるのに役立ちます。これは、アプリだけでなく、エクスペリエンスのプロトタイプを作成するのに非常に役立ちます。

ストーリーボードには、ドラッグアンドドロップできる一連のシーンが用意されており、実際のシナリオやユースケースを描いた独自のストーリーを作成できます。Indigo は、セット画面をワイヤーフレームで組み立てるだけの場合よりも、アプリを最大限に活用する方法を開発するのに役立ちます。

Indigo では、プロトタイプを見せるときに、アプリで何ができるかを単純に伝える必要はありません。今では、それらを全体のエクスペリエンスに包み込むことができ、より豊かなエンゲージメント、そして最終的にはより良い最終製品につながります。