Webページ制作実習

実習全体の流れ：ホームページを制作する

【１回目の実習】企画：制作する企業・お店などを考える(企画書・サイトマップ・サイトカラー)

• １．どんなホームページを作るか→制作する企業・お店を考える→自分が作りたいホームページの参考例を探す
• ２．メインカラーは何色か→業種によっては色で見栄えが代わります
• ３．サイトマップを考える→何ページ作るかで時間配分も決める

１．どんなホームページを作るか

企業、団体、お店で自分の興味のあることで作るといいでしょう

お客様に商品、事業内容などをわかりやすく発信して連絡や商品購入を行ってもらうためにわかりやすく見やすいホームページが必要になります。
記事や写真は詰め込みすぎないようにしましょう。

連絡方法として電話番号、お問合せフォーム、住所を記載（※メールアドレスはボットによる迷惑メールが多いため最近は載せない傾向があります。（スクリプトなどで対策している場合は別）。特に個人ページでは個人情報（住所、メールアドレスなど）を表示させるリスク理解しましょう。

２．メインカラーを考える

自分が制作するサイトのイメージカラーを決めましょう。色によってコーポレートイメージが変わります。

青→安心感
緑→健康
オレンジ→暖かい
など

３．サイトマップを考える

どの階層に所属するか、何ページ制作しなければいけないか把握するためにも、この時点で考えましょう。

トップページ
├ 企業情報
│　└ 社長挨拶(ページ内リンク)
│　└ 社名由来(ページ内リンク)
│　└ アクセス(ページ内リンク)
├ サービス
│　└ 商品説明
│　└ カタログ
├ 採用情報
│ お問合せ
│  └ 個人のお客様
│  └ 企業様
├ オンラインショップ	
├ 特定商法に基づく表記				
└ プライバシーポリシー

ついでにURLも考えましょう

• トップページ→index.html
• 企業情報→companyinfo.html

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

• １．情報のリストアップ
• ２．レイアウトを決める
• ３．ツールなどを使って清書する

１．情報のリストアップ

制作するページの情報を決めます

商品ページであれば商品名・キャッチコピー・商品写真・セールスポイント

２．レイアウトを決める

〇基本の大きさ

• PC:1920px×1080px
• スマホ:768px×1024px(390px×844px)

ブレークポイント：PC1,280px以上、タブレット1,280～768px、スマホ768px以下

ブレークポイントはレスポンシブサイトなどではCSS、JavaScript、PHPなどを使い自動的に切り替えるように制作します。

☆今回の実習ではPCがメインです。

〇レイアウトには

• シングルカラム
• マルチカラム
• グリッドレイアウト
• フルスクリーンレイアウト

などがあるので、どの表示にするのか決める