さぶみっと！セミナー名古屋で発表した資料です。

1. 実例から見る、CMSと
レスポンシブデザインで変わる
ウェブ制作のワークフロー

2. 菱川拓郎
Takuro Hishikawa

3. コンクリートファイブジャパン株式会社
concrete5 Japan Inc.

4. concrete5とは？

5. 今日の話に大きく関わりますので、
最初にオープンソースCMS
concrete5
について紹介させてください。

6. concrete5って何？
•拡張性と操作性に特化したオープンソ
ースCMS
•ウェブサイトの管理を、マウス操作で
自由に行なえる
•サイト内の編集したいページで「編集
モード」に切り替え、その場で編集

7. デモ：編集モード
•ツールバー
•ブロックの編集
•ブロックの追加
•レイアウトの追加
•デザインツール

8. デザイナーへのおすすめポイント
•テーマの作成は超カンタン
•デザインカスタマイズで覚えることが
少ない（学習コストが低い）
•デザインカスタマイズの自由度が高い
•日本語フォーラムでサポート、勉強会
も

9. 開発者へのおすすめポイント
•jQuery, Twitter Bootstrap
•PHP(Zend Libraries),
MySQL(ADOdbデータベース抽象化
レイヤー)
•拡張可能なデータオブジェクトモデ
ル、ビルト・イン・ヘルパークラス
•カスタマイズ容易なオーバーライドシ
ステム

10. 制作会社へのおすすめポイント
•早く形になる
•手離れが良い
•あとからの変更に強い設計
•ウィザードインストール、1クリック
アップデート

11. concrete5の歴史
• 2003 concrete CMS v.1
広告代理店からの依頼
更新者は90人。デザインと機能にこだわるサイ
ト。全米CMからの大量のアクセス
→「簡単、柔軟、強固」をキーワードに全く新しい
CMSを開発
• 2008 concrete5 オープンソース化
• 2009 concrete5 日本語版リリース
• 2014 モバイルからのサイト管理を実現するGUIの
リニューアルを予定

12. 動作要件
•PHP5.3
•PHPモジュール: CURL, zip, mcrypt,
openssl, GD (with freetype),
mysql, mbstring
•PHP Safe Mode Off
•MySQL 5.x

13. ライセンス
•MITライセンス
制限の最も少ないライセンスのひとつ
•マーケットプレイスから入手できるテ
ーマやアドオンは異なるライセンス
（開発者が選べる）

14. 事例
•ケンブリッジ大
学
•バンクーバー水
族館
•MINI（BMV）
•AT&T
•フィリピン航空
•TOPCON
•Genco
•など

15. 国内事例
•とるナビ（バン
プレスト）
•交通新聞社
•筑波学院大学
•東京基督教大学
•篠栗町社会福祉
協議会
•羽島市医師会
•CSS Nite in
AOMORI
•その他企業、自
治体など…

16. 主な機能
•公開承認機能
•詳細な権限設定
•世代管理・ロー
•RSS出力
•問い合わせフォ
ルバック機能
•ファイルマネー
•サイト内検索
•モバイルでのテ
ーマ切り替え
ーム
ジャー
•サイト内検索
•etc.

17. コンクリートファイブジャパン株式会社
•concrete5の普及活動
•concrete5テクニカルサポート
•concrete5保守サポート
•concrete5ホスティング
•トレーニング／セミナー
•制作パートナー制度

18. concrete5
•直感的操作のCMSと
覚えて帰ってください！

19. ;-)

20. レスポンシブデザインの
懸念点

21. レスポンシブデザインの懸念点
•デザインに制約が起こる？
•PC用の要素を読み込むことでモバイ
ルで遅くなる？（逆も）
•ナビゲーションが難しい？
•モバイルからのアクセス時、PC表示に
切り替えできなくなるのがストレス

22. CSSフレームワークの
懸念点

23. CSSフレームワークの懸念点
•似たようなデザインになる？
•デザイナーの制約になる？
•結局ほとんど書き直しになり
意味が無い？
•CMSとの相性が悪い？

24. 懸念点だらけ？

25. 事例があれば
やってみたいかも…？

26. 事例持ってきました！

27. FUSION IP-Phone SMART
ip-phone-smart.jp

28. FUSION IP-Phone SMART
•スマホの通話料が60%安くなる。スマ
ートフォン向けIP電話サービス
•新規ユーザーの獲得と既存ユーザーの
利用率アップ
•新規利用者への魅力の訴求とカスタマ
ーサポートの充実
•常に社内で最新の情報に更新

29. FUSION IP-Phone SMART
•Responsive CSS Framework
= Zurb Foundation 4
•CMS = concrete5

30. 新しい制作フローの
チャレンジ

31. ウォーターフォールからの脱却
•最優先事項はユーザーエクスペリエン
ス（+初期コスト）
•ワイヤーフレーム→デザインカンプ→
コーディング→CMS組み込み
という一方向の制作フローは最適でな
いことが予想される

32. 検証を継続する制作フロー
•CMSに組み込んだ状態のプロトタイ
プを制作、実際の運用しやすさやスマ
ートフォンからのユーザーエクスペリ
エンスを確認しながら先に高めておく
•あとからデザイン、コーディングする

33. レスポンシブウェブデザインとCMS
制約？
流行？
ウェブ制作者のエゴ？
…本質？

34. “Designing responsively
enables us to build for
four corners, no matter
the size, rather than one
specific device.”
- http://zurb.com/responsive/design

35. 迅速で継続的なプロトタイピング
“You can create coded
wireframes that allow you to
see how your designs might
function on a desktop, a
phone or a tablet.”
- http://zurb.com/responsive/design

36. 将来性
“Designing responsive sites
allows you to be prepared
for devices that don't even
exist yet”
- http://zurb.com/responsive/design

37. “don't let friends design
in 960px.”
- http://zurb.com/responsive/design

38. クライアント
ウェブ制作者
ユーザー
みんなの利益

39. :-)

40. ここからは、実際に
Foundation+concrete5
で制作した流れをご紹介

41. レスポンシブデザイン前提
のワイヤーフレーム

42. ワイヤーフレーム
•レスポンシブデザインに対応するワイ
ヤーフレームに求められるもの
•レイアウト設計ではなく情報設計
•ピクセル数まで指定してあるワイヤー
フレームと対極
•配置を細かく指定しない

43. ワイヤーフレーム
•画面サイズが変わっても残るクライア
ントの意図を書く
•では、ワイヤーフレームの実物を
• …と言いたいところですが、この部分はロフトワー
クさんの素晴らしい仕事だったので私からはお伝え
できマセン m(_ _)m
プロモーションサイト構築｜実績・事例｜株式会社ロフトワーク http://www.loftwork.jp/case/detail/web/20131004_fusioncom.aspx

44. CMS組み込み済みの
プロトタイプ

45. プロトタイプ
•ワイヤーフレームをもとにCMSに組み
込んでしまった
•FoundationをベースにいきなりCMS
のテーマを作る
•もちろんこの時点でデザインはしてい
ない

46. プロトタイプ

47. プロトタイプ

48. プロトタイプ
•最初期のテーマが残っていなくて前の
ページの画面は、色彩設計が途中まで
反映されています…
•最初期は完全にFoundationそのまま
•コンテンツはダミーで登録

49. プロトタイプ
•モバイル幅での動きやレイアウトにつ
いて、サイトを作りながら（そして実
機で見ながら）検証していく
•CMSの機能でどんどんレイアウトを
変えていく（ディレクターでも打合せ
中でもできる！）

50. プロトタイプ
•追加機能はHTMLブロックなどを活用
してダミーで入れる
•どんな機能かはワイヤーフレームなど
ドキュメントで補完

51. プロトタイプ
•運用のイメージもプロトタイプでクラ
イアントとイメージを合わせておく
•クライアントと完成時、運用時のイメ
ージのずれがなくなる

52. プロトタイプ後に行なう
デザイン

53. デザイン
•デザイナーもプロトタイプを見てデザ
インに落とし込んでいく
•全ページデザインする必要はない
•色彩設計とパーツのデザイン
•基本的に無茶はしない（プロトタイプ
と違うことをしない）

54. デザイン
•ウェブデザインは得てして「機能設計
書」を兼ねて炎上する
•→デザインとして確認してもらえると
いうメリット

55. デザイン
•結局どういうものを作るの？
•FoundationやBootstrapのサイトが
まさにお手本になる！

56. CSSフレームワークを活用
したコーディング

57. コーディング
•Foundationはダウンロードしてその
まま使わない！
•フレームワークというよりライブラリ
•便利なSassのMix-in集

58. コーディング
•例
#main {
@media #{$small} {
& {
@include grid-column($columns:8,$collapse:true);
}
}
@include single-box-shadow($color:#d5d5d5,$blur:3px,
$inset:false);
background-color: $main-background-color;
}

59. コーディング
•「CSSフレームワークはデザインが制
限される」は間違い
•既存サイトに一部Foundationを導入
することも可能
•includeすればHTMLが汚くならない
•用意されているclass名もうまく併用
して楽をする

60. プロトタイプを活用した
機能開発

61. 機能開発
•標準で用意されているブロックはどん
どんデザイン適用し、開発中にコンテ
ンツ登録もどんどん進めてもらう
•追加機能はブロック単位で開発を進め
る
•ブロック型CMSならではの分業制作
「１画面内で同時進行」

62. 機能開発
•コーディングを渡されてから取りかか
り、コーディングと仕様が食い違って
炎上…そういう無駄な開発はしない

63. 機能開発
•SMARTサイトで開発したブロック

64. 機能開発
•SMARTサイトで開発したブロック

65. 機能開発
•以上！あとは標準機能で実現
•アドオンもOpen Graph Tagsとソー
シャルボタンを挿入するものだけ

66. 検証→デザイン→実装
継続的な制作フロー

67. 要件定義
ワイヤーフレーム
プロトタイプ
検証
デザイン
実装（組み込み）

68. 新しい制作フローの
予想外の利点

69. 予想外の利点
•始めからレスポンシブで作って行くこ
とでモバイルでもナビゲーションが破
綻しない
→モバイルで使い勝手が悪くならない
•ブロック型CMSとの相性が良い
→CSSフレームワークのグリッドシス
テムの恩恵

70. レスポンシブデザイン、
新しい制作フローの
課題

71. 課題
•Foundation 4はIE8非対応
•やっぱりIE8に対応してほしい！
•対応ブラウザは念入りに認識を合わせ
ておきたい

72. 課題
•CSSフレームワークはブラックボック
スなので、対応ブラウザでの検証もし
っかり行われていて安心な反面、対応
ブラウザを増やすのは自作CSSより大
変
•結局Respond.jsで対応

73. 課題
•CSSフレームワークだけではナビゲー
ションのレスポンシブ対応のバリエー
ションが少ない
•コーディングの工数がかかるポイント
になる
•それでも全体的には恩恵が大きい

74. 課題
•CSSフレームワークの選び方
•デザインではなく、設計と対応ブラウ
ザで選ぶ
•モバイルファーストかどうかは設計に
大きく関わる
•今後はワイヤーフレームからモバイル
ファーストにして行こう！

75. 課題
•表示・非表示のテクニックをどこまで
使うか？

76. 課題
•画像のクオリティと読み込み速度は？
•Retina画像からpng8圧縮画像まで使
い分ける→ルール化までは至らず

77. 課題
•CMSのレイアウト編集機能とCSSフ
レームワークの設計が食い違うことも
•クライアントの混乱のもとになりかね
ない

78. 課題
•CMSとCSSフレームワークのコミュ
ニティの相互交流で解消へ
•concrete5次期バージョンでは
BootstrapやFoundationのグリッド
システムとの親和性向上

79. 課題
•ワークフローに関係者全員が慣れてい
ない
•継続が大事！

80. 課題はあるが、
クライアント満足度は高く
コスト上のメリットも！

81. 最終的にサイトを利用する
ユーザーに近い、
プロトタイプを軸に関係者
の目線を揃えられる

82. 制約の多いレスポンシブウ
ェブデザインだからこそ、
静的なデザイン中心から
コンテンツ中心に発想の
転換ができる

83. ご清聴ありがとうございました！
www.concrete5.org (コミュニティ／マーケットプレイス)
concrete5-japan.org (日本語コミュニティ)
concrete5.co.jp (コンクリートファイブジャパン株式会社)