【漫画】フリーランスは“103万円の壁”にどう向き合うか?
- お金
- フリーランス/個人事業主
- 漫画
多くのWebデザイナーは、Webサイトを作りはじめる前にワイヤーフレームを作成するでしょう。クラインアントに安心感を与えて意思統合をとるため、または、スムーズにデザインできるように。
私がこの記事で提案したいこと、それは、ワイヤーフレームに頼るのはやめにしようということです。
短時間で簡素に作られたワイヤーフレームには、大切な要素が欠落していることがあります。また、ワイヤーフレームありきでデザインしたWebサイトは視覚的魅力も大きく削がれます。
そもそも、サービスや製品を、たった1人のデザイナーが考えた枠組みに沿って作ってしまって良いものでしょうか。
この記事では、ワイヤーフレームを使うべきではない理由と、代わりにやるべき5つの項目をご紹介します。
ワイヤーフレームは、いわば“Webサイトの設計図”です。
求められるユーザーエクスペリエンスを捉え、ユーザーを導きたいゴールまでのプロセスを明示する必要があります。
UXデザインの重要性については、Emma Drewsが、優れた記事を書いています。
Wireframes by Top UX Designers
ワイヤーフレームはクライアントやチームメンバーの同意を得る段階で大きく貢献しますが、その反面デメリットも抱えています。
ひとたび同意を得てしまえば、その仕様から外れるデザインを反映することは難しくなります。きちんと考察せず、作業的にワイヤーフレームを作ってしまった場合、望ましくないものができあがっているでしょう。
また、ワイヤーフレームがあることによってUIデザイナーの役目は大きく減ります。UXデザイナーのスキルがより重要視され、UIデザイナーがデザインする自由度が下がるのです。ワイヤーフレームがデザイン工程を円滑にさせるという考えは正しいといえません。
さらに、その視覚的な魅力は皆無です。ワイヤーフレームに用いられた灰色のボックスは、9割方カラフルな色に変更されるでしょう。
本来、開発の上流工程を合理的にすすめるための方法として生まれたワイヤーフレームですが、実際はデザイナーの問題解決を妨げてているのです。
以下に、ワイヤーフレームを使うべきではない理由をまとめました。
私が提案する解決策は、次の通りです。
あなたが考えたユーザーエクスペリエンスの全てをマッピングし、プロトタイプで確認します。
また、プロトタイプは紙に書かれたワイヤーフレームより簡単に理解できます。
プロトタイプがデモとして優れている理由についてはedchaoが書いた素晴らしい記事、 Dropbox’s redesignを参照してください。
Influencing redesign
基本に戻ることができます。これをデジタル化すると大変時間がかかるので、スマートフォンで写真を撮り、アートボードの隣に置いてください。
ユーザーに見せる、デザインを試す、サイトを改善する、ユーザーと会話をする、付箋に書きとめる、良いプロダクトやサービスを見る、など。
共同設計の詳細については、Jenny Arden Airbnbの記事を読んでください。
Co-designing with Hosts at Airbnb
ワイヤーフレームの構成要素から、仕様を文章にしてください。
仕様書は、使用方法と機能の仕組み、見出しの語数など、詳細を記録したものです。
本記事の内容を踏まえて作られたワイヤーフレームを、私たちは「デザインフレーム」と呼んでいます。
デザインフレームはUXデザイナーとUIデザイナーが協力して、正しいフォントやボタンなどを決めます。
ワイヤーフレームを使用するというアイデア自体は良いものです。しかし、これまでのWebデザインの現場においては、作成したワイヤーフレームの使い方を誤っていました。
最善の策は、ワイヤーフレームをチーム内部でだけ共有することです。
クライアントの同意を得るためではなく、チーム内で思考の記録・共有をするためのツールとして使ってください。
私は多くのワイヤーフレームを作りましたが、より良いデザインを実現するための解決策はワイヤーフレームを枠組にとどめておくことです。
コンテンツやインタラクションについては、ワイヤーフレームで決めるのがいいでしょう。しかし、メインビジュアルの写真や絵などのユーザーエクスペリエンスはデザインする必要があります。
良い結果を得るためには、良いユーザーエクスペリエンスを生み出す必要があります。
そのためには、UXデザイナーとUIデザイナーが協力して、問題を解決しなければなりません。
(翻訳:Yuri Tanaka)