Webページ制作実習

① 2 3 44-2 5 参考資料

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

９日間の制作全体の流れ

  • 企画：制作する企業・お店を考える / 設計：ワイヤーフレーム【１日目：11/15】
  • 設計：ワイヤーフレーム / デザインカンプ・ロゴデザイン【２日目：11/29】
  • 設計：デザインカンプ・ロゴデザイン【３日目：12/6】
  • 制作：画像制作・写真加工・HTML・CSS・JavaScript【４日目～日目：12/13，12/19，1/9，1/23，2/14】
    ※通常の制作にはSCSS・PHP・CMS（Wordpressなど）・CSSフレームワーク（Bootstrap）なども使用します。
  • サーバーにアップロード・テスト・調整（windowsパソコンのブラウザーで確認出来る事）【最終日：2/21】
    ※通常はandroidやiphoneなどiosのブラウザーで崩れず表示出来るように微調整します。

※上記の順番で制作実習を進めます

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

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

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

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

参考サイト

SANKOU! | Webデザインギャラリー・参考サイト集
Web Design Clip | Webデザインギャラリー・クリップ集
Webデザインギャラリー・参考サイト集｜MUUUUU.ORG

〇企業・団体の場合必要なページ例

  • トップページ
  • 企業理念・企業情報
  • サービス、商品紹介
  • カタログ
  • 採用情報
  • お問合せ

〇お店の場合必要なページ例

  • トップページ
  • メニュー
  • こだわり
  • お知らせ
  • 店舗紹介
  • お問合せ
  • 企業情報
  • 採用情報

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

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

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

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

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

参考サイト

ホームページの配色ツール厳選7つ！基礎知識やコツも解説 – 初心者のための会社ホームページ作り方講座｜エックスサーバー株式会社
WEB色見本 原色大辞典 - HTMLカラーコード

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

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

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

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

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