Webサイトの作り方

01. ウェブサイト制作の全体フロー

ウェブサイト制作を仕事にしたとき、代表的な仕事の流れ（以下、フローまたはFlow）は次のようになります。

Flow 0	受注する	仕事を獲得したり、割り当てられたりする
Flow 1	プランを作る	サイトの企画立案や情報収集を行う
Flow 2	設計図を作る	簡易的な下図を作る
Flow 3	デザインを作る	完成図を作る
Flow 4	コーディングする	ブラウザで表示できるデータを作る
Flow 5	納品する	顧客にデータを渡す

もちろん常に絶対同じフローになるとは限りません。

顧客とあなたとの関係によっても変わりますし、顧客の会社内ルールの有無などによっても、仕事のフローは変わります。ただ、上に挙げたフローを押さえておけば、あとは応用という形で対応できるようになっていくでしょう。

様々なフローに対応するには、どうしても経験値が必要になります。その経験値を積むための土台を身につけるために、ここでは代表的な仕事のフローをマスターしていきましょう。

イラストや別の言葉で各フローをまとめておきます。

• 顧客から制作の依頼を受注したとします（Flow 0. 受注する）
• 最初に、デザインの大前提となる目的やターゲットユーザーなどを明確にするプラン作りを行います（Flow 1. プランを作る）
• プランに沿って、どのようなデザインなら目的を達成できるかを考え、骨組みやダミー文言やダミー画像などを配置した設計図を作ります。（Flow 2. 設計図を作る）
• 設計図に沿って、ダミー文言やダミー画像を実際に使うものに差し替え、配色も整えて、デザインカンプと呼ばれる完成像とほぼ同じイメージ画像を作成します。（Flow 3. デザインを作る）
• コーディング作業をし、ブラウザで確認できるようにします。（Flow 4. コーディングをする）
• 顧客にチェックしてもらって、予め決めておいた形式で納品します。（Flow 5. 納品する）

ざっと全体フローを解説すると以上のようになりますが、このあと１つずつ解説していきますので安心してください。

練習として一緒に制作フローを体験します

しかし、ただ制作フローを詳細に解説するだけでは、頭に入りにくいものです。

そこで架空の知人からウェブサイトを作って欲しいと頼まれたという想定で、制作フローを一緒に見ていきます。

少しずつデザインを固めていき、最終的には以下のようなウェブページのデザインを作ります。

それでは、さっそく見てみましょう。

02. Flow 0. 営業・受注する（案件に応募する）

今回はレッスンの題材として使うために、架空のカフェのウェブサイトを作成します。理解促進のために、導入の部分はミニストーリーを用意しました。

ストーリーは、ウェブデザインコースを卒業した人が学生時代にバイトしていたカフェの店長に、練習用としてウェブサイトを作らせてもらえないかと頼むところから始まります。

まずは顧客から仕事を請け負います。ここはウェブデザインというよりは営業活動と言えます。このフローはそれこそ千差万別です。ここではウェブデザインのスキルアップに集中するため割愛しますが、よくある受注方法を列挙しておきます。

• 知人・既存客・提携会社などからの依頼・紹介で案件を受注する
• 自身のポートフォリオやブログやSNSや自社ウェブサイトなどから案件のお問い合わせがくる
• クラウドソーシングサービス（クラウドワークスやランサーズなど）で、案件を受注する

顧客から案件を受注する方法は、人によって、会社によって、様々な戦略があります。プロのデザイナーがどのように仕事を受注しているのか、気になる方はパーソナルメンターに聞いてみるのも良いでしょう。

また、この段階で納期や価格、納品方法などについても認識をすり合わせておくことになります。

03. Flow 1.プランを作る

サイトをゼロから作るのは大きな労力がかかります。そのため、作ってから「これじゃなかった……」「かっこいいけど、事業戦略に合わなかった……」とならないためにも、一番最初にプランを作成します。企画立案などとも呼ばれます。

実はクラウドワークスなどのクラウドソーシングでは、企画立案段階から公募で募集がかかることは、あまりありません。すでに依頼する内容が明確で、実作業を依頼しているケースがほとんどです。

クラウドソーシングで企画立案から携われるとしたら、クライアントから直接指名がくるスカウト制度などを通して依頼がかかったケースでしょう。

また、就職する場合でも、企画の仕事はなかなか新人に振られることはありません。

それでも、サイト制作における企画とは何かを把握しておくことは重要です。なぜなら、企画を通して出来上がったプランとは「一体なぜ自分はこのウェブサイトを作るのか」という理由でもあるからです。デザインのゴールと言っても過言ではありません。

ゴールが分からずに闇雲に走っていては、せっかくの努力も徒労に終わるでしょう。そこで、携わる機会は少ないかもしれませんが、ウェブデザインにおける企画とは何かを学び、作業前にどういう情報を最低限押さえておくべきかを把握しましょう。

大きなサイトになればなるほどプランも綿密になりますが、最初は最低限押さえるべきプラン作りのコツをマスターしましょう。

当コースでは次の点を中心にプランを作成していきます。

• 運営側（作り手）の目的はなにか
• ターゲットユーザー（使い手）は誰か

運営側の目的を明確にする

会社がウェブサイトをフリーランスや制作会社に依頼して作るには、当然ながらお金がかかります。費用以上のメリットを見込めるからこそ、ウェブサイトを作るのです。

そのため、欲しいメリット（＝目的）とは何か、案件ごとに明確に言葉にしておく必要があります。

どんな目的が多いか

具体的な目的となるとケースバイケースですが、目的の種類はだいたい限定されます。その幾つかよくある目的を挙げておきます。

• ウェブサイトを作って、新規顧客からの問い合わせを増やしたい（売上げアップ）
• 常に最新の商品情報を載せることで、既存顧客からの問い合わせを増やしたい（購入のリピート率アップ）
• ウェブサイトに「よくある質問コーナー」を用意することで、売上に繋がらない問い合わせを減らしたい（事務作業の経費削減）
• ポータルサイトやTwitterやFacebookなどのSNSアカウントのプロフィールに、自分のウェブサイトのURLを記載して、より多くの人に知ってもらいたい（認知拡大）
• 人材採用のために自社の社風を表現して、自社に合う人材からの応募数を増やしたい。また、Indeedなどの求人サイトからアクセスできるようにしたい（リクルート）
• 投資家や株主を始め、アクサスした人からの信頼感を高めたい（ブランディング）

目的を作るデザイン上の利点

目的が明確だとデザイナーにとっても良い点があります。それは、デザインの方向性を決めるのに役に立つという点です。

たとえばリクルートが目的のウェブサイトでは、商品説明は最低限にしたり、見せ方を販売目的の表現とは変えたりするはずです。それに合わせて用意するイラストなども異なるかもしれませんし、ショッピングサイトのように購入ボタンを目立たせる必要性も無いでしょう。

また、経験を積むことで「こういう目的なら、こういうページがあるといいだろうな」とあなたなりのアイデアが生まれることがあります。それを顧客に伝えることで、より良いサイトができあがるかもしれません。そうしたプラスアルファの提案も、ウェブサイトを作る目的が明確であればこそです。

実際に仕事などでサイトを作っていくと、これら以外にも目的を事前に固めておくことの恩恵を色々と感じるはずですので、しっかり目的を固めておきましょう。

今回の目的

ミニストーリーのような流れで、今回の目的は「ウェブサイトで店内の雰囲気などを伝えることで、ランチやディナーの予約問い合わせが増えるようにする。パーティー予約も増えるとなお良い」と決まったとします。

次にターゲットユーザーについて見ていきましょう。

ターゲットユーザーを明確にする

ほとんどのウェブサイトには、運営側（作り手）とターゲットユーザー（使い手）が存在します。運営側の目的を明確にしたように、ターゲットユーザーが　誰なのかも明確にする必要があります。

ターゲットユーザーが誰なのかは、まず顧客に伺います。先に決めた運営側の目的が「新規顧客からの問い合わせ増加」だとしたら、どんな客層からの問い合わせ増加を期待しているのかをヒアリングしましょう。

ターゲットユーザーを明確にするデザイン上の利点

顧客が50代男性をターゲットユーザーとして考えていたら、提案するデザインも50代男性が使っていて心地よいデザインにする必要があります。

どんなに自分自身が若い女性向けのデザインが得意でも、ターゲットユーザーに合わせて柔軟にデザインを作るべきです。

正しいデザイン制作のためにも、ターゲットユーザーを明確にしておく必要があるのです。

今回のターゲットユーザー

以上のような流れで、今回のターゲットユーザについては「健康志向で、オシャレやスイーツが好きな20代後半から30代半ばの男女」という方向に決まったとします。

情報収集をする

作成したプランから、どういう情報を集める必要があるのかを考えます。情報収集には様々な方法があります。ここはテクニカルな方法を突き詰めるより、まずは自分なりにできる方法でOKです。

顧客に資料をまとめてもらって提出してもらうケースや、打ち合わせやヒアリングなどをして掘り起こしていくケースや、既存のパンフレットなどから抽出していくケースなど、様々です。

今回必要となる情報

今回作成するカフェのウェブサイトでは、架空の打ち合わせを通して以下のような情報が必要であるとしました。

概要	詳細
カフェのウリ	お店としてこだわってるポイントを、ターゲットユーザに合わせて3つくらい教えてもらって、こちらでまとめる
店内やメニューの写真	空豆のスープの写真（雑誌の撮影時に撮ったもののデータをもらう） ターゲットユーザが好みそうな、オシャレな内装やスイーツの写真もデータをもらう。
連絡先や住所	SNSやメール、電話番号、住所など
各種文言	予約を促す一文やパーティーの案内など、短めでいいので文章を店長に考えてもらう

04. Flow 2. 設計図を作る

ここまではデザインの大前提となる、ウェブサイト制作の目的とターゲットユーザーの定義、そしてサイト制作に必要な情報をリストアップをしました。

これでプランは完成しました。

ここからはプランに合ったウェブサイトのラフ案を設計していきます。

ラフ案なので、いきなり完成品を作るわけではありません。幾つかの段階を経て完成像を固める方法が一般的です。具体的には、次のような手順で、デザインの土台となる設計図を作っていきます。

• 設計作業① サイトマップを作る（どんなページが必要か考える作業）
• 設計作業② ペーパープロトを作る（手描きのラフ案を作る作業）
• 設計作業③ ワイヤーフレームを作る（ツールを使って、ウェブサイトの骨組みを作る作業）

１つ１つの作業を見ていきましょう。

設計作業① サイトマップを作る

サイトマップとは、サイト内にどんなページが必要なのかを、簡単な図を使って管理するための設計図です。デザイン性は気にする必要はありません。四角と線だけで表現すれば十分です。シンプルだからといって無くてもいいかというと、そうではありません。サイトマップは、マップというだけに、ウェブサイト全体の地図になります。地図がなければ、クライアントとウェブデザイナーは容易に道に迷ってしまいます。新しくウェブサイトを作るときはもちろん、すでに完成しているウェブサイトの修正を担当するような際にも、サイトマップを用意することをオススメします。

カフェサイトのサイトマップ

例えば、今回作るカフェのウェブサイトであれば、以下のようなページが存在します。

• トップページ
• メニュー詳細ページ
• 地図やお店の基本情報などがまとまった会社情報ページ

これらのページをサイトマップとして表現すると以下のようになります。

あまりページがないので、このようにシンプルな図になります。

線で繋がっているのは、リンクが張ってあるという意味になりますので、「トップページのどこかをクリックするとメニューや会社情報ページに飛ぶ構造になっている」ということが、このサイトマップから読み取れます。

仮にもっと複雑なサイトマップを作るとしたら以下のようになります。

トップページから様々なページへのリンクが張ってあり、お知らせ一覧とスタッフ一覧からは、さらに個別の詳細ページにアクセスできる構造であることが読み取れます。複雑なウェブサイトになればなるほど、サイトマップがあると全体像を把握するのに役立ちます。

設計作業② ペーパープロトを作る

正式にはペーパープロトタイプないしペーパープロトタイピングという呼称ですが、略してペーパープロトと呼ばれています。ペーパープロトというとかっこいいですが、実際は紙に手描きでデザインを描くだけになります。

まずはチラシの裏でも、ノートの端でも構わないので、紙に手描きのサイトイメージを描きます。かっこいい画を描く必要はなく、絵心も不要です。カンタンに作れるのがペーパープロトの最大の利点です。どんなページが良いかを考えながら気軽に画を描いていきます。

しかし、どんなに手描きでカンタンと言われても、最初は何事も難しいものです。ここでは幾つかペーパープロトをカンタンに描くためのポイントを記載しておきます。

文言を具体的に書き込みすぎない

文言とは文字のことです。詳細な文字までペーパープロトの段階で書いてしまうと、あまりにも細かすぎて逆に見づらくなることがあります。文字は大きめのものだけに限定して書き込みましょう。それすら必須ではありません。小さな文字は「○○○」や「〜〜〜」と書いておけば十分です。

余白を正確にしすぎない

パーツとパーツの間に適切な余白を設けることで、レイアウトは美しくなります。しかし、ペーパープロトの段階では、余白はなんとなくで構いません。

ペーパープロトの作成手順

1. 紙とペンを用意します。
2. 四角や円を組み合わせて、ページの全体構成を考えます。
   体裁を気にせず、何度も描き直しては自分のイメージを理想形に近づけていきます。
3. ある程度の形が定まってきたら、丁寧に描き直します。それでも正確さはそこまで求める必要はありません。余白や文言などは後ほどワイヤーフレームを作る際に調整していきます。
   
   

今回のカフェサイトでは、このペーパープロトを元に作業を進めていきます。

次はペーパープロトをもう少しキチンと整えた、ワイヤーフレームという設計図の作成に入ります。

設計作業③ ワイヤーフレームを作る

ワイヤーフレームとはウェブサイトのレイアウトを明確にするための設計図です。

ペーパープロトで暫定的に決めたレイアウトを、何らかのツールを使って清書するような作業になります。

ワイヤーフレームは設計図であると同時に、クライアントとのコミュニケーションツールにもなります。クライアントにワイヤーフレームを見せることで、先方は「オーダー通りだな」と安心でき、こちら制作の方向性が正しいことを確認できます。

また、何か致命的な勘違いや把握漏れがあったとしても、制作序盤であるこの段階で発覚すればマシです。

このように、ワイヤーフレームを作ることには幾つものメリットがあります。

それに加えて、このあと作るデザインカンプやコーディングなどに比べると、短い時間で作ったり変更したりできる点も魅力です。

ペーパープロトを清書するような作業と述べましたが、忠実にペーパープロトをなぞるのではなく、変えるべきだと思ったら、どんどんワイヤーフレームを変えて問題ありません。ウェブデザインをする上で、最も自由にダイナミックに、そしてカンタンに試行錯誤できる工程です。

おすすめのツール

ワイヤーフレームを作るおすすめツールを紹介しておきます。

• Adobe Photoshop（フォトショップ）
• Adobe XD（エクスペリエンスデザイナー）
• cacoo（カクー）
• prott（プロット）
• パワポやエクセル

今回のワイヤーフレーム

ペーパープロトをもとに、シングルカラム（サイドバーのないレイアウト）のワイヤーフレームを作りました。

以上のような流れにより、ワイヤーフレームを少し変えました。

店長の顔写真や挨拶といった情報が必要であることは、企画段階で明らかにすべきでしたが、実際はワイヤーフレームを見せて初めて気づく情報というものがあるものです。

納品してから気づくのでは遅すぎますが、足りない情報の早期発見ができる点も、ワイヤーフレームの魅力の１つです。

次は「Flow3. デザインする」に進みます。ここからはPhotoshopを使うので、まずはPhotoshopの準備方法について見ていきます。

まとめ

このレッスンでは制作フローの全体像を軽く紹介し、続けて営業、企画、設計というフローを見てきました。

これらのフローは、上流工程などと呼ばれることもあり、ゼロからサイトを作るときや大幅なリニューアルをするときに行われます。

企画段階からの案件ではない場合も、契約前にクライアントがどういったプランを持っているのかを確認し、自分がどのように貢献できるかを伝えることができれば、クライアントからの信頼を獲得できるでしょう。

また、複数のWebデザイナーが参加するコンペなどでは、発注書から相手のプランやニーズを読み取り、最適なデザインカンプを提出するといったケースもあります。その際にも、企画への理解やペーパープロト、ワイヤーフレーム作成といったプロセスを経てデザインカンプを作ることができれば、精度の高いコンペ作品が提出できるでしょう。

ワイヤーフレームについては、コース後半で実践していただきます。ここでは先を急ぐため、デザインカンプの制作に移りましょう。次は「Flow3. デザインする」に進みます。

デザインカンプでは、Photoshopというツールを使って作業をしていきます。課題もありますので、挑戦してみてください。