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

13,606 views

Published on

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

Published in: Technology
0 Comments
32 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,606
On SlideShare
0
From Embeds
0
Number of Embeds
8,416
Actions
Shares
0
Downloads
30
Comments
0
Likes
32
Embeds 0
No embeds

No notes for slide

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

  1. 1. 実例から見る、CMSと レスポンシブデザインで変わる ウェブ制作のワークフロー
  2. 2. 菱川拓郎 Takuro Hishikawa
  3. 3. コンクリートファイブジャパン株式会社 concrete5 Japan Inc.
  4. 4. concrete5とは?
  5. 5. 今日の話に大きく関わりますので、 最初にオープンソースCMS concrete5 について紹介させてください。
  6. 6. concrete5って何? •拡張性と操作性に特化したオープンソ ースCMS •ウェブサイトの管理を、マウス操作で 自由に行なえる •サイト内の編集したいページで「編集 モード」に切り替え、その場で編集
  7. 7. デモ:編集モード •ツールバー •ブロックの編集 •ブロックの追加 •レイアウトの追加 •デザインツール
  8. 8. デザイナーへのおすすめポイント •テーマの作成は超カンタン •デザインカスタマイズで覚えることが 少ない(学習コストが低い) •デザインカスタマイズの自由度が高い •日本語フォーラムでサポート、勉強会 も
  9. 9. 開発者へのおすすめポイント •jQuery, Twitter Bootstrap •PHP(Zend Libraries), MySQL(ADOdbデータベース抽象化 レイヤー) •拡張可能なデータオブジェクトモデ ル、ビルト・イン・ヘルパークラス •カスタマイズ容易なオーバーライドシ ステム
  10. 10. 制作会社へのおすすめポイント •早く形になる •手離れが良い •あとからの変更に強い設計 •ウィザードインストール、1クリック アップデート
  11. 11. concrete5の歴史 • 2003 concrete CMS v.1 広告代理店からの依頼 更新者は90人。デザインと機能にこだわるサイ ト。全米CMからの大量のアクセス →「簡単、柔軟、強固」をキーワードに全く新しい CMSを開発 • 2008 concrete5 オープンソース化 • 2009 concrete5 日本語版リリース • 2014 モバイルからのサイト管理を実現するGUIの リニューアルを予定
  12. 12. 動作要件 •PHP5.3 •PHPモジュール: CURL, zip, mcrypt, openssl, GD (with freetype), mysql, mbstring •PHP Safe Mode Off •MySQL 5.x
  13. 13. ライセンス •MITライセンス 制限の最も少ないライセンスのひとつ •マーケットプレイスから入手できるテ ーマやアドオンは異なるライセンス (開発者が選べる)
  14. 14. 事例 •ケンブリッジ大 学 •バンクーバー水 族館 •MINI(BMV) •AT&T •フィリピン航空 •TOPCON •Genco •など
  15. 15. 国内事例 •とるナビ(バン プレスト) •交通新聞社 •筑波学院大学 •東京基督教大学 •篠栗町社会福祉 協議会  •羽島市医師会 •CSS Nite in AOMORI •その他企業、自 治体など…
  16. 16. 主な機能 •公開承認機能 •詳細な権限設定 •世代管理・ロー •RSS出力 •問い合わせフォ ルバック機能 •ファイルマネー •サイト内検索 •モバイルでのテ ーマ切り替え ーム ジャー •サイト内検索 •etc.
  17. 17. コンクリートファイブジャパン株式会社 •concrete5の普及活動 •concrete5テクニカルサポート •concrete5保守サポート •concrete5ホスティング •トレーニング/セミナー •制作パートナー制度
  18. 18. concrete5 •直感的操作のCMSと 覚えて帰ってください!
  19. 19. ;-)
  20. 20. レスポンシブデザインの 懸念点
  21. 21. レスポンシブデザインの懸念点 •デザインに制約が起こる? •PC用の要素を読み込むことでモバイ ルで遅くなる?(逆も) •ナビゲーションが難しい? •モバイルからのアクセス時、PC表示に 切り替えできなくなるのがストレス
  22. 22. CSSフレームワークの 懸念点
  23. 23. CSSフレームワークの懸念点 •似たようなデザインになる? •デザイナーの制約になる? •結局ほとんど書き直しになり 意味が無い? •CMSとの相性が悪い?
  24. 24. 懸念点だらけ?
  25. 25. 事例があれば やってみたいかも…?
  26. 26. 事例持ってきました!
  27. 27. FUSION IP-Phone SMART ip-phone-smart.jp
  28. 28. FUSION IP-Phone SMART •スマホの通話料が60%安くなる。スマ ートフォン向けIP電話サービス •新規ユーザーの獲得と既存ユーザーの 利用率アップ •新規利用者への魅力の訴求とカスタマ ーサポートの充実 •常に社内で最新の情報に更新
  29. 29. FUSION IP-Phone SMART •Responsive CSS Framework = Zurb Foundation 4 •CMS = concrete5
  30. 30. 新しい制作フローの チャレンジ
  31. 31. ウォーターフォールからの脱却 •最優先事項はユーザーエクスペリエン ス(+初期コスト) •ワイヤーフレーム→デザインカンプ→ コーディング→CMS組み込み という一方向の制作フローは最適でな いことが予想される
  32. 32. 検証を継続する制作フロー •CMSに組み込んだ状態のプロトタイ プを制作、実際の運用しやすさやスマ ートフォンからのユーザーエクスペリ エンスを確認しながら先に高めておく •あとからデザイン、コーディングする
  33. 33. レスポンシブウェブデザインとCMS 制約? 流行? ウェブ制作者のエゴ? …本質?
  34. 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. 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. 36. 将来性 “Designing responsive sites allows you to be prepared for devices that don't even exist yet” - http://zurb.com/responsive/design
  37. 37. “don't let friends design in 960px.” - http://zurb.com/responsive/design
  38. 38. クライアント ウェブ制作者 ユーザー みんなの利益
  39. 39. :-)
  40. 40. ここからは、実際に Foundation+concrete5 で制作した流れをご紹介
  41. 41. レスポンシブデザイン前提 のワイヤーフレーム
  42. 42. ワイヤーフレーム •レスポンシブデザインに対応するワイ ヤーフレームに求められるもの •レイアウト設計ではなく情報設計 •ピクセル数まで指定してあるワイヤー フレームと対極 •配置を細かく指定しない
  43. 43. ワイヤーフレーム •画面サイズが変わっても残るクライア ントの意図を書く •では、ワイヤーフレームの実物を • …と言いたいところですが、この部分はロフトワー クさんの素晴らしい仕事だったので私からはお伝え できマセン m(_ _)m プロモーションサイト構築|実績・事例|株式会社ロフトワーク http://www.loftwork.jp/case/detail/web/20131004_fusioncom.aspx
  44. 44. CMS組み込み済みの プロトタイプ
  45. 45. プロトタイプ •ワイヤーフレームをもとにCMSに組み 込んでしまった •FoundationをベースにいきなりCMS のテーマを作る •もちろんこの時点でデザインはしてい ない
  46. 46. プロトタイプ
  47. 47. プロトタイプ
  48. 48. プロトタイプ •最初期のテーマが残っていなくて前の ページの画面は、色彩設計が途中まで 反映されています… •最初期は完全にFoundationそのまま •コンテンツはダミーで登録
  49. 49. プロトタイプ •モバイル幅での動きやレイアウトにつ いて、サイトを作りながら(そして実 機で見ながら)検証していく •CMSの機能でどんどんレイアウトを 変えていく(ディレクターでも打合せ 中でもできる!)
  50. 50. プロトタイプ •追加機能はHTMLブロックなどを活用 してダミーで入れる •どんな機能かはワイヤーフレームなど ドキュメントで補完
  51. 51. プロトタイプ •運用のイメージもプロトタイプでクラ イアントとイメージを合わせておく •クライアントと完成時、運用時のイメ ージのずれがなくなる
  52. 52. プロトタイプ後に行なう デザイン
  53. 53. デザイン •デザイナーもプロトタイプを見てデザ インに落とし込んでいく •全ページデザインする必要はない •色彩設計とパーツのデザイン •基本的に無茶はしない(プロトタイプ と違うことをしない)
  54. 54. デザイン •ウェブデザインは得てして「機能設計 書」を兼ねて炎上する •→デザインとして確認してもらえると いうメリット
  55. 55. デザイン •結局どういうものを作るの? •FoundationやBootstrapのサイトが まさにお手本になる!
  56. 56. CSSフレームワークを活用 したコーディング
  57. 57. コーディング •Foundationはダウンロードしてその まま使わない! •フレームワークというよりライブラリ •便利なSassのMix-in集
  58. 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. 59. コーディング •「CSSフレームワークはデザインが制 限される」は間違い •既存サイトに一部Foundationを導入 することも可能 •includeすればHTMLが汚くならない •用意されているclass名もうまく併用 して楽をする
  60. 60. プロトタイプを活用した 機能開発
  61. 61. 機能開発 •標準で用意されているブロックはどん どんデザイン適用し、開発中にコンテ ンツ登録もどんどん進めてもらう •追加機能はブロック単位で開発を進め る •ブロック型CMSならではの分業制作 「1画面内で同時進行」
  62. 62. 機能開発 •コーディングを渡されてから取りかか り、コーディングと仕様が食い違って 炎上…そういう無駄な開発はしない
  63. 63. 機能開発 •SMARTサイトで開発したブロック
  64. 64. 機能開発 •SMARTサイトで開発したブロック
  65. 65. 機能開発 •以上!あとは標準機能で実現 •アドオンもOpen Graph Tagsとソー シャルボタンを挿入するものだけ
  66. 66. 検証→デザイン→実装 継続的な制作フロー
  67. 67. 要件定義 ワイヤーフレーム プロトタイプ 検証 デザイン 実装(組み込み)
  68. 68. 新しい制作フローの 予想外の利点
  69. 69. 予想外の利点 •始めからレスポンシブで作って行くこ とでモバイルでもナビゲーションが破 綻しない →モバイルで使い勝手が悪くならない •ブロック型CMSとの相性が良い →CSSフレームワークのグリッドシス テムの恩恵
  70. 70. レスポンシブデザイン、 新しい制作フローの 課題
  71. 71. 課題 •Foundation 4はIE8非対応 •やっぱりIE8に対応してほしい! •対応ブラウザは念入りに認識を合わせ ておきたい
  72. 72. 課題 •CSSフレームワークはブラックボック スなので、対応ブラウザでの検証もし っかり行われていて安心な反面、対応 ブラウザを増やすのは自作CSSより大 変 •結局Respond.jsで対応
  73. 73. 課題 •CSSフレームワークだけではナビゲー ションのレスポンシブ対応のバリエー ションが少ない •コーディングの工数がかかるポイント になる •それでも全体的には恩恵が大きい
  74. 74. 課題 •CSSフレームワークの選び方 •デザインではなく、設計と対応ブラウ ザで選ぶ •モバイルファーストかどうかは設計に 大きく関わる •今後はワイヤーフレームからモバイル ファーストにして行こう!
  75. 75. 課題 •表示・非表示のテクニックをどこまで 使うか?
  76. 76. 課題 •画像のクオリティと読み込み速度は? •Retina画像からpng8圧縮画像まで使 い分ける→ルール化までは至らず
  77. 77. 課題 •CMSのレイアウト編集機能とCSSフ レームワークの設計が食い違うことも •クライアントの混乱のもとになりかね ない
  78. 78. 課題 •CMSとCSSフレームワークのコミュ ニティの相互交流で解消へ •concrete5次期バージョンでは BootstrapやFoundationのグリッド システムとの親和性向上
  79. 79. 課題 •ワークフローに関係者全員が慣れてい ない •継続が大事!
  80. 80. 課題はあるが、 クライアント満足度は高く コスト上のメリットも!
  81. 81. 最終的にサイトを利用する ユーザーに近い、 プロトタイプを軸に関係者 の目線を揃えられる
  82. 82. 制約の多いレスポンシブウ ェブデザインだからこそ、 静的なデザイン中心から コンテンツ中心に発想の 転換ができる
  83. 83. ご清聴ありがとうございました! www.concrete5.org (コミュニティ/マーケットプレイス) concrete5-japan.org (日本語コミュニティ) concrete5.co.jp (コンクリートファイブジャパン株式会社)

×