Webディレクターの業務としてサイト設計があり、その設計図を「ワイヤーフレーム」と呼んでる。主にサービスの新規制作やリニューアル、PDCAで改善といった、UX/UIデザインにおける構築プロセスで必ず必要になる資料だ。
このワイヤーフレームの作成は、Webディレクターとして能力と経験の見せどころ。だけど、作成ツール選びがなかなかに難しい。ツールも多種多様かつ日進月歩だ。どのツールが便利なのか、最適なのかでずっと悩んでいる。
現在のメインツールはMiro
最近メインで使ってるツールは「Miro」だ。2021年の春頃にMiroを知って使い始めて、そこからひたすらMiroでワイヤー作成中。Miroはクラウドのホワイトボードアプリで、チームメンバーで共同作業できるのが特徴。「ビジュアルコラボレーションプラットフォーム」とうたってる。
厳密にはワイヤー作成ツールじゃないけど、テンプレートなど必要な機能は揃ってるので問題なし。むしろ、専用ツールじゃないがゆえの制限が、Webディレクターのワイヤー作成作業においてはプラスに作用してるなと。
ちなみに、2022年の春までは「Adobe XD」をメインで使ってた。一時期「Figma」に乗り換えようとしたことも。フリーランスになる前はずっと「EXCEL」使いだったし、さらに前は「PowerPoint」使いだったり。もっと昔、Web制作会社時代なんかは「Inspiration」だった。懐かしい。
Miroのメリット
- ワイヤーを作るための機能がシンプル
- ボードにページを複数並べて全体を俯瞰しながら設計できる
- 矢印で導線を追加できるので遷移も作成・確認できる
- ウェブサイト、スマホサイト、アプリ用のテンプレートやアイコンが揃ってる
- ドラッグ＆ドロップで操作できてグリッドも自動で揃ってきもちいい
- ユーザーフローやサイトマップも同一ボード上に作って一覧できる
- レイヤーとか細かいことを気にしなくていい
- メンバーとの共有、編集がらくちん
Miroのデメリット
- コンポーネントがないので大規模サイトだと更新や修正に手間がかかる
- 要素の多いページだとパーツ選択がしづらくレイヤーがほしくなる
- 日本語テキストの対応がまだまだ（文字サイズや空白の扱い）
- Webデザイナー（FigmaやXDへの）への共有・連携がスムーズじゃない
実際の使用感
Webディレクターのワイヤーフレーム作成にフォーカスするなら、Miroはなかなかに便利なツールだと思う。情報設計（インフォーメーションデザイン）のプロセスであれば必要十分だから。
Adobe XDやFigmaはもちろん、Photoshopなどと比べると、デザインツールとしての機能はなく、ワイヤーを作るための必要最低限な機能しかない。でもだからこそ「まるでデザインみたいなワイヤーを作ってしまう」というWebディレクターあるあるを回避できるという効果あり。これがでかい。
ただし、ワイヤーからデザイン、コーディングに進む場合や、Webデザイナーやフロントエンドエンジニアに連携する場合は、そのままMiroで作業できるわけじゃないので要注意。
先日もある案件で、Miroで作ったワイヤーをWebデザイナーに共有したけど、Photoshopで作業するので要素をコピペする作業がちょっと手間だったと言われてしまった。ううむ…。
FigmaとMiroの使い分け
これらを解決したいなら、やっぱり「Figma」になるだろう。Figmaならボードでページ複数おいて俯瞰もできるし、コンポーネントもあるし、プラグインも豊富だ。つまりはMiroの上位互換として何でもできてしまう。もちろん、デザイナーへの連携もスムーズ。
ただ、あまりに精緻に作り込みすぎてしまうことや、デザインレベルまでやりすぎてしまうことが注意点。スケジュールもあるので、どこまでやるのかやらないのか。その見極めが必要だろう。
今日の気づき
ツールそれぞれに特徴があるし得意な領域がある。ただ、あくまでWebディレクターが主に情報設計の構築プロセス用として、よりシンプルかつライトに使うワイヤーフレーム作成ツールとしてなら、Miroはかなりおすすめ。今のところの最適解だと思ってる。
「完璧なツール」を探し続けるより、その時の案件や連携相手に応じて使い分ける柔軟性が大事だと実感してる。Miroで情報設計に集中して、デザイン連携が必要な時はFigmaを検討する。そんな感じで使い分けていこう。
