今回作成する完成品を確認しよう

この章では、本チュートリアルで作成するコーポレートサイトのデザインについて確認していきます。

まずは、「要件定義シート」に纏められたプロジェクトの背景や概要を確認して、制作するコーポレートサイトの「背景や趣旨」の部分を理解していきます。

ただデザインを見るのではなく、

• 制作の目的や解決したい課題はなにか？
• 各セクションのデザインにはどのような意図があるのか？

という点を意識しておくと、自分自身でサイト制作を進める際にも役立つ知識が習得できるため、上記の観点でデザインを確認するようにしていきましょう。

デザインの前に、要件定義シートを見て制作の意図を理解しよう

『開発がブレないよう要件定義シートを埋めよう』の章で解説したように、クライアントが求めている要件をしっかり整理しておくと、「制作する Web サイトはどのようなデザインが最適なのか」という部分も固まってきます。

本チュートリアルで制作するコーポレートサイトも、以下の要件定義シートに纏められた内容をベースにデザインされていますので、まずは制作の背景にある課題や目的を確認していきましょう。

▼ コーポレートサイト制作の要件定義シート

※青字で記述した箇所が、要件定義シートのテンプレートに書き足した箇所となります。

【要件定義シートの記述内容】

■ 制作の背景

• 自社の採用を強化するため
• お問い合わせを増加させるため

■ 制作の目的

• 自社に興味を持っている求職者に対して、現在募集している職種について適切な情報を発信することができるようになる
• 自社の取組に共感を持った人が応募しやすくなるよう、企業理念や事業内容をテキストだけでなく、視覚的にも伝わりやすいようにする

■ 制作の目標

• 既存コーポレートサイトからの応募者数の 2.5 倍のお問い合わせを獲得する

■ システムの全体像

• 【管理画面】
  • CMS（WordPress）を導入して、以下の作業を Web 上の管理画面から行うことができる。
  • １．募集職種の追加・変更・削除
  • ２．ニュース記事の投稿（記事の修正、削除含む）

• 【公開画面（ユーザーが閲覧できるページ）】

  • 企業情報（CMS 管理対象外）
  • お問い合わせフォーム（CMS 管理対象外）
  • 募集職種
  • ニュース記事

• 【その他】

  • GoogleMap 利用（企業所在地のアクセス情報）
  • GoogleForm 利用（お問い合わせフォーム）

■ 参考資料

• 【開発用 GitHub リポジトリ】の URL
• 【デザイン確認】の URL

上記の内容から分かるように、本チュートリアルで制作するコーポレートサイトは、

• 採用を強化したい
• より自社の理念や魅力が伝わるようにしたい

という制作の背景や意図が伝わってきます。

デザインは、要件定義することで可視化された部分をさらに分かりやすく表現したものなので、表面上のデザインだけでなく、裏側に隠れた情報などもイメージできるように意識していきましょう。

また、プロジェクトの作業範囲や制作スケジュールを記載するシートは下記のようになっています。

▼ プロジェクトの作業範囲などを記載したシート

ここに記載した内容は実案件を元にした記載例です。

発注側の方で要件定義〜デザインまでを担当して、フロントエンド実装の部分だけを外注したパターンとなります。

制作における「背景・趣旨」と合わせて、プロジェクト全体に関する納期や作業範囲などを纏めることによって、発注側と外注側での認識齟齬が発生しないように気をつけています。

Web サイトのコンテンツをセクション・ページ別に紹介

ここからは、具体的に Figma でデザインされたコーポレートサイトの内容を確認していきます。

デザインを大まかに分類すると、

1. 全ページ共通となるヘッダー・フッター
2. フロントページ
3. ニュースページ
4. 採用ページ
5. 404 ページとスマホレイアウト

となります。

レイアウト確認 1：ヘッダー・フッター

まずはサイト内の全ページで共通表示される、ヘッダーとフッターのレイアウトです。

ヘッダーには、

• タイトル（Indieverse）
• グローバルナビ

が表示されており、サイトのタイトルと各情報へリンクできるナビゲーションメニューがあります。

これは、ヘッダーレイアウトでは定番のデザインとなっていますが、

1. ユーザーが訪問したサイトをひと目で認識できる
2. 見たい情報にすぐアクセスできるよう、一番わかりやすい位置にナビゲーションのリンクを設置する

という意図があり、多くの Web サイトで採用されているデザインです。

フッターには、

• タイトル（Indieverse）
• グローバルナビ
• コピーライト表記

が表示されており、ヘッダー同様にページの一番下で比較的わかりやすい位置に、タイトルとナビゲーションメニューを表示したデザインとなっています。

そして、フッターの最下部には、サイトの著作権を示すためのコピーライト表記を入れています。

レイアウト確認 2：フロントページ

次に、フロントページのデザインを確認していきます。

• キービジュアル（企業メッセージ、イメージ画像、問合せボタン）
  • 企業メッセージとして一番伝えたいことをテキストで表現
  • メッセージを視覚的にも理解できるようイメージ画像を配置
  • 問合せの流れをスムーズに行えるよう目立つ位置にボタンを配置

• 企業理念
  • 企業理念として伝えたいメッセージを言語化して、ユーザーが理解しやすいシンプルなテキストで表現

• サービス一覧
  • 自社のサービスを事業ごとに紹介
  • サービスのイメージ画像、事業名、事業の概要を１つのブロックに纏めて読みやすいレイアウトで表現
  • 事業の詳細を確認したり、問い合わせができるようにボタンを配置

• 採用情報
  • 自社の勤務形態と募集したい人材の概要を、セクションタイトル下に表記
  • 募集している職種ごとに、職種のイメージ画像、職種名、募集要項の抜粋を表示
  • それぞれの職種から、採用ページへ飛べるように「イメージ画像」と「職種名」にリンクを設置

• 会社概要
  • 会社に関する基本情報を掲載（設立、代表者、従業員数、所在地）
  • アクセス情報については GoogleMap を埋め込み、より詳細なアクセス情報を提供

• お問い合わせ
  • お問い合わせフォームは GoogleForm を利用

以上がフロントページのレイアウトになります。

レイアウト確認 3：ニュースページ

次に、ニュースページのデザインを確認していきます。

• ニュース一覧（アーカイブページ）
  • ニュースページのタイトルを表示
  • 投稿されたニュース記事が複数見れるように、一覧レイアウトで表示

• ニュース記事（単一投稿ページ）
  • ニュースページのタイトルを表示
  • 投稿されたニュース記事の詳細を確認できるよう、記事タイトルと本文を表示
  • 記事を SNS でシェアできるよう、記事タイトル下に SNS シェアボタンを配置

以上がニュースページのレイアウトになります。

レイアウト確認 4：採用ページ

次に、採用ページのデザインを確認していきます。

採用ページは、

• 採用ページタイトル（固定）
• 職種ごとの募集内容（職種ごとに変化）
  • 職種名
  • 募集要項
  • 応募ボタン

について、赤枠部分で表示しています。

青枠部分には、フロントページ同様に、現在募集している職種の一覧が表示されるようになっています。

以上が採用ページのレイアウトになります。

レイアウト確認 5：404 ページとスマホレイアウト

最後に、存在しないページ URL が呼び出されたときに表示するための 404 ページとスマホレイアウトについて確認していきます。

• 404 ページ
  • ページが存在しないことが伝わるメッセージを表示
  • ユーザーが 404 ページからスムーズに移動できるよう、トップページへリンクするボタンを配置

• スマホレイアウト
  • 基本的にはシングルカラムのレイアウトになるので、スマホレイアウトは横幅の余白を取り除いたデザインとなる
  • ヘッダーのグローバルナビについては、ハンバーガーメニューで表現
  • メニューの表示位置は左ではなく右側に表示

全てのページデザインの確認は以上となります。

まとめ

この章では、本チュートリアルで制作するコーポレートサイトの完成品を確認しました。また、表面的なデザインだけではなく、制作の背景にある「課題や目的」を考えながら作業を進めることで、よりクライアントの意図を把握できるようになると理解できたと思います。

この章で学んだことを念頭におき、フロントエンド実装だけを担当する案件の場合でも、目的からズレないような制作ができるように意識していきましょう。