見出し画像

オリジナルサイト制作の企画書【無料提供】

htmlやcssを学んできた方々へ

きっと最終地点はご自分でサイトを作ることやと思います。
でも、なんのサイト作ったらええのかわからん…
きっとそうなると思うんです。

◆オリジナルwebサイト制作の企画書
私が職業訓練校で実際に授業で使っていた資料をご提供します。
サイト制作の企画書です。
(可能な限りプリントアウトして手書きをオススメします)
※ほんとそのままなので授業の仕様が残ってますが気にせずご自分の仕様で使ってくださいませ。なので無料提供です!

sample01_ページ_01


◆サイトを作るにあたって
まず、どんなサイトを作るのかP.2の情報を出すコトをしたほうが良いです。

sample01_ページ_03


手法の一例
ピックアップ⇒グルーピング⇒ランキング

sample01_ページ_02


◆情報を出してまとまったら
まとめた情報をP.3に記述

sample01_ページ_04


P.4はちょっとした仕様です。
みなさんは基本フルスクラッチだと思いますので、ワイヤーフレームやデザインカンプは必須ですね。

sample01_ページ_05


P.5,P.6はメモ書き用です。

P.7はカラーデザインとP.7,P.8ワイヤーフレームです。
配色は難しいと思いますが、基本は『色相環』を意識していただくと良いと思います。合わせて『カラーイメージスケール』も参照されるとより良いです。

sample01_ページ_08


ディスプレイサイズはHDサイズになっていますが、ファーストビューに配慮して作りましょう。という考え方の参考でございます。
※テンプレート名は無視してください。

P.9,P10は一部授業内の仕様が入っていますので、みなさんの状況に合わせて適宜に対応してください。

P.11の制作スケジュールは5日の制作期間を想定した作りになっています。
こちらもみなさんの状況に合わせてください。

sample01_ページ_12


スケジュールの下部は見積の参考です。
お自給換算してますので、残業すれば時間単価が減りますし、早く終わればその逆ですね。時間配分を気にしましょうな考え方の啓発でございます。
(こんな金額でお仕事受けちゃダメですよ)

◆このデータの元ネタは?
私は約まる6年職業訓練校でwebサイトを作る講座を立ち上げて、自分でテキストや教材を作って授業をしていました。
<html>3日、{css}:3日、<html5>:2日、{css3}2日、Dreamweaver:3日
オリジナルサイト制作:5日 (1日6時間×18日)
このコンテンツの最後5日間で使っていた企画書です。

約1,200人の方がこの企画書を使ってさまざまなサイトを制作されました。授業内では私が提供するテンプレートがあってそれを改編することがメインでしたので前提条件はみなさんの状況とは違いますが、ご自身のサイト制作に少しでもお役に立てれば幸いです。

◆最後に
サイト制作にあたって『企画書』は制作の意図(コンセプト)や工程を見ることができます。何が言いたいかと言いますと転職や就職をお考えの方がおられれば、実際に、受講生さんも面接時に企画書を持参して受かった方もおられますので、ポートフォリオの一部と考えていただけるとより良いと考えます。(そのため手書きをオススメしました)

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
今日も明日も明後日も”大吉”です!
塩谷康弘(シオタニヤスヒロ) 通称:エンヤと呼ばれています^^ 約9年ほど職業訓練に携わりウェブやデザインの講師をしていました。今は個人でオンライン/出張パソコン教室:リンクカフェラボラトリーをしています。 「今さらそんなコト聞けない」を気にせず何度でも聞いてください☆