SlideShare a Scribd company logo
1 of 61
Download to read offline
事業所見学へようこそ
神奈川県立横浜清陵総合高等学校
の皆さん
本日のスケジュール
1. アットライズの仕事紹介
2. 事前準備について
3. サイトマップとトップページ
4. プロトタイピング
5. プロトタイピングの発表
6. さいごに
アットライズの仕事紹介
アットライズはホームページ(Webサイ
ト)を制作している会社です。
Webサイト
制作
クライアント(企業など)からの依頼を受
けて、要望されたサイトを制作しています。
Webサイト クライアント
制作 情報発信
クライアントには知らせたいもの・宣伝し
たいこと(商品やサービス)があり、Web
サイトには「情報発信」の役割を期待して
います。
Webサイト クライアント
制作 情報発信
一方、Webサイトにはユーザーが訪れるの
で、「情報提供」の役割もあります。
Webサイト クライアント
ユーザー
制作 情報発信
閲覧
ユーザーは情報を求めて検索などを通じて
Webサイトに訪れます。
Webサイト クライアント
ユーザー
制作 情報発信
閲覧
サイトを作るだけでなく、掲載する情報
(コンテンツ)の提案もします。
Webサイト クライアント
ユーザー
制作 情報発信
閲覧
クライアントの情報発信の手段はWebサイ
トだけではありません。それらは全て「競
合」になります。
Webサイト クライアント
ユーザー
テレビ
ラジオ 新聞・雑誌
看板
イベント
Webサイトで競合よりも安く効率よく情報
発信・情報提供する手段を提供しています。
Webサイト
商品やサービスの購入・利用
事前準備のおさらい
皆さんには今日の事業所見学のために、事
前準備をしてきてもらいました。
1. 横浜清陵総合高校のサイトが「誰のための、何のため
の」Webサイトなのか考える。
2. 現在のWebサイトをより良いサイトにするための新しい
「サイトマップ」を作る。
3. Webサイト以外にも、もっと効果的な「サイトの目的」
を達成できる手段を探してみる。
事前準備で話し合ったことを
教えてください。
事前準備でやってもらったこと
横浜清陵総合高校
のWebサイト
横浜清陵総合高校横浜清陵総合高校
の皆さん
横浜清陵総合高校
のWebサイト
横浜清陵総合高校横浜清陵総合高校
の皆さん
何のために?
誰のために? 代わりの手段は?
横浜清陵総合高校
のWebサイト
横浜清陵総合高校横浜清陵総合高校
の皆さん
何のために?
誰のために? 代わりの手段は?
クライアント視点
ユーザー視点
競合視点
横浜清陵総合高校
のWebサイト
横浜清陵総合高校横浜清陵総合高校
の皆さん
何のために?
誰のために? 代わりの手段は?
いくらで?いつまでに?
コスト視点
クライアント視点
ユーザー視点
競合視点
サイトマップ
サイトマップとは
– サイト内にどんなページがあるのか一目でわ
かるようにしたリストのこと。
• トップページ
• NEWS & TOPICS
– 過去の情報
• 部活動情報
– 過去の情報
• 携帯サイト
– 緊急連絡
• 学校概要
– 学校長あいさつ
– 教育目標
– 校歌・校章
– 規模
– 施設紹介
– 沿革
– 交通アクセス
– お問い合わせ
• 教育内容
– 課程・学科
– カリキュラム
– 特色科目について
– 個性を活かす6系列
– キャリア教育
– 大学との連携授業
– 柔軟な学びのシステム
– 進路について
• 学校生活
– 日課表
– 学校行事
– 部活動
• 学校経営
– 本校の“めざす姿”
– 第三期中期経営計画
– 学校目標
– 学校評価
– 不祥事ゼロプログラム
– 予算
• 在校生へ
– 連絡事項
– 行事予定
– 諸届様式
• 中学生の皆様へ
– 入試情報
– 学校説明会
– 学校へ行こう週間
– 学校見学について
– 学校生活Q&A
• 卒業生の皆様へ
– 連絡事項
– 証明書交付について
• 保護者の皆様へ
– PTA会員メール配信システム
– 学校感染症による出席停止
• 施設開放について
• 本サイトのご利用について
• サイトマップ
• カレンダー(今後の予定)
トップページ
トップページの役割は大きく2つ
1. 何のサイトか?
• 運営元は?目的は?
1. 何がわかるか?
• どんな情報?なにができる?
何のサイトか?
何がわかるか?
何のサイトか?
何がわかるか?
重要な情報ほど上に
• サイトマップとトップページ
– 似ているところ
• サイト内にどんな情報があるのかわかるように
なっている
– 違うところ
• サイトマップは一覧になってる
• トップページは優先順位がある
プロトタイピング
プロトタイプとは
– 試作品のこと。
要望(イメージ)をカ
タチにすることで、イ
メージを共有したり、
問題点がわかったりし
ます。
•ヘッダーの下にメインイメージを表示
•メインコンテンツは写真の一覧表示
•写真ごとにタイトルとテキストの説明
が必要
•説明のテキストは100~150文字程度
•表示させる写真は1ページにつき3枚
•何ページあるかの表示
•5ページ以上あるときは6ページ目以降
は「・・・」で
•などなど
要望(イメージ)
•ヘッダーの下にメインイメージを表示
•メインコンテンツは写真の一覧表示
•写真ごとにタイトルとテキストの説明
が必要
•説明のテキストは100~150文字程度
•表示させる写真は1ページにつき3枚
•何ページあるかの表示
•5ページ以上あるときは6ページ目以降
は「・・・」で
•などなど
要望(イメージ)
要望(イメージ)をカ
タチにすることで、イ
メージを共有したり、
問題点がわかったりし
ます。
描き方
• 基本、伝わればOK!
– 正解はありません
– ていねいにやるよりもスピードが大事
– 見てわからなくても説明できればOK!
– 目的はあくまで「イメージを共有」すること
見出しと文章 プロトタイプだと
見出しと文章 プロトタイプだと
画像 プロトタイプだと
画像 プロトタイプだと
テキストボックス プロトタイプだと
テキストボックス プロトタイプだと
テキストエリア プロトタイプだと
テキストエリア プロトタイプだと
チェックボックス プロトタイプだと
チェックボックス プロトタイプだと
ラジオボタン プロトタイプだと
ラジオボタン プロトタイプだと
ドロップダウンリスト プロトタイプだと
ドロップダウンリスト プロトタイプだと
タブ プロトタイプだと
タブ プロトタイプだと
現状のサイトを例にすると
• 基本、伝わればOK!
– 正解はありません
– ていねいにやるよりもスピードが大事
– 見てわからなくても説明できればOK!
– 目的はあくまで「イメージを共有」すること
それではやってみましょう!
発表のお時間
さいごに
事業所見学

More Related Content

Similar to 事業所見学

Kids presentation ver02
Kids presentation ver02Kids presentation ver02
Kids presentation ver02
namishien
 
120411 alleyoop
120411 alleyoop120411 alleyoop
120411 alleyoop
ALLEYOOP
 
成果をあげている ウェブ担当者が知っている本当のこと
成果をあげている ウェブ担当者が知っている本当のこと成果をあげている ウェブ担当者が知っている本当のこと
成果をあげている ウェブ担当者が知っている本当のこと
瀧田幸介
 

Similar to 事業所見学 (20)

04_ブライダルウェブ媒体の集客攻略マニュアル
04_ブライダルウェブ媒体の集客攻略マニュアル04_ブライダルウェブ媒体の集客攻略マニュアル
04_ブライダルウェブ媒体の集客攻略マニュアル
 
玉腰泰三事業案内
玉腰泰三事業案内玉腰泰三事業案内
玉腰泰三事業案内
 
Kids presentation ver02
Kids presentation ver02Kids presentation ver02
Kids presentation ver02
 
Ec rider2-3 1
Ec rider2-3 1Ec rider2-3 1
Ec rider2-3 1
 
AdTruthが生み出すGoogle アナリティクス プレミアムの新しい活用方法 第1部
AdTruthが生み出すGoogle アナリティクス プレミアムの新しい活用方法 第1部AdTruthが生み出すGoogle アナリティクス プレミアムの新しい活用方法 第1部
AdTruthが生み出すGoogle アナリティクス プレミアムの新しい活用方法 第1部
 
081108 Web Strategy Presentation
081108 Web Strategy Presentation081108 Web Strategy Presentation
081108 Web Strategy Presentation
 
営業提案のためのGoogle analytics活用法
営業提案のためのGoogle analytics活用法営業提案のためのGoogle analytics活用法
営業提案のためのGoogle analytics活用法
 
rayout Inc. company profile
rayout Inc. company profilerayout Inc. company profile
rayout Inc. company profile
 
企業のウェブ戦略策定
企業のウェブ戦略策定企業のウェブ戦略策定
企業のウェブ戦略策定
 
会社やお店のホームページを自分で作ろう!
会社やお店のホームページを自分で作ろう!会社やお店のホームページを自分で作ろう!
会社やお店のホームページを自分で作ろう!
 
もし友、学ぶ会 120324
もし友、学ぶ会 120324もし友、学ぶ会 120324
もし友、学ぶ会 120324
 
Pam recruit
Pam recruitPam recruit
Pam recruit
 
求人サイトビジネス開始に向けての事前ご提案20121215
求人サイトビジネス開始に向けての事前ご提案20121215求人サイトビジネス開始に向けての事前ご提案20121215
求人サイトビジネス開始に向けての事前ご提案20121215
 
【社内提案】弊社のステッカー欲しいです。Vitalify.Inc Sticker Plan.
【社内提案】弊社のステッカー欲しいです。Vitalify.Inc Sticker Plan.【社内提案】弊社のステッカー欲しいです。Vitalify.Inc Sticker Plan.
【社内提案】弊社のステッカー欲しいです。Vitalify.Inc Sticker Plan.
 
ALLEYOOP
ALLEYOOPALLEYOOP
ALLEYOOP
 
120411 alleyoop
120411 alleyoop120411 alleyoop
120411 alleyoop
 
LINE株式会社 お客様事例
LINE株式会社 お客様事例LINE株式会社 お客様事例
LINE株式会社 お客様事例
 
成果をあげている ウェブ担当者が知っている本当のこと
成果をあげている ウェブ担当者が知っている本当のこと成果をあげている ウェブ担当者が知っている本当のこと
成果をあげている ウェブ担当者が知っている本当のこと
 
20110630Code4Lib JAPAN報告書
20110630Code4Lib JAPAN報告書20110630Code4Lib JAPAN報告書
20110630Code4Lib JAPAN報告書
 
【ブログdeホームページ】ネット集客の秘訣
【ブログdeホームページ】ネット集客の秘訣【ブログdeホームページ】ネット集客の秘訣
【ブログdeホームページ】ネット集客の秘訣
 

事業所見学