まず最初に、既存のサイトを参考にどのようなページを製作するか考え、サイト構成図を作成していきます。
本の検索機能などがついた動的なページも含まれており、スタティック（静的）ページとダイナミック（動的）ページの2パターンありましたが、今回の授業ではスタティックページのみ製作させていただきました。

最初の課題として、受講生はまずトップページのデザイン案を各自考えることになりました。課題が出されてから提出まではおよそ2週間。途中で1度先生にデザインの方向性を確認していただき、進めていきました。
そして、 今回は3案のデザインが出来上がり、提案させていただくことになりました。

サイトデザインと同時に進めていた、ロゴデザイン。こちらも各自工夫を凝らした力作が出揃いました。

1度目のデザイン提案の結果、朗月堂様より下記のような回答をいただき、決定いたしました。

■4代目 ロゴデザイン
ロゴデザイン案A 採用。
■3代目 サイトデザイン
デザイン案Cを基本デザインとし、デザイン案A・B の要素を取り入れる。
■2代目 サイン／大判印刷物
サイト・名刺・ブックカバー・しおりなど、印刷面積や全体のバランス・整合性の配慮が必要なメディアはロゴデザイン案A案だが、店舗や駐車場のサインなど大型メディアは、フクロウマークを継続利用。ただし、フクロウマークはリメイクし、CI／VI展開例及び規定書を作成。ロゴデザイン案Fは単独で販促ツールとして展開。

朗月堂様からの回答を受け、サイトのトップページは提案済みデザインの折衷案を製作することに。
デザイン案Cを基に、A案のロゴデザイン、サポーターズクラブ、見出しなどの部分やB案のロゴタイピングのレトロ感を取り入れ、さらにはメインビジュアルの女性モデルのイメージを検討するなど、ブラッシュアップを重ねました。

そして、デザインが決まった後は、いよいよコーディングに入ります。まず、授業中にトップページのコーディング作業を進め、コーディングに慣れた（？）ところで詳細ページの製作に取り掛かりました。
こちらは各自担当ページを決め、授業で一緒に作ったトップページのコーディングを見本に、詳細ページの製作を進めていきました。

ページが一通り出来上がった段階で、最後の仕上げも行いましょう。ソースコードを見直し、余計なタグが入っていないか、見やすい記述になっているかソースコードの整形や、リンク切れがないかのチェックも行うとさらにgood。
全ての作業が終わった段階で、ついにアップロードです。
今回の応用編は受講生の人数も少なく、また少しハイペースで授業が進んだような・・・。ホント、お疲れ様でした。

完成版は現在運用中のご覧いただいているこのサイトです
→　朗月堂　http://www.rogetsudo.co.jp/

WEBデザインとDTPデザインとエンジニアリング（IT）を専門とするウェブデザインスタジオはプロのデザイナーを育成し就転職支援するデザインスクールです。デザイナー派遣とエンジニア派遣などの人材派遣もあり、デザインやIT業界に就職・転職したい、デザインやITを学びたいあなたをお待ちしております。