Web制作実習「インテリア・雑貨店・工務店」のWebサイト

2022

11/02

Updated

2024.11.25

2022

11/02

Published

2022.11.02

/ 石上

この制作実習では、「インテリア・雑貨店・工務店」のホームページを制作します。

教科書を参考にした実習や、こちらで用意したレイアウトを使った実習とは異なり、ワイヤーフレームから制作していくのですが、ここでは自分でレイアウトを考えていくところから始めていきます。

※ワイヤーフレームの簡易的な作り方は後で解説しています。

制作するページは、最低限以下の５ページ。あとは必要に応じて追加することも可能です。

トップページ
コンセプト（お店の理念、思いなどを表現するページ）
プロダクト（商品の一覧）、施工事例
アクセス（フッターに掲載も可）
お問い合わせ

また、ページ制作時のルールとして以下の幅で作成してください。

PC表示：全体の幅1366px以上、コンテンツ幅：1000px。

スマホ表示：全体の幅375px（検証ツールの「iPhoneSE」サイズ）で調整し、左右に15pxの余白。

メディアクエリのブレイクポイントは600pxとします。

制作実習の流れ

1.リサーチ

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

もちろんテーマに沿ったホームページを見るのも良いですが、他業種のホームページでも参考になることが多いので、できるだけたくさんのホームページを見ることが重要です。

また、このリサーチを行う時に注視するのは

ページ内のレイアウト
色の使い方
余白の取り方
Webサイト（お店）のコンセプト
ターゲット層

これらを一定のレベルで完成されたWebサイトをたくさん見ることで「デザインセンス」や「マーケティングの感覚」、「ライティング（伝わる文章の書き方）」を磨くことができます。

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

このリサーチはやればやるほど自分の「デザインセンス」や「マーケティングの感覚」、「ライティング（伝わる文章の書き方）」が磨かれるため、最低でも50サイト以上リサーチし、時間がある時にはさらにリサーチを積み重ねていくことをおすすめします。

また、実際に参考にするホームページは自分の力量に応じて選び、はじめはシンプルな構成のWebサイトから参考にしていくと良いでしょう。

2.ワイヤーフレームを作成する。

ここでは、Photoshopにガイド線を引いてワイヤーフレームを作成していきます。（ワイヤーフレームは、IllustratorよりPhotoshopで作成することをおすすめします）

ガイド線が引けるツールであればAdobe xD、Figma等を使って作成することも可能です。

コツとしましては、ワイヤーフレームの作成時に「どのようにHTMLやCSSを組んでいくか？」というのを想像しながら組み立てていくことで後工程であるコーディングの負担を減らすことができるようになります。

ワイヤーフレームの準備

PC表示のワイヤーフレームを作る時は以下の流れでベースを作成します。

1.「新規作成」→「Web一般（1366×768）」を選択。複数ページを１つのファイル内に作成する場合はアートボードを使ってください。

2.「表示」→「新規ガイドレイアウトを作成」を開く。

3.「列」にチェックを入れ、「数」を12、「幅」を65px、「間隔」を20pxに設定する。

この設定にするとガイドの範囲がちょうど1000pxとなります。
※「列を中央に揃える」にもチェック入れておきます。

4.同じ作業スペースにアートボード（スマホ表示用）を追加するため、「移動ツール」の状態で「アートボード」をクリックします。

すると、四方に⊕（アートボード追加ボタン）が表示されるため、追加したい場所のボタンをクリックします。

5.同じサイズのアートボードが追加されます。

6.追加されたアートボードの「プロパティ」にてW（横幅）を375pxに変更します。

あとは、必要に応じて「アートボード」の名前を「トップPC表示」「トップスマホ表示」などに変更してお使いください。

※1つのPSDファイルにたくさんのアートボードを入れて作業をするとPCのスペックによっては非常に重くなることがありますので、その場合はページごとにPSDファイルを分けておくと良いでしょう。

アートボードの長さを調節する

初期状態では、コンテンツの量によって高さが変わるため、状況に応じて足したり引いたりすることがあります。

1.「移動ツール」の状態で「アートボード」をクリックし、下中央のバウンディングボックスをドラッグします。

このように、アートボードの高さを変更することができます。

ワイヤーフレームの作成

リサーチしたサイトを参考に、「長方形シェイプツール（推奨）」を使ってワイヤーフレームを作成していきます。

ワイヤーフレームを作っていると、たくさんのシェイプレイヤーやテキストレイヤーが混在するようになるため、事前に「ヘッダー」「メイン」「フッター」などのグループを作っておき、その中に該当するパーツを入れていきます。

※この時に作成するグループが、コーディングする時の<header>や<footer>、<div>タグとして利用することができるので、よく考えてグルーピングしていくことをおすすめします。

レイヤーパネルのフォルダの形をしたアイコンから追加→名前の変更をしていきます。

また、それぞれのパーツも名前を変更していくことで、後々の管理がしやすくなります。

ここでもヘッダーやフッターなど、全ページで共通する部分はコピーしながら作成していくと良いでしょう。

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

<header>や<footer>、<div>や<section>などを使い、どのように括る（グループ化）か？
どんなCSSプロパティを使ってそのレイアウトにするのか？
画像をimgタグで設置するか？CSSで背景画像にするか？

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

ワイヤーフレーム（PC表示）

ワイヤーフレーム（スマホ表示）

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

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

ここでは、作成したワイヤーフレームをもとに、画像やテキストを差し替えてページの完成見本を作っていきます。

今回はトレースと違ってワイヤーフレームの時点でレイアウトは決まりますが、ヒーロー（ヘッダー）画像に設置する場合、画像の構図に合わせて若干レイアウトを変更することもあります。

ただし、極端にワイヤーフレームから変わることがないように注意してください。

デザインカンプの準備

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

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

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

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

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

レイヤーをロックしておくのも有効です。

デザインカンプの作成

いよいよワイヤーフレームをもとに画像やテキストを設置して「ページの完成見本」を作成していきます。

（クリッピングマスクを使って画像を設置していきますが、必要に応じて加工・リサイズを行い、できるだけワイヤーフレームに合わせた画像を使用する。）

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

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

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

デザインカンプ（PC表示）

デザインカンプ（スマホ表示）

4.コーディング

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

コーディングの準備

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

「web3」フォルダ（Webサイト全体のフォルダ）
- images（使用する画像を入れるフォルダ）
  - .jpgもしくは.png（ホームページに使用する画像ファイル）
- css（フォルダ）
  - style.css（CSSファイル）
- index.html（HTMLファイル。トップページ）
- concept.html（HTMLファイル。コンセプトページ）
- menu.html（HTMLファイル。メニューもしくはおすすめ商品ページ）
- access.html（HTMLファイル。アクセスページ）
- contact.html（HTMLファイル。お問い合わせページ）