SONICMOOV Googleページ

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

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

  • このエントリーをはてなブックマークに追加

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

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

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

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

たいがいの方々に「きれいね」とか「デザインからスクショしたの?」とか嬉しいことを言っていただけます。(*ノ∀`*)ノ ソンナ マサカ~ オホホ~

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

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

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

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

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

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

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

こんな感じ。

続きを読む

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

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

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

これも非常に簡単です。

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

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

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

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

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

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

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

素材のトリミングもExcelでできますよ

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

素材のトリミングもオフィスでできますよ

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

そんなこんなでWFを作成

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

そんなこんなでWFを作成

本音がだだ漏れたワイヤーフレームが切れましたね。(´_ゝ`) ふ!

だいたい素材探しも含めて30分程度で作ることができます。

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

[+]は、「テンキー」の[+]ではなく、アルファベットキーの中にある[+]です。

そんなこんなでクライアントお戻し対応

はてさて。なんとか作ったワイヤーフレームをお客様に見ていただき、例えば「これじゃあ、うちの豊富なプランがあることが伝わらない」とご指摘いただくとするじゃないですか?

そうしましたら、とりあえず「プラン」部分を上のほうに移動してみましょうか!

1.まずは、移動したい要素があるセル行をまるまるカットします。

要素カット

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

セル行選択

3.[Shift]+[Ctrl]+[+] で挿入!

ペースト挿入

4.あとはちょいちょいと余白入れて整えたら…はいできました!

完成

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

マウスやカーソルの誤操作で、左右の不揃いとか起きにくくなります!ヾ(o´∀`o)ノ
私が書き留められるノウハウはこれが限界です…。(ノД`)

今回は「みんなが持っている身近なツール(Excel)で簡単きれいに作れるよ!」的な記事にさせていただきましたが、下記ページでは専用のツールを紹介していますので興味のある方はこちらもぜひともチェックしてみたください(・∀・)ノ
チェックしておきたいワイヤーフレームツール5選

最後までお読みいただきありがとうございましたー!ではでは…。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

かっきー(ディレクター)

ソリューション事業部でディレクターしてます かっきー です。前職ではデザイン・コーディングを2年近くやってましたー。ソニックに入って2年目を迎えることとなりました。

アシスタントWebディレクター急募!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
アシスタントWebディレクター急募!

新着の記事

mautic is open source marketing automation