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