ワイヤーフレームで設計案を整理する
ブログデザイン変更で幾つもアイデアは閃き、それをメモに残すなどして忘れないようにはしてたのですが、実際にそれを整理するとなると、箇条書きの羅列ではデザインのイメージが全然湧かないですよね。
ふと考えた。
ブログレイアウトのイメージを絵にした方がいいんじゃないかな。
で、思い出したのが、「Webクリエイターボックス」さんの記事。
ワイヤーフレームという言葉はときどき耳にしてたものの、なんのことやらイマイチ分かってなかった。要するに「Webサイトの設計図」と考えればいいのか。
前職のSE時代、画面のイメージに関する設計書を作る仕事もしてました。ただ「画面設計書」とか「機能定義書」とか、そういう名称を使ってた。
システム開発とは言っても、Web、3D、デザインなどと関連のない仕事だったのもあり、ワイヤーフレームという言葉を知ったのは会社を辞めてから。なので今回が初のワイヤーフレーム作成。
無料アカウントで十分便利な「Cacoo」
前職で画面の設計書を作る際、ツールはExcel（エクセル）を主に使ってました。今回も当初はExcelで作るつもりでしたが、前述したWebクリエイターボックスさんの記事内に紹介されてた「Cacoo」というサービスがとても気になった。
「シート」という単位で設計図を作成し、保存することが出来ます。有料プランならシートを無制限に作成・保存できます。
無料アカウントでも利用可能で、その場合は25枚までシートを保存できます。
作成したワイヤーフレームは、PNGファイル形式で「絵（画像）」として出力し保存しておくことも可能。編集・変更は出来ません。
なお、こちらのリンクから無料アカウントに登録すると、登録した人と私（りくま）の双方に使用可能なシートが5枚追加されます。
今回作ったワイヤーフレームの一部を紹介
↑初めて「Cacoo」を利用して作ってみたワイヤーフレーム。
手帳などに記録しておいたカスタマイズ案を図としてワイヤーフレームに反映させていき、補足項目を追加したり、実際にイメージが出来上がってから気付いて修正したり。
最初は操作に少し戸惑うけど、慣れればどんどん作業が進みますし、新たなアイデアが閃いたりもしました。
それまで一番の問題だった「何をやればいいか、何から始めればいいかワカラン！」という混乱も、ワイヤーフレームを作ったおかげで視覚的に整理が出来て解決していきます。これは使ってみて大正解だった。
↑これは記事ページのワイヤーフレーム。トップページと記事ページでデザイン（表示させるウィジェットや設定）を変えたかったので、両方のワイヤーフレームを作りました。
↑付箋のようにコメントを貼り付けて仕様変更箇所などを分かりやすく表示させたりもできます。使い方はイロイロ。
↑1つのファイルで複数のシートを作ることが出来ます。これが便利だったんですよ。補足しますね。
↑まず「ベース」というシートを最初に作りました。ここには「どのページにも同じく共通で表示させるパーツ」を描いてます。
左上のロゴ、中央のナビゲーションバー、右サイドバーの一部に関しては「トップページも記事ページも同じ表示」なので、この共通部分を「ベース」のシートに作る。
↑2つめとして「トップページ」のシートを作成。1つめの「ベース」に作った共通部分、つまりブログのロゴやナビゲーションバー、右サイドバーはココでは書かず、トップページ独自で表示させるパーツや機能のみを描いていきます。
ただ、トップページ単独で書いてもイメージが湧きにくいし、ベース部分と後で合体させてもズレますよね。なので両方を同時に表示させます。
↑画面下にシートの名前が一覧で並んでますので、そこを右クリック。「シートの設定」を選択し、背景シートをセットすると、共通部分が重なって表示されるようになります。
共通部分は「ベース」に描き、あとはトップページと記事ページのレイアウトをどんどん描いていく。共通部分を変更すると、そのデザインが全てのシートに反映されますので効率もいい。
作ってる途中で「このパーツも共通部分でいいよなぁ」となる時、けっこうありました。そんな時は画面左上のメニューバーで移動したいパーツを「切り取り（カット）」し、「ベース」シートに「貼り付け（ペースト）」すれば、元シートと同じ位置に移動できます。これも便利。キーボードショートカットをご存知の方はそれでも大丈夫。
↑「ステンシル」という名前で、いろんな種類のデザインパーツが用意されてます。上のはプログラム設計書などでもよく使われる基本的な図形。
↑吹き出しのステンシル。私は補足コメントを書くために利用しました。ステンシルは大きさや背景色、文字フォント、文字色などを自由自在に変更できます。
↑オフィスレイアウトのステンシルもあります。職場フロアで引っ越しなどによりレイアウト変更が発生した時などに、Cacooでフロアの配置図が作れますね。
↑Webサイトやブログのワイヤーフレームとしてのステンシルも初期状態で用意されてます。ボタン、ウィジェット、検索ボックス、ラジオボタンなどなど、部品が最初からありますので、イチイチ自分で作る必要もなし。
各ステンシルをドラッグ＆ドロップするだけでシートに配置できますので、操作もすごくラクチン。Excelで部品を作り込むよりも作業が速い。
こんな感じで、私は「ベース」「トップページ」「記事ページ」と、計3つのシートを今回作成しました。無料アカウントは25シートまで作成可能なので、あと22シート作れることになります。
※25ファイルではなく「25シート」ですのでお間違いなく。
1つの図を複数の人で編集したい場合は、共同編集機能があります。無料アカウントの場合は1つの図に対して15人まで同時編集が可能（1つの共有フォルダにつき3人までの制約あり）。有料アカウントは無制限とのことです。一人で作業する場合は気にしなくても大丈夫。
ブログを複数受注して幾つもワイヤーフレームを作りたい場合は有料アカウントが無制限なので便利ですが、そうではなく個人で1つか2つくらいの設計イメージを作りたいというレベルであれば無料アカウントでまったく問題ないと思います。
このワイヤーフレームのおかげで、PC版の設計案を固める作業がスムーズに進みました。感謝！
