Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Nite in SAPPORO x a-blog cms

1,371 views

Published on

2012年11月22日・23日に開催された「a-blog cms Training Camp 2012 Autumn」の発表スライドです。

  • Be the first to comment

CSS Nite in SAPPORO x a-blog cms

  1. 1. CSS Nite in SAPPORO a-blog cms a-blog cms Training Camp 2012 Autumn : 2012.11.22 (Thu) Seiko Kuchida @webbingstudio
  2. 2. CSS Nite in SAPPOROの公式サイトは a-blog cms http://cssnite-sapporo.jp/
  3. 3. サイトの裏側をご紹介企画:情報設計制作:考慮したところ公開後:課題や調整
  4. 4. 企画:情報設計
  5. 5. 札幌版のWeb担当 口田 益子 制作・管理 原稿執筆新規イベント追加 新着の更新
  6. 6. CMSベースのサイトを作ると 立ち上げの作業量が ハンパない
  7. 7. かといって適当にサイトを作ると絶対あとで後悔する
  8. 8. かといって 適当にサイトを作ると 絶対あとで後悔する しかも、a-blog cmsは ディレクトリ構造がカテゴリーの条件分岐に影響する
  9. 9. 最初のサイト構造・ 情報設計だけはきっちりすることにした
  10. 10. サイト構造を a-blog cmsの 策定 運用に合うよう調整 他のメンバーに意見をもらい ワイヤーや導線を検討
  11. 11. こういう構造になった親ブログ 子ブログホーム Vol.7 Vol.5新着情報ヘルプデスク観光情報 Vol.6 Vol.4
  12. 12. こういう構造になった親ブログ 子ブログホーム Vol.7 Vol.5新着情報 最新回の複製ヘルプデスク観光情報 Vol.6 Vol.4
  13. 13. ホームが最新回の複製なのは スマートフォン対策 各回ページに行かなくても すぐ情報を見られるように 管理作業の省力化
  14. 14. 制作にかかった時間構造の策定:実質5日デザイン:5時間テーマ作成:10時間追加調整:その後一ヶ月
  15. 15. 制作にかかった時間構造の策定:実質5日 構築とコーディングは 同時進行デザイン:5時間テーマ作成:10時間追加調整:その後一ヶ月
  16. 16. 制作:考慮したところ
  17. 17. (1)2種類のテーマ
  18. 18. 2種類のテーマメインコンテンツ用固定ページ+新着情報イベント告知用メイン画像+各回の情報
  19. 19. 新しいイベントを告知するときは 新規ブログ作成と トップページの調整で済むように 子ブログのテーマを工夫しました koblogcssnite201207 @cssnite201207
  20. 20. a-blog cmsはブログ間でコンフィグとエントリーを複製できる
  21. 21. a-blog cmsはブログ間でコンフィグとエントリーを複製できる 回を重ねるほど 前の使い回しができて 楽になってきた!
  22. 22. (2)ユニット機能
  23. 23. 本文レイアウトがかなり細かいが ほとんど、a-blog cmsの ユニットで実現できている
  24. 24. フォーマットの自作
  25. 25. ユニットグループ
  26. 26. マークアップが 統一化されているので今後のリニュもしやすい…でも、使いすぎには注意
  27. 27. マークアップが 統一化されているので今後のリニュもしやすい 更新作業の煩雑化…でも、使いすぎには注意
  28. 28. 「非表示」が地味に便利
  29. 29. (3)どこでも編集ボタン
  30. 30. ブログ・モジュールIDに関連するパーツにボタンを付けました
  31. 31. ブログ・モジュールIDに関連するパーツにボタンを付けました
  32. 32. 管理メニューを編集するのは このテーマを作った 私(うぇびん)だけなので 本来はなくてもいい
  33. 33. でも、こうしておけば 細かい設定方法を覚えておかなくて済む
  34. 34. でも、こうしておけば 細かい設定方法を覚えておかなくて済む管理作業の効率化
  35. 35. その他の工夫2種類の協賛バナーモジュールを使用OGPソーシャル連携を強化
  36. 36. og:imageの扱いEntry_Summaryを使えば、 エントリー中のメイン画像を og:imageに指定できる…でも、敢えて指定してません
  37. 37. 訪問者に画像を選ばせた方がよいのでは? <せっかくマーケティング
  38. 38. 運営側が画像を指定するのが はたしていいことなのか? 写真が豊富なページなら、閲覧者が画像を選ぶ楽しみを 提供できるかも?
  39. 39. しかし、スマホでは 画像を選べないのでやっぱり指定した方がいいかも ・・・考え中
  40. 40. 公開後:課題や調整
  41. 41. ふたつのイベントを 同時に告知
  42. 42. 完全に想定外…ふたつのイベントを 同時に告知
  43. 43. 新着情報のタイトル
  44. 44. 「全てのページが『新着情報』になってますよ」と、Webマスターツールから 突っ込みが入る
  45. 45. 「全てのページが『新着情報』になってますよ」と、Webマスターツールから 突っ込みが入る 「新着情報」の後ろに ページ番号を出すことに
  46. 46. %{CATEGORY_NAME} (%{PAGE}) 新着情報 (1) 新着情報 (2) 新着情報 (3) ・・・
  47. 47. %{CATEGORY_NAME} (%{PAGE}) 新着情報 (1) ← ← 新着情報 (2) 気になる 新着情報 (3) ・・・
  48. 48. できれば1ページ目は ページ番号を 出したくない
  49. 49. できれば1ページ目は ページ番号を 出したくない 「1ページ目のとき」というタッチモジュールができるとうれしいなー :D
  50. 50. 余談:発表後のアドバイス グローバル変数と インクルードでできるよ! できるのか?できるのか?? やってみるっ><
  51. 51. まとめ
  52. 52. CMSは作って終わりではない 想定通りに運用できてる? 効果の割に面倒じゃない? もっといい方法はない?
  53. 53. CMSの利点を生かす 新規イベント追加時は 最低限の投稿が できるところまで制作 テーマの細かい調整とコンテンツの流し込みは 同時進行
  54. 54. a-blog cmsは構造をきちんとしておけば 改修しやすいCMS
  55. 55. フィードバックをもらいつつ よりよいサイトに していきたいな
  56. 56. ぜひ札幌に来てね (キラキラフォローアップ参加もよろしくね
  57. 57. ありがとうございました http://webbingstudio.com/

×