Web制作実習４「コーポレートサイトの制作」

今回の実習では、「コーポレートサイト」の制作を行います。

「コーポレートサイト」とは、その企業や団体を紹介するWebサイトという意味ですが、かなりざっくりとした括りになります。

そのため、テーマを選ぶのに時間が掛かりすぎるのも良くないため、この実習では以下の種類に絞り、その中から架空の企業・団体のコーポレートサイトを作成していきます。

• 企業　（製造系、商社系、人材派遣系など）
• 士業　（弁護士、税理士、行政書士など）
• 施設　（図書館、病院など）

※時間に余裕があり、2サイト目以降を制作される場合は、上記の括りを無視して作成していただいてもけっこうです。

コーポレートサイトデザイン参考ページ：

• 【2023年最新版】コーポレートサイトのデザイン参考事例20選｜Xサーバー
• コーポレートサイト事例３０選【デザインの参考になる】｜ビズサイ
• コーポレートサイト｜SANKOU!

作成するページ

業種によって構成が変わることもありますが、基本的には以下のページを作成してください。

• トップページ
• 事業内容（やっていることを紹介するページ）
• 会社概要（企業、団体を紹介するページ）
• 採用情報（採用の募集ページ）
• お問合わせ

ただし、選択したテーマによっては違うページ内容になる場合があります。（教育や医療系など）

また、「コンセプト」「ターゲット」の設定もしっかり行っていただき、「コンセプト」につきましてはサイト内で目に入りやすい場所（トップページなど）に設置してください。

また、「お問い合わせ」のページでは、お問い合わせフォームに加え、コーポレートサイトでよく見かける「よくある質問」のコンテンツも追加してください。

制作実習の流れ

作成するコーポレートサイトはHTML、WordPressどちらを使っても良しとします。

これから紹介する流れはHTMLサイトのみでなく、WordPressの「フルサイト編集」でもだいたい同じ流れとなりますので、参考にしてください。

1.リサーチ

制作に入る前に、事前にリサーチを行います。

もちろんテーマに沿ったホームページを見るのも良いですが、他業種のホームページでも参考になることが多いので、できるだけたくさんのホームページを見ることがデザインセンスを磨くことに繋がります。

また、このリサーチを効率よく自分のスキルに落とし込めるように、

• ページ内のレイアウト
• 色の使い方
• 余白の取り方

などに注目し、デザインの構成（レイアウトや色の使い方）を、完成されたWebサイトをたくさん見ることで学んでいくことができます。

実際に見たページは、エクセルやワード、Googleスプレッドシートなどに記録しておくことで、後で見返したり自分のデザインに関するストックとして活用することができるのでリサーチと合わせてやってみてください。

記録する項目としてはこの辺りです。

• サイト名
• サイトのURL
• 使用カラー（メイン、サブ、アクセント）
• 感想・備考
• 気になるページのチェック
• 可能であればスクリーンショット

このリサーチはやればやるほど自分のデザイン感覚が磨かれるため、最低でも50サイト以上リサーチし、時間がある時にはさらにリサーチを積み重ねていくことをおすすめします。

2.Webサイトの原稿を作る

また、リサーチしたものを参考に、自分が制作するWebサイトの原稿（見出しや本文で使用する文章など）にまとめておくと後の制作が楽になるのはもちろん、制作中に方針がブレることが少なくなりますので、この段階で次のようにしっかりまとめておくことをおすすめします。

1. サイト名（何のサイトか？）
2. コンセプト、ターゲット
3. メインカラー、サブカラー
4. トップページの構成（見出しと本文で使用する文章）
5. その他下層ページの構成
6. 実装したい動きや仕掛け

※この１～５の項目はAIツール（ChatGPTやMicrosoft Copilot）を使うことで、非常に効率よく作成することができますが、そのままでは不自然な文章になることが多いため、必ず確認・編集してください。

3.ワイヤーフレームの作成

ここではWebサイトの原稿をもとにワイヤーフレーム（レイアウトの見本図）を作成していきます。

ワイヤーフレームを作成するツールは特に制限しませんので、使い慣れたものや新しく挑戦するものなど、自由に選んでください。

• Adobe Photoshop
• Adobe Illstrator
• Adobe Xd
• Figma
• ペンと紙（手書き）

※わからない場合はPhotoshopを使うと良いでしょう。

このワイヤーフレームを作る時は

• divやsection、articleを使ってどのようにグループ化し、クラス名をどうするか？
• どんなCSSを使ってそのレイアウトにするのか？
• 画像をimgタグで設置するか？CSSで背景画像にするか？

など、コーディングを意識しながら作ることがポイントで、これをやっておくことでスムーズにコーディング作業を進めることができるようになります。

また、セクションごとにレイヤーをグループ化し、クラス名を付けておくことで、作業途中での確認や管理がしやすくなります。

4.デザインカンプの作成

デザインカンプとは「ページの完成見本」という意味で使われています。

ここでは、作成したワイヤーフレームをもとに、画像やテキストを差し替えてページの完成見本を作っていきますが、できるだけレイアウトがワイヤーフレームより大きく変わることがないように注意してください。

デザインカンプの準備

デザインカンプを作成する前に、この準備をしておくことで管理がしやすくなるのでおすすめです。

1.ワイヤーフレームのレイヤー、グループを全て選択し、１つのグループにする。

2.グループ名を「ワイヤーフレーム」に変更する。

3.ワイヤーフレームのグループを複製する。

4.複製したグループ名を「デザインカンプ」に変更し、ワイヤーフレームのグループを非表示にする。

デザインカンプの作成

複製した「デザインカンプ」のグループに画像やテキストを差し替えて「ページの完成見本」を作成していきます。

（クリッピングマスクを使って画像を設置した時は、スライスツールで画像の抽出を忘れないように）

デザインカンプが完成したら、一度jpgもしくはpngに画像として書き出しておきます。

書き出して画像にしておくことで、ポートフォリオに掲載したり、Webサイトで使うことができるようになります。

このワイヤーフレームとデザインカンプを各ページ分（PC表示とスマホ表示）作成してください。

5.コーディング

完成したデザインカンプをもとに、テキストエディター（VSコードなど）を使ってコーディングしていきます。

コーディングの準備

はじめに、必要なファイルやフォルダを事前に用意します。

• 「web4」フォルダ（Webサイト全体のフォルダ）
  • img（使用する画像を入れるフォルダ）
    • .jpgもしくは.png（ホームページに使用する画像ファイル）
  • style.css（CSSファイル）
  • index.html（HTMLファイル。トップページ）
  • concept.html（HTMLファイル。コンセプトページ）
  • service.html（HTMLファイル。サービス紹介ページ）
  • contact.html（HTMLファイル。お問い合わせページ）

モバイルファーストのレスポンシブデザインで制作してくため、レイアウトはスマホ表示から行なっていき、メディアクエリを使ってPC表示のレイアウトを設定してください。

コーディングを行うときは、「Emmet」を使うことでかなり効率よくコーディングを行うことができます。

積極的に活用して、期限内に完成できるよう頑張ってください。

コーディングを効率よく行うポイントとして、大枠の括り（グループ）を事前に考え、予めクラス名を含め、記述しておくと良いでしょう。

• <header class=”〇〇”>~</header>
• <nav class=”〇〇”>~</nav>
• <section class=”〇〇”>~</section>
• <article class=”〇〇”>~</article>（<div class=”〇〇”>~</div>）
• <aside class=”〇〇”>~</aside>
• <footer class=”〇〇”>~</footer>

などなど。

以上がHHTMLでの制作の流れとなります。

WordPressで制作する場合

WordPressの場合はテーマ（デザインテンプレート）によってある程度レイアウトが決まってしまうため、HTMLで制作する場合と順序が少し変わります。

1～4の項目は同じなので割愛しますが、WordPressの場合は先に「投稿」や「固定ページ」でページのURLを確保しておくことが重要になります。

5.WordPressのインストール及び初期設定（テーマ選定含む）

デザインの部分はテーマ（デザインテンプレート）でブログのようなレイアウトやホームページのようなレイアウトにすることができます。

この実習では「コーポレートサイトの制作」なので、それに見合ったテーマを選択し、インストール→有効化してください。

以前のテーマの場合、テーマごとにある程度デザインが決まっていますので、自由にレイアウトしたい場合は「フルサイト編集」に対応したテーマを使うと良いでしょう。

6.各ページの作成

Webサイトのレイアウトを行う前に「固定ページ」や「投稿」を使って、リサーチした内容をもとにそれぞれのページを作ります。

もちろん先に作りこんでも良いですが、レイアウトを先に行いたい場合は「タイトルだけのページ」を作っておき、ナビメニューなどに設定していくと良いでしょう。

7.リンク先の確認

「投稿」で作られたページはトップページなどの「新着記事一覧」部分に自動で表示されますが、固定ページで作られたページは独立しているため、ナビメニューやリンク（aタグ）を使ってアクセスできるようにしてあげる必要があります。

こういった仕組みの違いも実際に使ってみることでわかってくるので、WordPressでのサイト作成にも慣れておくことをおすすめします。

また、より本格的にWordPressを使った制作する場合（WordPressテーマを作ったりカスタマイズする場合）はHTMLやCSSだけでなく、PHPに関する知識が必要になってきます。

最近ではAIでコードの生成もしてくれますので、書籍やネットと合わせて活用してみてください。

コーポレートサイト（デモサイト）

コーポレートサイトのデモサイトを作成しました。

※音が出ますので注意してください。

このサイトでは、jQueryを使った以下の特徴があります。

• オープニングアニメーション
• ナビメニュー上部固定（スクロールイベント）
• フェードイン（アップ、サイド）
• アコーディオンメニュー
• レスポンシブデザイン（1366px、375px）
• SASSによるスタイルの制作

デモサイトのファイル構造

また、ファイル構造は以下のようになっており、下のボタンからダウンロードして参考にしていただけたらと思います。

• web4
  • css
    • style.css（サイト反映用）
    • style.scss（コンパイル用SASS）
    • _common-all.scss（全体設定用SASS）
    • _common-parts.scss（共通パーツ用SASS）
    • _js-jquery-parts.scss（Js/jQuery用SASS）
  • images（使用画像）
  • js（Js/jQuery外部ファイル）
  • index.html（トップページ）
  • service.html（事業内容）
  • company.html（会社案内）
  • recruit.html（採用情報）
  • contact.html（お問い合わせ、Q&A）
• 第5回制作実習（ワイヤーフレーム）
  • デザインカンプ
  • ワイヤーフレーム
  • 画像素材
  • wireframe-corporatesite.xd（ワイヤーフレーム、デザインカンプのXdファイル）

デモサイトはこちらから確認することができます。

デモサイトのファイル一式はこちらからダウンロードすることができます。