モックアップ？ワイヤーフレーム？

モックアップはきれいに作りすぎてはいけない、という話 - 7korobi8oki.com

上記のblogはモックアップの作り方について書いてありますが、モックアップというかワイヤーフレームの作り方と言ったほうが正しいかもしれませんね。モックアップは実物に似せた模型という意味なので、どちらかというと、PhotoshopやIllustratorで制作したデザイン画だと思います。なので、モックアップは完璧に仕上げる必要があります。

多分、上記blogで言いたかったこととは、いきなりPhotoshopやIllustratorで綺麗な設計図（モックアップ）を描かずに、まずはラフに配置図を作るほうが、デザインに誤魔化されずに必要な情報を分類・整理できるということでしょうか。それとも｢モックアップ＝ワイヤーフレーム｣なんでしょうかね。個人的な感覚でモックアップというと、店頭に並んでいる携帯電話のサンプルを思い出してしまうもので。用語がよくわかりません。

ワイヤーフレームの作り方

何はともあれ、ホームページのデザインの起こし方（ワイヤーフレームの作り方）のお話です。

デザインの起こし方は人それぞれだと思いますが、私はワイヤーフレームらしきものを紙に書いた後は、すぐコーディングに入ります。

というのも、デザインからコーディングまで一人ですることが多かったので、デザインをシェアしたり、誰かにコーディングしてもらうためにデザインを起こす必要がなかったのです。

作ったデザインを上司やクライアントに見せないといけないのですが、やはりWebページならブラウザで見てももらわないと雰囲気が伝わらないのですよね。Photoshopで作ったモックアップを印刷したりPDFにしても、なんだか見づらい。

あと私の場合、作業的にPhotoshopでモックアップを作るよりもコーディングしたほうが早いというのもあります。慣れていないせいもあるかもしれませんが、テンプレートの幅を10px大きくしようとした場合、Photoshopではいちいちボックスを作り直さなければなりませんが、コーディングだったらCSSファイルで数文字変更するだけでできるので、私にとっては簡単というのもあります。画像は個別でPhotoshopで作ります。

基本的に私がホームページを作る際は、以下のサイトに書いてあることをしています。

7日間でできるCSSベースのホームページの作り方

とにかく紙に書きまくりです。無地のノートがとても役に立ちます。 ワイヤーフレーム（レイアウトデザイン）を作る際は、方眼ノートを使用します。ノートは無印良品かコクヨが好きです。

上記blogで紹介してあった、Mockingbirdのようなモックアップ作成サービスを使うのも手ですね。

ワイヤーフレームを作る際はこちらのblogが参考になります。

ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker