皆さま、こんにちは。WEBデザインの設計、構成図である”ワイヤーフレーム”をブラウザ上で作れる便利なツールをご紹介したいと思います。
ワイヤーは線、フレームは枠を意味していて、WEBページやアプリに表示させるコンテンツをえんぴつ書きのようなラフでカジュアルな感じで作ってチーム内ですり合わせをするために作成します。ワイヤーフレームはWEBサイト、アプリ制作になくてはならないものなので、日常的に作っているという方も多いと思います。
ワイヤーフレームを作っている段階で、ページ内に収めるコンテンツ（載せなければいけない情報）を洗い出し、どの順番で何を載せていくかなどをしっかり詰めておくと、修正の工程を減らすことができます。とても重要な作業ですよね。
ワイヤーフレームを作るときに使われるツールといえば、Illustratorやパワーポイント、そのほか紙に書いたりタブレットのメモ機能などを使ったり。WEBディレクターさん、デザイナーさんなりの使いやすいツールがおありだと思います。テンプレートをつくっていて、案件ごとにアレンジしているという方もいらっしゃると思います。
「めったに自分で書くことはないけど時折書かなければいけない」「打ち合わせしながら書けたら便利」という方にとっては、実は手書きやIllustratorなどのツールよりブラウザ上で実寸に近い形でワイヤーフレームが書けるとすごくイメージが湧きやすくて作業が楽になるのではないかと思っています。
そこで今回は、会員登録せず無料でワイヤーフレームを作ることができるツール「wireframe.cc」をご紹介します。
「wireframe.cc」は書く作業がマウスでできるので手書き感覚で作れて、仕上がったワイヤーフレームはURL共有でどなたにでも送ることができます。
1.wireframe.ccについて
ワイヤーフレーム作成に特化したツールで、単機能なのでシンプル。英語のみですが、直感的に使える操作感です。
■無料
■会員登録不要
■日本語対応なし、英語のみ
■URLで共有（会員登録した有料版ではPDFはpngに書き出せる）
■保存可能、何度も編集可能
■対応ブラウザ：Safari、Chrome、firefox
基本的な機能はすべて無料です。プレミアムプランは月額16ドル〜設定がありますがワイヤーフレームを書くだけなら特にプレミアムプランは不要です。
（↑公式ページをブラウザの翻訳機能で日本語化しています）
2.wireframe.ccのはじめ方
公式の解説はトップページをスクロールした位置に書かれています。ブラウザの翻訳機能を使って日本語にするとだいたい操作方法がつかめます。
基本的な操作は、画面上でクリック→ドラッグで要素を書き足します。図形、文字、リストなどワイヤーフレームで使う要素はすべて書けます。また注釈や詳細はコメントとして残せます。
公式の解説動画も最初に見ておくと、より操作感覚を早く掴むことができます。
ワイヤーフレームの編集画面への遷移の仕方
トップページを開くと解説ページが開いています。その画面を×で閉じると新規ファイルが開いた状態になります。
3.wireframe.ccの画面解説
ページ左上、右上にいくつかのメニューがあります。開いた状態ではパソコン画面のワイヤーフレーム用に初期設定されているので、作業に合わせて調整できます。
◆画面左上：パソコン、タブレット、スマホ画面の切り替え
パソコン用、タブレット用、スマートフォン用と切り替えて作成できます。
◆画面右上：コメント、保存、画面設定
（※ブラウザで日本語翻訳するとメニューも日本語になり、作業しやすいです。私はChromeの翻訳機能を使っています）
・コメント
画面上にコメントを残しておくと詳細を伝えたり、意見を聞いたりすることができます。コミュニケーションが取れるのがいいですね。
・保存
保存ボタンを押すとURLが自動付与されます。それ以降は、同じURLで上書き保存されていきます。
・画面の設定
キャンバスの幅やグリッド線のあるなしなどが変えられます。特に触る必要はなく初期設定のままで十分使えるのですが、細かいデザインをするときはグリッドを細かくすると書きやすいです。キャンパスサイズの高さは書きながら下に下に伸ばすことができます。
4.wireframe.ccの基本操作
画面の初期設定ができたら、要素を書き足していきます。クリックアンドドロップするとメニューが出てきますので、書き込む要素に合わせてアイコンを選びます。
図形、画像、テキスト、リストなど、ワイヤーフレーム作りに必要なものが揃っています。
テキストは日本語入力OK！
まずダミーのテキストが英語で自動入力されますが、日本語も入力可能。フォントサイズ等も選ぶことができます。
書き入れた要素を修正したり整えたりする編集機能も揃っています。複製、削除、再編集などは各要素の上で右クリックしてメニューを呼び出し、作業内容を指定します。
・重なり順の編集（Arrange Elements）
図形の上に文字をのせるなど重ねたいときは最前面に持ってくるなど重なりの順番も変えられます。
最前面に持ってくる、一つ前に持ってくるなどアイコンが出ますので、必要に応じて指定します。
・自動整列（Align Elements）
画像をいくつか並べたときには自動整列が便利です。
5.wireframe.ccの共有時の注意点2つ
saveボタンを押すまでは自動保存されないので、こまめに保存ボタンを押してください。URLで共有するときには最新の状態を共有できるよう必ずsaveボタンを押してからシェアしてください。変更はリアルタイムでは反映されません。
もう一つ、スマホからワイヤーフレームのURLにアクセスした場合、閲覧はできますし修正などできるものもあるのですが、要素の移動などはタップ操作ではできない部分があります。基本はパソコンからの編集が前提のツールとなっていますのでご注意ください。
まとめ
制作チームでワイヤーフレームから共有して進めると、方向性の行き違いをなくしたり、制作途中の修正作業を減らしたりするメリットがあります。
WEB制作会社さんであれば営業さんやディレクターさんなど、デザインをされない方々もワイヤーフレーム作りへのハードルが下がれば、クライアント様との打ち合わせもよりスムーズに進むようになるかもしれません。単機能で手軽に始められるwireframe.ccは初めての方にもオススメのツールなので、この記事でいいなと思っていただけた方はテスト操作だけでも一度やってみてはいかがでしょうか。