トリセツ
サイト制作
リニューアル2017.11.30
後期卒業制作
GROWTH
H203 石川 咲恵
H206 岩元 遼
H208 王 金源
H213 坂井 祐介
いしかわ さきえ いわもと りょう おう きんげん さかい ゆうすけ目次
ウェブ・メディア科のトリセツとは ? 前期卒業制作のトリセツ ウェブ科のマスコットキャラ 取り組もうと思ったきかっけ成長するウェブ科
校内展示会 メンバーズカップ 校外学習 ペルソナ 入学を決め手となる項目 比較した学校一覧コンテンツ内容
サイトマップ ワイヤーフレーム 動画 サイトデザイン 最終目標 スケジュール 展示物・配布物等 制作メンバー 制作環境・技術説明 参考資料 1 2 3 4 5 6 7 8 9 10,11 12 13 14 15 16 17 18 19 20 21 22 23▼ 初版 (2015 年 ) ▼ 第二版 (2016 年 )
また、
代々受け継がれている
!
▼ 第三版 (2017 年 10 月 ) ▼ (2017 年 1 月 ) URL: http://torisetsu.wmtec.info/１
ウェブ・メディア科のトリセツとは ?
学内の学生、外部の進学を考えている人たちに向けた
ウェブ科の情報を伝える
ための冊子。前回までは冊子の他サイトも制作し外部の人へも情報を発信した。
1st 2nd NEW! ▼ 前期卒業制作 トリセツの冊子 前期卒業制作ではトリセツの冊子の方を制作。 ウェブ科は新しいことに取り組んでいる・学んでいるということで、 新しい情報が増えていく上更新が必要と思ったため制作しました。 また、オレンジカラーをメインにした理由は、ウェブ科は新しいこと に取り組み明るい方向へ向かっているということで明るい色のオレン ジにしました。
２
前期卒業制作のトリセツ
３
ウェブ科のマスコットキャラ
ウェブ・メディア科のマスコットキャラうさぎの「Lap」。 生みの親は榎本 博文先生である。うさぎの耳は情報収集す るレーダーの役目があるという理由からうさぎのキャラに。 また、今回の表紙に載っている風船を持った Lap のコンセ プトは「ウェブ・メディア科は成長し続けている」という キャッチコピーを元に風船をスキルやコミュニケーション 能力、夢と例え、風船が増えていくにつれ成長していく表 現をしました。活動経緯
４
前期卒業制作で制作した冊子で伝え切れなかった
「
ウェブ科は成長している
」ところと
他校との違い
をサイトの方で伝えたい・発信したいと想いで今
回の企画に取り組もうと思いました。
５
成長するウェブ科
ウェブ・デザインコース A・Y ウェブ・デザインコース K・Y
メンバーズカップ
(2016 年 )
７
株式会社メンバーズ様で主催した Web ページ を制作する第一回の大会に出場。実際にメンバーズカップに出場した生徒にインタビュー
Q. メンバーズカップを通して成長したと思ったことは？ A. コーダとデザイナー 2 人一組で 1 つの作品を作り上げる というのは初めてで、新たな挑戦だった。また、チャレンジ 精神や協力することの大切さを学べた。 A. 他者とうまく連携する力がついたと思う。デザイナーと コーディングで仕事を完全に分けていたので、デザイナーの 考えを汲み取りつつ作業するのが大変だった。 成長するウェブ科６
校内展示会
(2015 年 1 月から )
他学科の先生や企業の方など多く来る。
その結果、プレゼン力やコミュニケー
ション能力を磨くことが出来た。
ウェブ・メディア科は２年前から校内で展示会を行っています。
成長するウェブ科校外学習
(2017 年 )
８
成長するウェブ科ウェブ科は他の学科とは違い、校外学習や先輩後輩との交流関係が多いです。
1・2 年合同の校外学習が増えた
先輩後輩の仲が深まった。
▲ 凸版印刷株式会社様の印刷博物館へ見学。 ▲ 1・2 年合同で軽井沢へ校外学習に行きました。ペルソナ
入学希望者 ( 高校生 )
９
玉川 彩斗
男性 /17 歳 ( 高 3) 住所 埼玉県川越市 最寄り駅 JR 埼京線 川越駅 趣味 スマホゲーム・ネットサーフィン【性格】
・大人しく、真面目 ・引っ込み思案【ライフスタイル】
平日の通学中はスマホゲームをやり休日はネットサーフィン をよくしている。だが、ゲームと Web の知識は全くない。 真面目な性格で普段から自宅で学習している。新入生 (1 年生 )
10
ペルソナ東 京子
女性 /19 歳 住所 東京都新宿区 最寄り駅 有楽町線 飯田橋駅 趣味 写真・漫画
【性格】
・積極的 ・好奇心旺盛【ライフスタイル】
イベント行事が好きで積極的にイベントやセミナーなどに参 加している。また、好奇心旺盛でゲームと Web 両方の勉強 をしたい・触れたいと思っており、二年間で両方のコースを 選択したいと思っている。入学の決め手となる項目
11
資格や授業などの学習関する項目 学校の雰囲気、学内の人に関する項目 周辺環境と通いやすさ 就職先 学内の設備 その他 専門学校の広報戦略 【http://xn--u9j001jlec2rah4hw7gd5lmw0aj87d.com/blog/?p=243】比較した学校一覧
12
日本電子専門学校 様
https://www.Jec.ac.jp/
HAL 東京専門学校 様
https://www.hal.ac.jp/tokyo
東京工学院 様
http://www.technosac.jp/
東京デザイナー学院 様
http://www.tdg.ac.jp
都内にある Web とゲームのある
学科の学校と比較しました。
13
14
サイトマップ
トップ
ウェブ・メディア科とは？ 主な就職先 在校生・先生からのメッセージ 進級・卒制のインタビュー 2つの専門コース 2年間の流れ 施設・設備上記 4 つのコンテンツ内容で東京電子のウェブ・メディア科の
成長
と
他の学校との違い
をアピール !
コンテンツ内容15
ワイヤーフレーム
コンテンツ内容 前回のトリセツのサイトは狭義のランディングページ ( 訪問者のアクションを誘導することに特化した縦長のレイ アウトのページ ) でしたが、今回は各ページを 7 ページ作成しウェブ科の成長や他の学校との違いの詳細が分かり やすいサイトにしました。 ▼ トップページ ウェブ ・ メディア科とは ? テキストテキストテキストテイストテキスト テキストテキストテキストテキストテイストテキスト 2 つの専門コース テキストテキストテキストテキストテキストテキ ストテキストテキストテキストテキストテキスト 2 年間の流れ テキストテキストテキストテキストテキストテキ ストテキストテキストテキストテキストテキスト 施設 ・ 設備 テキストテキストテキストテキストテキストテキ ストテキストテキストテキストテキストテキスト 背景写真 テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト テキストテキスト 主な就職先 就職先一覧 在校生 ・ 担任からのメッセージ ＠torisetsu2017 東京電子専門学校 ウェブ ・ メディア科特設サイト ▼ ウェブ・メディア科とは ? 2 つの専門コース 2 年間の流れ 施設・設備 4月 ★入学式 ★進級 6月 10月 11月 1月 3月 ★展示会 テキストテキストテキストテキストテキ ストテキストテキストテキストテキスト 学生作品を見る ★ハイキング ★軽井沢校外学習 ★学園祭 ★ハイキング ★卒業式 産学連携 ウェブ・デザインコース ゲームソフトコース テキストテキストテキ ストテキストテキスト ▼ モーダルウインドウ ▼ メニュー テキストテキスト テキストテキスト テキストテキスト 主なカリキュラム ▼ 主な就職先 ▼ 在校生・担任からのメッセージ動画
コンテンツ内容
16
サイトデザイン
17
▼ PC 版デザイン ▼ スマホ版デザイン ▼ 共通メニュー スライドショー ロゴ＼レスポンシブ対応 ! ／
最終目標
18
ウェブ・メディア科のトリセツを見て、
入学希望者 ( 高校生 )
新入生 (1 年生 )
今年の入学者 (20 人 ) より 10 人増加
・新入生には入学してから二年間で多
くの作品を制作してもらう
・冊子トリセツ ( 第４版 ) を受け継いで
もらう
スケジュール
19
1
January
February
2
・サイトマップ
・ワイヤーフレーム
10 月中旬 10 月下旬 ~11 月中旬・デザイン
・企画書
・絵コンテ
11 月下旬 ~12 月中旬10
Otober
November
11
Decmber
12
・コーディング
・デバッグ
・修正
1 月 12 日・14 日展示会
1 月下旬 ~2 月中旬・ブラッシュアップ
展示物・配布物等
20
・サイト (PC・スマホ )
・企画書
制作メンバー
21
石
川 咲恵
ディレクター
Web デザイナー
岩
元 遼
動画担当
坂
井 祐介
</>
コーダー
王
金源
エディトリアルデザイナー
Adobe Illustrator Adobe Photoshop Adobe After Brackets Koala
