1.企画概要
【企画名称】 | 企画の名称 |
【コンセプト】 | サイトの目的(what:何が目的なのか) |
【扱う商品】 | 扱う商品 |
【ターゲット】 | ユーザーのターゲット層(年齢、性別、職業、ブラウザ、etc...) |
【公開予定】 | 公開予定(今回は中間課題提出日)○月○日(When:いつ) |
【更新頻度】 | どれくらいの間隔で更新するか |
Who:誰に対してか
ターゲットの詳細
推奨ではなく、コアとなるターゲットについて。 ブラウザ環境や解像度、年齢や性別、ジャンルなど。
How:どうやって実現するのか
ロゴ、写真
ロゴの使用、写真の使用などに関するルールの把握、コーポレートカラーなどの把握
競合サイト調査と対策案
実際に売れているサイトの特徴を考察、競合サイトとの比較、分析した結果から導きだされる具体策
セールスポイント
このサイトにおける武器。SEO対策、スタイリッシュなデザインなど。ターゲットにあわせること。

What:何を?
2.コンテンツ概要(情報のフローチャート)
【コンテンツ名(情報のグルーピング)】【コンテンツの内容】【コンテンツ配置理由】
インフォメーションアーキテクチャの成果。情報をまとめ、その情報をグルーピングしたものがサイトのコンテンツになる。
クライアントのサイトコンセプトによってプライオリティの設定もする。
(例)学校のサイト
3.サイト構成概要(ワイヤーフレーム・ラフデザイン)
【タイトル】 サイトの名称
【コンテンツ】 コンテンツ内容(情報のフローチャートからあてはめていく)
【トーン】 全体的なテイスト。例よりも大まかでいいです。(ターゲットの詳細から分析した結果とわかるように)
【マナー】 サイトのルール(クライアント側のルールとターゲットに合わせて)
※参考URL:ワイヤーフレームとは何か?webサイト制作に重要なページ設計図を理解しよう!
サイト構成フローチャート
サイトマップ(ディレクトリマップ)
リンクがどのようにされているのかをまとめて、簡単な図にする。
もちろんそのページタイトルも記入すること。
※参考URL:サイトマップの作り方!簡単にテンプレートで作成する方法
※参考URL:使い勝手のよいサイト構成図(サイトマップ)がほしい!
仕様、ファーストビュー、トップのエリア解説
仕様、ファーストビュー、トップのエリア解説
今までのことから導き出されるデザインノルール。
フォント、具体的な色(キーカラー、アクセントカラー)、マージン、全体のトーンなど
推奨OS及びブラウザ・プラグイン及びJavaScript・CSS
■ 最適化・動作確認ブラウザ(2019年1月Ver)
- Windows(OS = Windows 7、8、10): InternetExplorer 11、Microsoft Edge・Google Chrome・Firefoxの各最新版
- Mac(OS 10.10以降): Safari 10以上、Google Chrome・Firefoxの各最新版
- iPad タブレット: iOS 11以降のSafari、Google Chrome最新版 (基本的表示のみ、タブレット専用デザインはオプションです)
- Androidタブレット: Ver-5.0以上のChrome、Firefoxの各最新版 (基本的表示のみ、タブレット専用デザインはオプションです)
- スマートフォン: iPhone:iOS 11以降のSafari、Google Chrome最新版 Android:Ver-5 以降のGoogle Chrome最新版 (スマートフォン対応の制作時のみ)
■ 使用言語、プラグイン等(2019年1月Ver)
- HTML5〜
- CSS3〜
- JavaScript(jQuery3〜)
- WordPress Ver 5〜
- PHP Ver 5.6〜
- FlashPrayer ver32〜
※参考URL:ホームページ制作時のブラウザ対応をどこまでするのか?
※参考URL:2019年4月からWordPressのphpバージョンは5.6以上が必要になるよ!
※参考URL:WordPress バージョン一覧
4.業務フローチャート(スケジュール工程表)
▲ TOPに戻る ▲