Webデザイナーの私が1年以上ワイヤーフレームを使用しなかった理由

wireframes
無料のメールマガジンに登録

毎週月曜日に、フリーランス向けニュースまとめをお届けします。 プライバシーポリシーはこちら

多くのWebデザイナーは、Webサイトを作りはじめる前にワイヤーフレームを作成するでしょう。クラインアントに安心感を与えて意思統合をとるため、または、スムーズにデザインできるように。

私がこの記事で提案したいこと、それは、ワイヤーフレームに頼るのはやめにしようということです。

短時間で簡素に作られたワイヤーフレームには、大切な要素が欠落していることがあります。また、ワイヤーフレームありきでデザインしたWebサイトは視覚的魅力も大きく削がれます。
そもそも、サービスや製品を、たった1人のデザイナーが考えた枠組みに沿って作ってしまって良いものでしょうか。

この記事では、ワイヤーフレームを使うべきではない理由と、代わりにやるべき5つの項目をご紹介します。

365DAYS

ワイヤーフレームとは?

ワイヤーフレームは、いわば“Webサイトの設計図”です。
求められるユーザーエクスペリエンスを捉え、ユーザーを導きたいゴールまでのプロセスを明示する必要があります。

UXデザインの重要性については、Emma Drewsが、優れた記事を書いています。

Wireframes by Top UX Designers

Why wireframes don’t work.

なぜ、ワイヤーフレームが機能しないのか?

ワイヤーフレームはクライアントやチームメンバーの同意を得る段階で大きく貢献しますが、その反面デメリットも抱えています。
ひとたび同意を得てしまえば、その仕様から外れるデザインを反映することは難しくなります。きちんと考察せず、作業的にワイヤーフレームを作ってしまった場合、望ましくないものができあがっているでしょう。

また、ワイヤーフレームがあることによってUIデザイナーの役目は大きく減ります。UXデザイナーのスキルがより重要視され、UIデザイナーがデザインする自由度が下がるのです。ワイヤーフレームがデザイン工程を円滑にさせるという考えは正しいといえません。

さらに、その視覚的な魅力は皆無です。ワイヤーフレームに用いられた灰色のボックスは、9割方カラフルな色に変更されるでしょう。
本来、開発の上流工程を合理的にすすめるための方法として生まれたワイヤーフレームですが、実際はデザイナーの問題解決を妨げてているのです。

以下に、ワイヤーフレームを使うべきではない理由をまとめました。

  1. ワイヤーフレームは、結果としてサイトやプロダクトの完成品になり変わります。
  2. ホワイトボードに描いたものを、デジタル化することは無駄に時間を使います。
  3. 見栄えがいいだけのワイヤーフレームでは役に立ちません。
    あなたが無駄な時間と労力を使わないためにも、UXデザイナーにワイヤーフレームの作成を任せた方がいいでしょう。
  4. ワイヤーフレームをUXデザイナー1人が作ってしまうと、イノベーションが起こりません。
    また、反映されなかった人たちの意見は、ワイヤーフレームに対しての疑問へと変わります。
  5. 解決策が限られます。同意されたワイヤーフレームの中から解決策を探さなければならなくなります。
  6. 決まったワイヤーフレームに背くことは、非常に難しいです。

view prototype

ワイヤフレームに代わる手法とは?

私が提案する解決策は、次の通りです。

1.プロトタイプをつくる

あなたが考えたユーザーエクスペリエンスの全てをマッピングし、プロトタイプで確認します。
また、プロトタイプは紙に書かれたワイヤーフレームより簡単に理解できます。
プロトタイプがデモとして優れている理由についてはedchaoが書いた素晴らしい記事、 Dropbox’s redesignを参照してください。

Influencing redesign

2.ペンとメモでラフを書く

基本に戻ることができます。これをデジタル化すると大変時間がかかるので、スマートフォンで写真を撮り、アートボードの隣に置いてください。

3.共同設計

ユーザーに見せる、デザインを試す、サイトを改善する、ユーザーと会話をする、付箋に書きとめる、良いプロダクトやサービスを見る、など。
共同設計の詳細については、Jenny Arden Airbnbの記事を読んでください。

Co-designing with Hosts at Airbnb

4.仕様書を作成する

ワイヤーフレームの構成要素から、仕様を文章にしてください。
仕様書は、使用方法と機能の仕組み、見出しの語数など、詳細を記録したものです。

5.デザインフレームを作ろう

本記事の内容を踏まえて作られたワイヤーフレームを、私たちは「デザインフレーム」と呼んでいます。
デザインフレームはUXデザイナーとUIデザイナーが協力して、正しいフォントやボタンなどを決めます。

 

ワイヤーフレームを使用するというアイデア自体は良いものです。しかし、これまでのWebデザインの現場においては、作成したワイヤーフレームの使い方を誤っていました。

最善の策は、ワイヤーフレームをチーム内部でだけ共有することです。
クライアントの同意を得るためではなく、チーム内で思考の記録・共有をするためのツールとして使ってください。

まとめ

私は多くのワイヤーフレームを作りましたが、より良いデザインを実現するための解決策はワイヤーフレームを枠組にとどめておくことです。
コンテンツやインタラクションについては、ワイヤーフレームで決めるのがいいでしょう。しかし、メインビジュアルの写真や絵などのユーザーエクスペリエンスはデザインする必要があります。

良い結果を得るためには、良いユーザーエクスペリエンスを生み出す必要があります。
そのためには、UXデザイナーとUIデザイナーが協力して、問題を解決しなければなりません。

(翻訳:Yuri Tanaka)

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
サイドバー画像広告1