まだパワポで消耗してるの？ワイヤーフレーム苦手な人でも綺麗に早く作る方法！

かっきー

2015.09.17

ディレクター

こんにちは。お疲れ様です。ソリューション事業部でディレクターしてますかっきーです！もう今年半分以上過ぎているんですね…。私事ですが無事に(？)三十路になりました。(´_ゝ｀) ふ！

さて、今回は『ワイヤーフレーム作成が苦手な人でもきれいに早く作る方法！』ということで、記事を埋めれるといいなぁ、と思います。

ワイヤーフレームをきれいに早く作る方法！

「きれい」とか自分で言っちゃったけど…言っちゃったけど…言っちゃったけど…。

たいがいの方々に「きれいね」とか「デザインからスクショしたの？」とか嬉しいことを言っていただけます。(*ﾉ∀*)ノｿﾝﾅﾏｻｶ~ ｵﾎﾎ~


使っているツールはあれです、あれあれ、



です。

「Excelかよ…(ﾉ∀) ぷ」とお思いでしょうが、構成要素の位置を変えるときなど、パワポや他のプロトタイプツールと比較すると断然簡単きれいにできます！

また、Excelならクライアントにも修正を入れてもらえるので、わざわざツールの会員登録をしてもらったりダウンロードしてもらったりする必要もなくなります。

まぁ、ワイヤーフレームや構成案は、基本「ちゃんと伝わればいい!!!」なので「きれい」が評価させるわけではないんですがね。

あと、きっと説明が上手ならそんな凝った資料作らなくていいんですが、私は割とちゃんと準備してないと、あれなので、汗が飛び散ってしまうので、しっかり準備していく派なのです。:(；ﾞﾟ’ωﾟ’):

だからと言って、時間かけてごりごりの資料を作るのも、労力の無駄なので、私なりの「きれいに早く作れる方法」をしたためたいと思います。

まずはセルを正方形のマス目にしましょう！

こんな感じ。

まずはセルを正方形のマス目にしましょう！

まずはセルの縦幅と横幅を変えて方眼紙の状態にしましょう！
列はセルの数が奇数だと、２カラム、３カラム、４カラム、くらいのレイアウトに対応できます。今回は29列にして枠線入れました。
また、Excelの「表示＞枠線」のチェックを外せば、真っ白ページの出来上がりです。

次に、それらしい写真と素材をぺたぺた…
素材のトリミングもExcelでできますよ
そんなこんなでWFを作成
そんなこんなでクライアントお戻し対応

次に、それらしい写真と素材をぺたぺた…

これも非常に簡単です。

次に、それらしい写真と素材をぺたぺた...

例えば、メインビジュアルの場合は素材をExcelに挿入してぺたり…。

このとき、設置したい位置のセルにフォーカスを当てた状態で素材挿入するだけになります。

もちろん、素材自体をカットして、セルにペーストするだけでもいけます。

ちゃんとセルの左上と素材の角が合う、という状態が作れると思います。

これがパワポだとすんなりいきません。

マウスでちまちま合わせたり配置ツールを使ったりで、割とストレスフルな状態になります！(皿´)


素材のトリミングもExcelでできますよ
こちらご存知の方もいらっしゃるかと思いますが、素材のトリミングもOfficeツールで行うことができます。


素材を選択してから、メニューの「図ツール 書式」を選択します。
その中の「トリミング」で四角のトリミングが行えます。

そんなこんなでWFを作成
例えばですが、そんなこんなで以下のようなワイヤーフレームが出来上がるとします。

本音がだだ漏れたワイヤーフレームが切れましたね。(´_ゝ｀)　ふ！
だいたい素材探しも含めて30分程度で作ることができます。

セルに合わせてきれいめな写真や素材をこぴってぺって張るだけです。
「余白がほしいな」と思ったら [Shift]+[Ctrl]+[+]※ で行を増やすだけです。
同じ要素を並べるときは、その要素があるセルのかたまりごとコピペです。

※[+]は、「テンキー」の[+]ではなく、アルファベットキーの中にある[+]です。
そんなこんなでクライアントお戻し対応
はてさて。なんとか作ったワイヤーフレームをお客様に見ていただき、例えば「これじゃあ、うちの豊富なプランがあることが伝わらない」とご指摘いただくとするじゃないですか？
そうしましたら、とりあえず「プラン」部分を上のほうに移動してみましょうか！
１．まずは、移動したい要素があるセル行をまるまるカットします。

２．次に、挿入したいセル行にフォーカスを当てます。

３．[Shift]+[Ctrl]+[+] で挿入！

４．あとはちょいちょいと余白入れて整えたら…はいできました！

ということで、なんだかんだほとんどの修正がExcelのショートカットで済んでしまうのです！