Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか？私はフリーランスで仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。
また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違う部分もあると思いますし、こうしたほうが効率的だよー！などのアドバイスもいただけたらなーというのが本心だったりもします …。
Webサイト作成フロー 目次
- 制作準備 – ターゲットとゴールを設定する
- ターゲットを設定する私なりの理由
- 何のための Webサイト？ – 目的
- ターゲットよりも目的が大事な場合もあります
- 制作準備 – デザインのコンセプトを決める
- 制作準備 – 情報（コンテンツ）のグルーピングをする
- Webサイトのユーザビリティ
- 迷子にさせない工夫はサイトの設計から
- 制作準備 – 作成ポリシーを決める
- 作業 – サイトの設計図、ワイヤーフレームを作ろう！
- ちょっと寄り道：ワイヤーフレームを作るときのツール
- 作業 – ページのレイアウトを作ろう！
- 作業 – 正式なデザインでモックアップを作ろう！
- 作業 – デザインカンプから画像の切り出し
- 作業 – HTML + CSS でコーディング！
- 作業 – WordPress のテーマ化
- 作業 – テストサーバーで動作確認、そして公開へ
1. 制作準備 – ターゲットとゴールを設定する
まず、クライアントさんとお話をして、Webサイトの ターゲットとゴール（公開する目的）を決めています。Webサイトを公開するにあたって、必ずそこには 見てもらいたい人 がいるはずです。
でも、クライアントさんにしてみたら、老若男女問わず少しでも多くの人に Webサイトを見てもらいたい … と思うみたいです。なのでターゲットを決めて（例えば 10代、20代の女の子とか、ファミリー層とか、学生さんとか）、限定的にする意味が分からない … というクライアントさんも多いです。
また、せっかく Webサイトを作るんだから、そこにはやっぱり 目的 があるはずです。販売促進のためとか、広報とか、通信販売とか …。
それが最後には「ファミリー層に向けた、通信販売のためのWebサイト」みたいな感じで完成形 … ゴールとなると思うんです。ゴールが設定されていないと、デザインする私も、クライアントさんも、一緒にどこを目指していいのか分からなくなってしまいます。
なので私は必ずクライアントさんと一緒に、ターゲットとゴール を決めています。そしてこれが大まかな ビジュアルデザインの指針 にもなります。
2. ターゲットを設定する私なりの理由
さっきも書いたんですけど、クライアントさんの中には、少しでもたくさんの人に Webサイトを見てもらいたいと思って、ターゲットを絞る必要なんてあるの？っていう人もいます。また、特に明確な目的を持っていないというか、漠然と他のお店（競合店とか？）も Webサイトを持っているので、うちも作らないと … くらいのクライアントさんも中にはいます。
でも、どうしてターゲットやゴールが必要なのかをちょっと考えてみましょう。
2.1. 誰に見てもらいたい Webサイト？
例えば レストラン の Webサイトを作成することになりました。でもレストランとひと言で言っても、たくさんの種類があるし、お店の特徴も必ずあるはずです。例えば以下にふたつのレストランがあります。
- 家族連れでも気軽に立ち寄れる感じの ファミリーレストラン
- 完全予約制の 高級フレンチレストラン
クライアントさん的には、「少しでも多くの人に！」と思うのも当然だと思うんですけど、ファミリーレストランと、高級フレンチでは、メインに見てもらいたいターゲット層は異なりますよね。
MAIN TARGET
- ファミリーレストランの場合 … ファミリー層や学生さん
- 高級フレンチの場合 … 年齢層は 20代以上で、カップルとか、ちょっとオシャレに食事したい人たちや、特別な日を高級レストランで過ごしたい層（ちょっと上手く言えないけど）
2.2. ターゲットの違いはビジュアルデザインにも影響します
当然のことながら、ターゲットの違いはビジュアルデザインにも大きく影響しますよね！ファミリーレストランの場合は、気軽さ や、いつでも立ち寄れる感じの 気安さ とか … そういう印象を感じられるデザインにしたいかも …。
それに対して高級レストランの場合は、落ち着いた高級感 はもちろん、ちょっと憧れるような？特別感 を演出したりもいいですよねー（二人だけの特別な日♡みたいな w）！
これって、ターゲットを絞るっていう話じゃなくて、コンテンツっていうか、お店の特徴の話なんじゃないの？って声も聞こえてきます … 。でも、私が言いたいのは、サイトを訪れた人が、「これは自分向けのサイトじゃないなー」って思われないようにするのが大切！ということなんです。
2.3. ターゲット層があやふやだと …
もうひとつ例をあげてみます。今度は 20代 ~ 30代の女性をメインターゲットにしていた、アクセサリーの通信販売の Webサイトです。でも、もっとたくさんの人に購入してもらいたいと思って、ターゲットを 50代にまで広げることにしました。50代の女性にも受け入れられるように、デザインに少し落ち着きや高級感を出して、モデルさんにも 40代の女性を使ってみました …。
でもこれが大失敗です。もともと 20代 ~ 30代に向けた商品でしたから、40代 ~ 50代の人たちにはあんまり売れませんでした …。そればかりか、もともとメインターゲットであった 20代 ~ 30代の人たちへの販売も落ち込んでしまいました。
デザインに落ち着いた高級感を出したため、以前のような気軽さ・手軽さが薄くなってしまって、20代 ~ 30代の女性が「ちょっと私向けのサイトじゃないっぽい」って思ってしまったからでした …。
もちろん優秀なデザイナーさんなら、こんな風にならないようにデザインすることも出来ると思います。ここで言いたいのは、闇雲にターゲットを広げると、メインとなるターゲット層への訴求が弱くなるかも … ということ。
なので「誰に見てもらいたい Webサイト？」というメインのターゲット層はクライアントさんと話し合って、決めておきたいと思っています。
3. 何のための Webサイト？ – 目的
今度はサイトの公開目的、ゴール となる部分を見てみます。Webサイトを公開するんだから、その目的はきっとあるはず！ここでまた、さっきのレストランに登場してもらって、公開する目的を見てみます。
GOAL
- ファミリーレストランが Webサイトを公開する目的
長年ファミリー層に親しんでもらっています。でも新規顧客獲得のために、ディナーコースやアルコール類もあることを伝えたい。 - 高級フレンチレストランが Webサイトを公開する目的
高級フレンチ、完全予約制というスタイルで長年営業しています。でもランチは予約も必要ないので、もっと気軽に利用してもらることを伝えたい。
こうなると、さっきとターゲット層も変わってきますよね！さっきはファミリー層がメインターゲットだと思っていたファミリーレストランも、20代 ~ 30代のカップルとか、OLさんとか、そんな人たちの顔も見えてきます。
また、高級フレンチの方も、学生さんがターゲット層に入ってきてもおかしくありません。一概に、ファミリーレストランだからカジュアルなデザインに、高級フレンチだからフォーマルなデザインにすればいい … という訳ではないと思うんです。ターゲットや目的によって、こんな風にデザインは変わるもの。なのでこのふたつは事前にしっかり決めておきたいです。
MEMO
もちろんユニバーサルデザインなんていう言葉も合って、見る人を選ばないデザインだってあります。
4. ターゲットよりも目的が大事な場合もあります
上記では、ターゲット と ゴール を軸にしてデザインを考えるアプローチを見てきました。でも、全部の Webサイトのデザインを、そういったアプローチで作るわけではありません。たとえば企業サイトやブランドサイトは、ちょっと違ったアプローチになると思います。
コーポレートサイトの場合、企業によって訴えたいメッセージは変わってくると思います。一般的には 信頼感 や 清潔感（クリーン）、安心感 などを出したいんじゃないかなーと思います。
ここでちょっと、コンビニエンスストア – ローソンのWebサイトを見てみます。
ローソン – トップページ
ローソンのトップページは、コーポレートカラーであるブルーを基調にして、ロゴやナビゲーションをメインビジュアルの下に配置していますね！ロゴもセンターだし、お店の入り口、看板を連想なせるような大胆なレイアウトになっています。また、バナーなどのデザインも手伝ってとってもにぎやかな雰囲気ですね。
今度はローソンの会社情報のページを見てみます。
ローソン – 会社情報
背景は白で、配色もコーポレートカラーの青をメインに同系色（+アクセント）でまとめています。このページの見出しのデザインは、会社情報ページにふさわしい落ち着いたデザインに変更されています。
コーポレートサイトの場合、一番に訴えたいのは信頼とか誠実さとかクリーンさだと思います。なのでターゲットとかじゃなくて、ブランドイメージを強化するという目的がありますよね！
たとえばメインビジュアルの中の「私たちは”みんなと暮らすマチ”を幸せにします。」を手書き風のフォントに変えるとどうでしょう？きっと親しみやすさが増して、親近感が湧くと思います。
でも、「信頼・誠実さ・クリーンさ」をアピールしたい企業には、ちょっとそぐわないかもしれません …。
ここではローソンの Webサイトを見ただけですけど、こんな風に場合によってはターゲットよりも目的重視のデザインもあるんですよね！
5. 制作準備 – デザインのコンセプトを決める
ここまでターゲットやゴールを軸にして、デザインの方向性みたいなものを見てきました。でも今まで出てきた「カジュアル」とか「フォーマル」、「信頼」「誠実さ」などの抽象的な言葉だけでデザインするのはちょっと怖いです。
こういった抽象的な言葉は、人それぞれ受け止め方や持っているイメージが違いますし、私が可愛いと思った洋服も、友達は可愛くない！っていうことだってしょっちゅうあります。
そしてこういったズレは、デザインを発注するクライアントさんと、デザインするデザイナーさんとの間でも起こること。なのでデザインのコンセプトは、もう少しハッキリとした言葉を使った、明確なメッセージを採用するようにしています。
デザインのコンセプトとしては、例えば以下のような感じで作るようにしています。
DESIGN CONCEPT
- 当社のブランド、名前、ロゴを覚えてもらいたい。
- 消費者に安全で安心な商品を提供している、信頼できる企業だと思われたい。
- たくさんの消費者のみなさんに購入してもらっている、人気の商品だということを伝えたい。
- どこよりも新鮮でお買い得な商品を取り扱ってる店舗だと思われたい。
抽象的な言葉よりこういったメッセージをクライアントさんと共有することで、イメージのズレは少なくなると思います。
明確な言葉で表したメッセージなら、ビジュアルデザインの指針にもできるし、クライアントさんユーザーのみんなにとっても分かりやすいデザインが作りやすいんじゃないかなと思います。
6. 制作準備 – 情報（コンテンツ）のグルーピングをする
ここでちょっとターゲットとゴールに戻りますね！ターゲットとゴールが決まったら、今度は情報の グルーピング をします。ただダラダラと情報を並べるだけでは、どこに何があるのかを探すだけでも大変です。辞書やアドレス帳だって、アルファベット順やあいうえお順に整理されてますもんね！
グルーピングというのは、情報を整理して、関係のある情報同士は近づけ、関係の薄いものは遠ざける … みたいな感じです。
そしてグルーピングした情報のグループに 優先順位 を付けていきます。大きなグループはナビゲーションのメニューになったり、優先順位の高いグループはトップページに掲載したり、ページの中でも上にレイアウトする … といった感じで、デザインにも大きく影響する作業です。
でもここで注意したいのは、情報を利用するのはユーザーだということ。ちょっと先に進む前に、ユーザビリティ という言葉について考えてみます。
7. Webサイトのユーザビリティ
ユーザビリティという言葉は、とくにWebデザインに限った言葉ではありませんよね。使い勝手とか使いやすさとかいう意味でよく使われます。
ここで考えるユーザビリティは、使いやすいナビゲーションとか、クリックしやすいリンクやボタン … とかのUI（ユーザーインターフェース）のお話ではなくて、サイトの構造自体のお話です。
基本的に Webサイトは、本と違って 1ページ目からコンテンツが順番に並んでる訳でもありません。また、初めて Webサイトに訪れた人にしてみたら、このサイトにどれだけの情報があるのかとか、欲しい情報がここにあるかどうかさえ分からないのが普通です。
7.1. Webサイトはユーザーが迷子になりやすい？
そして Webサイトを訪れるユーザーは、必ずしもトップページから訪問するとは限らない（検索エンジンとかソーシャルネットワーク経由でアクセスすると、コンテンツページにアクセスすることが多いですよね！）ですよね。なので初めてサイトに訪れたユーザーにとっては、自分が今サイトのどこにいるのかさえ分からないのが普通です。
これが実際に手に取ることができる「本」なら話は簡単かもしれません。本の冒頭にある目次をみれば、大体のコンテンツの内容を把握てきるし、本の厚さを見れば大体のコンテンツの量も分かります。本の中の現在地も、ページ数を見れば「150Pまで読んだ！」っていうことも分かります …。
一般的に複雑な構造を持つ Webサイト … とってもユーザーが迷子になりやすいですよね。基本的に Webサイトを訪れるユーザーは、なにかしら目的を持っています。欲しい情報を読みたいって思っていたり、買い物をしたかったり、動画や写真を見たかったり …。でも、自分が今いる場所も分からなくって、どこに行ったら自分の目的が達成できるのかが分からなければ、戸惑いや苛立ちを覚えてしまいます。
（私は方向音痴でよく東京の駅とかで迷子になるので、特にそう思うのかもしれません …。）
8. 迷子にさせない工夫はサイトの設計から
ユーザーを迷子にさせないため、Webサイトでは目立つ部分にナビゲーションが設置されますよね！サイト内を移動するためにも、使いやすいナビゲーションはとっても大切だと思います。
でも、使いやすいナビゲーションを作れば、ユーザーは迷子にならないんでしょうか？ユーザーが迷子になりやすいのは、ナビゲーションの使い勝手よりも、サイトの構造に問題があることがほとんどです。
ちょっとここで日本生命の Webサイトを見てみます。
日本生命
日本生命の Webサイトのナビゲーションを見てみると、「個人のお客様」「保険をご検討中のお客様」「法人のお客様」みたいに、ユーザーが自分の属性によって使い分けることができるように工夫されています。これなら迷うこともないですよね！
日本生命の Webサイトのナビゲーション
もしこれが、「医療保険はこちら」「終身保険はこちら」「年金保険はこちら」とかなっていたら、使い勝手はまた違ってくると思います（保険についてはよく知らないので、ちょっと適当に書いてます …）。
そしてこれらはナビゲーションを使いやすくするというよりも、サイトの構造をユーザーにとって分かりやすい構造にするということですよね！
MEMO
これはビジュアルデザイン以前の、設計の部分のパートです。決して目にみえる部分ではないんですけど、Webサイトの骨組みをつくるとても大切なパートです。
新宿駅もこんな構造だったら絶対乗り換え迷わないのに …
8.1. コンテンツを利用するのはユーザーです
ここでさっきの情報のグルーピング化のお話に戻ります。ここまで読んでくれた人なら、どんな風にグルーピングしていけばいいのか分かりますよね！ユーザーがサイトに訪れる目的を、ユーザーの身になって考えれば、どんな風にコンテンツを整理してあげれば分かりやすいかが、自然と分かってくると思います！そのためにも、どんな人を想定するか（ターゲット）を、事前に決めておくことがやっぱり大事になりますよねー。
9. 制作準備 – 作成ポリシーを決める
さて、ここまでくると、いよいよサイトの構造作りに入れます。でも、仕事でする Web制作には、まだまだ決めないこともたくさんあります …。それが制作ポリシーです。
制作ポリシーにはどんなものがあるかというと …
- ターゲットブラウザは？
- クロスブラウザにする？それともプログレッシブ・エンハンスメント？
- スマートフォン対応は？
などなどです。ターゲットブラウザは、IE6 以下を含めるかどうか … という感じになるかと思います。私は最近では、 クロスブラウザにするか、プログレッシブ・エンハンスメントにするか？ということをクライアントさんに説明しています。
ん？これはどういう意味？っていう人のために、ちょっと補足しておくと … クロスブラウザは OKですよね！どのブラウザで見ても、同じように見えて（CSS）、同じように動く（Javascript）ようにすることです。
9.1. プログレッシブ・エンハンスメントって何？
2012年 2月現在、一般的なブラウザのシェアでは IE8 がとっても多いです。でも IE8 以下はご存知の通り、CSS3 が使えません。はじめから CSS3 なんて使わなければいいんじゃないの？って声も聞こえてきますが、ちょっと下の画像 2枚を見てみてください。どっちもツイッターのトップページです。
ツイッター：Mac Google Chrome
「あなたの「好き」をフォローしよう」のタイポグラフィーの部分は、画像ではなくて普通のテキストですよね！なのでパソコンにインストールされているフォントの違いによって段組みも違います。それは置いといて …。ちょっと拡大した中を見てみると、Google Chrome ではテキストにグローエフェクトがかかっています。これは CSS3 のテキストシャドウですね！
ツイッター：Windows IE8
一方 IE では CSS3 が使えないため、グローエフェクトがかかっていません。これをクロスブラウザにするなら、テキストを使わずに画像で表現するしかなさそうです。そうすれば段組みも崩れないし、グローエフェクトも Photoshop などで付ければ OK です。
でも、IEでのツイッターの画面、テキストのグローエフェクトがないからといって、テキストが読み難いんでしょうか？もしグローエフェクトをかけないと読み難いのであれば、ここは画像にするべきです。でもグローエフェクトがないからといって、読み難いとか、ツイッターのコンテンツを楽しむのに影響があるわけでないのなら問題ないですよね。
モダンブラウザではリッチなユーザー体験を
ちょっと誤解を招くと困るんですけど、プログレッシブ・エンハンスメントは、IEだから手を抜いていいという考え方ではありません。Google Chrome などのモダンブラウザでは、よりリッチな表現を楽しんでもらって、IEなど未対応ブラウザでは、最低限必要な環境は確保するという考え方です。これはビジュアル的な部分だけでなく、機能として動く（例えば Javascript を使ってる部分など）にも当てはまりますし、HTML5 の新要素などにも当てはまります。
なのでさっきのツイッターの画面で、グローエフェクトがないと読み難いのであれば、ここは画像を使うべきなのは、プログレッシブ・エンハンスメントでも同じです（必要最最低限の環境は確保）。
9.2. 制作ポリシーを決めておかないと、デザインにも影響します
なんで制作ポリシーを決めておく必要があるのかというと、コーディングに影響するのはもちろんですけど、デザインにも影響するからなんです。例えば CSS3 のドロップシャドウを使うか、画像を使うかによって、Webサイトの全幅が変わることだってあるからなんです。
具体的に見てみると、以下のようなデザインが合ったとき、CSS3 のドロップシャドウを使うか、画像でドロップシャドウを使うかで、サイトの幅は変わりますよね！
サイトの左端いっぱいの所にドロップシャドウ
ちょっとシャドウが薄いんですけど …
サイトの左端にかかる部分に、ドロップシャドウを使っています。これを CSS3の box-shadow（と IEのfilter）を使った場合は、ボックスの端をサイトの幅にくっつけることができますよね（シャドウ自体はサイトの幅の外側）！
でもドロップシャドウに画像を使う場合には、シャドウの部分もサイトの幅内に納めないといけないので、サイトの全幅を広げるか、ボックスの幅を小さくする必要が出てきます …。
これは一例ですけど、クロスブラウザにするか、プログレッシブエンハンスメントにするかで、工数（用意する画像とか、コーディング）にも影響しますよねー。丸角とか、ドロップシャドウとか、意外に手がかかるんですよねー X(
10. 作業 – サイトの設計図、ワイヤーフレームを作ろう！
ここまで来るのに随分かかってしまいました …。ここから実際に Webサイトを作成する具体的な手順になっていきます。まずモノを作るのに絶対必要なものを作ります … そう、設計図です。何かモノを作るときは、紙に書いたりするかどうかは別として、完成図をイメージしないと、どこを目指していいのか分かりませんよね。
もちろん Web制作でもこの設計図を作ります。そしてこれを ワイヤーフレーム って呼んだりします。
ワイヤーフレーム … この言葉もいろんな場面で使われるし、いろんな立場の人が使っていて、それぞれ指すものが違ったりします。Webデザイナーさんがワイヤーフレームと言うと、ページのレイアウトを作る下書きみたいなものを指したりします。ちょっと混乱しますねー。なのでどんなものなのか、図で見てみます。
まず、作成するサイト（架空）は以下のような感じです。
- サイト名： … Webデザイナーズレシピ
- 目的： … HTML や CSS、jQuery、Photoshopについてなど、Web制作に関する Tipsをシェア
- ターゲット： … Webデザインを学ぶ初級者さんや学生さん
ワイヤーフレーム（初期）
あれ？これってただのサイトマップじゃないの？ … はい。そうです。初期段階のワイヤーフレームは、どっちかってうとサイトの構造を示すサイトマップに近い … というか、そのままです。もちろんこれを作るのに、前半で見てきた目的やターゲットについて考えたことを反映させなくてはいけません。
もしかすると、情報のグルーピングの仕方によって、以下のような構造になるかもしれませんよね！
ワイヤーフレームの例 – その2
コンテンツは同じでも、情報のグルーピング化、優先順位の付け方で、サイトの構造は変わるんですね！
10.1. 設計図に必要なことを書き加えていこう！
このサイトマップのような設計図（ワイヤーフレーム）は、これで完成ではありません。これを元にして、いろいろ必要なことを書き加えていくんですね！Webサイトの概要から、各ページに掲載するコンテンツ、それらの優先順位などなど …。サイトの設計図ですから、必要なことは何でも書き込みます。
そしてこれは、プロジェクトメンバー（一緒にWebサイトを作成する仲間や、場合によってはクライアントさんも）と共有したり、スケージュール、タスク管理とリンクさせる必要も出てきます。
例えばどんなことを書き込むかというと …
- 導線の設計
- 必要となる機能
- ページごとのSEOキーワード
- などなど …
基本的に全部のページ（ブログのように更新するコンテンツは含みませんけど）を書き込みます。検索フォームを付けるなら、検索結果を表示するページが必要になりますよね！また、コンテンツが見つからなかった場合には、404 Not Found を表示するページが必要かもしれません。
お問い合わせフォームを付けるなら、フォームには何が必要（お名前、メールアドレス、メッセージなどの項目）かとか …。
10.2. コーディングポリシーなどを決めよう！
こんな風にして、設計図（ワイヤーフレーム）にいろいろ書き加えていくと、決めなくちゃいけないこともだんだん出てきます。
例えば、コーディングの際には、XHTML で書くのか、HTML5なのかとか、使うフレームワークをあげたり（Javascript や CSS）とか、CMS化するかどうかなど、決めておかないとコーディングするときに、「えーと … 何で書けばいいんだっけ？」になっちゃいますもんね！
もちろんプログラマさんや、コーダーさんに一任することの方が多いです。でも、数人でコーディングする場合などは、お互いに決めておかないと困ることも出てきますもんね！
ここでは HTML5 + CSS3 でコーディング、Javascript のライブラリには jQuery を使うことにして、最終的には WordPress で構築する … という感じでお話をすすめていきます！
11. ちょっと寄り道：ワイヤーフレームを作るときのツール
私はひとりで仕事をする事が多いので、ワイヤーフレームを共有するのはクライアントさんくらいです。なので普段、ワイヤーフレームを作るのに、大きなスケッチブックに鉛筆で書いてます。 でも、プロジェクトのみんなで共有するなら、ちょっと手書きだと困りますよねー。プロジェクトに参加するときは、プロジェクトで使ってるツールに合わせます。
私はフリーランスなのでツールというか、この辺は自分流（手書き）です。Web制作会社さん内では、パワーポイントを使ったり、エクセルを使ってワイヤーフレームを作って管理してたりもするそうです。
オンラインのサービスでは、日本語も OK の Cacoo あたりが人気なのかな？
Cacoo
Cacoo – たしか25枚くらいまでは無料で使えます。
12.1 作業 – ページのレイアウトを作ろう！
さて、ここからやっと Webデザイナーっぽい仕事になってきます！今度はトップページやコンテンツページなど、いろんなページのレイアウトを設計していきます。これもワイヤーフレームって呼ぶのでちょっと混乱しちゃいますけど、さっきのワイヤーフレームは Webサイト全体の設計図のこと。ここでいうワイヤーフレームは、ページ自体の設計図です。
これも図で見た方が分かりやすいですねー。
ワイヤーフレームの例
こんな感じでページのレイアウトを作って、ページに必要な機能などを書き込みます。優先順位の高いものほど目立つようにする必要があるし、見せたいものを意識しながらレイアウトを組んでいきます。
ワイヤーフレームの作り方も、デザイナーさん人それぞれだと思います。スケッチブックに書く人もいれば、さっきの Cacoo のようなサービスを使ったり、Photoshop や Illustrator を使う人もいます。私はここでもスケッチ派ですけど …。
MEMO
私はこのワイヤーフレームの段階では、デザインの細かい所までは考えないようにしてます。あくまでレイアウトと色の明暗、そして機能をメモする感じで書いています。機能というのは、省スペース化のためにタブを使うとか、スライダーを使うとか、そんな感じです。
もちろんここで細かいデザインの事を考えたり、色を付けるデザイナーさんもいるので、どんな風に作るのがいいというのは一概にはいえません。でも、レイアウトだけでデザインを作っていくのは、とっても楽しいです。
12.1. 作業 – ラフデザインを作る
このワイヤーフレーム（数パターン作ります）を元にして、この後ラフデザインを作ります。ラフデザインには色を付けたり、サンプルの写真を貼ったりして、Webサイトらしく見えるデザインです。これは主にクライアントさんに提出するデザイン案（これも数パターン）として作ります。
デザイナーさんによっては、ワイヤーフレームとラフデザインを一緒にしちゃった感じのものを作ったりして、一度に済ませちゃう人もいます。
ここまでくると、しっかり決めておかないといけない事がでてきます。たとえばサイトの幅ですねー。固定幅で Webサイトを作るなら、サイトの幅は何ピクセルとか。レイアウトによっては、サイドバーは何ピクセルとかも決めておきたいです。これは入れたいバナーのサイズが決まっている場合もあるので、それが収まるように作らないといけないですよね！
MEMO
もちろんこのワイヤーフレームも下書き段階ですから、実際のモックアップ（デザインカンプ）でサイズは変更できますから問題ないです。
初心者の頃は、このサイズ決めも基準が分からなくて、実際に Webサイトにしてみたらサイドバーが狭かったとか、いろいろ失敗も繰り返しました … X( でもたくさん作っていくと、これも感覚でなんとなく分かるようになると思います。
ちょっとおもしろいサイトがあるのでリンクを貼っておきます。完成した Webサイトと、ワイヤーフレームを見比べる事ができるサイトです。
-
Wireframe Showcase
13. 作業 – 正式なデザインでモックアップを作ろう
クライアントさんに提出したデザイン案で OK をもらったら、いよいよきちんとしたビジュアルデザインを作っていきます。私は Photoshop を使って作りますけど、ロゴやイラストを作るのには Illustrator を使ったりします。もちろんこれも人それぞれなので、Fireworks を使う人もたくさんいます。
モックアップというのは、本物と同じようにつくる模型っていう意味だそうです。デザイン業界では、デザインの完成形の事を指して デザインカンプ って呼んだりもします。とにかくここで作るデザインが、そっくりそのまま Webサイトになるわけですね！
Photoshop でモックアップを作る
Photoshop でモックアップを作ってるところ
こんな感じでデザインを作っていきます。このデザインをそっくりそのまま HTML + CSS にしていくわけなんですね！なのでデザインをしながら、ここは CSS でどう書こうかな … など考える事もあります。
でもできるだけそんなことは考えない方が、好きにデザインできていいかもしれません …。私はあんまり考えないようにして、デザインする事を楽しむようにしています。
これでデザインが完成しました！仕事によっては、このデザインカンプを納品して終わりというものもあります。その場合はもちろんトップページだけでなくて、コンテンツページなどの複数レイアウトで作ります。
14. 作業 – デザインカンプから画像の切り出し
今回は Webサイトの作成フローなので、このデザインカンプを元にして Webサイトを作っていきます。まずデザインカンプから、Webサイトで使う部分の画像を切り出し（書き出し）ます。
でも、ここで前半に出てきた制作ポリシーが関係してきますよね！クロスブラウザで作るなら、ドロップシャドウの部分や、丸角の部分も画像として切り出さなくてはいけませんよねー。ここではプログレッシプ・エンハンスメントの作成ポリシーに基づいて、CSS3 と IE の filter でドロップシャドウを表現することにします。
14.1. Webフォントを視野に入れることも
ちょっと前述したデザインの中には、特徴的なフォントが使われています。このブログでも使わせていただいているんですけど、dot colon さんの Tenderness というフォントです。
この部分はどうしましょう？画像で切り出しをするかどうか悩む所ですねー …。
ナビゲーションや見出しなど
今回は Webフォントを使う事にしました！Webフォントを使えば、好きなフォントを使ってテキストを表示できるのがメリットですよね！でもその反面、フォントを読み込まなければいけなくなるので、ページ表示速度に影響を与えます。特に日本語フォントはフォントのファイルサイズが大きいので注意が必要です。
また、今年からモリサワさんをはじめ、いろんなフォントメーカーが Webフォントサービスを始めるみたいですね！
Attention
フォントにもライセンスがあるので、Webフォントとして使っていいかどうかは、フォントをデザインしたデザイナーさんに確認しましょう。
14.2. Photoshop などのスライス機能
デザインカンプからの画像の切り出しはスライスという機能を使います。Photoshop はもちろん、Fireworks にもスライス機能はついてるので試してみてくださいね！
スライスで画像の切り出し
青い線でで囲まれた部分が切り出す画像です（注意：見やすくするために背景は白にしてますけど、実際は透明です）。ロゴと背景部分など、重なっている部分は一度に切り出せないので、2回とか3回に分けて、このスライスを行います！
15. 作業 – HTML + CSS でコーディング！
画像の切り出しが終わったら、いよいよ HTML + CSS でコーディングです。でも最終的にこのサイト（架空ですけど）は、WordPress で構築することになっています。なのでいきなりローカルサーバーを使いながら、WordPress のテーマとしてコーディングするのもアリです。
でも私は最初に HTML + CSS で作ってしまって、後から WordPress のテーマ化することにしています。どっちが効率がいいのかなーと思って、両方試しましたけど、私的には先に HTML + CSS で作ってしまって、それを WordPress のテーマ化した方が効率的だと感じています。
一番イヤ（？）なブラウザチェックも、この段階でできるのもちょっといいかも …。いきなりテーマ化 + CSS でのコーディングだと、一番最後にブラウザチェックがくるので気が重い … みたいな。
HTML + CSS でコーディング
HTML + CSS でのコーディング画面 … 私は Coda を使っています。
もちろんこの段階で、Javascript で作る「動き」の部分 … 例えばコンテンツスライダーやドロップダウンメニュー、タブなども作ります。そしてとりあえず完成したら、ブラウザチェックを行います。
15.1. ブラウザチェックとは？
ブラウザチェックというのは、いろんなブラウザでサイトを見てみて、レイアウトが崩れていたり、表示のおかしい所がないかどうかチェックしたり、Javascript で作った「動き」の部分におかしな所がないかをチェックする事です。
ブラウザには色んな種類があるのはご存知の通りです。私は普段 Google Chrome を使ってますが、一般的に多くの人が使っているのは IEです。もちろん Firefoxや Safariなど、いろんなブラウザで表示（CSS）と動き（Javascript）のチェックをします …。IEのチェックのときは、本当に気が重いですけど … X(
16. 作業 – WordPress のテーマ化
ひと通りブラウザチェックが終わったら、今度は WordPress のテーマ化をします。さっき作ったのは静的な HTML + CSS + jQuery で作ったもの。これを WordPress サイトにする作業です。WordPressについては、過去にたくさん記事を書いているので、よかったら読んでみてくださいね！
-
Webデザインレシピ
17. 作業 – テストサーバーで動作確認、そして公開へ
今までの作業は、基本的にローカル環境（自分のパソコンの中）での作業でした。でも Webサイトはインターネット上に公開するものですから、サーバーにアップロードしなくちゃいけませんよね！でも、いきなり公開して動かない … なんてことになったら大変です！なのでテストサーバーにアップロードして、ちゃんと色んな機能が動くかどうかをテストします。それで OKだったら、いよいよ本番サーバーで公開します！
18. 最後に …
最後の方はちょっと駆け足気味の紹介になってしまいましたが、こんな感じで Web制作をしています。こうやって見ると、本当にたくさんの準備や工程があるんだなーって自分でも再確認できました。
まだまだ効率的に作業できていないので、それも今後の課題です … X(
Comments
Thank you for the comment.