「サムネイル」「ラフ」「カンプ」「フレームワーク」「モックアップ」。デザイン時に、よく使う、よく耳にするこの言葉。他にも、「プロトタイプ」とか「スケッチ」とか。

「スケッチ」あたりは、そのワードから想起できるイメージがおおよそ同じはずなので問題なさそうだけど、他のワードに関しては、意外と人によって多少の解釈のズレがあったりする。

ましてや、お客さん側はこれらの言葉の意味の違いを理解してない。突然、『じゃあ、いついつまでにカンプをご用意しますので』とか言われても、何のことか分からない人もいる。『還付?』みたいな。

ということで、厳密に『これはこの工程をさすんだよ!』なんて偉そうな講釈ではなく、具体的にどういう意味合いでそのワードが存在しているのか、をまとめてみようと思う。

サムネイル

「thumb」+「nail」で親指の爪のこと。親指の爪くらい小さなデザイン(とかスケッチ)って意味。だから、よく小さな写真をサムネイルという。

サイトのデザインを行う際に『サムネイル作りますね』っていう場合も、そういう意味。本来は、アイデアや方向性をざっくり整理して手書きでササっと描く段階の小さなデザインってレベルの意味。

ラフ

『もっとラフに』って感じのフレーズって耳にしたことあると思うんだけど、要は「大まか」「概略的」って意味。細部にこだわらなくていい、あくまでもレイアウト、サイズ感、何をどこに配置するのか、などおおよその方向性が理解できるレベルの意味合い。

ワイヤーフレーム

「ラフ」と同じレベル、近い意味合いかな。言葉の意味そのままで、「線(wire)」と「枠(frame)」を使ってレイアウトやオブジェクトがどうなるのか、全体の設計図を作る作業。これは言葉のままなので、大きな解釈のズレはあまり起こらないそうだけど、どうだろう。

自分は、枠組みとか骨組みとかのデザインを共有する際に『じゃあ、ワイヤーフレーム(ラフ)作りますね』とかって感じでよく使う。

カンプ

「comprehensive(理解しやすい)」という英単語の略なんだとか。このカンプは、解釈にズレを感じることがあるんだけど、超完成度の高いデザインから、ざっくりとしたレベルのデザインまでさまざま。

曖昧だったり概略的なデザインから具体的なデザインが"理解できる"段階にするって意味かな。デザインに、具体的な「写真」「色」「サイズ」「テキスト」などを入れ込んだりして。

ただ、全ての要素が入れ込めなくても良くて、『ここはアタリで写真入れてます』とか『ここはダミーのテキスト入れてます』なんていう個所もある。

そういった具体性がほぼないデザインで、ほとんど骨組みや枠組みだけのものをカンプという人(ディレクター、デザイナー)もたまに見た経験があるので、必要であればやんわりと「どこまで作りこむのか」は確認するようにしてる。

場合によっては、このカンプの段階で「ページ遷移」とか「スクロール感」とかまで確認する作業を含むこともあるから。

モックアップ

「mock-up(実物大の模型)」のこと。ほぼほぼ完成形レベルのデザイン段階。この時点で、ほぼ全ページのデザインがしっかりと認識出来て、もしくは重要なページのデザインがしっかりと認識できて、更にさっきの「ページ遷移」とか「スクロール感」とか確認することもある。

『いついつまでにモックを用意しますね』なんて感じで、具体的なデザインだったりUIのシミュレーションだったりをこの段階で行う意味で使われる。モックアップに関しては、解釈が大きくズレてることはないかな。

プロトタイプ

「試作品」「原型」などの意味。これってデザイン性よりも、動的な表現だったり操作性のシミュレーションをしたい時に使うことが多いかな。UI/UXの設計が目的の。

デザインに具体性ができて、本投稿でいう「カンプ」レベルのデザインが出来た時点で、このプロトタイプを作って確認、って感じ。

プロトタイプはあくまでも「デザイン」に関してじゃなくて、「ウェブサイト」の試作品と捉えると分かりやすいかな。デザインのプロトタイプって、要はスケッチだったり、ラフだったり、サムネイルだもんね、意味的には。

とはいえ、雰囲気さえわかってればいいよね、と。

言葉って厳密に「使うこと」が目的じゃなくて、「お互いの意識や目標を明確に共有するため」だったり、「経験や知識や思いを伝えるため」にあるわけだから、それが破綻してなければ、言葉はなんだっていいんだよね。

ただ、「相手が学習しないと理解できない言葉」とかはダメ。頭のいい人って、色々な難しいことをたくさん知ってるんだけど、相手からすると「学習コストの高い会話」になってしまって、疲れる。

逆に、「サルでも分かる」レベルで話してくれる人って、言葉じゃなくて内容を伝えるのが上手で、アウトプットをより技術的にこなしてるんだよね。自分の頭の中の言葉を相手にわかるように脳内翻訳してたり、かみ砕いたり。

まぁ、アウトプットする側からすれば疲れる作業なんだけど。。

どちらもストレスフリーで、スムーズな関係性で作業をするためには、共通認識バッチリなのが一番。だからこそ、解釈のズレが起こらないようにしたいんだけど、今回のようなラフとかワイヤーのような「単語」に捕らわれちゃうと、「何をするのか」を伝える本質が疎かになるよね、と。

だから、結局は「お互いがその言葉を明確に同じ意味で理解しているかどうか」ってのが大事なだけで、言葉はなんでもいいわけで、言葉が問題なわけじゃないんだよね。

これを間違えてると、いつも自分と同じ理解度や感性の人としかスムーズに仕事が出来なくなる。