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

菱川拓郎Takuro Hishikawa

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

concrete5とは？

今日の話に大きく関わりますので、最初にオープンソースCMS

concrete5について紹介させてください。

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

concrete5って何？

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

デモ：編集モード

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

デザイナーへのおすすめポイント

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

開発者へのおすすめポイント

•早く形になる•手離れが良い•あとからの変更に強い設計•ウィザードインストール、1クリックアップデート

制作会社へのおすすめポイント

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

concrete5の歴史

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

動作要件

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

ライセンス

•ケンブリッジ大学•バンクーバー水族館•MINI（BMV）•AT&T•フィリピン航空

•TOPCON•Genco•など

事例

•とるナビ（バンプレスト）•交通新聞社•筑波学院大学•東京基督教大学•篠栗町社会福祉協議会　

•羽島市医師会•CSS Nite in AOMORI•その他企業、自治体など…

国内事例

•公開承認機能•詳細な権限設定•世代管理・ロールバック機能•サイト内検索•モバイルでのテーマ切り替え

•RSS出力•問い合わせフォーム•ファイルマネージャー•サイト内検索•etc.

主な機能

•concrete5の普及活動•concrete5テクニカルサポート•concrete5保守サポート•concrete5ホスティング•トレーニング／セミナー•制作パートナー制度

コンクリートファイブジャパン株式会社

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

;-)

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

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

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

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

懸念点だらけ？

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

事例持ってきました！

FUSION IP-Phone SMART

ip-phone-smart.jp

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

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

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

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

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

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

“Designing responsively enables us to build for four corners, no matter the size, rather than one specific device.”

- http://zurb.com/responsive/design

“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

迅速で継続的なプロトタイピング

“Designing responsive sites allows you to be prepared for devices that don't even exist yet”

- http://zurb.com/responsive/design

将来性

“don't let friends design in 960px.”

- http://zurb.com/responsive/design

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

:-)

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

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

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

ワイヤーフレーム•画面サイズが変わっても残るクライアントの意図を書く•では、ワイヤーフレームの実物を•…と言いたいところですが、この部分はロフトワークさんの素晴らしい仕事だったので私からはお伝えできマセン m(_ _)m

プロモーションサイト構築｜実績・事例｜株式会社ロフトワーク - http://www.loftwork.jp/case/detail/web/20131004_fusioncom.aspx

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

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

プロトタイプ

プロトタイプ

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

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

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

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

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

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

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

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

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

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

コーディング•例#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;}

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

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

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

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

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

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

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

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

要件定義 ワイヤーフレーム

プロトタイプ

デザイン

実装（組み込み）

検証

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ご清聴ありがとうございました！

www.concrete5.org (コミュニティ／マーケットプレイス)concrete5-japan.org (日本語コミュニティ)concrete5.co.jp (コンクリートファイブジャパン株式会社)