手書きワイヤーフレームのススメ

ちょっとしたデザインハックのご紹介です。

手書きでワイヤーフレームを作成するメリット

手書き（紙とペン）で作成するワイヤーフレームは、基本的には面倒くさい作業です。
Illustratorやパワーポイント等のデジタルグラフィックツールで描画した方が楽です。

何故わざわざ手書きで書くかといえば、手書きワイヤーフレームには隠れたメリットがあるからです。
そのメリットとは、プロジェクト最初期のブレストフェーズで作成したワイヤーフレームよって発生し得る誤解を未然に防ぐことです。

誤解とは

• ワイヤーフレームとは何かをそもそも知らない関係者がそれを完成形だと思い込む
• 何気なく配置したダミーアイコンであっても、それが完成形に及ぼす影響は測りづらい
• 最近のデザインの潮流がシンプルな流れだから、ワイヤーフレームはたしかに完成形に見えることがある

デザインプロセスを説明したところで、興味がない人にとってそれを理解するのは単に面倒なことです。
普通に人は、さっさと完成形を見たがるものです。
なので、完成形と、その「前段の何か」は一目で明確にその存在理由がわかることが好ましいです。
説明は必要だけど、説明は読むのが面倒なので、それを求めていない人が多いです。
であれば、説明を読まずとも、見た瞬間にそれがなんであるかを分かるようにした方が良いです。

なぜ誤解が起こるか

作成された資料は、その主の手を離れて関係者に拡散されていきます。
特にクライアントが大きな企業で部署をまたがるプロジェクトの場合、その関係者は結構な人数になります。
どこまで拡散されるか把握できないし、ステークホルダーには様々な年齢・気性の人物がいるのが常です。
それらの人々のITリテラシーが高い保証もありません。
デザイナーがワイヤーフレームについて回って、「ワイヤーフレームとは〜」と納得してもらうまで説明して回るのは非現実です。
ワイヤーフレームをみて、これで大丈夫なの？と不安になる方も一定数います。

グラフィックツールで作成したデザイン（ワイヤーフレーム）は、それが良きにしろ悪きにしろ何かとインパクトが大きいので、そのイメージに引きづられる形で開発が進む、というケースもあります。

些細なことかもしれませんが、プロジェクトの序盤でこういったコントロールがしづらい事柄で誤解を生むと何かと面倒です。
「ここのこのアイコンはこのままなの？」というやりとりを何度もするのは非効率です。

手書きの効力

手書きであればそういった誤解は生じません。
なぜなら、手書きのワイヤーフレームを見て、それが完成形だと勘違いする人は非常に稀だからです。

いつもワイヤーフレームが、クライアントや内部関係者に対して誤解を生むんだよなーと思っている人には手書きワイヤーフレームはお勧めです。
手書きのワイヤーフレームでざっくりしたコンセプトなり大枠・全体像が決めてから、普通にグラフィックツールを使い始めれば良いかと思います。

紙とペンでワイヤーフレームを書く場合は面倒な点があります

• 書き直しが面倒
• 書いたものを写真に撮ったりして管理しておくのが面倒
• カラーを手軽に使えない
• 図形などのコピーができない

そして、これらの面倒な点は、iPad Pro とApple Pencil を組み合わせた擬似的な手書きをデジタル環境で行うことでクリアできます。

私はいくつかのドローイング系のアプリを試し、実際に案件でも使用しました。

無料で使えるアプリという観点でApple pencilに対応したオススメiPad アプリをいくつか紹介したいと思います。

以下の点を考慮に入れた上でのオススメです

• 反応速度が早い
• イラストやアートのドローイングに特化しすぎていない

いくら高機能であっても、Apple Pencil の反応速度が遅いと致命的です。
反応速度はトップ・プライオリティといっても過言ではないです。
この記事ではあくまでもワイヤーフレーム等のシンプルな図形を書くことを目的としたアプリの紹介になるので、いわゆるイラストを描くための機能の優劣は評価に入れません。
また、サブスクリプション契約や課金でリッチな機能が手に入るものがありますが、あくまでも無料枠の機能での評価になります。

検証の環境

• iOS 11.0.2
• iPad Pro 12インチ（第1世代）
• Apple Pencil
  ※ iPad Pro 第2世代ではProMotionテクノロジーにより、リフレッシュレートが60Hz→120Hzに上がっているので、応答性能は軒並み高い可能性があります

Apple Pencil 対応 iPad オススメアプリ

Paper

• レイヤー機能なし
• 移動、複製が秀逸
• テキスト配置可能
• 画像配置可能 編集不可
• 手書き風に描けるスマートシェイプ機能
• 指での操作をブレンド/カット/描画に割り当て可能
• Creative Cloundに保存/Photoshopに送信/Illustratorに保存　機能あり

四角や丸の図形を描くと手書き風のテイストを保ったままの正確な図形に補正してくれるスマートシェイプ機能が重宝します。
ただの直線も補正してくれるのでとても役に立つ機能です。
また、色を混ぜ合わせるパレット機能のUIが秀逸です。

Autodesk SketchBook

• レイヤー機能あり（最大3）
• 図形描画可能 編集不可
• 画像配置可能 編集不可
• テキスト配置可能 編集不可
• ドラッグ&ドロップで他のアプリから画像等を配置できる
• PSD形式で保存可能

無料枠では機能的な物足りなさがあるのは否めません。
しかし、個人的な主観ですが、反応速度がかなり良いのでペンだけでガリガリ描くのに適しています。

Adobe Draw

• レイヤー機能あり
• 画像配置可能。配置した後の編集が可能
• Apple Pencil設定：現在のブラシで描画/ジェスチャーのみ/消しゴムを使用
• シェイプツールを定規的に使ってペンで図形の描画ができる
• ドラッグ&ドロップで他のアプリから画像を配置できる
• Illustrator、Photoshopで開く（Illustratorの場合はオブジェクトはベクターデータとして保持されます）

グラフィックツールの本家が作っているのでレイヤー機能が安定で編集もしやすいです。
反応速度もとても良いです。
また、Creative Cloudで連携していれば簡単な操作でMac上のIllustratorが起動してファイルを開いてくれます。
しかも、このアプリではベクターデータとして扱われるので使い方の幅が広がりそうです。
キャンバスのパンが、ズーム（ピンチイン/アウト）の動作をした後でしかできない（？）ようですが、よく使う操作なので少し残念です。
※ワイヤーフレームを作るのであれば本来はAdobe Compでしょうが、手書き風という意図と外れるので割愛します

iOS 純正メモ アプリ

• レイヤー機能なし
• テキストと手書きを交互に混在させて記述可能
• 切り取り＆移動が可能
• 配置した画像のリサイズは無理な模様
• ドラッグ&ドロップで他のアプリから画像を配置できる
• iCloud 同期が便利

iOS 11からはファイルアプリによってどのアプリでも保存に困ることはないですが、やはりiCloudで同期しておくと、そもそも保存操作の必要がないので本当に楽です。
それと、文字を多く盛り込みたい場合も重宝するアプリです。
シンプルで楽で安定しているので、なんだかんだで一番使っています。

iPad Pro と Apple Pencil を持ってないが、普通のiPad を持っている方へ

Apple Pencil は高価で買いにくいかもしれません。
それであれば、iPadに対応したサードパーティー製のスタイラスを買うことをお勧めします。
安価ですが、結構なんとかなるし、普通に使えます。