前回はデザインラフの制作を開始しました。
工程は、3点のポイントを書き込みキーワードを抽出すること、
次に、トップページのデザインラフを描くことでしたね。
3つのポイントの書き方やキーワードの抽出が適切であれば、
当然デザインラフのクオリティも高いものが出来上がるはずです。
今日はデザインラフをよりクオリティの高いものにするためチェックを行います。
そしてデザインラフ制作の次の工程である「ワイヤーフレーム」の制作を行うため、
まずはどういったものなのか？を理解していきましょう。
デザインラフの制作 ② デザインラフのチェックポイント
こちらもトップページデザイン確定までのワークフローに「確認と修正を繰り返す」という部分がありましたね。手書きデザインラフも確認と修正を繰り返しブラッシュアップしてより良いものにしていきましょう。
ただ、手書きデザインラフの段階でクライアントに確認してもらうのはちょっと難しいですよね。
クライアントが読めるかどうかわかりませんし、不安定で要素のサイズも不明確です。
だから、まずは自分自身でデザインラフのチェックを行いましょう。
ここに注目！
注目すべきは3つのポイントの一つ「どんなサービスを提供している？」の部分です。
この部分をしっかりと書き込んでおくことで、後々のページデザインの時に、
クオリティの高いものを作れば作るほど、更にブラッシュアップさせることができます。
では、このデザインラフを最も優れたカタチで実際のPhotoshopのデザインに活用するためにいくつか項目を絞って、ポイントとラフはきちんと設計できているかのチェックを行ってみましょう。
モニターを考慮した比率やサイズになっているか？
ウェブサイトを閲覧するのは一定のサイズのモニターだけではありません。
自分だけが閲覧するのなら問題ありませんが、仕事として請け負っている以上、
クライアントがいるその先にエンドユーザーがいるはずです。
極端な話、エンドユーザーが問題なく閲覧できればいいんですが、
どれくらいのモニターサイズに対応すればいいのか？というと・・・
| 主な画面解像度とアスペクト比の関係（ワイド画面） | ||||
|---|---|---|---|---|
| 略称 | 横×縦のドット数 | アスペクト比 | 横×縦の総ドット数 | |
| WSVGA | 1024×600 | 16：9.375 | 61万4400 | |
| 720p | 1280×720 | 16：9 | 92万1600 | |
| WXGA | 1280×768 | 16：9.6 | 98万3040 | |
| 1280×800 | 16：10 | 102万4000 | ||
| 1360×768 | 約16：9.035 | 104万4480 | ||
| 1366×768 | 約16：8.996 | 104万9088 | ||
| WXGA+ | 1440×900 | 16：10 | 129万6000 | |
| WSXGA | 1280×854 | 16：10.675 | 109万3120 | |
| WSXGA+ | 1680×1050 | 16：10 | 176万4000 | |
| 1080i／p | 1920×1080 | 16：9 | 207万3600 | |
| WUXGA | 1920×1200 | 16：10 | 230万4000 | |
| QWXGA | 2048×1152 | 16：9 | 235万9296 | |
| WQXGA | 2560×1600 | 16：10 | 409万6000 | |
| 主な画面解像度とアスペクト比の関係（スクエア画面） | ||||
|---|---|---|---|---|
| 略称 | 横×縦のドット数 | アスペクト比 | 横×縦の総ドット数 | |
| VGA | 640×480 | 4：3 | 30万7200 | |
| SVGA | 800×600 | 4：3 | 48万0000 | |
| XGA | 1024×768 | 4：3 | 78万6432 | |
| XGA+ | 1152×864 | 4：3 | 99万5328 | |
| SXGA | 1280×1024 | 5：4 | 131万0720 | |
| SXGA+ | 1400×1050 | 4：3 | 147万0000 | |
| UXGA | 1600×1200 | 4：3 | 192万0000 | |
| QXGA | 2048×1536 | 4：3 | 314万5728 | |
参考：ITmedia流液晶ディスプレイ講座II 第3回：16：10と16：9はどっちがいい？――「画面サイズ／解像度／アスペクト比」を整理する (2/3) – ITmedia PC USER
ざっと挙げるだけで、これだけのモニターサイズがあります。これでも一例です。
実際にはもっと様々なモニターサイズがあり、スマートフォンやタブレットに対応するとなると、
さらに多くの種類のモニターサイズへの対応が必要になります。
なぜこんなにサイズや比率が違うのか？というと・・・
- PC
- スマートフォン
- タブレット
- ポータブル音楽プレーヤー
- テレビ
- カーナビゲーション
- 家庭用ゲーム機
- その他のウェブサイト閲覧が可能な機器
このように用途や機能が全く違うのに、なぜかちゃっかりウェブサイトを閲覧できる機器が多いからです・・・（マジでやめてほしい）
こんな感じで現実的に非常に難しい話ではありますが、「どのモニターでも問題なく見られる」ように対応することが最低限になってくるのがウェブサイト制作です。
「そこ」になぜ「それ」を使っているのかを説明できるか？
デザイン関連業界でよく使われる言葉に「すべてのデザインには理由がある。」というものがあります。
極端にわかりやすい例を出しましょう。メガネを想像してみてください。
メガネって、なんでこのカタチなんだろう？？と思ったことはありませんか？
メガネがこういったカタチに至ったのにも全て理由があります。
- なぜレンズがあるのか？？→見えやすくするため
- なぜ曲がっているのか？？→耳にかけるため
- なぜたためるようになっているのか？？→メガネケースにしまうため
という感じ。
デザインは設計・問題解決だ、と前回お話ししましたが、まさにこれですよね。
視力が低く裸眼では見えにくい人がメガネを使うことによって視力の問題解決をしています。
また、デザインは説明ができなければいけません。
説明ができないものは、人々がそのデザインに触れる機会が極端に減ってしまいます。
例えばメガネを初めて見た人は「これはなんだろう？何に使うの？」と考えると思います。
その時に「見えやすくする道具で耳にかけて使うんだよ」といった説明があればすんなりと使ってもらえますよね。
そして説明をした上で使ってもらえば「それならばもっとこうしてほしい」といった要望も聞くことができるようになり、そこにさらなる問題解決=デザインの可能性が発生します。
逆に説明がなければ使い方もわからず「もういいや」と捨ててしまうかもしれませんよね。
デザインはコミュニケーションだ、というのはそういうこと。
「絵」を書いただけで満足していないか？
毎年ウェブデザインBを受け持って感じたことですが、とても絵のクオリティが高いものが多く、絵を描くのがうまいなぁという印象を受けます。
もちろん上手く描くに越したことはありません。
上手く描こうとする姿勢もクライアントは評価しますしその分伝わりやすいというのも事実です。
ただデザインラフはエンドユーザーは目にすることはありません。
誰に見せるために作るか？という本来の対象は依頼主であるクライアントです。
デザインラフというものはあくまでクライアントにイメージを伝えるツールの一つなので、
そこに時間を使ってしまうと次の工程の着手が遅れてしまいます。
せっかくPhotoshopで効率のいい制作作業を行って時間を節約できても、
デザインラフにのめり込んでしまっては意味がありません。
ただ、クオリティの高いデザインラフを書き、かつ3つのポイントもしっかり書けていて、
さらにイメージが伝わるように枠外に注釈を書いている学生もいます。
文字情報を付けてちゃんと構成できているものはその後のデザイン効率が大きく違います。
それに加えて、クライアントへの配慮がきちんとされている、とても優れたデザインラフです。
デザインラフの見直し
デザインラフのチェックポイントは以上です。
自分の描いたデザインラフを分解して、必要があれば書き直し修正を行います。
チェックポイントは・・・
以上でしたね。
なお、このデザインラフは度々見直しを行うために今後も使いますので持っていてください。
さて次の工程はこのデザインラフを使って「ワイヤーフレーム」というものを作っていきます。
課題の提出
では先ほど制作したトップページデザインラフ課題を提出しましょう。
課題をスキャナ等で読み取り以下のフォームからJPGで添付送信してください。
スキャナーがない場合はスマートフォンの写真撮影でJPGにしたデータをPCに取り込んでも構いませんが、確認しづらい可能性があるので、可能な限りスキャナで読み込んだJPGデータを提出してください。
JPGデータが準備できたら、以下のフォームの必要項目に記入を行い、送信を行ってください。
なお、以下のフォームで提出できるのはJPG（拡張子：JPG|JPEG|jpg|jpeg）のみになります。
それ以外の形式ではフォームからの送信ができませんので注意してください。
また今すぐ提出のJPGデータが準備できるわけではないと思いますので、
提出期限を来週の講義開始前までとします。
繰り返しになりますが、課題用紙に手書きで書いたものをスキャナで読み取ってJPG（拡張子：JPG|JPEG|jpg|jpeg）データで取り込み、以下の課題提出フォームからデータを提出してください。
ワイヤーフレームの制作 ①
トップページのデザインラフを今度は「ワイヤーフレーム」に落とし込みます。
さて、この「ワイヤーフレーム」とは何か？
ワイヤーフレームとは？
ちょっと分かりにくいかもしれませんが、これがワイヤーフレームです。
もしかしたらこれでもわかりにくいかもしれないので、
前回の手書きラフの時と同様にGoogle画像検索で探してみましょう。
これとかが最もシンプルでわかりやすいんじゃないかな？？
キャンバス上に四角形やテキストが配置された、いわば「ページ上の間取り図」のようなものです。
このワイヤーフレームを使ってトップページのレイアウトを作り、
ブラウザで見た時に、実寸でどんなサイズなのかpixel単位で確認できます。
なぜワイヤーフレームを作るのか
第2回の講義の「トップページデザイン確定までのワークフロー」の説明で、
「ワイヤーフレームは実際のサイズで作る」と少し触れましたが、なぜでしょうか？？
それは、モニターに表示された時の実際のサイズを把握するため。
また、どこに何をレイアウトしていくのかを役割や機能を明確にするためです。
それに加え、誰が見てもわかりやすい状態にする（清書する）ことで、
複数人でのプロジェクトでも、差異なく滞りなく進めるため、という理由もあります。
そう、一つのサイトを制作するのに関わるのは自分とクライアントだけではありません。
例えば、もしこの仕事が代理店経由の依頼の場合なら、
まず代理店の担当者にレイアウトや仕組みを理解してもらう必要があり、
その担当者を通してクライアントに見せることになります。
当然担当者が理解できなければクライアントに見せることなんてできませんよね。
また、サイトに使う写真をプロのカメラマンに撮ってもらうのであれば、
どこにどんな写真が必要になるのかの指示が必要になります。
明確な指示をしない場合にはカメラマンの考えや技術任せになってしまうため、
思っていた写真と違った・・・ということも少なくありません。
複数の人間が見ることを想定して、手書きのものをそのまま出すのではなく、
清書した状態で、相手に理解してもらうことが重要になります。
ワイヤーフレームはプロジェクトメンバーの差異部分を埋めるためのコミュニケーションツール、ということですね。
実際の案件事例 その①
デザインラフ・ワイヤーフレーム・仕組みの説明・デザイン成果物
ここからは実際に作業している状態のものを見てみましょう。
それが以下のもの。
以上4点はトップページのデザイン成果物（完成デザイン）ができるまでにどういった作業工程が発生するのかの一覧として見てもわかりやすいですね。少しはイメージできたかな？？
実際の案件事例 その②
デザインラフ・ワイヤーフレーム・デザイン成果物
その①で、「どういった作業があるのか」「どのような制作物になるのか」を確認しましたが、
もう一つのサイトを例にとってもっと細かく見ていき、実際にはどういった使い方をするのか？を考え、
その結果である「デザインラフ」「ワイヤーフレーム」「デザイン成果物」を見てみましょう。
デザインラフ制作前の3つのポイント
この「中山下スキンクリニック」様は、
岡山市内で一般皮膚科・美容皮膚科を新たに開院されるということで、
ウェブサイトの新規制作のお問い合わせ・ご依頼をいただきました。
できたばかりのクリニックに伺うと開院前にリフォームを行われたらしく、
内装も素敵でとても綺麗な印象。また院長先生も気品があってとても素敵な方でした。
お話を聞いていると、一般皮膚科も美容皮膚科もどちらもバランスよく行われるということで、
どちらかに比重を置いてデザインを組むというわけではなさそう。
また、院長先生の好きなデザインのテイストは「オリエンタル系」で、
キーカラーはそれほど彩度の高くない落ち着いた「紫」で、
診察券や封筒などにも使われている色。
・・・ここまでの内容で第03回で書いた3つのポイントは作れますね。
デザインラフに着手
ヒアリングができたらいよいよデザインラフの制作です。
今回はポイントを元にこんなデザインラフを描きました。
これをクライアントに見せ、チェックバックをもらいます。
クライアントが思い描いたデザインと自分が作ろうとしているデザインには必ずと言っていいほど差異があります。
差異がある限りはデザインを完成させることはできないのでその差異を埋める作業が必要になります。
ここをこうしてほしい。あれは必要、これは不要などなど・・・
デザインラフを使って手直しをすることによって出来上がりのイメージがもっとはっきりとしてくるため、
ヒアリングの時には出てこなかった要望やアイディア、修正点がどんどん出てくるはずです。
出てきた要望やアイディア、修正点をデザインラフに反映させて再び見せる。
このやりとりを何度か行います。
ワイヤーフレームの制作
デザインラフでOKが出たら、今度はそれをワイヤーフレームに清書します。
今回はこんな感じのワイヤーフレームになりました。
Photoshop上でどのような操作によってワイヤーフレームを制作するか、というのは後日時間をとって解説しますね。
デザイン成果物（完成デザイン）
デザインラフ、ワイヤーフレーム、そしてPhotoshopでのデザインを終え、最終的に以下のデザインになりました。
この状態でクライアントのOKがもらえれば、ようやくhtmlコーディングを始められることになります。
ワイヤーフレーム・デザインラフの役割・目的もだいぶわかってきたんじゃないかと思います。
次回から制作に取り掛かっていきたいと思います。
本日のまとめ
自分でチェックできるように慣れば成長した証
デザインラフのチェックはどうでしたか？？
デザインに慣れてくれば慣れてくるほど、後から後からボロボロ修正点が出てくるようになります。
最初のうちは先輩や上司に「これをこうしたほうがいいよ」と教えてもらうことになりますが、
次第にそれにも慣れてきて、自分でチェックできるようになれば成長した証です。
納得したものを作るのに時間が足りていることなんてほとんどありません。
ほとんどは時間との戦い、そして自分だけではなくクライアントやエンドユーザーを納得させられるデザインを作りたいですね。
ワイヤーフレームは完成デザインの土台
ワイヤーフレームの理想形は「完成デザインの着色前の段階」、いわば完成デザインの土台です。
そのため、この段階で最終的なクオリティが決まってしまうことが多くなります。
ここで設計ミスをしてしまうと後々の修正が大変になりますのでじっくりと作りこんでみましょう。
もちろんそのまま本デザインに移行するので実寸のサイズを考慮して作らなければいけませんが、
Photoshopのようなツールのいいところは何度でも作り直しができるところです。
自分が書いた手書きデザインラフを、思い描く完成形に少しでも近づけるために、
よくにらめっこしながらワイヤーフレームを作っていくといいと思います。
