Webサイトの作り方

Webサイトの作り方

今回は、ウェブデザイナーの仕事がどのような順序で進むのかを学びます。仕事の順序をFlow 0からFlow 5まで分けてあります。

全てをこのレッスンだけに収めると膨大な量になってしまうので、Flow 0からFlow 2までを見ていきます。残りは次レッスン以降で学びます。

具体的なレッスンの流れは以下の通りになります。

  • まずは全体フローを解説します
  • 次にFlow 0「受注する」について軽く触れます
  • 続けてFlow 1「プランを作る」を読み進めます。
  • 最後にFlow 2「設計図を作る」にて、「サイトマップ」と「ペーパープロト」の作成について学びます。

では、さっそく始めましょう。

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. 納品する)

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

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

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

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

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

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

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

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

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

  • 店長、こんにちは。

    会話
  • おお、半年ぶりだね。ウェブデザイナーになったんだってね。今日はどうしたんだい?

    会話
  • はい、先日店長がウェブサイトを作りたいとおっしゃっていたと思うのですが、よろしければ私に店長が経営してるカフェのウェブサイトを作らせてもらえないでしょうか?

    会話
  • うーん、いつかは欲しいけど、いますぐウェブサイトは必要ないかなぁ…

    会話
  • 今回は練習も兼ねてるので、制作費用は勉強します!なんとか作らせてもらえたら嬉しいのですが……。

    会話
  • うーん、分かった、なら応援も兼ねてお願いするか。あったらあったで使えるしな。

    会話
  • ありがとうございます!ではさっそくプランから作り始めましょう!

    会話
  • うん、よろしくね!

    会話

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

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

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

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

03. Flow 1.プランを作る

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

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

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

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

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

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

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

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

  • 運営側(作り手)の目的はなにか
  • ターゲットユーザー(使い手)は誰か
ゼロから携わる機会は少ない企画立案ですが、企画への理解は今後の営業活動に大きく関わります。

例えばクラウドソーシングサイトでは、クライアントが発注書を書き、それを見て案件に応募するわけですが、発注書にしっかりサイトの目的やターゲットユーザーなどが明記されていないことは、よくあります。これは意図的に書いておらず、契約した人にだけ公開したいと思っている場合と、単純に書き漏れている場合があります。
書き漏れている場合は、契約前にメッセージなどを送って、企画に関して質問をすることで、案件への前向きな姿勢を伝えられるかもしれません。
また、熟練のクライアントの中には、わざと情報不足な発注書を作る人もいます。応募者が、足りない情報をしっかり確認してくるかチェックしているのです。

知人のウェブサイトをゼロから二人三脚で相談して作るケースでも、何を明確にすべきか共有しておくとスムーズに進みます。

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

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

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

どんな目的が多いか

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

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

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

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

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

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

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

今回の目的

  • まずはウェブサイトを作る目的を明確にしておきたいのですが……

    会話
  • 目的かぁ。

    会話
  • カフェなので、問い合わせとかは増えても嬉しくないですよね……

    会話
  • あ〜、まてよ。問い合わせといえば…

    会話
  • なんでしょう?

    会話
  • うちは立地的に平日は会社員がランチとか打ち合わせとか休憩に使う感じなんだよね。一方で土日は周りの会社が休みだから、ランチかディナーの予約が入らないと売上が全然立たないんだよ。あとはたま〜に貸切パーティーの予約が入って助かることもあるんだよね。

    会話
  • ということは土日の予約の問い合わせが増えることには十分メリットがあるわけですね

    会話
  • それはもう、願ったり叶ったりだね。内装にはこだわってるから、オシャレな空間で仲間と楽しみたい人達にはウケると思うんだよね

    会話
  • なるほど、それなら写真も多めに載せたいですね!では目的は土日の予約問い合わせの獲得、で決まりでいいでしょうか。貸切パーティー予約は取れたら取るくらいで、メインの目的はランチやディナーの予約という理解であってますか?

    会話
  • そうだね!それでバッチリ!

    会話

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

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

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

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

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

ただし、「こんな客層からの問い合わせがあったら嬉しいなぁ」という楽観的な希望を伝えてきた場合は危険です。
「実際に、現在どんな客層から支持を得ているのか」または「こういう客層に向けた商品で、少ないながらも実績がある」という信頼性の高い根拠を探りましょう。
憶測でターゲットユーザーを決めると、「やっぱり違った……」となりやすいものです。

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

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

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

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

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

  • 平日は近隣の会社員が多いとして、土日に予約する人も近隣の会社員が多いですか?

    会話
  • んー、見た感じ違うかな。平日は年齢バラバラだけど、土日は20代後半から30代半ばくらいの人達が多いかな。男女比は半々かなぁ……

    会話
  • その人たちはなんのためにお店を予約するのでしょうか?

    会話
  • まぁ女子会とか、イベントだかセミナーの打ち上げとか、誕生日パーティーもあったな

    会話
  • うーん、色々ですね。

    会話
  • まぁでも、服とかメイクとかしっかりしてる人が多いから、オシャレな空間で楽しみたいという層ではあるよ。

    会話
  • 人気のコースとか料理とかありますか?

    会話
  • それなら、こないだ雑誌で取り上げられた空豆のスープがあるかな。あと、スイーツも絶賛されるね!平日は仕事中の人も多いから、あんまりオーダー入らないけど、土日だとスイーツが本当に喜ばれる。かなり自信あるよ。

    会話
  • なるほど。なら空豆のスープが注目ということは健康志向なのかもしれません。それは目立たせるとして、スイーツ好きな人たちへのアピールもできれば、もっと予約が取れるかもしれないですね

    会話
  • そしたら助かるな〜。健康志向だけど、それなりに甘いものも好きっていう人たちね。まぁちょっと曖昧かな。あまり偏りすぎないデザインでよろしく!

    会話

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

情報収集をする

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

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

今回必要となる情報

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

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

04. Flow 2. 設計図を作る

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

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

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

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

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

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

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

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

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

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

  • トップページ
  • メニュー詳細ページ
  • 地図やお店の基本情報などがまとまった会社情報ページ
今回デザインの練習として作るのは、トップページのみになります。

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

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

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

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

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

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

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

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

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

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

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

余白を正確にしすぎない

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

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

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

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

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

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

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

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

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

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

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

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

ペーパープロトやワイヤーフレームのような下書き作業は、様々な創作活動で採用されています。
たとえば部屋なら間取り図がありますね、あれはサイトマップでありワイヤーフレームであると言えます。
そして漫画ならネーム、絵画ならデッサン作業など、完成品をいきなり作り込む前に下書きをするという作業は、デザインにおいて堅実な一手です。

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

おすすめのツール

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

  • Adobe Photoshop(フォトショップ)
  • Adobe XD(エクスペリエンスデザイナー)
  • cacoo(カクー)
  • prott(プロット)
  • パワポやエクセル
このコースでは、PhotoshopとXDを紹介します。まずはPhotoshopから使っていきます。

今回のワイヤーフレーム

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

  • かんたんな設計図を作ってみたので、見てもらえますか?

    会話
  • おぉ!本格的だね

    会話
  • まだまだ写真とか入れてないのでピンとこないかもしれませんが、この段階で何か認識が違うところや思いつかれたことがあれば仰ってください

    会話
  • いやぁ何もないかなぁ。しいていえば、僕の挨拶みたいなのが軽く載せられたら嬉しいかなぁ。

    会話
  • なるほど!それなら顔写真もあるといいと思います。できれば働いてるところの写真がいいかなと。挨拶の近くに配置してみます。

    会話
  • いいよ、あると思うから何枚かデータ渡すね!ありがとう!

    会話

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

ページ下部のCONTACTのエリアに、顔写真と挨拶が追加されています。

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

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

設計段階で足りない情報を見つけて、それを加味したデザインを再作成することは顧客目線では非常に優れた対応です。
ただし、予算や時間などの兼ね合いによっては、毎回必ず対応できるとは限りません。そのあたりの塩梅は徐々に身につけていきましょう。

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

まとめ

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

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

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

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

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

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