Soumettre la recherche
Mettre en ligne
0からのウェブディレクション講座:制作・開発編
•
3 j'aime
•
1,396 vues
Yusuke Kojima
Suivre
Technologie
Signaler
Partager
Signaler
Partager
1 sur 64
Recommandé
図書館総合展フォーラム資料 ライブラリー・ファシリテーター体験講座
図書館総合展フォーラム資料 ライブラリー・ファシリテーター体験講座
志麻 北村
リアルな本をつくる理由 — 編集ライター養成講座 講義シナリオ
リアルな本をつくる理由 — 編集ライター養成講座 講義シナリオ
Isao Kurihara
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
Satoru MURAKOSHI
ゼロディレシステム開発編150725
ゼロディレシステム開発編150725
Asami Yanagida
0からのディレクション講座設計編(140426開催)
0からのディレクション講座設計編(140426開催)
Motoho Jitsukawa
Three20
Three20
Sayaka Saito
ゼロディレ システム開発編150419
ゼロディレ システム開発編150419
Asami Yanagida
T4t - tools for teams - 第1回 発表スライド
T4t - tools for teams - 第1回 発表スライド
Kojiro Yokota
Contenu connexe
En vedette
10 w 02-議事録、報告書について
10 w 02-議事録、報告書について
Hieu Mac
【議事録】スキルアップ勉強会(6月度) h23.07.10
【議事録】スキルアップ勉強会(6月度) h23.07.10
Kenichi Takara
OGPってなんでしょう?
OGPってなんでしょう?
Reina Okabe
ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221
Yusuke Kojima
ビジネスを加速させる議事録作成
ビジネスを加速させる議事録作成
Kohji Tanaka
デザインチーム向けプロジェクト管理ツール Brushup の紹介
デザインチーム向けプロジェクト管理ツール Brushup の紹介
Brushup Team
0からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.01
Yusuke Kojima
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
Junzo Matunoo
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
Kenta Nakamura
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
Kyoko Ochiai
LIG's DIRECTION school 2016 初級コース03 スタッフとのコミュニケーションからディレクションを設計する_160522
LIG's DIRECTION school 2016 初級コース03 スタッフとのコミュニケーションからディレクションを設計する_160522
Kazuki Iwai
コーディング入門以前
コーディング入門以前
Yutaka Kinjyo
3分で学べる!プレゼンが上手くなる話し方と構成のコツ from 俺の薬局
3分で学べる!プレゼンが上手くなる話し方と構成のコツ from 俺の薬局
mei_tachibana
会話・ディスカッションができる共有メモ「co-meeting」@MONOフェス
会話・ディスカッションができる共有メモ「co-meeting」@MONOフェス
株式会社co-meeting
Co meeting - 会議・情報共有を革新するテキストベースディスカッションツール
Co meeting - 会議・情報共有を革新するテキストベースディスカッションツール
株式会社co-meeting
0からのwebディレクション講座 製作・開発編5.0
0からのwebディレクション講座 製作・開発編5.0
Kazuki Iwai
リンクに依存しないSEO内部改善のポイント forスクー
リンクに依存しないSEO内部改善のポイント forスクー
Motoho Jitsukawa
最速HTML勉強会
最速HTML勉強会
Chisa Youzaka
WEBページを表示するまで
WEBページを表示するまで
Shoichi Kakizaki
ディレクション本来の領域について ディレ協紹介用資料201504
ディレクション本来の領域について ディレ協紹介用資料201504
Kenta Nakamura
En vedette
(20)
10 w 02-議事録、報告書について
10 w 02-議事録、報告書について
【議事録】スキルアップ勉強会(6月度) h23.07.10
【議事録】スキルアップ勉強会(6月度) h23.07.10
OGPってなんでしょう?
OGPってなんでしょう?
ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221
ビジネスを加速させる議事録作成
ビジネスを加速させる議事録作成
デザインチーム向けプロジェクト管理ツール Brushup の紹介
デザインチーム向けプロジェクト管理ツール Brushup の紹介
0からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.01
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
【0からのディレクション講座:運用編】Vol3 中村健太のスライド
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
LIG's DIRECTION school 2016 初級コース03 スタッフとのコミュニケーションからディレクションを設計する_160522
LIG's DIRECTION school 2016 初級コース03 スタッフとのコミュニケーションからディレクションを設計する_160522
コーディング入門以前
コーディング入門以前
3分で学べる!プレゼンが上手くなる話し方と構成のコツ from 俺の薬局
3分で学べる!プレゼンが上手くなる話し方と構成のコツ from 俺の薬局
会話・ディスカッションができる共有メモ「co-meeting」@MONOフェス
会話・ディスカッションができる共有メモ「co-meeting」@MONOフェス
Co meeting - 会議・情報共有を革新するテキストベースディスカッションツール
Co meeting - 会議・情報共有を革新するテキストベースディスカッションツール
0からのwebディレクション講座 製作・開発編5.0
0からのwebディレクション講座 製作・開発編5.0
リンクに依存しないSEO内部改善のポイント forスクー
リンクに依存しないSEO内部改善のポイント forスクー
最速HTML勉強会
最速HTML勉強会
WEBページを表示するまで
WEBページを表示するまで
ディレクション本来の領域について ディレ協紹介用資料201504
ディレクション本来の領域について ディレ協紹介用資料201504
Similaire à 0からのウェブディレクション講座:制作・開発編
持続可能なコラボレーション創出のためのワークショップ手法について
持続可能なコラボレーション創出のためのワークショップ手法について
Professional University of Information and Management for Innovation (情報経営イノベーション専門職大学)
本学部でのアクティブラーニングの導入事例 ~コンセプトは「多読と発表」「原理と概念の理解」
本学部でのアクティブラーニングの導入事例 ~コンセプトは「多読と発表」「原理と概念の理解」
Susumu Yamazaki
LiberalArts Program
LiberalArts Program
RyujiFuruya
190223 働くことや学ぶことを見つめな直してみませんか #jd2019_i
190223 働くことや学ぶことを見つめな直してみませんか #jd2019_i
Ayumi Tada
140409 taiwa quick tips 17 and coaching question 420
140409 taiwa quick tips 17 and coaching question 420
Yuta Suzuki
第三回(旅するようにキャリアする)5月24日
第三回(旅するようにキャリアする)5月24日
Cozy Azuma
参加者の相互支援ネットワーク構築のためのワークショップデザイン
参加者の相互支援ネットワーク構築のためのワークショップデザイン
Professional University of Information and Management for Innovation (情報経営イノベーション専門職大学)
0708 事業計画勉強会 総合_伊東和也_v0.5
0708 事業計画勉強会 総合_伊東和也_v0.5
dirent
自動計測制御学会発表091124
自動計測制御学会発表091124
ikiikilab
事業アイデアのつくり方を学ぶワークショップ
事業アイデアのつくり方を学ぶワークショップ
Takayuki Ishimoto
実践に向けたドメイン駆動設計のエッセンス
実践に向けたドメイン駆動設計のエッセンス
GuildWorks
実践に向けたドメイン駆動設計のエッセンス
実践に向けたドメイン駆動設計のエッセンス
増田 亨
e-Learning Design for Teacher
e-Learning Design for Teacher
Sunami Hokuto
とある諺に学ぶ合意形成
とある諺に学ぶ合意形成
Rikitake Oohashi
○○について考える
○○について考える
きなこ 桜庭
Whatとhowの構成
Whatとhowの構成
Mizuhiro Kaimai
アイデア創発ファシリテータ_プログラム 第1期
アイデア創発ファシリテータ_プログラム 第1期
Rikie Ishii
0からのwebディレクション講座 制作編5.1
0からのwebディレクション講座 制作編5.1
Kazuki Iwai
伝わるプレゼン
伝わるプレゼン
Hideaki Miyake
アイデア創発ファシリテータ_プログラム
アイデア創発ファシリテータ_プログラム
Rikie Ishii
Similaire à 0からのウェブディレクション講座:制作・開発編
(20)
持続可能なコラボレーション創出のためのワークショップ手法について
持続可能なコラボレーション創出のためのワークショップ手法について
本学部でのアクティブラーニングの導入事例 ~コンセプトは「多読と発表」「原理と概念の理解」
本学部でのアクティブラーニングの導入事例 ~コンセプトは「多読と発表」「原理と概念の理解」
LiberalArts Program
LiberalArts Program
190223 働くことや学ぶことを見つめな直してみませんか #jd2019_i
190223 働くことや学ぶことを見つめな直してみませんか #jd2019_i
140409 taiwa quick tips 17 and coaching question 420
140409 taiwa quick tips 17 and coaching question 420
第三回(旅するようにキャリアする)5月24日
第三回(旅するようにキャリアする)5月24日
参加者の相互支援ネットワーク構築のためのワークショップデザイン
参加者の相互支援ネットワーク構築のためのワークショップデザイン
0708 事業計画勉強会 総合_伊東和也_v0.5
0708 事業計画勉強会 総合_伊東和也_v0.5
自動計測制御学会発表091124
自動計測制御学会発表091124
事業アイデアのつくり方を学ぶワークショップ
事業アイデアのつくり方を学ぶワークショップ
実践に向けたドメイン駆動設計のエッセンス
実践に向けたドメイン駆動設計のエッセンス
実践に向けたドメイン駆動設計のエッセンス
実践に向けたドメイン駆動設計のエッセンス
e-Learning Design for Teacher
e-Learning Design for Teacher
とある諺に学ぶ合意形成
とある諺に学ぶ合意形成
○○について考える
○○について考える
Whatとhowの構成
Whatとhowの構成
アイデア創発ファシリテータ_プログラム 第1期
アイデア創発ファシリテータ_プログラム 第1期
0からのwebディレクション講座 制作編5.1
0からのwebディレクション講座 制作編5.1
伝わるプレゼン
伝わるプレゼン
アイデア創発ファシリテータ_プログラム
アイデア創発ファシリテータ_プログラム
Dernier
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
Sadao Tokuyama
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
2024 03 CTEA
2024 03 CTEA
arts yokohama
Dernier
(12)
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 04 minnanoito
2024 04 minnanoito
2024 03 CTEA
2024 03 CTEA
0からのウェブディレクション講座:制作・開発編
1.
0からのウェブディレクション講座 制作・開発編 V01.01 2013.5.25 日本ディレクション協会
2.
まえがき ウェブに関する用語については、概念的なものが多く、常に諸説あり、人 により、意味が全く異なることがあります。 本講における各用語の使い方は、講師である小嶋の主観、および経験に基 づいて定義されており、実際の業務の場において、伝わり易いよう、あえ て狭義に用いていることがあります。 本資料をご覧の方には、ご自身の業務や理解において、実際に使われてい る用語などに置き換えて、ご理解くださいますようお願いいたします。 また、本講で紹介されるサンプル・事例は、実在のものを基に加工を施し た、架空のものです。ご了承ください。
3.
自己紹介。
4.
日本ディレクション協会について • ディレクションの能力を明確にしよう • ディレクションが何かをみんなに理解してもらおう •
ディレクションができる人を増やそう 設立 ディレクションのノウハウの共有、及びディレクション業務を行う人同士の コミュニティを作る 活動内容 2013年3月 目的 http://www.dir-jp.com/
5.
小嶋裕亮 ウェブ制作をやるようになって6年。 企業向けのクライアントワーク中心の制作をして きました。 今は某電子機器メーカーのグループの中でディレ クターをしています。 所属:日本ディレクション協会 株式会社セラク 講師について
6.
ディレクター デザイナー マークアップ エンジニア
7.
0 1 2 3 4 マーケティング プロデュース プランニング クリエイティブ システム オペレーション
8.
ショッピングセンター ウェブマガジン ウェブメディア EC系 コーポレートサイト ブランドサイト ランディングページ
9.
講座の目的
10.
講座の目的 • ウェブディレクションの役割を理解する • ウェブディレクターの仕事の流れを理解する
11.
制作・開発編の範囲
12.
ウェブ開発のサイクル プランニング 開発運用更新
13.
今回取り扱う部分 プランニング 開発運用更新
14.
ディレクションのイメージを掴む 制作・開発フェーズでのディレクション
15.
ディレクションってなに? デザインではない マークアップでもない プログラミングでもない
16.
ディレクションってなに? 目に見えるものを作ることではない
17.
ディレクションってなに? 目に見えるものを作ることではない 何をやるのかわからない
18.
「何をするのか」から考えてみる
19.
開発フェーズのチーム構成 クライアント シニア マークアップ エンジニア マークアップ エンジニア SE プログラマー ディレクター チーフ デザイナー デザイナーイラストレーター
20.
開発フェーズのチーム構成 クライアント シニア マークアップ エンジニア マークアップ エンジニア SE プログラマー ディレクター チーフ デザイナー デザイナーイラストレーター
21.
デザイナー クライアント シニア マークアップ エンジニア マークアップ エンジニア SE プログラマー ディレクター チーフ デザイナー デザイナーイラストレーター
22.
デザイナー を達成するために目的 どんな色や模様を を使うべきかを 決める人
23.
マークアップエンジニア クライアント シニア マークアップ エンジニア マークアップ エンジニア SE プログラマー ディレクター チーフ デザイナー デザイナーイラストレーター
24.
マークアップエンジニア 決める人 目的 どんなデータを作るのか を達成するために を
25.
プログラマー クライアント シニア マークアップ エンジニア マークアップ エンジニア SE プログラマー ディレクター チーフ デザイナー デザイナーイラストレーター
26.
プログラマー 決める人 目的 どんな動きを付けるのか を を達成するために
27.
三つの職域の共通点 どんな手段 決める を用いるかを を達成するために こと 目的
28.
ディレクター クライアント シニア マークアップ エンジニア マークアップ エンジニア SE プログラマー ディレクター チーフ デザイナー デザイナーイラストレーター
29.
各技術者が何を目的にするかを を達成するサイトを作るために 決める 何を目的にするか ディレクター 目的 人
30.
「どんな機能か」から考えてみる
31.
分業による効率化 デザイン マークアッププログラム
32.
ディレクター デザイン マークアッププログラム 分業による非効率化 自分の前の工程や、後の 工程を見なくなってい き、それぞれ勝手な方向 に進み始めてしまう
33.
非効率への挑戦 それぞれの技術者たちを、 もともとの目的に絶えず 引き戻す人をディレク ターといいます。 ディレクター デザイン マークアッププログラム
34.
まとめると
35.
ディレクションの挑戦 目的を指し示す 目的に引き戻す
36.
チーム編成の例
37.
某中規模制作会社の場合 Dir Dir Dir Dir De PG デザイナーがマークアップエンジニアも兼務 De De •
普段からコミュニケーションをとってるため、 社内での連携は比較的取りやすい • ディレクターがすべてをこなすため、アウト プットのレベルを維持するのが難しい 不得意分野は外注に
38.
某大規模制作会社の場合 Dir Dir Pr Dir ME Dir Dir Pr Dir ME Dir
Dir Pr Dir ME De De De PG PG PG 部署を超えて開発を行うため、 チーム外の人とチーム外の人をつなげなくてはいけなくなり、 ディレクションの意義が大きくなってくる デザイナーとプログラマーは別部署。
39.
某大手ネットサービス会社の場合 Dir Dir Dir Dir Dir
Dir Dir Dir Dir Dir Dir ME Dir Dir Dir De De De De Dir Dir De De De De Dir De De De De Dir SI SI Dir Dir Dir Dir 意思決定者と各工程のそれぞれの担当者が離れていて、 目的の共有が難しく、 意思疎通の成否が大きな差を生む。 子会社B子会社A
40.
実際の工程での役割を知る 開発フェーズの流れ
41.
開発のワークフロー 素材入手 レイアウトを決める デザイン マークアップ プログラム実装 公開
42.
スケジュール作成 開発フェーズの流れ 1
43.
ディレクションの役割(1) ス ケ ジ ュ ー ル 管 理 やる事を決めて、スケジュール を決め、関係各所と合意を取っ ておきます。
44.
タスクだし • ページ毎に必要な作業を洗い 出し、リストアップします
45.
スケジュールだし • 開発スケジュールを決定します
46.
素材の入手 開発フェーズの流れ 2
47.
ディレクションの役割(2) ス ケ ジ ュ ー ル 管 理 素材入手 写真やロゴ、文章などの材料 (素材)をなんとかかき集めま す。 必要に応じて、取材、写真撮影 なども行います。
48.
素材の種類 • 図版や写真、ロゴ、文章など の素材を集める • ポスターやパンフレットなど •
写真撮影 • 取材 図版 ロゴ 文章 写真
49.
素材の種類 • 図版や写真、ロゴ、文章など の素材を集める • ポスターやパンフレットなど •
写真撮影 • 取材 図版 ロゴ 文章 写真 使用ルールはどうなっているのか 文言の表記はどうするのか 似たような表現はどうするのか。 例えば… “10%OFF!”なのか、 “10%オフ”なのか。 「お申込み」なのか、 「お申し込み」なのか。 背景に映りこんだ建物は、使用許可はいらないか。 一般人の顔が写っていないか。 ショップのロゴは使用許可は取れているか。
50.
レイアウトの決定 開発フェーズの流れ 3
51.
ディレクションの役割(3) ス ケ ジ ュ ー ル 管 理 素材入手 レイアウトを決める ページ毎におおまかなレイアウ トを決めます。
52.
ワイヤーフレーム WF
53.
実制作 デザイン~プログラミング 開発フェーズの流れ 4
54.
ディレクションの役割(4) ス ケ ジ ュ ー ル 管 理 素材入手 レイアウトを決める デザイン マークアップ プログラム実装 チェック チェック 実際に制作に入ると、 スケジュールを確認しながら、 制作のフォローアップを行い、 各段階で品質のチェックを行います。
55.
ページデザイン 画面仕様書(指示書)をもとにグラ フィックデザインをしてもらう • 目的に合ったイメージを感じさせる ことができるか • ユーザーにストレスを感じさせるデ ザインになっていないか
56.
マークアップ 画面仕様書とデザインデータ、原稿 をもとにHTML、CSSの構築をし てもらう • デザインが指定のブラウザで忠 実に再現されているか • プログラムとして正しいものに なっているか
57.
PHP プログラム実装 必要な機能をリストアップし、出 来上がったHTML、CSSにプログ ラムを追加してもらうJava Script CGI SQL • 必要な機能の定義 •
細かい挙動の定義 • 機能チェック
58.
公開前作業~公開 開発フェーズの流れ 6
59.
ディレクションの役割(5) ス ケ ジ ュ ー ル 管 理 素材入手 レイアウトを決める デザイン マークアップ プログラム実装 公開 チェック チェック チェック すべてがそろった状態でチェッ クし、公開します。
60.
ステージングテスト • 隔離されたサーバ上にアップロード • 正しく表示されるか、プログラムが動くかを確認
61.
オペレーションテスト 実際にシステムを稼働させて、実際に運用できるかを確認
62.
公開 インターネット上に公開されているサーバにアップロード
63.
ディレションとは ス ケ ジ ュ ー ル 管 理 素材入手 レイアウトを決める デザイン マークアップ プログラム実装 公開 チェック チェック チェック デザイナー、マークアップエン ジニア、プログラマー等の技術 者に、制作の事に集中してもら い、成果が上がる形を作ること。
64.
ありがとうございました。 以上!