ワイヤフレームを手書きで作る時は「concepts」というアプリがいいぞ！

VTuber「ツバクラロヒト」の公式サイトが初回リリースから半年経ったので、リニューアル作業を始めました。普段Webサイトのワイヤフレームを作る時はまず手書きで作っているのですが、今回からアプリ「concepts(コンセプト)」を使ったら非常に捗ったのでオススメします。

ワイヤフレームを手書きすると何がよいのか

プロトタイピングツールに触る前に、ワイヤフレームを手書きするメリットは、「速く、多く試せる」ということ。一つ一つを整えることよりも、なるべく短時間で多くのアイデアを起こして検討することが大事なフェーズだと思っています。UIコンポーネントの知識や、日頃からWebサイトを見ていたりしてインプットが十分あれば、手書きだと1画面10分ぐらいでササッと起こせています。

紙の上でのワイヤフレーム、ここが困る

(画像は、VTuberナギナミNAGI/NAMI 公式サイトの構成理解の為のメモ)

ナギナミNAGI/NAMI オフィシャルサイト

以前、制作や学習のためのラフを紙に書いていましたが、その時に感じていた問題点を上げるとするならば「キャンバスサイズの制約」でした。

紙面ではレイアウトを考慮しながら枠を取る必要があります。自分はB5のスケッチブックを縦長に持ち、長辺を3等分にした高さを100vhとして描いていました。すると縦に長くなることの多いWebサイトでは同じページについてのラフが何ページにも及びます。
一時期CLIP STUDIO PAINTで描いていたことがありました。その時も何px伸ばせばキャンバスに収まるのかを考えながら描くことが気になってしまい、やめた経緯があります。

conceptsとは

conceptsを知ったのは、noteで幾つか紹介記事を読んだことがきっかけでした。

コンセプトとは、無限キャンバスがウリの手書きメモアプリです。ペンや鉛筆といった画材の書き味が良く、アプリの安定性もバッチリ。5種類の画材と5枚までのレイヤーという制限がありますが基本無料で使えます。app内課金でレイヤー上限解放や画材の種類増や、高解像度で画像エクスポート等ができるようになるとのこと。ヘビーユーザーになったら課金をしようと思っています。

コンセプトアプリ • 無限に自由自在なスケッチング

conceptsで実際に作るとこうなった

個人でやっている案件のため秘密にすることは特にないので、出来上がったワイヤフレームをそのまま載せます。

conceptsで書くメリット

無限大のキャンバスサイズだから、どれだけ書いても1つのキャンバスにまとまることが最大のメリットです。Webサイトのワイヤフレームに使うことを考えると、以下の点で優れています。

・サイト全体が縦に長くなっても問題ない
・後から要素を追加したくなっても横に描けるから対応できる
    ・前述のラフでは、モバイル版に「What's New?」という項目を差し込んでいます。
・モバイル版とPC版を並べて描くことも出来る

デジタルのプロトタイピングツールでなければ実現し得ないと思われていたことが、手書きでも実現出来るところがconceptsの強みだと考えます。

conceptsで書くデメリット

広く書いていくと全体を見渡しづらくなり、一覧性の担保が難しいところです。これは、conceptsのアプリ上でキャンバスを25%までしか縮小できないためで、一度画像としてエクスポートし他の画像ビューワーアプリで閲覧することで解決は出来ます。

おわりに ―― 考えるべき所を減らしてくれるアプリって良いよね

conceptsの魅力は、程よい自由度の高さだと思っています。キャンバスを広げる時に「どれだけ広げれば収まるだろうか……」と考える必要がありません。レイアウトを考えなくても勝手に整理され、クリエイティブなところに考えを集中させてくれるアプリこそ文明の利器だ、と感じさせてくれます。

このアプリが良き制作の一助になればと思い推薦させていただきます。