デザインプレビューとは? – Web担当者が理解しておきたい基本用語

デザインプレビュー(デザインカンプ)とは何か

デザインプレビュー(デザインカンプ)は、ホームページの出来上がりの見た目を事前に確認するための過程のことです。あるいは、デザインプレビュー画像と呼ばれる画像ファイルそのものを指します。

構成案やワイヤーフレームを固めた段階で、コンセプトや、ある程度掲載する内容、ロゴやメニュー、大見出し、ボタン、バナー等の位置が決まっていきます。それらはあくまで、「ここはこうしたい」という関係者で共有された記号ですので、デザインプレビュー(デザインカンプ)の作成段階においてはじめて、記号が具体化され、実際にホームページになる唯一の見た目として関係者の前に現れるのです。

web担当者側のチェックポイント

デザインプレビューの確認では、事前共有した内容と照らし合わせながら、十分に比較・検証を行いましょう。例えばチェックポイントとして、

・コンセプト(ホームページの目的・あり方)に沿っているか
・構成案やワイヤーフレームと合っているか
・事前に話した色や雰囲気と合っているか

といった確認が、とても大切です。

web担当者の方の経験として、デザインとして初めて見る際に「イメージしたホームページと合っていない」という印象を抱くことが意外に多いのではないでしょうか。
この現象は、イメージをしているつもりでも、実は考えがまとまっておらず抽象的なままであった場合や、イメージをきちんと言葉で表現してデザイン担当に伝えるプロセスが省かれた場合に起こりがちです。
しかし、イメージと違っても、デザインの意図を説明してもらい、関係者で納得・合意ができればそれを正としても良いでしょう。
サイトの目的やあり方を体現しているかが大事です。

メニューやボタンはクリック(スマートフォンならタップ)しやすい形状か

他にも、実際使いやすいかどうかはとても大事なポイントです。
例えば、クリックしてもらいたい箇所なのに、マウスカーソルを載せる面積が小さいとユーザーはクリックしずらく、ストレスを覚えるでしょう。
とくにスマートフォンは画面領域が小さいため、クリック(タップ)面積が小さいボタンやリンクが並んでいると、間違った箇所が反応して意図しないページに遷移してしまう可能性があります。

コーディング後のデザインは修正しずらい

気を付けておきたいのは、コーディングが完了した段階、すなわちHTMLという形態に変換して、実際ブラウザーでの閲覧や操作が出来るようになった段階では、デザインを修正する工数が増えてしまうという点です。
デザインプレビューは、まだ1枚の画像の段階です。その段階においては、

デザイン制作ソフトでのデザイン調整 → 確認・調整

となり、コーディング後のデザインの修正には、

デザイン制作ソフトでのデザイン調整 → 確認・調整 → HTML化 → 確認・調整 → 場合によっては該当箇所の周囲のHTMLも変更

というようにプロセスが増えます。
後で直せるからと思ってデザイン確認を怠ると、大きい影響があるかもしれないことを覚えておきましょう。

デザインプレビューをワクワクして迎えるために

仕様書や構成案の段階から、サイトが具体的になるデザインプレビューは、ホームページの制作フローにおいて、とてもワクワクする瞬間です。
こんなはずじゃなかったと関係者一同が抱かないように、前段階の準備を十分行ってホームページを成功させましょう。

ホームページの新規立ち上げ、リニューアル、CMS導入などのご相談は
下記よりお気軽にお問い合せください

ご相談・お問い合わせはこちら

弊社の携わったホームページの制作実績を、
一部ご紹介します

クリックネットの制作実績

ホームページ制作や、受験生・社会人向け広報など
弊社が展開する教育機関・研究者向けサービスをご紹介します

クリックネットの大学向けサービス
Posted by CN編集部
他の記事を読む
担当者がウェブサイトの公開前に気をつけておきたいポイント
ヘッダー・フッターとは? – Web担当者が理解しておきたい基本用語
原稿を用意しよう – ウェブサイトの発注担当者が知っておきたい作成フロー
確認のコツ! 実機でのブラウザー確認
キャッシュとは? – Web担当者が理解しておきたい基本用語
大学の周年事業サイトに入れたい内容4選
YouTubeを使わずに動画を掲載できますか? – よくある質問にお答えします
サイトマップとは? Web担当者が理解しておきたい基本用語
ウェブサイトの発注時に用意したい、サイトマップの作り方。
写真の選び方(利用時の注意点について)

ホームページの新規立ち上げ、リニューアル、CMS導入などのご相談は
下記よりお気軽にお問い合せください

ご相談・お問い合わせはこちら