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

2010.01.31

これまで私が聞いてきた中で、“ワイヤーフレーム”と“モックアップ”が同じような意味合いなのかと思っていて、気になって調べました。

もともとの個々の意味は、
ワイヤーフレーム(wire frame):3DCG用語の一つで、3次元グラフィックスのレンダリング手法の1つ名称
モックアップ(mockup):実物とほぼ同様に似せて作られた模型のことである。特に携帯電話の見本品を指すことが多い。
ということだったのですが、さらに調べてみると、
モックアップ?ワイヤーフレーム?
webism
と、この他にもいろんなサイトがあったのですが、Web用語としてのワイヤーフレームとモックアップの意味あいは同じものではないかという結論に達しました。
もともとの意味もふまえて、あえて違いをつけるなら、ワイヤーフレームはコンピュータ上で作成するWebサイトの設計図のことで、モックアップは実際に手で触れるもの…ということでしょうか。
どちらの作業もWebサイトを制作していく上で一番はじめにとりかからなければいけないことですから重要なものであることは確かです。

ワイヤーフレーム/モックアップを作成するためのオススメアプリ

ワイヤーフレームとは、Webページの大まかなコンテンツやレイアウトを示した構成図で、ワイヤーフレーム決定後、詳細なビジュアルデザインを行います。
作業をしていく上で自分一人で決めていければいいのですが他者と意見をかわしながら仕事をしていくことが多いと思うので、そういう場合紙面上で行うよりも、いつでもどこでも共有できるオンラインだったらどれほど便利なことでしょう!
そこでサイトを探していくとほとんど英語のものが多かったのですが数少ない中にありました!
Cacoo(カクー)といいます。
これは複数の人達が同じ図形をWeb上で共同編集できるたり、また指定した仲間に公開することができます。これで指定した仲間に公開するとメールでお知らせしてくれるので見過ごすことがありません。
また、ワイヤーフレームだけでなく、サイトマップやオフィスレイアウトなどにも使えます。

  1. 1
    milkcocoa より:

    「かっこー」じゃないのかYO!
    でも、よくよく考えたら「かくー」でしたね。

  2. 2
    yumekauemura より:

    そうなんですよね〜
    カッコーとばっかり思っていたけれどカクーでした!
    思い込みは怖いですね、、

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">