2014年4月13日（日）、東札幌・ICC Cross×Gardenで開催したCSS Nite in SAPPORO, Vol.13「Web制作と運営のキホンを学ぶ」のフォローアップとして、水越 佑介（リーグラフィ／実行委員）による3時間目「Webサイトの設計」の資料を公開します。
スライド／音声
動画
※ デスクトップやタブレットでは、右下の「Vimeo」から、大きなサイズで見られます
フォローアップメッセージ
3時間目「Webサイトの設計」を担当した有限会社リーグラフィの水越です。みなさん、長時間本当にお疲れさまでした。
私のセッションでは、Webサイトの設計を「企画編」と「組み立て編」に分けて発表させていただきました。
たとえば、おもちゃのプラモデルでいえば、設計図があらかじめ同梱されていますが、この設計図がなければ、いくら充実したパーツがあっても組み立てることは不可能です。Webサイトにおいても同様で、設計図がなければ実装できません。
みなさんのWebサイトの設計の質をより高め、実践していただきたく、事例を交えたセッションにしました。今後のWebサイト制作の設計に、お役立ていただければ幸いです。
最後に、画面設計のところで言い残したことがひとつ、「なぜこの位置にこのコンテンツが配置されているのか」という問いには、必ず答えがあります。ここを意識すると、理想的なサイトの設計図が見えてくるかもしれません。
以下、アンケートでいただいたご質問にお答えします。
Q：サイトの制作でWBSを作る場合、どんな作業単位の粒度まで分割していくのが適切でしょうか？
WBSの作業区分は、Webサイトの規模や、制作チームの人員構成よって変わるため一概に言えませんが、分けすぎるとWBSへの記入自体が手間になり、余計な作業コストが発生してしまうので、大まかな構築フェーズで区切るとよいと思います。
たとえば「デザイン」「コーディング（HTML+CSS+JS）」、また 「CMS構築」「スマホ対応（レスポンシブ）」などですね。
Q：どのようなファイル名がよいか、例を見せていただけますか？
特に理由がない限りは「わかりやすく、慣れ親しんだ英単語」でよいと思います。
たとえば、以下のようにしてみましょう。 otoiawase.html → contact.html kigyojoho.html → company.html seisakujirei.html → works.html