有限会社アップルップル 山本 一道
を活用した
新しいWeb制作の
ワークフロー
vol.56
山本 一道 -> @kazumich
1969年生まれ (45歳)
高校2年と中学2年と妻の4人家族
有限会社アップルップルの代表

(私を含め10人のWeb制作会社)
2014年の        全国ツアー
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
今日ご紹介する事
参加特典の紹介
「a-blog cms」の基本を紹介
アップルップルのWeb制作のワークフロー
の紹介
a-blog cms 2.1 新機能の紹介
今日はどんな人が
参加してるの?
職種
デザイナー
マークアップ
プログラマ
ディレクタ その他
その他
50%
プログラマ
19%
ディレクター
6%
マークアップ
19%
デザイナー
6%
職種
札幌
HTML・CSS
得意できる苦手無理
苦手
18%
できる
65%
得意
18%
HTML

CSS
札幌
PHP
得意できる苦手無理
無理
24%
苦手
53%
できる
24%
PHP
札幌
3つの特徴
マークアップエンジニアのための国産CMS
phpの知識が無くても
カスタマイズ可能
phpの知識が無くても
カスタマイズ可能
phpの知識が無くても
カスタマイズ可能
top.html
index.html
entry.html
用意された
スニペットやモジュール
の組み合わせでCMSを
カスタマイズしていきます。
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
WYSIWYGを利用しない
記事投稿フォーム
WYSIWYGを利用しない
記事投稿フォーム
WYSIWYGを利用しない
記事投稿フォーム
WYSIWYGを利用しない
記事投稿フォーム
Demo
自由にデザインできる
カスタムフィールド
自由にデザインできる
カスタムフィールド
自由にデザインできる
カスタムフィールド
自由にデザインできる
カスタムフィールド
Demo
phpの知識が無くても
カスタマイズ可能
WYSIWYGを利用しない
記事投稿フォーム
自由にデザインできる
カスタムフィールド
の3つの特徴
Web制作ワークフローの紹介
2つのWebサイト制作方法
その前に
2つのWebサイト制作方法
部分的にCMS化全体をCMS化
この部分をCMSで更新可能に
どれくらいで出来る?
Demo
2つのWebサイト制作方法
部分的にCMS化全体をCMS化
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
今のWeb制作のワークフロー
設計 デザイン マークアップ CMS実装 登録
今のWeb制作のワークフロー
直列で順に作業するので時間がかかる
管理画面にアクセスできるのは随分後の方
…
Designing in the browser
Designing in the browser
Photoshop等でカンプを作らずに
HTMLとCSSでコーディングして
完成形に近づけていく手法
私の出番は無いの?
アップルップルのやり方とは違うかな。
アップルップルのワークフロー
設計
デザイン マークアップ
CMS実装 登録
アップルップルのワークフロー
CMSプロトタイピング
CMSプロトタイピング
CMSの実装を先に行い、クライア
ントと早いタイミングから完成時
の管理画面や公開側のページ情報
を共有する開発手法
開発に専念してて



困った時だけお手伝い
設計
デザイン マークアップ
CMS実装 登録
アップルップルのワークフロー
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
設計
デザイン マークアップ
CMS実装 登録
アップルップルのワークフロー
デザインとCMS実装
の並行作業
制作時間の短縮
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
設計
デザイン マークアップ
CMS実装 登録
アップルップルのワークフロー
CMSプロトタイプを見ながら
デザインができる
用意するカンプに漏れがなく
配置する要素も確実に分かる
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
設計
デザイン マークアップ
CMS実装 登録
アップルップルのワークフロー
早いタイミングでの
データ登録が可能
クライアントさん自身に
登録してもらう事も可能
設計
デザイン マークアップ
CMS実装 登録
アップルップルのワークフロー
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌
ソーシャルログイン機能
並列承認機能
復活!カート機能
カスタムユニット
メディアユニット
まとめ
CMSプロトタイピング
HTML+CSSだけで
カスタマイズ可能
できそうな気がしませんか?
ありがとうございました!
まずは一度使ってみて下さい

More Related Content

PDF
WCK Sessions Vol.7 / a-blog cms 2.1を活用したWeb制作のワークフロー
PDF
Webridge Meeting SP17 / a-blog cms 2.1を利用したWeb制作のワークフロー
PDF
ablogcms2014tokyo
PDF
TalkNote Vol.10 a-blog cms を活用した新しいWeb制作のワークフロー
PDF
スタイルガイドを活用した運用に強いCMSサイト制作
PDF
メニューは管理画面で設定できるようにしよう
PDF
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
PPTX
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
WCK Sessions Vol.7 / a-blog cms 2.1を活用したWeb制作のワークフロー
Webridge Meeting SP17 / a-blog cms 2.1を利用したWeb制作のワークフロー
ablogcms2014tokyo
TalkNote Vol.10 a-blog cms を活用した新しいWeb制作のワークフロー
スタイルガイドを活用した運用に強いCMSサイト制作
メニューは管理画面で設定できるようにしよう
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
PHPとフロントのイイ関係・動くスタイルガイドをつくろう

What's hot (20)

PPTX
[社内勉強会]SPAのすすめ
PDF
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
PDF
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
PDF
WooCommerce & AWS
PDF
WordBench 東京 とは
PDF
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
PDF
three.jsによる一歩進めたグラフィカルな表現
PDF
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
PPTX
独自Ecサイト立ち上げワンストップセミナー 0907
PDF
20150531 phpcon kansai
PDF
新卒で即戦力なエンジニアになる
PDF
WordCamp Tokyo2016-WooCommerceのすすめ
PPTX
フリーランサーの2014年振り返り
PDF
今から始めよう!WordPressで作る女子ウケ★スマホサイト
PDF
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
KEY
WordPressってブログじゃないの?
PDF
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
PDF
Word pressはじめの一歩 テーマ作成ハンズオン
PDF
WordPress 初心者からの脱出 #tohokuitfes
PPTX
副業エンジニアもBacklogで プロジェクト管理しよう!
[社内勉強会]SPAのすすめ
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
WooCommerce & AWS
WordBench 東京 とは
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
three.jsによる一歩進めたグラフィカルな表現
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
独自Ecサイト立ち上げワンストップセミナー 0907
20150531 phpcon kansai
新卒で即戦力なエンジニアになる
WordCamp Tokyo2016-WooCommerceのすすめ
フリーランサーの2014年振り返り
今から始めよう!WordPressで作る女子ウケ★スマホサイト
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
WordPressってブログじゃないの?
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
Word pressはじめの一歩 テーマ作成ハンズオン
WordPress 初心者からの脱出 #tohokuitfes
副業エンジニアもBacklogで プロジェクト管理しよう!
Ad

Viewers also liked (20)

PDF
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
PDF
a-blog cms の基本 Ver.Kochi
PDF
a-blog cms の基本 福岡版
PDF
a-blog cms の2016年版新テーマについて
PDF
第1回 CMS Fun Nagoya / a-blog cms 編
PDF
a-blog cmsをVer.1系からVer.2系へアップデートするときに気をつけておきたいこと
PDF
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
PDF
a-blog cms ってどんなCMS?
PDF
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
PDF
a-blog cms でAMPに対応する
PDF
a-blog cms カスタマイズ中級編
PDF
絵本を作って感じたSVGの良いところとつまずいたところ
PDF
マークアップを体験するためのツールの使い方
PDF
とってもシンプルなスライダーのjQueryプラグイン作りました
PDF
ユニットリストのおすすめの使い方
PDF
CSSできる SVGアニメーション
PDF
Sassを使いこなそう
PDF
マークアップって重要なの?あなたへ伝えたいマークアップの大切さ
PDF
実装のしかたと運用方法から選ぶ a-blog cms の紹介
PDF
a-sap10「モジュールIDを理解する」
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
a-blog cms の基本 Ver.Kochi
a-blog cms の基本 福岡版
a-blog cms の2016年版新テーマについて
第1回 CMS Fun Nagoya / a-blog cms 編
a-blog cmsをVer.1系からVer.2系へアップデートするときに気をつけておきたいこと
もっと使いやすくなる a-blog cms の更新方法カスタマイズ
a-blog cms ってどんなCMS?
a-blog cmsの2015年版の基本テーマを 使ったカスタマイズのポイント
a-blog cms でAMPに対応する
a-blog cms カスタマイズ中級編
絵本を作って感じたSVGの良いところとつまずいたところ
マークアップを体験するためのツールの使い方
とってもシンプルなスライダーのjQueryプラグイン作りました
ユニットリストのおすすめの使い方
CSSできる SVGアニメーション
Sassを使いこなそう
マークアップって重要なの?あなたへ伝えたいマークアップの大切さ
実装のしかたと運用方法から選ぶ a-blog cms の紹介
a-sap10「モジュールIDを理解する」
Ad

More from Kazumich YAMAMOTO (19)

PDF
a-blog cms「simple2016」で学ぶ カスタマイズ初級編
PDF
mixpanel と cms を活用した One to One マーケティング
PDF
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー
PDF
マルチデバイス時代だからこそ a-blog cms 2.0
PDF
Html5nagoya5 ablogcms
PDF
ABC Wowds 2013 / Webデザイナーのためのフレームワーク a-blog cms 入門
PDF
Techlion Vol.7 CMSを作って10年のappleple
PDF
Pasonatec Lightning Talk 20120128
PDF
PDF
PDF
WCAF Seminar vol.7 a-blog cms
PDF
CMSカフェ@東京 / a-blog cms
PDF
Talk Note Vol.1 a-blog cms
PDF
WDHA#29 a-blog cms
PDF
CSS Nite in Shizuoka Vol.1 Lightning Talk a-blog cms
PDF
Web屋の電子書籍の作り方 WCAN 2010 Autumn 4-C
PDF
PASONATECセミナーVol.4
KEY
kazumich@acmscamp2010spring
KEY
CSS Nite in TAKAMATSU / a-blog cms
a-blog cms「simple2016」で学ぶ カスタマイズ初級編
mixpanel と cms を活用した One to One マーケティング
a-blog cms 2.0 を活用した新しいWeb制作のワークフロー
マルチデバイス時代だからこそ a-blog cms 2.0
Html5nagoya5 ablogcms
ABC Wowds 2013 / Webデザイナーのためのフレームワーク a-blog cms 入門
Techlion Vol.7 CMSを作って10年のappleple
Pasonatec Lightning Talk 20120128
WCAF Seminar vol.7 a-blog cms
CMSカフェ@東京 / a-blog cms
Talk Note Vol.1 a-blog cms
WDHA#29 a-blog cms
CSS Nite in Shizuoka Vol.1 Lightning Talk a-blog cms
Web屋の電子書籍の作り方 WCAN 2010 Autumn 4-C
PASONATECセミナーVol.4
kazumich@acmscamp2010spring
CSS Nite in TAKAMATSU / a-blog cms

a-blog cms 2.0 を活用した新しいWeb制作のワークフロー 札幌