小規模・中規模のWeb制作ぐらいしかした事ないしがない身の上の私ですが。
システム系に関しては、大きな案件に携わったことがあります。
その案件というのが、某大学のシラバス管理システムの構築です。
学校相手だと、支払いなどはすっきりしてるんですが作業内容の範囲で色々揉めた苦い記憶があります。
IT業界自体は「サービス業」というのを痛感した案件でもありました。

他にもEC-Cubeなどがメジャーではなかった頃、Zen-CartというECシステムを使った事もあります。
この頃のECシステムの印象はとにかく安っぽい、でした。
機能面でもデザイン面でも、カスタマイズしなければまったくもって使い物になりません。
カスタマイズに関しては今も一緒ですが、提供される機能が多くはなかったので、
殆ど一からプログラムを書くという状況で、中々大変でしたね。

さて、わざわざ身の上話をする為に記事を書いたわけではありません。
上記した内容の意図するところは、これらの案件には大きな共通点がある、という事。
大規模な案件、場合によっては中規模とされる案件では、ある共通点が必ず生まれます。

それは「ドキュメントがある」という事。
その資料がどこまであるかは案件次第、または会社次第ですが、必ず存在します。
何故なら、ドキュメントがなければ仕事にならないからです。

何故仕事にならないかを記事に纏めつつ、今まで私が配布した資料を一括で纏めます。
ダウンロードして頂き、制作手順書・設計書・仕様書・要件定義書など、様々な用途にお使いください。

Web制作設計手順書【PDF】
Web制作設計手順書【Keynote】
Web制作設計手順書【PowerPoint】

Web基本設計書【PDF】
Web基本設計書【KEY】
Web基本設計書【PPT】

Web画面設計書【PDF】
Web画面設計書【KEY】
Web画面設計書【PPT】

さてさて、遂に公開されました。
無料配布第三弾。今回は前回配布した基本設計書と一緒に活用する資料です。
システム系にいた人であればなじみの深い、画面設計書と言うものです。
が、Web用かつ小規模相当に省略し、結構ざっくりな感じになっています。
ただ基本設計と組み合わせるだけで全然違いますので、お試しあれ。
ちなみに営業ツールとしても機能します。使い方は皆さん次第です。

以前配布した資料はこちら。
【無料配布】Web制作設計手順書
【無料配布第二弾】Web基本設計書
基本設計書との併用を考慮して作成されていますので、出来れば合わせてお使い下さいね。
一番上の設計手順書が一番営業ツール向きかもしれません。

また前回も書いたのですが。
今回配布するのはプレゼン用の資料ではありません。
私の使い勝手上、keynoteで作成してはいますが、それは編集する為です。
実際クライアントと方向性の確認をする際には、PDFで行います。

勿論使い方は皆さん次第ですので、編集もご自由にどうぞ。
修正・署名の変更など完全にフリーです。
私に許可とる必要すらありません。社内でも個人でも何処でもお使い下さい。
またサンプルデータとして、私が今作成しているPeace & Pieceの情報が入っています。
こちらも自由に編集してお使い下さい。
各ページデータは一部お楽しみ、という事で全部は載せていませんが、こちらも参考までに。
PDFデータそのものはこのままでは役に立ちませんが、見栄えのサンプルとして。

Web画面設計書【PDF】
Web画面設計書【KEY】
Web画面設計書【PPT】

また各種項目について補足致します。
更新履歴がある事から、これは「徐々に完成させていくもの」である事が理解いただけると思います。
仕様書付きとあるように、様々なルールを決める部分があります。
しかしこれは最初の取り決めから少しずつ変わっていき、最終的に落ち着く、というスタンスを取ります。
ですので最初はこうだったが、後々こうなった、という更新履歴が必要になります。
可能なら何故そう変更したのかという理由も記述しておくとわかりやすいかと思います。

また画面部分に関してはワイヤーフレームを挿入して下さい。
今回のはかなりざっくり適当なワイヤー（？）ですが、最初はこんなものでも問題ないと思います。
大事なのはコンテンツの導線や仕組みを共有する事で、UIデザインは一番最後です。

以上。補足説明でした。

皆様、お待たせいたしました。
Webの基本設計書。私が仕事で使っているものを公開します。
公開に当たって、色々微修正を加えました。ご自由にお使い下さい。

また以前無料配布した
【無料配布】Web制作設計手順書
も合わせて利用していただければ、とは考えています。

ただ、勘違いして欲しくないのは、今回配布するのはプレゼン用の資料ではありません。
私の使い勝手上、keynoteで作成してはいますが、それは編集する為です。
実際クライアントと方向性の確認をする際には、PDFで行います。
今の所、この資料は好評です。

はっきり言って内容だけ見れば、至極当然の事。
そして基本的なことで、場合によっては言われた事そのまま記載しているかもしれません。
ただこれを依頼主とちゃんと確認しあうという工程が大切になります。
資料という形あるものにして、見える化する事で安心して仕事が出来ます。
またぶれることが少なくなるため、方向性が明確になり、Webの質も高まります。

修正・署名の変更など完全にフリーです。
私に許可とる必要すらありません。社内でも個人でも何処でもお使い下さい。
またサンプルデータとして、私が今作成しているPeace & Pieceの情報が入っています。
こちらも自由に編集してお使い下さい。
PDFデータそのものはこのままでは役に立ちませんが、見栄えのサンプルとして。

Web基本設計書【PDF】
Web基本設計書【KEY】
Web基本設計書【PPT】

皆さん、おはこんばんちは。
えなみん、ことプランナーの江並です。
こうして名乗るのは久しぶりな気もしますが、USTでは毎回名乗ってるんですよね。

今日はプランナーとして日々感じている事。
もしくは江並が考えている事を、つらつらと書きなぐっていくよ。

皆さん、長らくお待たせ致しました。
先日からお話に上がっていた

【Web制作設計手順書】

を配布致します。
下記よりダウンロードして下さい。
PowerPoint用とKeynote用とがありますが
PowerPointに関してはアニメーションなど上手く動作しなかったりしますので
その点についてはご了承下さい。
※追記：単純に閲覧用、印刷してお使いになる方用にPDF版も用意しました。
※追記2：PowerPoint版の5Pと14Pがおかしかったのを修正しました。
※追記3：「色彩」の部分で黄色と白が見辛かったので全体的に修正しました。
基本的にはMacやiPadをお持ちの方はKeynoteでの閲覧を推奨いたします。

また注意事項としましては
無料配布ではありますが、著作権は放棄しておりません。
編集する、再配布、商用利用などご自由にして下さって構いませんが

「自分が作った」

等と豪語するのはお止め下さい。
セキュリティは”あえて”かけていないのだという事を感じ取って下さいまし。

Web制作設計手順書v0.1（Keynote）
Web制作設計手順書v0.1（PowerPoint）
Web制作設計手順書v0.1（PDF）

上記資料はどんどん更新していきます。
多くの人の意見を聞きたいと考えていますので
@koujienamiまでメンションを飛ばすか、この記事にコメントを下さい。
それと不躾ですが、多くの人に使っていただきたいと考えています。
ツイッターをご利用の方が多いかと思いますので、良ければ「ふぁぼ」ではなく「リツイート」して頂けると
非常に嬉しいです。
以上、よろしくお願い致します。

続いては、各項目について解説いたします。