Web制作プロセス：デザインラフ

デザインラフフェーズの図

このフェーズでは、詳細なビジュアルデザインを行います。掲載する写真の撮影・選定・加工、イラストの作成、アイコンやボタンなどの UIパーツ作成、ページ装飾、その他ビジュアルに関する具体的なデザインをすべて行います。

アウトプットとしては、従来どおりデザインカンプにまとめるか、それともデザイニング・イン・ザ・ブラウザ手法のように画面に配置する写真や UIパーツだけ準備するのか、制作方針により決めます。

いずれにしても Photoshop や Illustrator など画像編集ソフトによる画像作成はこのフェーズで行います。

なお、最近では画像編集ソフトを使わず、CSS3 でボタンやアイコンを表現することが多くなってきましたが、それらはコーディング時に作成するので構いません。

【デザインラフフェーズのタスク】

カラー設計をする
UIパーツや写真を収集・作成する
デザインカンプを作成する

カラー設計をする

このタスクでは、配色を考え使用する色のカラーコード表を作成します。
微妙な調整はページ全体ができあがってからも行いますが、デザインカンプ作成やコーディングに必要なカラーコードはここで用意します。

配色を考える上でのポイント

配色には「美的効果」と「機能的効果」の２つがあります。統一性があり調和がとれた配色は美しく感じますが、それだけではいけません。目立つ・区別しやすいなど、機能的な配色も考慮します。
モニタディスプレイでは紙で見るのとは違い、色はかなり違って見えることを認識します。ディスプレイにはいくつかの方式があり、それぞれ色の再現範囲が異なりますし、ユーザーが設定を調整している可能性もあります。
色の見え方には個人差もあります。色覚が正常な人でも、見え方にばらつきがあります。独特の色覚を持つ人にとっても見やすいサイトにするには、色相の違いではなく明度差を使った配色にする必要があります。
色の見え方は隣り合う色にも影響を受けます。また使われる面積でも違って見えます。
配色に関する理論はありますが、すべての環境に適し万人に好まれる配色などありません。自分なりのルールを決め適用したら、実際にページをたくさんの人に見てもらうのが大切です。

どのような色を決める必要があるか

キーカラー
配色する際に鍵をにぎる最も重要な色のことです。必然的にサイトの印象を決めることにもなります。ロゴの色をキーカラーにしたり、サイトで表現したいイメージに合う色を選択したりします。ただし、キーカラーが最も多く使う色とは限りません。目立つ場所に少量だけ使うということもあり得ます。
ベースカラー
使用する割合が最も多いベースになる色のことです。ただし背景色となる白は除きます。キーカラーをベースカラーとする場合も多く見受けられますが、絶対ではありません。
サブカラー
ベースカラーを補う色のことで、ベースカラーよりは使用する割合が少なくなります。１色とは限らず複数使う場合もありますが、多くとも４色程度とするべきでしょう。
アクセントカラー
目立つ部分にほんの少量だけ使う色のことです。ベースカラーとは対照的なトーンを変えた補色などがよく使われます。
本文のフォントと背景
背景が白の場合、フォントカラーは黒が最も多いのですが、カラーコードでは若干薄い「#333」がよく使われています。背景を白以外にするならフォントカラーもそれに合わせて調整しましょう。
ヘッダ・フッタの背景
ヘッダ・フッタはすべてのページに表示されるため、その背景色もサイトの印象にかなりの影響を与えます。ページ全体に溶け込ませる色にする場合もありますし、あえて違う色にして区切りを明確にする場合もあります。
グローバルナビゲーション
グローバルナビゲーションは目立つようにします。また、hover や active の色を変えることが多いので、それも決めます。
見出し
見出しも目立つ必要があります。背景や境界、フォントカラーなどで目立たせますが、その際に使用する色を決めます。
テキストリンク
慣例としてテキストリンクは青系の色を使います。ただし青系統でもキーカラーや背景色に合わせて調整します。テキストリンクに青を使わなくても構いませんが、リンクしないテキストに青を使うのは避けた方がよいでしょう。また、visited / hover / active の色も決めます。

どのように色を決めるか

色相を揃えた同系色で配色する
ベースカラーと同系色に揃えることで、落ち着いた配色になります。それに白・黒・グレーの無彩色を組み合わせます。
トーン（彩度・明度）を揃えて配色する
トーンを揃えると、統一感が出てデザインテーストを伝えやすくなります。
色相環を分割して配色する
複数の色相を使う場合は、色相環を分割して決めると色どうしに秩序を持たせることができます。トライアド（３分割）、テトラード（４分割）、ヘクサード（６分割）などがあります。

便利なツール

【色見本サイト例】
原色大辞典：http://www.colordic.org/
まずキーカラーを決める必要がありますが、企業のロゴやテーマカラーからとったり、気にいったサイトからピックアップします。あとは色見本サイトを参考にします。

【Adobe Color CC】
配色を検討するのは、「Adobe Color CC」が便利です。
５つのカラーコードから構成されるテーマを作成するのですが、公開されているテーマを参考にしたり自分で作成したテーマを保存することができます。
Adobe系のソフト、Photoshop / Illustrator / Fireworks のメニューからテーマを取り込んで使うこともできます。さらにこのツールで最も凄いのは、任意の画像から自動的にテーマを作成してくれる機能です。

【Color Scheme Designer】
トライアドやテトラードなど色相環を分割し、自分で配色パターンを作成するなら、このツールが使いやすいくておすすめです。直感的な操作で細かい調整まですることができます。
作成した配色でサンプルサイトを表示してくれる機能は、クライントと配色によるイメージの共有をするのに役立つでしょう。
また、その他にも便利な機能が備わっており、作成した配色パターンをさまざまな形式でエクスポートできたり、色覚異常やグレースケールの表示シミュレーションもしてくれます。
http://paletton.com/

【Illustrator カラーガイド】
設定したベースカラーから、トライアドやテトラードなどハーモニールールに沿って３～６色の配色パターンを作成してくれます。
また、表示されている配色パターンすべての色に対して、「淡彩・低明度」「暖色・寒色」「ビビッド・ソフト」を段階的に表示してくれます。

【Colour Contrast Analyser】
Windows または Mac OS X で使用できるソフトです。前景と背景のコントラストチェックと、色覚異常の見え方をシミュレーションしてくれます。
ダウンロードは下記ページから。
https://www.paciellogroup.com/resources/contrastanalyser/

UIパーツや写真を収集・作成する

ここでの作業は、素材を揃えることです。素材には、写真・動画・イラストなどの他、アイコン・ボタン・バナーなどもあります。
写真は実際に撮影しなくても、クライアントから提供してもらったり素材サイトからの購入で済ませることが多いでしょう。無料で商用サイトにも使える素材はたくさんありますし、自分で作成するにしても Photoshop などのソフトで画像ファイルを作成するほか、CSS3 で作成する方法もあります。
素材は収集するにも作成するにも意外に手間がかかるものです。時間とコストを勘案し最適な準備方法を選択します。

各素材のファイル名を決定する

素材を画像ファイルや動画ファイルで準備する場合、それぞれのファイル名を適切に命名します。ひとつ作成するたびにファイル名を考えていると統一性がなくなりますので、作成予定のファイルを最初にリストアップし、ルールに沿って命名しておきます。基本的には、小文字の半角英数字と "-(ハイフン)" および "_(アンダースコア)" を使って命名します。

ファビコンとアップルタッチアイコンの作成

ファビコンとアップルタッチアイコン（apple-touch-icon）は必ず作成しておきましょう。ページ表示に必須ではないのですが、個人の趣味のサイトならともかく、企業サイトでこれらが作成されていないのはやはり問題です。

アップルタッチアイコンはデバイス毎に複数のサイズを用意してもよいのですが、面倒なので 192x192 のサイズだけ作成すれば問題ありません。画像形式はPNGで作成します。

ファビコンは ico形式でファイルを保存する必要があるのですが、GIMP を使えばできます。一番簡単なのは、ファビコン作成サービスを提供するサイトを利用することです。ファビコンもたくさんの画像サイズがありますが、16x16 / 32x32 / 48x48 でマルチアイコンを作成しておけばよいでしょう。
【ファビコン作成サイト】
http://ao-system.net/alphaicon/

アイコンフォントの作成

単色の簡単なアイコンなら、画像を作成するのではなくアイコンフォントを利用するのがよいでしょう。
アイコンフォントは Webフォントですので、テキストと同じようにサイズや色を CSS で簡単に変えることができます。ベクターデータのため拡大してもボケません。自分で作成することもできますが、無料でファイルをダウンロードできるサイトがたくさんありますので、そちらを利用するのが便利です。

以下の記事を参考にしてください。
「アイコンフォントの基本的な使い方」

CSSアイコンの作成

最近ではアイコンも CSS で作成されるようになってきました。容量が軽いのが一番のメリットです。
自分で作成するのは時間がかかりますが、無料で公開しているサイトがありますので、そちらを利用します。

以下の記事を参考にしてください。
「CSSだけで作成したアイコンを利用する」

CSSボタンの作成

ボタンも画像ではなく CSS で作成することが多くなってきました。

Fireworks では作成したボタンの CSSコードを自動で出力することができます。
以下の記事を参考にしてください。
「CSSだけで作成したアイコンを利用する」

また、ボタンジェネレーターを提供するサイトもたくさんあります。
【ボタンジェネレーターサイト】
http://css3buttongenerator.com/
http://www.bestcssbuttongenerator.com/
http://cssgradientbutton.com/
http://grad3.ecoloniq.jp/

画像ファイルの圧縮

画像ファイルは画像品質を保ちながら圧縮することが大切ですが、画像編集ソフトで保存しただけでは不十分です。ファイルサイズを圧縮し最適化してくれるツールを使用しましょう。
以下の記事を参考にしてください。
「PNGファイルのサイズを圧縮し最適化するツール」

画像圧縮サービスを提供するサイトもあります。
下記サイトは、ブラウザ上に PNGファイルもしくは JPEGファイルをドラッグ＆ドロップすることで圧縮できます。ただし JPEGファイルは劣化が目立つ場合がありますので、圧縮後によく確認します。
【TinyPNG】
https://tinypng.com/

CSSスプライト

HTTPリクエスト数やファイルサイズを削減する方法として、「CSSスプライト」があります。
CSSスプライトもマニュアルで作成すると大変ですが、Fireworks には簡単に CSSスプライトを作成する機能がありますので、効率的に作業を行うことができます。

以下の記事を参考にしてください。
「FireworksでCSSスプライトを作成しページに実装する方法」

素材提供サイト

有料あるいは無料で素材を提供しているサイトは世の中にたくさんあります。
クオリティの高い素材を求めるなら、やはり有料サイトから購入したほうがよいですが、無料素材でも十分なケースもかなりあります。
無料で提供しているサイトは以下のページで紹介しています。
https://weback.net/site/material/