Submit Search
Upload
スタイルガイドを活用した運用に強いCMSサイト制作
•
37 likes
•
4,265 views
Keisuke Imura
Follow
2014/3/8 の『現場のプロが教えるWeb制作の最新常識』発売記念イベントのセッションで使用したスライドです。
Read less
Read more
Design
Report
Share
Report
Share
1 of 84
Download now
Download to read offline
Recommended
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
PHP Conference kansai 2015 発表資料(公開用)です。
20150531 phpcon kansai
20150531 phpcon kansai
kumamidori
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
Naoki Yamada
Webサービス ( システム ) におけるプロトタイピングをデザイナーの方々も是非やってみようというお話。
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
2015年9月現在、私が取り組んでいる新規開発案件におけるフロントエンド開発環境周りについてまとめたもの
Style Guide活用のススメ
Style Guide活用のススメ
Shigeki Ohtsuki
CSS Nite in OSAKA, Vol. 36(2013/9/10)、CSS Nite in Ginza, Vol.71(2013/9/19)にて開催された「次世代のWebデザインへの2つのヒント」のスライド。両セッションのスライドをマージしてまとめています。 スライドの末尾で紹介していますが、2013/11/7に拙著『マルチデバイス時代のWebデザインガイドブック』が発売となりました。興味ある方は書店にて手に取ってみてください。 サポートサイト : http://2843.jp/books/nabebon/ Facebookページ : http://facebook.com/nabebon/ Amazon : http://www.amazon.co.jp/dp/4883378942/
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
takehiko yoshida
フロントエンドエンジニアで活動しようと思った経緯 半年程度の実務経験を経て感じたこととか
[社内勉強会]SPAのすすめ
[社内勉強会]SPAのすすめ
hirooooo
自社パッケージのreplaceに向けてのScriptフレームワークの提案資料
How to develop a huge Single Page Application
How to develop a huge Single Page Application
Naoki Yamada
Developers Summit 2016 ( http://event.shoeisha.jp/devsumi/20160218/ ) の一日目ランチセッションにて発表した資料です。
Recommended
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
PHP Conference kansai 2015 発表資料(公開用)です。
20150531 phpcon kansai
20150531 phpcon kansai
kumamidori
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
Naoki Yamada
Webサービス ( システム ) におけるプロトタイピングをデザイナーの方々も是非やってみようというお話。
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
2015年9月現在、私が取り組んでいる新規開発案件におけるフロントエンド開発環境周りについてまとめたもの
Style Guide活用のススメ
Style Guide活用のススメ
Shigeki Ohtsuki
CSS Nite in OSAKA, Vol. 36(2013/9/10)、CSS Nite in Ginza, Vol.71(2013/9/19)にて開催された「次世代のWebデザインへの2つのヒント」のスライド。両セッションのスライドをマージしてまとめています。 スライドの末尾で紹介していますが、2013/11/7に拙著『マルチデバイス時代のWebデザインガイドブック』が発売となりました。興味ある方は書店にて手に取ってみてください。 サポートサイト : http://2843.jp/books/nabebon/ Facebookページ : http://facebook.com/nabebon/ Amazon : http://www.amazon.co.jp/dp/4883378942/
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
takehiko yoshida
フロントエンドエンジニアで活動しようと思った経緯 半年程度の実務経験を経て感じたこととか
[社内勉強会]SPAのすすめ
[社内勉強会]SPAのすすめ
hirooooo
自社パッケージのreplaceに向けてのScriptフレームワークの提案資料
How to develop a huge Single Page Application
How to develop a huge Single Page Application
Naoki Yamada
Developers Summit 2016 ( http://event.shoeisha.jp/devsumi/20160218/ ) の一日目ランチセッションにて発表した資料です。
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
レスポンシブウェブデザイン(以下RWDと呼ぶ)とはPC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを単一のHTMLで実現するサイト制作手法です。GoogleがRWDを推奨したことから、昨今人気のある制作手法と言えます。 このセッションでは、レスポンシブウェブデザインとは何か、RWDの3大要素である、「フルードグリッド」、「フルードイメージ」、「メディアクエリー」とは何かから始まり、ノンデザイナーでも簡単に実現できる、CMS+レスポンシブデザイン、CSSフレームワークを紹介します。
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
シングルページWebアプリケーションに関する背景と利用にあたってのメリット・デメリットを整理しました
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
ADC MEETUP ROUND05 HTML5 Design Tools (http://www.adobe.com/jp/joc/adc/meetup/round05/)の「Dreamweaver CS6で作るレスポインシブWebデザイン」のセッション資料です。
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
three.jsの現行バージョン(r79)に基づいた表現周りをかいつまんで紹介
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
Ustream:ワイヤーコミュニケーション 第2回 http://www.ustream.tv/recorded/7738057 Togetter:お気に入り 第2回「ワイヤーフレームコミュニケーション研究会」 - ハッシュタグ " #wireframecomwg " まとめ http://togetter.com/li/30127 「ワイヤーフレームコミュニケーション研究会第2回」のお知らせ http://blog.sinap.jp/2010/05/wireframecomwg02-cm.html
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
Yahoo! JAPAN 社内セミナー用資料
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
Kazumich YAMAMOTO
WDHA#038 CMS会議 AOMORI で紹介した a-blog cms 2.1を活用したWeb制作のワークフロー のスライドです。
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Risako Imai
WCAN 2015 Autumnのセッション「Sketch VS Photoshop Webデザイン4番勝負」のスライドです。Webデザインに欠かせないいくつかの項目について2つのツールを比べてみました。
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
2015/1/18のWeb Creator Conferenceで使用したスライドです。
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/209/room ーーーーーーーーーーーーーーーーーーーーーーー
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Seiko Kuchida
WCAN2015 Autumnのセッションスライドです。国内のCMS事情、案件の傾向でどのようなCMSを検討すべきかの参考になれば幸いです。
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
高本 徹
Web業界発注制作の教科書 発売記念セミナーで使用したスライドです。発注者向けのWeb制作トラブルを回避するための事前確認ポイントなどを現場レベルでお話ししました。
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
レスポンシブWebデザインの概要から実装の基本まで。
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 で発表したスライドです。 https://wbtokyo.doorkeeper.jp/
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
A/BテストをAzure×Googleアナリティクスで試してみました。
A/BテストをAzure×Googleアナリティクスで試してみました。
典子 松本
JAZUG5周年総会 「Go (5) JAZUG」のLTで使用したスライドです。
「速」を落とさないコードレビュー
「速」を落とさないコードレビュー
Takafumi ONAKA
Forkwell Meetup #3 https://forkwell.connpass.com/event/48147/
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
今やスタンダードになりつつあるレスポンシブサイトについて、その概要から実際にレスポンシブサイトを構築する際に注意したいポイントまでを解説します。 また、実際にWebサイトをレスポンシブ対応する際のメリット・デメリット、レスポンシブ化するのに有効なサイト、不向きなサイト、最低限押さえておきたいソースコードなどをご紹介します。 授業では以下の様な内容についても語ります。 ・PC,SPと2つサイトを作るのと、レスポンシブサイト1つ作るのじゃ大変さは変わるのか? ・Googleが推奨してるけど、それはなぜ? ・なぜレスポンシブサイトが必要なのか?
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
2012年2月18日、 CSS Nite in Fukui, vol5でのスライドです。
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
More Related Content
What's hot
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
レスポンシブウェブデザイン(以下RWDと呼ぶ)とはPC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを単一のHTMLで実現するサイト制作手法です。GoogleがRWDを推奨したことから、昨今人気のある制作手法と言えます。 このセッションでは、レスポンシブウェブデザインとは何か、RWDの3大要素である、「フルードグリッド」、「フルードイメージ」、「メディアクエリー」とは何かから始まり、ノンデザイナーでも簡単に実現できる、CMS+レスポンシブデザイン、CSSフレームワークを紹介します。
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
シングルページWebアプリケーションに関する背景と利用にあたってのメリット・デメリットを整理しました
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
ADC MEETUP ROUND05 HTML5 Design Tools (http://www.adobe.com/jp/joc/adc/meetup/round05/)の「Dreamweaver CS6で作るレスポインシブWebデザイン」のセッション資料です。
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
three.jsの現行バージョン(r79)に基づいた表現周りをかいつまんで紹介
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
Ustream:ワイヤーコミュニケーション 第2回 http://www.ustream.tv/recorded/7738057 Togetter:お気に入り 第2回「ワイヤーフレームコミュニケーション研究会」 - ハッシュタグ " #wireframecomwg " まとめ http://togetter.com/li/30127 「ワイヤーフレームコミュニケーション研究会第2回」のお知らせ http://blog.sinap.jp/2010/05/wireframecomwg02-cm.html
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
Yahoo! JAPAN 社内セミナー用資料
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
Kazumich YAMAMOTO
WDHA#038 CMS会議 AOMORI で紹介した a-blog cms 2.1を活用したWeb制作のワークフロー のスライドです。
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Risako Imai
WCAN 2015 Autumnのセッション「Sketch VS Photoshop Webデザイン4番勝負」のスライドです。Webデザインに欠かせないいくつかの項目について2つのツールを比べてみました。
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
2015/1/18のWeb Creator Conferenceで使用したスライドです。
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/209/room ーーーーーーーーーーーーーーーーーーーーーーー
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Seiko Kuchida
WCAN2015 Autumnのセッションスライドです。国内のCMS事情、案件の傾向でどのようなCMSを検討すべきかの参考になれば幸いです。
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
第1回 Web Developer Selection「レスポンシブWebデザインの実践ワークフロー」のスライドです。
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
高本 徹
Web業界発注制作の教科書 発売記念セミナーで使用したスライドです。発注者向けのWeb制作トラブルを回避するための事前確認ポイントなどを現場レベルでお話ししました。
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
レスポンシブWebデザインの概要から実装の基本まで。
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 で発表したスライドです。 https://wbtokyo.doorkeeper.jp/
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
A/BテストをAzure×Googleアナリティクスで試してみました。
A/BテストをAzure×Googleアナリティクスで試してみました。
典子 松本
JAZUG5周年総会 「Go (5) JAZUG」のLTで使用したスライドです。
「速」を落とさないコードレビュー
「速」を落とさないコードレビュー
Takafumi ONAKA
Forkwell Meetup #3 https://forkwell.connpass.com/event/48147/
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
今やスタンダードになりつつあるレスポンシブサイトについて、その概要から実際にレスポンシブサイトを構築する際に注意したいポイントまでを解説します。 また、実際にWebサイトをレスポンシブ対応する際のメリット・デメリット、レスポンシブ化するのに有効なサイト、不向きなサイト、最低限押さえておきたいソースコードなどをご紹介します。 授業では以下の様な内容についても語ります。 ・PC,SPと2つサイトを作るのと、レスポンシブサイト1つ作るのじゃ大変さは変わるのか? ・Googleが推奨してるけど、それはなぜ? ・なぜレスポンシブサイトが必要なのか?
What's hot
(20)
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
A/BテストをAzure×Googleアナリティクスで試してみました。
A/BテストをAzure×Googleアナリティクスで試してみました。
「速」を落とさないコードレビュー
「速」を落とさないコードレビュー
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Similar to スタイルガイドを活用した運用に強いCMSサイト制作
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
2012年2月18日、 CSS Nite in Fukui, vol5でのスライドです。
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
About Design Manager
About Design Manager
Marino Yokoi
マネジメント未経験の元フリーランスがデザインマネージャーになったので、そのキャリアについて語ります
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23
Mari Kimura
Cookpad Techconf 2016/01/23 「今日なに作ろう」を支えるデザイン ーエンジニアとの協業ー
0dire_unyo
0dire_unyo
Kei Oyama
0からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.0
Kenta Nakamura
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
Masahiko Kawai
2017年5月21日 WordBench京都
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
2017年5月28日に開催されたABC2017Springでの講演資料
プロトタイプ時代の WordPressテーマの作り方・考え方
プロトタイプ時代の WordPressテーマの作り方・考え方
kenji goto
WordBench大分 第10回勉強会 【芸術の秋 Webデザインフェス】 2014年10月26日 @ホルトホール大分 内容は諸事情によりカットして公開。
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014
Nobuya Sato
Android Bazaar and Conference 2014 Spring: デザイントラック「UI/UXデザイントレンド 2014」発表資料(2014年3月21日、秋葉原ダイビル+UDX) http://www.android-group.jp/conference/abc2014s/conference/design/
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 http://schoo.jp/class/1611/room ーーーーーーーーーーーーーーーーーーーーーーー
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
9/27 UX Cafe B2BサービスのUXデザインを語ろう 発表資料
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
本間 和城
2017年1月28日開催のゼロディレ設計編資料です。
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida
ライトニングトーク付きクリエイターズ交流会 in東京で発表したデザイナーの複業の話です。
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida
サイボウズのMeetup第5回のLT資料です。 Cybozu Meetup#5 デザイン&アクセシビリティ
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
ssuser6f5294
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
Yuki Okada
デブサミ2015で発表したサイボウズの開発フローのお話。 http://event.shoeisha.jp/devsumi/20150219/session/820/
こうやったら売れる!インターネット活用 販路拡大
こうやったら売れる!インターネット活用 販路拡大
Takafumi Tsuda
インターネットマーケティング資料
アプリ開発、SaaS開発を経て最近考えていること.pdf
アプリ開発、SaaS開発を経て最近考えていること.pdf
ivanov23
デザインーとエンジニアが反目しあっていては、お客様の無茶ぶりに立ち向けないというお話。
Similar to スタイルガイドを活用した運用に強いCMSサイト制作
(20)
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
About Design Manager
About Design Manager
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23
0dire_unyo
0dire_unyo
0からのwebディレクション講座 運用編4.0
0からのwebディレクション講座 運用編4.0
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
デザイナーさんに知ってもらいたい「Adminimize」プラグインの超便利な機能
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
プロトタイプ時代の WordPressテーマの作り方・考え方
プロトタイプ時代の WordPressテーマの作り方・考え方
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
こうやったら売れる!インターネット活用 販路拡大
こうやったら売れる!インターネット活用 販路拡大
アプリ開発、SaaS開発を経て最近考えていること.pdf
アプリ開発、SaaS開発を経て最近考えていること.pdf
More from Keisuke Imura
JavaScriptのエラーチェックツールをつくろうとした話
JavaScriptのエラーチェックツールをつくろうとした話
Keisuke Imura
2017/5/27の初夏のJavaScript祭で使用したスライドです。
テクニカルクリエイターの憂鬱
テクニカルクリエイターの憂鬱
Keisuke Imura
2016/1/16 第36回Creators MeetUpで使用したスライドです。
High Performance Gulp
High Performance Gulp
Keisuke Imura
WP-D Fes #03で使用したスライドです。
Foundation for Appsでザクザク作るモックアップ
Foundation for Appsでザクザク作るモックアップ
Keisuke Imura
2015/1/6のファンタラクティブ・オープンミーティングで使用したスライドです。
Sass + Foundation 5でレスポンシブペライチ制作
Sass + Foundation 5でレスポンシブペライチ制作
Keisuke Imura
10/24のファンタラクティブ・オープンミーティングで使用したスライドです。
ベンチャー広報のための時短デザインテクニック
ベンチャー広報のための時短デザインテクニック
Keisuke Imura
2014/12/16 第2回「勝手にPR女子会」で使用したスライドです。
今日から始めるPython
今日から始めるPython
Keisuke Imura
2014/12/9 ファンタラクティブ・オープンミーティング #5で使用した資料です。
2015年に向けたWordPress動向
2015年に向けたWordPress動向
Keisuke Imura
10/29(水)のWordBench東京 10月勉強会『WordCamp Tokyo 2014 振り返りレポート』のセッションで使用したスライドです。
イチから学ぶ パッケージマネージャーとLAMP環境
イチから学ぶ パッケージマネージャーとLAMP環境
Keisuke Imura
2014/3/29 WordBench Tokyo 春のデザイナー祭りのセッションで使用したスライドです。
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Keisuke Imura
2014/1/27 WordBench東京で発表したセッションです。
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
Keisuke Imura
2013/5/27のCreators MeetUpで担当したセッションのスライドです。
60点をとれるWebデザイン
60点をとれるWebデザイン
Keisuke Imura
第1回Creators MeetUpで発表したスライドです。
More from Keisuke Imura
(12)
JavaScriptのエラーチェックツールをつくろうとした話
JavaScriptのエラーチェックツールをつくろうとした話
テクニカルクリエイターの憂鬱
テクニカルクリエイターの憂鬱
High Performance Gulp
High Performance Gulp
Foundation for Appsでザクザク作るモックアップ
Foundation for Appsでザクザク作るモックアップ
Sass + Foundation 5でレスポンシブペライチ制作
Sass + Foundation 5でレスポンシブペライチ制作
ベンチャー広報のための時短デザインテクニック
ベンチャー広報のための時短デザインテクニック
今日から始めるPython
今日から始めるPython
2015年に向けたWordPress動向
2015年に向けたWordPress動向
イチから学ぶ パッケージマネージャーとLAMP環境
イチから学ぶ パッケージマネージャーとLAMP環境
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
60点をとれるWebデザイン
60点をとれるWebデザイン
スタイルガイドを活用した運用に強いCMSサイト制作
1.
スタイルガイドを活用した 運用に強いCMSサイト制作 井村 圭介
2.
自己紹介 井村 圭介 K E
I S U K E I M U R A 1987年生まれの27歳。 フリーランスの Webデザイナー/エンジニア。 ! @imura_design
3.
本書では… ・配色のトレンド ・スタイルガイド ・スマートフォンサイトデザイン ・Git ・プロジェクト管理ツール ・CMS ・バックエンド高速化 など書いています。
4.
FUNTERACTIVE さわって、楽しい
5.
6.
7.
8.
9.
photo by yorozu2009
10.
ディレクション・デザイン・マークアップ・バックエンド と、3年ほど様々な角度からCMSサイト制作に関わって きました。
11.
今、困っていることがあります。
12.
現状のワークフローの問題点
13.
Webサイトの運用による循環 企画 更新作業 公開 ユーザーが見る
14.
Webサイトの運用による循環 企画 見積!設計!納期調整! 更新作業 デザイン!コーディング! プログラム! 公開 ユーザーが見る
15.
Webサイトの運用による循環 企画 見積!設計!納期調整! CMS 更新作業 デザイン!コーディング! プログラム! 公開 ユーザーが見る
16.
三ヶ月後…
17.
新しくキャンペーンのページを つくりたいのですが、CMSでできますか? できません。弊社にご依頼ください。
18.
パターン1 予算が無い場合
19.
クライアント 出したい情報があるのに予算が無い。。 あきらめよう。 ユーザー え?そんなキャンペーンやってたの知らなかった! じゃーね!
20.
パターン2 予算がある場合
21.
クライアント 早く更新したいのに…イライラ!至急! (次回も予算確保するの大変だなぁ) 制作者 デザイン考えて、コーディングして…。 スマートフォンにも対応しなきゃ。。また徹夜。。
22.
薄れていくCMSの存在感… 企画 見積!設計!納期調整! CMS 更新作業 デザイン!コーディング! プログラム! 公開 ユーザーが見る
23.
運用コスト
24.
運用コストを下げる策:その1 できることはなるべく 運用者にやってもらう ようにシステムを作っておく
25.
運用者にあった更新パターンを 選択すべし。
26.
CMSの更新パターン
27.
カスタムフィールド型 商品スペックのように 「項目が決まっているもの」
28.
29.
更新しやすさ 自由度
30.
WYSIWYG型 お知らせのように 「数行で完結するもの」
31.
32.
更新しやすさ 自由度
33.
WYSIWYGではなく Markdownでの更新も。
34.
ブロック型 キャンペーンのように 「レイアウトにパターンを持たせたいもの」
35.
更新しやすさ 自由度
36.
37.
動画を用意しました
38.
http://youtu.be/QMFQf8TtGTk
39.
運営者にあった更新パターンを 選択するために…
40.
よくあるワークフロー ヒアリング / 設計 公開 デザイン作成 フィードバック コーディング プレビュー CMS実装
41.
ワークフローの提案 ヒアリング 公開 CMSモックアップ 作成 フィードバック コーディング / モジュール設計 プレビュー プレビュー デザイン作成
42.
Webサイトの運用による循環 企画 見積!設計!納期調整! CMS 更新作業 デザイン!コーディング! プログラム! 公開 ユーザーが見る
43.
運用コストを下げる策:その2 スタイルガイドを作っておく
44.
スタイルガイド作ってきました
45.
http://funteractive.jp/saishinjoushiki/doc/section-1.html
46.
スタイルガイドを作っておくと ブロックの設計がしやすい!
47.
スタイルガイド、もっと詳しく
48.
サイトで使うカラースキームや パーツをまとめた デザインドキュメント
49.
50.
51.
52.
スタイルガイドを作るメリット • デザインルールを保つことができる • 一貫性のあるUIを提供し、 ユーザビリティを損なわない • 新規コンテンツ作成の際に デザイン・コーディングコストが減る
53.
スタイルガイド作成のデメリット • 初期構築コストがかかる • スタイルガイドのアップデートコストがかかる • モジュール設計のスキルが必要
54.
スタイルガイド作成のデメリット • 初期構築コストがかかる →中∼長期的に見ればコスト安 • スタイルガイドのアップデートコストがかかる →KSS、StyleDoccoなどのツールで解決 • モジュール設計のスキルが必要 →BEMやSMACSSを学んでみよう FoundationやBootstrapなどの フレームワークを参考にしてみよう
55.
スタイルガイドを作ったほうがよいサイト • 数10ページ以上の中∼大規模サイト • 頻繁に更新のあるサイト
56.
スタイルガイドを作ったほうがよいサイト • 数10ページ以上の中∼大規模サイト • 頻繁に更新のあるサイト → CMSも入っていることが多い
57.
スタイルガイド生成ツール
58.
その1 KSS
59.
60.
KSSの特徴 • テンプレートを自作できる • Ruby製。取り扱いが複雑 Ruby on Rails,
Sinatraなどの フロントエンドフレームワークが必要
61.
KSSを比較的簡単に使う方法 • kss-node という、Node.jsでKSSを使える ようにしたパッケージがあります。 • さらにGruntでkss-nodeを動かす grunt-kss というプラグインが!
62.
63.
その2 StyleDocco
64.
65.
StyleDoccoの特徴 • テンプレートが用意されている • Node.js製。動かすのが比較的簡単 • css(scss)ファイルごとにページを生成し てくれる
66.
スタイルガイドのデザインのコツ
67.
モジュール設計のポイント • 必要なモジュールは何か • 再利用できるコーディング • レスポンシブに対応 もしくはSP用のスタイルガイドを作る
68.
「半年後のWebサイトの姿を想像する」
69.
HTML / CSSのモジュール化 BEM SMACSS
70.
ヒジョーにざっくり:BEM, SMACSS HTMLをモジュール化して別のところで再利用する ための、class付けなどのルール。 EmmetやSass3.3でもBEMサポートが取り入れら れるなど注目が集まっている。
71.
デモに使ったツールの紹介
72.
Git スタートテーマをGitで管理しています。
73.
Bitbucket 無料から使えるリポジトリサービスです。
74.
Bower npmでインストールできるパッケージ管理ツール。 Foundation 5のインストールに使っています。
75.
KSS Ruby製のスタイルガイド生成ツール。 kss-nodeを利用したgrunt-kssで コンパイルしています。
76.
Foundation 5 レスポンシブ対応の フロントエンドフレームワークです。
77.
Sass / compass Sass版のFoundation
5にオリジナルの記述を 追加しています。
78.
タスクランナー。 grunt-kss、grunt-compassなど動かしています。
79.
ブロック型CMSの例として使用しました。
80.
まとめ:Web制作の今について
81.
今日ご紹介した内容は、CMSサイトをうまく 運用していくために考えているチャレンジです。 もちろん、このまま実践していただいても フォークして取り入れていただいても大丈夫です。
82.
ツールの進化もとても速いですが、積極的に 試してみて自分のやりたいことに合うものを 選んで組み合わせてみてください。
83.
ツールを使うだけに飽きたら自分でツールを 作ったり好きなプロジェクトにコミットして みてください。 CMSのテーマ・プラグインをつくったり Gruntのタスクを書いて公開してみたり、 BEMについてブログを書いたり…。
84.
ご清聴ありがとうございました m(_ _)m
Download now