厚労省の職業訓練校を出て果たして就職できるのか?

中途採用で未経験者を採用する会社はそんなにありません。

WEB制作会社の規模は様々です。20代の人であれば大規模な組織に派遣で組み込まれて見るのもいい経験です。巨大なサイトの中の歯車の一部で働く事によって全体の仕組みやWEB制作の標準が見えてきます。大規模な制作会社でオペレーター、もしくはECサイトの保守・運営業務をこなす事務局員からはいります。その後コーダーやデザイナーとして少数先鋭のオーナー制作会社への転職を目指しましょう。WEBのデザイン制作会社、制作・設計会社は、即戦力の採用しかしないので、スキルが十分身につき見せるべきポートフォリオが充実したら転職時です。

以下に大手とオーナー制作会社の制作フローのリンクを貼っておきます。
【富士通エフ・オー・エム】
(政府・地方自治体のサイトを多く受注する最大手制作会社)

【株式会社企画制作】
(オーナー制作会社の一つ)

26日より、卒業制作の設計フェーズに入ります

サイト構造設計・ページ構造設計については全ての生徒が理解できたと思います。

【サイト構造設定】 
いわゆるツリー構造ですね。TOPページがあり、その直下にグローバナビにリンクされた第一階層のリンクページがあり、その傘下に第二階層のページがぶら下がっているという構造図です。

【ページ構造設計】
いわゆるワイヤーフレームですね。実際のページを一枚絵で具現化したカンプを制作する前に、サイズページの中にある要素を実際のレイアウトで配置されたモノクロの設計図です。建築やプロダクトデザインの設計図に当たるものだと考えてください。

【制作仕様書設計】
これが、皆さん一番解りづらいかと思います。実際にサイトを開発して行くデザイナーやコーダーに向けたサイト仕様書だと考えて下さい。
次のはてなダイヤリーで詳しく説明します。

制作仕様書設計

”百聞は一見にしかず”なので、実例のpdfをリンクしておきます。

Web制作ガイドライン(株式会社ユーザー・センタード・デザイン)
Web制作ガイドライン(筑波大学)
Web制作ガイドライン(兵庫県)

上記のpdfはいずれも大規模サイトの物なので皆さんは自分の制作するサイトの規模に応じてCaccoページ一枚でも十分です!最低限決めておきたいのは以下の内容です。

  • 見出し・段落・リストなどの共通仕様(使用フォントや、フォントサイズ、太さなど)
  • 基本カラー
  • 遷移(リンクをクリックしてページを移動していく)の方法
  • ビルボードは静止画なのか、Flashを使用するのか、Ajaxで動きを持たせるのかなど

サイバーガーデンの益子貴寛さんが、CSS Nightでコーダー用にガイドライン作りを解りやすく説明された時の資料のリンクを張っておきますので目を通して制作の参考にして下さい。
Web制作現場の対立を解消する!(X)HTML+CSSガイドライン作り

上記で益子さんが問題視している「Web制作現場の対立」とは何か、が解ったと思います。
とかくデザイナーとコーダーは対立しがちでした。デザイナーが自分よがりのデザインをしてしまい、正しい構文のコーディングに著しい支障をきたし、クロウラーに拾って貰えないサイトを作ってしまう事はサイトにとって致命傷になります。そこで制作ガイドラインとは別途、「コーディングガイドライン」を設定する事もあります。下記にコーディング会社のガイドラインを参考し上げておきます。

【コーディングガイドライン
株式会社ヒラリアスメディアカンパニー
enoq(エノーク)
株式会社イースリ
スタイルシートを書く時のガイドライン(Taichi Kaminogoya)

その他、制作仕様書設計(制作ガイドライン)時に参考になるリンク集です。

ボタンを押させるテクニック
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン

設計フェーズはCacooで制作します

先週に「見本を教えてください」という要望がありましたが、Cacooが答えていますよ!Cacooにテンプレート機能が搭載されました。

Cacooテンプレートで、手軽に図をかきませんか

ワイヤーフレーム(ページ構造設計)について】
法則はありません!
制作会社であればクライアントに、
企業のWEB制作セクションであれば他のセクション(営業や企画など)に見せる時の解りやすいプレゼン資料になっていれば良いのです。

以下のサイトを参考にしましょう。
ウェブサイトの設計図 ワイヤーフレームを活用しよう
Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する
プロジェクトメンバーが幸せになれるワイヤーフレームの作り方

【ツリー構造(ページ構造設計)について】
ページ構造にはリニア型(一本道でカートボタンに落とし込む情報商材などのページに良く在ります)やマトリクス型(サイトのリンク機能を利用してユーザーが自由にサイト内を閲覧できる方式で、ポータルサイトや大手ecサイトなどの大規模サイトがこれにあたる)、フォーク・ソノミー型(自由に関連付けをタグ付けしてリンクする方式。使用例はニコニコ動画ソーシャルネットワークなど)がありますが、皆さんは卒業制作として静的(データベースに連動しないサイト)サイトを作る訳ですから、ツリー型の一般的な小規模サイトを制作する事になります。
ツリー構造をCacooを使って図解する方法を学びましたが、もちろん解りやすい図であればテキストファイルに書かれた文字列だけでも良いわけです。下記参照
最初に設計するのはサイトマップ(rakumu corporation)

ツリー構造のページ構造設計に参考になりそうなサイトのリンクを貼っておきます。
Webサイトのツリー構造とコンテンツのメタ情報、そして、ナビゲーション
FatWire「自社Webの成功は情報アーキテクチャの在り方次第」

また、卒制で作るサイトと同じ業種のサイトの構造を調べて参考にしましょう。以下のソフトを使えばサイト構造を見ることが出来ます。
ウェブサイト・エクスプローラ
(指定されたウェブサイトの階層構造とファイル構成をエクスプローラ形式で表示するアプリ)