2016年02月29日カテゴリ:Webデザイン

Webサイト構築におけるデザインカンプの役割と評価のポイント

Webサイト構築におけるデザインカンプの役割と評価のポイント

コンペや企画提案の提出物としては必須とも言えるデザイン案。
プロジェクト進行中ではデザインカンプ、あるいはモックアップなどと呼ばれることもあります。
※本記事では「デザインカンプ」で統一します。

テキスト主体の企画書や仕様書、モノクロのワイヤーフレームといった資料に比べるとより完成イメージに近い姿が具現化されていることもあって、コンペや成果物の評価に大きな影響を与えます。

とはいえ、あくまで資料(中間成果物)の一つであるデザインカンプ。
プロジェクトのフェーズが異なれば使われ方も役割も異なります。

そこで今回はデザインカンプについて、その役割と評価ポイントについて解説します。

コンペや提案時のデザインカンプ、評価はほどほどに(間違えないように)。

まず最初にコンペや提案時に提出されるデザインカンプについて。

このタイミングではオリエンやRFP(提案依頼書)などの資料を除いて、現在あるWebサイトを中心とした公開されている情報しかありません。
制作会社側が自主的に提案してきた要素以外、サイトの構造や機能もそのまま踏襲されていることでしょう。

いわば現状抱えている課題や事象を含んだままのデザインであり、本質的な問題が解決していない可能性もあります。
本来的なデザインは、プロジェクトが進むにつれてコンセプトや情報構造、機能についても議論された後に設計されるべきものです。

なのでコンペ段階では、与件をどのように解釈し、デザインとして表現しているか(できるか)を評価するにとどめておくのが妥当です。

  • 現在のWebサイトから汲み取った企業イメージやブランドをどのように解釈、表現しているか
  • オリエンやRFIで提示した要望や課題に対する回答がどのようにデザインとして反映されているか

ちなみに制作会社のデザインの実力を測るという目的なら、実績についてより詳しい説明を求めた方がむしろ良いかもしれません。
実力のある制作会社であれば、設計についての考え方・思想も公開されているWebサイトに反映されているはずです。

設計フェーズではコンセプトや設計思想の認識合わせが重要

プロジェクトが始まると、さまざまなタイミングでデザインカンプが作成されることになります。

その中でも企画フェーズが終わり、サイト全体の構成やトップページをはじめとした主要な画面設計が出揃ったタイミングで提示されるデザインカンプは、その後の方向性を決める上でも重要な成果物となります。

評価のポイントは、企画〜設計フェーズで検討してきた内容が正しくデザインとして反映されているかを重点的に確認することです。

  • 企業イメージやブランドコンセプトが体現されているか
  • 設計思想(ポリシー)が正しく反映されているか

企画フェーズで議論されてきた内容(デザイン関連ではクリエイティブブリーフといった形で資料化します)や設計に関わるポリシーはサイト全体を支配することになりますので、ここで「ブレ」が生じるとプロジェクトが進むにつれて綻びも目立ち、また修正も難しくなってきます。

色味やトーン、フォントとその大きさ、行間や余白の使い方などさまざまな要素が絡みますので具体的な指摘は難しいかもしれませんが、例えば何となく違和感があったり全体的に思い描いていたイメージと異なっているようであれば、うやむやにすることなく制作サイドと十分協議してください。

デザイナーをはじめとしたプロジェクトメンバーにとってもデザインコンセプトや設計思想を再確認する良い機会にもなるはずです。

変容するトップページ

サイトの顔とも言えるトップページ。
デザインに関する議論の大半がこのトップページに費やされますが、案外見落とされている問題があります。

それは更新に伴って「コンテンツが入れ替わる=変化せざるを得ない」ということです。

特にメインビジュアルなど、画面領域を占有するビジュアルがデザインに与える影響は大きいものです。
これらのビジュアルはスライドショーなどのアニメーション機能が用いられることが多く、さまざまな表情を見せながら変化していくのがトップページ性質です。

こうした性質をもつトップページですから、静止画像であるデザインカンプでは表現の限界があります。
デザインの評価がビジュアルに依存するのは仕方がない面もありますが、1パターンのデザインカンプだけで評価してしまうと、例えばビジュアルを入れ替えたらその上にある文字が見えにくくなったり、サイト全体のテーマカラーとビジュアルが干渉してしまったりと思わぬ問題が発生します。

ですので、複数のバリエーションを用意した運用シミュレーションも必要です。

トップページのデザインにおいて重要なのは、雑誌の表紙のように毎号使われている写真や人物は異なっているけれど、メディアとしての印象やアイデンティティには変化がなく一定のクオリティが維持されることです。

もちろん、雑誌では一貫したアートディレクションとそのベースとなる編集方針やコンセプトがあるのですが、そこまでいかなくとも更新を見据えた提案をしてくれたり数パターンのバリエーションをデザインカンプを提示してくれる制作会社は運用の重要性を理解した上でデザインしてくれる会社と考えて間違えないでしょう。

Getting Betterとは

企業の忙しいWeb担当者の方のために、コーポレートサイトやオウンドメディアの運営に欠かせない情報やトレンド・ノウハウを解説するブログです。

日々のサイト運営のご参考になれば幸いです。

IMAGICA Lab.のWebサイト構築サービスについてはこちら
https://iiw.imagicalab.co.jp/web/

IMAGICA Lab.のWebサイト制作実績
https://cp.imagicalab.co.jp/works/category/web/

「株式会社IMAGICAイメージワークス」は、2018年10月1日に「株式会社IMAGICA Lab.」となりました。

トップへ