こんにちは、ロックウェーブの岡本です。
みなさんはワイヤーフレームはどんなツールを利用して作成されていますでしょうか？
私は以前このサイトでも紹介された「cacoo」を利用しています。
以前の紹介記事→ディレクター必見！Cacooで作るワイヤーフレームがとても便利（https://www.aiship.jp/knowhow/archives/8594）
この「cacoo」、意外と使われていないのですが、「無料ステンシル」を活用することでかなり手軽にワイヤーフレームを作成することができます。
今回はcacooを使うならぜひダウンロードして欲しい「無料ステンシル」を３つご紹介いたします。
紹介の前に・・・
そもそもワイヤーフレームとは？
ワイヤーフレームとは、「ページ内の配置をまとめた、サイトの間取り図」です。
ペンで書く線（ワイヤー）で間取り図（フレーム）を作ることから、「ワイヤーフレーム」とよばれています。
このワイヤーフレームを作ることで、メインのコンテンツとサイドバーの間隔や幅、画像のサイズなどをデザイン前に決めていきます。
この作業を行うことで、グリッドデザインのような「まとまりのあるサイト」のデザインが作りやすくなります。
「ワイヤーフレーム」や「wireframe」で画像検索をすると、国内外様々な方の作成されたワイヤーフレームを見ることができます。
ワイヤーフレームの作成方法
google画像検索を見ていただくとわかると思うのですが、ワイヤーフレームの作成方法は様々なやり方があります。
最もシンプルで、多くの方がされているやり方は「手書きで作る」ことです。
A4～A3サイズのノートにペンで大まかなイメージをラフスケッチしていきます。
手書きである程度のイメージを作成することができれば、お客様に見せるためにデータ化していきます。
その際に使われるツールとして、よく用いられるのは以下の5種類です。
- Excel
- PowerPoint
- Fireworks
- Cacoo
- Illustrator
この中で私がよく利用しているのは、Cacooです。
Cacooにはこの後紹介するような無料ステンシルが数多くあるため、手軽に作成することができるので個人的にオススメなツールです。
Cacooの便利な無料ステンシル３選
Site-it Stencil
まず紹介するのは、コンテンツの要素をステンシル化した「Site-it Stencil」です。
サムネイル一覧や、フォーム・リスト表記など9種類の要素をステンシル化しています。
このようにステンシルを3つ並べるだけで、ショッピングサイト風のワイヤーが作成できました。
グループ解除などを利用することで、サイト内コンテンツのワイヤー作成を手軽に実現できるのではないかと思います。
Site-it! Stencil：https://cacoo.com/store/items/10188
寸法線
2つ目は要素のサイズを指定する際に使う「寸法線」です。
デフォルトでも寸法線は入っているのですが、このステンシルを入れると更に便利になります。
なぜならこのステンシルには、デフォルトのものには無い形のものが入っているのです。
それがこちらになります。
「Header 2」と画像の部分を指している矢印が、寸法線で利用できるステンシルです。
このように幅のしていだけでなく、マークアップやスタイルなどの注釈にも利用できる便利なやつです。
寸法線：https://cacoo.com/store/items/10136
Yahoo Design Kit シリーズ
最後はcacooがリリースしている、「Yahoo Design Kit シリーズ」です。
「なぜ今まで入れなかったんだ」と後悔すること間違いなしの優れものです。
これはYahooが公式で配布しているDesign Kitをステンシル化したもので、バナー広告からグリッドまで幅広くカバーしているステンシルです。
グリッドは950px幅の2カラムまでがステンシルとして入っていますが、拡大縮小を利用すれば下のような変則的な3カラムデザインも作成できます。
長文のサンプル文章やスライダー・カレンダーが使えるようになると、ワイヤーフレーム作成がかなーり捗るようになります。
残念な点としてはグリッドの種類が6種類しかないことがありますが、それを差し引いても便利すぎるステンシルシリーズです。
Yahoo! Design Stencil Kit – グリッド：https://cacoo.com/store/items/10124
まとめ
いかがでしたでしょうか？
ダウンロード数を見ていると、意外とストアを活用されている方が少ないのかなという印象を受けます。
せっかく便利で無料なステンシルが配布されていますので、cacooをお使いの方はぜひストアにアクセスしてみてはいかがでしょうか。
