SlideShare une entreprise Scribd logo
1  sur  43
Télécharger pour lire hors ligne
✦ コンテンツファーストとは?
✦ コンテンツファースト型ワークフロー
✦ CMSプロトタイピングで実現する
✦ まとめ
もくじ
コンテンツファーストとは?
はじめに「コンテンツ」
クライアント Web制作者
Webサイト
コンテンツを入力
クライアント Web制作者
Webサイト
コンテンツを入力
こういうデザインが
必要だな
運用しやすい
仕組みを入れよう
すばやい「見える化」で
より良いコンテンツを作る
これなら
更新できそう!
情報発信のトレーニングにもなります
コンテンツファースト型
ワークフロー
従来の
デザイン先行型
ワークフロー
設計 デザイン マークアップ CMS実装 データ入力
コンテンツファースト型
ワークフロー
設計
デザイン マークアップ
CMS実装 データ入力
3つのメリット
3つのメリット
1. コンテンツファースト思考の具体化
2. スピーディーな改善サイクルの実現
3. 制作中のコミュニケーションを円滑に
設計
デザイン マークアップ
CMS実装 データ入力
こういう情報は
◯◯のように見せよう!
1.コンテンツファースト思考の具体化
項目が多すぎて
ナビゲーションが段落ち
1.コンテンツファースト思考の具体化
メニューを変えられる
ページを追加できる
2.スピーディーな改善サイクルの実現
3.制作中のコミュニケーションを円滑に
Webサイト
CMSプロトタイピングで
実現する
1. コンテンツのリストアップ
2. カテゴリーの検討
3. CMSのサーバへの設置
4. コンテンツの入力
5. コンテンツの確認と改善
6. ビジュアルデザインの検討
2. カテゴリーの検討
3. CMSのサーバへの設置
4. コンテンツの入力
5. コンテンツの確認と改善
6. ビジュアルデザインの検討
1. コンテンツのリストアップ
1.コンテンツのリストアップ
1. コンテンツのリストアップ
2. カテゴリーの検討
3. CMSのサーバへの設置
4. コンテンツの入力
5. コンテンツの確認と改善
6. ビジュアルデザインの検討
2. カテゴリーの検討
2. カテゴリーの検討
設計
デザイン マークアップ
CMS実装 データ入力
2. カテゴリーの検討
1. コンテンツのリストアップ
2. カテゴリーの検討
3. CMSのサーバへの設置
4. コンテンツの入力
5. コンテンツの確認と改善
6. ビジュアルデザインの検討
3. CMSのサーバへの設置
3. CMSのサーバへの設置
設計
デザイン マークアップ
CMS実装 データ入力
3. CMSのサーバへの設置
3. CMSのサーバへの設置
3. CMSのサーバへの設置
1. コンテンツのリストアップ
2. カテゴリーの検討
3. CMSのサーバへの設置
4. コンテンツの入力
5. コンテンツの確認と改善
6. ビジュアルデザインの検討
4. コンテンツの入力
4. コンテンツの入力
設計
デザイン マークアップ
CMS実装 データ入力
4. コンテンツの入力
4. コンテンツの入力
1. コンテンツのリストアップ
2. カテゴリーの検討
3. CMSのサーバへの設置
4. コンテンツの入力
5. コンテンツの確認と改善
6. ビジュアルデザインの検討
5. コンテンツの確認と改善
5. コンテンツの確認と改善
設計
デザイン マークアップ
CMS実装 データ入力
5. コンテンツの確認と改善
Webサイト
5. コンテンツの確認と改善
1. コンテンツのリストアップ
2. カテゴリーの検討
3. CMSのサーバへの設置
4. コンテンツの入力
5. コンテンツの確認と改善
6. ビジュアルデザインの検討6. ビジュアルデザインの検討
6. ビジュアルデザインの検討
設計
デザイン マークアップ
CMS実装 データ入力
6. ビジュアルデザインの検討
6. ビジュアルデザインの検討
まとめ
✦コンテンツからデザインやサイト構造を設計、
展開していくのが「コンテンツファースト」
✦コンテンツファースト型ワークフローは

デザインとデータ入力を同時進行できる
✦CMSプロトタイピングなら

コンテンツファーストなWebサイトが作れる
書籍が出ました!
http://bit.ly/ablogcmsbook
ご清聴ありがとうございました

Contenu connexe

Tendances

デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIHideki Akiba
 
Devsumi2013Summer EnterpriseTED MikuKinoshita
Devsumi2013Summer EnterpriseTED MikuKinoshitaDevsumi2013Summer EnterpriseTED MikuKinoshita
Devsumi2013Summer EnterpriseTED MikuKinoshitaKinoshita Miku
 
今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編regret raym
 
Ncカスタムモジュールセミナー
NcカスタムモジュールセミナーNcカスタムモジュールセミナー
NcカスタムモジュールセミナーMitsuru Mutaguchi
 
ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法schoowebcampus
 
新入社員向けLT_スキルアップとブログのコツ
新入社員向けLT_スキルアップとブログのコツ新入社員向けLT_スキルアップとブログのコツ
新入社員向けLT_スキルアップとブログのコツAyumi Suzuki
 
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法Takuya Nishitani
 
Mass Producing Banner With Photoshop & JavaScript
Mass Producing Banner With Photoshop & JavaScriptMass Producing Banner With Photoshop & JavaScript
Mass Producing Banner With Photoshop & JavaScriptYoji Shiraki
 
株式会社プレミアムグラフィクスの会社案内
株式会社プレミアムグラフィクスの会社案内株式会社プレミアムグラフィクスの会社案内
株式会社プレミアムグラフィクスの会社案内Satoshi Mabuchi
 

Tendances (10)

デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
 
Devsumi2013Summer EnterpriseTED MikuKinoshita
Devsumi2013Summer EnterpriseTED MikuKinoshitaDevsumi2013Summer EnterpriseTED MikuKinoshita
Devsumi2013Summer EnterpriseTED MikuKinoshita
 
今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編
 
Ncカスタムモジュールセミナー
NcカスタムモジュールセミナーNcカスタムモジュールセミナー
Ncカスタムモジュールセミナー
 
1840
18401840
1840
 
ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法ポートフォリオ公開後のマーケティング法
ポートフォリオ公開後のマーケティング法
 
新入社員向けLT_スキルアップとブログのコツ
新入社員向けLT_スキルアップとブログのコツ新入社員向けLT_スキルアップとブログのコツ
新入社員向けLT_スキルアップとブログのコツ
 
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
 
Mass Producing Banner With Photoshop & JavaScript
Mass Producing Banner With Photoshop & JavaScriptMass Producing Banner With Photoshop & JavaScript
Mass Producing Banner With Photoshop & JavaScript
 
株式会社プレミアムグラフィクスの会社案内
株式会社プレミアムグラフィクスの会社案内株式会社プレミアムグラフィクスの会社案内
株式会社プレミアムグラフィクスの会社案内
 

En vedette

聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門正樹 平野
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!Ayaka Sumida
 
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」Ayaka Sumida
 
関西☆フリ女会議
関西☆フリ女会議関西☆フリ女会議
関西☆フリ女会議Ayaka Sumida
 
フリーランスデザイナーの「つくること、はたらくこと」
フリーランスデザイナーの「つくること、はたらくこと」フリーランスデザイナーの「つくること、はたらくこと」
フリーランスデザイナーの「つくること、はたらくこと」Ayaka Sumida
 
人類の進化とデザイン
人類の進化とデザイン人類の進化とデザイン
人類の進化とデザインAyaka Sumida
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜Ayaka Sumida
 
10 E-Learning Trends to watch in 2016
10 E-Learning Trends to watch in 201610 E-Learning Trends to watch in 2016
10 E-Learning Trends to watch in 2016Aurion Learning
 

En vedette (8)

聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
 
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
 
関西☆フリ女会議
関西☆フリ女会議関西☆フリ女会議
関西☆フリ女会議
 
フリーランスデザイナーの「つくること、はたらくこと」
フリーランスデザイナーの「つくること、はたらくこと」フリーランスデザイナーの「つくること、はたらくこと」
フリーランスデザイナーの「つくること、はたらくこと」
 
人類の進化とデザイン
人類の進化とデザイン人類の進化とデザイン
人類の進化とデザイン
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
 
10 E-Learning Trends to watch in 2016
10 E-Learning Trends to watch in 201610 E-Learning Trends to watch in 2016
10 E-Learning Trends to watch in 2016
 

Similaire à コンテンツファーストなWebサイト運用

concrete5 CMS「運用」ケーススタディ
concrete5 CMS「運用」ケーススタディconcrete5 CMS「運用」ケーススタディ
concrete5 CMS「運用」ケーススタディHishikawa Takuro
 
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!FatWireKK
 
concrete5で行なうcms導入提案のポイント
concrete5で行なうcms導入提案のポイントconcrete5で行なうcms導入提案のポイント
concrete5で行なうcms導入提案のポイントHishikawa Takuro
 
20150606 CMS Fun名古屋 vol.2 baserCMSのご紹介
20150606 CMS Fun名古屋 vol.2 baserCMSのご紹介20150606 CMS Fun名古屋 vol.2 baserCMSのご紹介
20150606 CMS Fun名古屋 vol.2 baserCMSのご紹介Daisuke Abe
 
CMSを利用した次世代ワークフローを考える
CMSを利用した次世代ワークフローを考えるCMSを利用した次世代ワークフローを考える
CMSを利用した次世代ワークフローを考えるRyuji Egashira
 
CMS導入で企業のWebサイト運営はこう変わる!
CMS導入で企業のWebサイト運営はこう変わる!CMS導入で企業のWebサイト運営はこう変わる!
CMS導入で企業のWebサイト運営はこう変わる!Hishikawa Takuro
 
Lekumo キャンペーンビルダー ProNet勉強会用資料
Lekumo キャンペーンビルダー ProNet勉強会用資料Lekumo キャンペーンビルダー ProNet勉強会用資料
Lekumo キャンペーンビルダー ProNet勉強会用資料Six Apart KK
 
CMS学会 第三回 研究報告
CMS学会 第三回 研究報告CMS学会 第三回 研究報告
CMS学会 第三回 研究報告loftwork
 
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門loftwork
 
初めてのWebプログラミング講座
初めてのWebプログラミング講座初めてのWebプログラミング講座
初めてのWebプログラミング講座DIVE INTO CODE Corp.
 
20140908 Movable Type Seminar
20140908 Movable Type Seminar20140908 Movable Type Seminar
20140908 Movable Type SeminarSix Apart
 
CMSとIAで変化ヲ抱擁セヨ
CMSとIAで変化ヲ抱擁セヨCMSとIAで変化ヲ抱擁セヨ
CMSとIAで変化ヲ抱擁セヨMakoto Shimizu
 
SEOについて
SEOについてSEOについて
SEOについてnoda kana
 
第4回concrete5初心者勉強会-基礎編-
第4回concrete5初心者勉強会-基礎編-第4回concrete5初心者勉強会-基礎編-
第4回concrete5初心者勉強会-基礎編-Hayaka Shoji
 
ユーザ目線の実践的BPM
ユーザ目線の実践的BPMユーザ目線の実践的BPM
ユーザ目線の実践的BPMShigeaki Wakizaka
 
20150718 a-blog cms × baserCMSのご紹介
20150718 a-blog cms × baserCMSのご紹介20150718 a-blog cms × baserCMSのご紹介
20150718 a-blog cms × baserCMSのご紹介Daisuke Abe
 

Similaire à コンテンツファーストなWebサイト運用 (20)

concrete5 CMS「運用」ケーススタディ
concrete5 CMS「運用」ケーススタディconcrete5 CMS「運用」ケーススタディ
concrete5 CMS「運用」ケーススタディ
 
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!
 
concrete5で行なうcms導入提案のポイント
concrete5で行なうcms導入提案のポイントconcrete5で行なうcms導入提案のポイント
concrete5で行なうcms導入提案のポイント
 
Web
WebWeb
Web
 
20150606 CMS Fun名古屋 vol.2 baserCMSのご紹介
20150606 CMS Fun名古屋 vol.2 baserCMSのご紹介20150606 CMS Fun名古屋 vol.2 baserCMSのご紹介
20150606 CMS Fun名古屋 vol.2 baserCMSのご紹介
 
CMSを利用した次世代ワークフローを考える
CMSを利用した次世代ワークフローを考えるCMSを利用した次世代ワークフローを考える
CMSを利用した次世代ワークフローを考える
 
CMS導入で企業のWebサイト運営はこう変わる!
CMS導入で企業のWebサイト運営はこう変わる!CMS導入で企業のWebサイト運営はこう変わる!
CMS導入で企業のWebサイト運営はこう変わる!
 
Lekumo キャンペーンビルダー ProNet勉強会用資料
Lekumo キャンペーンビルダー ProNet勉強会用資料Lekumo キャンペーンビルダー ProNet勉強会用資料
Lekumo キャンペーンビルダー ProNet勉強会用資料
 
世界一即戦力なCMS
世界一即戦力なCMS世界一即戦力なCMS
世界一即戦力なCMS
 
CMS学会 第三回 研究報告
CMS学会 第三回 研究報告CMS学会 第三回 研究報告
CMS学会 第三回 研究報告
 
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
 
Accelerator CMS
Accelerator CMSAccelerator CMS
Accelerator CMS
 
初めてのWebプログラミング講座
初めてのWebプログラミング講座初めてのWebプログラミング講座
初めてのWebプログラミング講座
 
20140908 Movable Type Seminar
20140908 Movable Type Seminar20140908 Movable Type Seminar
20140908 Movable Type Seminar
 
CMSとIAで変化ヲ抱擁セヨ
CMSとIAで変化ヲ抱擁セヨCMSとIAで変化ヲ抱擁セヨ
CMSとIAで変化ヲ抱擁セヨ
 
SEOについて
SEOについてSEOについて
SEOについて
 
第4回concrete5初心者勉強会-基礎編-
第4回concrete5初心者勉強会-基礎編-第4回concrete5初心者勉強会-基礎編-
第4回concrete5初心者勉強会-基礎編-
 
ユーザ目線の実践的BPM
ユーザ目線の実践的BPMユーザ目線の実践的BPM
ユーザ目線の実践的BPM
 
Vision at loftwork_v5
Vision at loftwork_v5Vision at loftwork_v5
Vision at loftwork_v5
 
20150718 a-blog cms × baserCMSのご紹介
20150718 a-blog cms × baserCMSのご紹介20150718 a-blog cms × baserCMSのご紹介
20150718 a-blog cms × baserCMSのご紹介
 

コンテンツファーストなWebサイト運用