\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Step1 > Webサイトの要件定義を学ぼう

Webサイトの要件定義を学ぼう

2022/05/15

2022/09/03

Webサイトを制作する際には「要件定義」が大切です。

ただ、一口に要件定義といっても制作の現場によってやり方は異なります。

今回は、自分のポートフォリオサイトを作成する例を見ながら、Webサイトのコンテンツを設計するところまでやっていきましょう。

要件定義について学ぼう

それでは早速、要件定義について簡単にイメージを膨らましていきましょう。

要件定義とは

要件定義とは、簡単に言うと「何をどうやって作るのか」を決めることです。

主にシステム開発などの現場において、開発プロジェクトに必要な機能や要求をまとめていく作業のことを言います。

Webサイト制作においても、制作を始めるにあたり必要なコンテンツや機能などをまとめていく必要があるのです。

Webサイト制作の流れ

ここで、Webデザインの流れについてもおさらいしてみましょう。

Webサイトが制作される際は、大きく分けて以下の4つの工程に分類されます。

  • 要件定義
  • デザイン
  • コーディング
  • リリース

要件定義からWebサイトの制作は始まります。
クライアントと打ち合わせをし、どんなWebサイトを制作していくのかを決めていきます。

要件定義を経て、確定した内容が次のデザインの工程へと引き継がれていきます。

要件定義は一番大切

Webサイトを制作する際には、デザインの前に要件定義を行う必要があります。

  • どんな目的でWebサイトをデザインするのか
  • どんなコンテンツを載せるのか

上記の項目のようなデザインを制作する上で必要な情報が集まらなければ、良いデザインを制作することはできません。

なので、全ての工程の根っこの部分にあたる要件定義は、最も大切な工程になります。

Webサイトの要件定義をしよう

ここまでで、要件定義の簡単なイメージを膨らませてきました。

次は、実際に自分のポートフォリオサイトを作成する体で、要件定義の練習をしていきましょう。

大切なこと

これからみなさんが作るポートフォリオサイトは、制作実績となるものです。
そして、制作実績とは、皆さんが今まで学んできた努力を目に見える形にするということです。

就職/転職活動、活動、案件獲得のいずれにおいても、みなさんの努力を人に伝えるための手段となります。
なので、自分のポートフォリオサイトはとても大事なものになるのです。

Webサイトを作る目的を明確にしよう

まずは、「何を目的にして」Webサイトを制作するのか考えましょう。

目的がない状態だと、Webサイトのコンテンツもデザインも作ることはできません。

  • 就職/転職活動のため
  • 案件獲得のため

など、1つ目的を立てることで、どんなデザインを作っていけば良いのか方向性が決まります。

なので、目的の設定は必ず行うようにしましょう。

制作するWebサイトの種類を考えよう

次は、どんな種類のWebサイトを制作するのか考えてみましょう。

  • 制作実績を見せるポートフォリオサイトを作る
  • 自分の学習の軌跡を見せるブログサイトを作る

この段階では、「目的を達成する」ために、どんな見せ方をするべきか考えます。 Webサイトを制作した先に、目的が達成されるかどうかを考えましょう。

ここまでの例

就職/転職活動のために「制作実績を見せるポートフォリオサイト」を制作する

一番に見せたい人を考えよう

次は、制作するWebサイトを1番に見せたい人も考えておきましょう。

  • 企業の人事の方
  • クラウドソーシングの発注者
  • 家族

上記のような「Webサイトを見せたい人(ターゲット)」をあらかじめ設定しておくことで、
後の工程での「コンテンツ」を考える作業がスムーズに行えます。

載せたいコンテンツを考えよう

ここまでの作業ができたら、Webサイト内に載せるコンテンツを考えていきましょう。

ここまでの例

  1. 就職/転職活動が目的
  2. 制作実績を見せるポートフォリオサイトを作る
  3. ターゲットは企業の人事の方

例えば、上記の設計でWebサイトのコンテンツを考えていくとします。

載せたいコンテンツの例

載せたいコンテンツ理由
自己紹介自分の経歴や趣味など、自分の人柄を伝えたいから
制作実績一覧今までの制作物を掲載し、自分の努力を目に見える形で伝えたいから
制作物の個別の解説1つ1つの作品の意識した点と制作工数を伝えて、自分の実力を提示したいから

一例ですが、就職活動を目的とするならば、上記のようなコンテンツを考えてみました。

「なぜ、そのコンテンツを載せたいのか」、理由まで考えられると後の作業がスムーズに行うことができます。

載せたいコンテンツを深掘りしよう

載せたいコンテンツがある程度決まったら、より詳細な内容を考えましょう。

この作業はデザインを制作するにあたって、「そもそも載せるものが決まってない」状態にならないようにする作業です。

載せたいコンテンツ理由
自己紹介自分の経歴や趣味など、自分の人柄を伝えたいから

ここから、コンテンツの内容を深掘りをするために、自己紹介で思いつく限りの内容を書き出してみましょう。

自己紹介の深掘りの例

  • 名前 → 山田太郎
  • 出身大学 → ○○大学
  • 出身 → 東京都豊島区
  • 経歴 → 大学入学から現在の就職活動に至るまで
  • 趣味 → 読書 → 好きな作品
  • 自分が大切にしていること → 自分のビジョン/自分の強み
  • 好きな四字熟語

ここまでで、自己紹介で使えそうな内容を書き出してみました。

他にも「一発ギャグ」「座右の銘」など自己紹介に使えそうなものは書き出しておきましょう。

優先順位を付けてコンテンツを選別しよう

載せたいコンテンツがある程度決まったら、内容を選別していきます。

  1. 名前 → 山田太郎
  2. 自分が大切にしていること → 自分のビジョン/自分の強み
  3. 経歴 → 大学入学から現在の就職活動に至るまで
  4. 趣味 → 読書 → 好きな作品

例えば、就職活動を目的とした場合に、上記の優先順位を設定してみました。

どのようなコンテンツを載せたら、ターゲットの心に響くかを考えて優先順位を決めてみましょう。

他のコンテンツでも深掘りを行う

上記の作業を他の載せたいコンテンツでも行ってみましょう。

ここまでのまとめ

  1. コンテンツの案をとにかく出す
  2. 出てきた案の中で優先順位を付ける
  3. 優先順位が高いものをデザインに落とし込む

コンテンツの深掘りの作業をまとめると上記のようになります。

ポイント

一見、使わないと思う内容でも案として出しておきましょう。

デザインを制作していく中で、情報量が少なくなったり、物足りないと感じた際には あらかじめ出しておいた案から内容を追加することができます。

サイトマップを作成する

次は「全部で必要なページは何枚か」考えましょう。
そのために、コンテンツの内容が決まってきたら、「サイトマップ」を作成します。

サイトマップとは、制作するWebサイトのページ構造を書き出したものになります。

必要なページを書き出してみよう

  • トップページ
  • 自己紹介のページ
  • 制作物の一覧ページ
  • 制作物の個別ページ

先ほどの例を元に必要なページを書き出すと、上記のようになります。

自分が何枚のページをデザインしなければならないのかを把握するために必要な作業になります。

参考サイトを探す

コンテンツが固まってきたら、いよいよデザインの作成へ移行します。

参考サイトを確認しながら、「自分のコンテンツ」を魅力的に見せるデザイン案を探していきましょう。

デザイン案を探すおすすめのサイト

コンテンツが固まったら次の工程へ進もう

ここまでで、自分のポートフォリオサイトを作成する例を使いながら、Webサイトのコンテンツを設計を行いました。

自分で設計してきたコンテンツをより魅力的に見せるためにデザイン制作の工程へ絵移りましょう。「ラフスケッチ」を作成し、「レイアウト」を考えて、設計したコンテンツの見せ方を考えていきましょう。

Webデザインの流れを復習したい方はこちら

Webデザインのレイアウトを復習したい方はこちら

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

目次

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから