Webサイトのワイヤー作成でGoogle Drawingsを使う

Webサイトのワイヤーフレームを作成するときのツール選びのお話。

今の仕事でやっているワイヤーフレームの定義は

• ページに配置する要素を決める
• 要素のテキストや画像素材の配置

までを行い、デザインがイメージできる内容を作成する
ということだ。

デザイナーが作りたいWebサイトの1枚の絵を描けるように
するためのものと言うこともできる。

そこで、そのワイヤーフレームをどういうツールでつくるか検討したのだけど
調べるといまは、ワイヤーを作るためのWebサービスがいろいろある。

以前使ったことのあるprottは使いやすかったのだが、無料サービス期間が終わり、有料になって使うのをやめてしまった。普段の仕事では、ワイヤーフレームの作成は行わないが、ごくたまに、発生する程度の頻度だったので、有料で使い続けるまでもなかった。

そこでまた、今回ツール選びのお話ということだ。選定基準を挙げておく。

• シンプルで使いやすい
• 共有しやすい（エクスポートが画像またはPDFで可能）
• 無料であること

keynote

keynoteも非常に使いやすいかもしれない。
スライドのサイズをカスタムで作るのだけど、高さが足りなくなって追加する場合、
並べていた要素が大きく崩れてしまう点でやめておこうという判断になった。

しかし、高さを変更する前に、並べている素材をすべてコピーしておけば問題ない。
ということにさっき気づいた。下記手順で問題なく作業できる。

高さ変更をする場合の手順

1. 並べている要素を全てコピー
2. 高さの変更
3. 並べている要素を全て削除
4. コピーしていた要素をペースト

Google Drawings

今回、使っていたサービスは
Google Drawings
メニューのしたの方に隠れていてわからなかったけど

keynote同様に、カスタムサイズで作り始めよう。
ファイル＞ページ設定＞カスタム

これで良さそうだ。

仕上がり

今後は

• keynote
• Google Drawings

のどちらかで
さっき上に書いた「高さ変更をする場合の手順」
を使いつつワイヤーフレームをつくることになりそうだ。

参考

Google Drawingsを使ってワイヤー作成がいいかも

o_wani

スタッフ

Twitter

大学卒業後、15年間WEB業界で働く。現在はマネジメントに従事していますが、ChatGPTの登場に触発され、このブログを再開。AIをパートナーに、自分で手を動かして実装する楽しさと喜びを再発見中。時代が変わりつつある中でも、陳腐化しない情報発信も目指しています。