CSS Nite in SAPPORO x a-blog cms

57
CSS Nite in SAPPORO × a-blog cms a-blog cms Training Camp 2012 Autumn : 2012.11.22 (Thu) Seiko Kuchida @webbingstudio

description

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

Transcript of CSS Nite in SAPPORO x a-blog cms

Page 1: CSS Nite in SAPPORO x a-blog cms

CSS Nite in SAPPORO×

a-blog cmsa-blog cms Training Camp 2012 Autumn : 2012.11.22 (Thu)

Seiko Kuchida @webbingstudio

Page 2: CSS Nite in SAPPORO x a-blog cms

CSS Nite in SAPPOROの公式サイトはa-blog cms

http://cssnite-sapporo.jp/

Page 3: CSS Nite in SAPPORO x a-blog cms

サイトの裏側をご紹介

✓企画:情報設計✓制作:考慮したところ✓公開後:課題や調整

Page 4: CSS Nite in SAPPORO x a-blog cms

企画:情報設計

Page 5: CSS Nite in SAPPORO x a-blog cms

制作・管理新規イベント追加

原稿執筆新着の更新

札幌版のWeb担当

口田 益子

Page 6: CSS Nite in SAPPORO x a-blog cms

CMSベースのサイトを作ると立ち上げの作業量がハンパない

Page 7: CSS Nite in SAPPORO x a-blog cms

かといって適当にサイトを作ると絶対あとで後悔する

Page 8: CSS Nite in SAPPORO x a-blog cms

かといって適当にサイトを作ると絶対あとで後悔する

しかも、a-blog cmsはディレクトリ構造が

カテゴリーの条件分岐に影響する

Page 9: CSS Nite in SAPPORO x a-blog cms

最初のサイト構造・情報設計だけは

きっちりすることにした

Page 10: CSS Nite in SAPPORO x a-blog cms

サイト構造を策定

a-blog cmsの運用に合うよう調整

他のメンバーに意見をもらいワイヤーや導線を検討

Page 11: CSS Nite in SAPPORO x a-blog cms

ホーム

こういう構造になった

新着情報ヘルプデスク観光情報

Vol.7

Vol.6

Vol.5

Vol.4

親ブログ 子ブログ

Page 12: CSS Nite in SAPPORO x a-blog cms

ホーム

こういう構造になった

新着情報ヘルプデスク観光情報

Vol.7

Vol.6

Vol.5

Vol.4

親ブログ 子ブログ

最新回の複製

Page 13: CSS Nite in SAPPORO x a-blog cms

ホームが最新回の複製なのは

✓スマートフォン対策 各回ページに行かなくても すぐ情報を見られるように

✓管理作業の省力化

Page 14: CSS Nite in SAPPORO x a-blog cms

制作にかかった時間✓構造の策定:実質5日✓デザイン:5時間✓テーマ作成:10時間✓追加調整:その後一ヶ月

Page 15: CSS Nite in SAPPORO x a-blog cms

制作にかかった時間✓構造の策定:実質5日✓デザイン:5時間✓テーマ作成:10時間✓追加調整:その後一ヶ月

構築とコーディングは同時進行

Page 16: CSS Nite in SAPPORO x a-blog cms

制作:考慮したところ

Page 17: CSS Nite in SAPPORO x a-blog cms

(1)2種類のテーマ

Page 18: CSS Nite in SAPPORO x a-blog cms

2種類のテーマ

✓メインコンテンツ用 固定ページ+新着情報

✓イベント告知用 メイン画像+各回の情報

Page 19: CSS Nite in SAPPORO x a-blog cms

新しいイベントを告知するときは新規ブログ作成と

トップページの調整で済むように子ブログのテーマを工夫しました

cssnite201207 koblog@cssnite201207

Page 20: CSS Nite in SAPPORO x a-blog cms

a-blog cmsはブログ間でコンフィグとエントリーを複製できる

Page 21: CSS Nite in SAPPORO x a-blog cms

a-blog cmsはブログ間でコンフィグとエントリーを複製できる

回を重ねるほど前の使い回しができて楽になってきた!

Page 22: CSS Nite in SAPPORO x a-blog cms

(2)ユニット機能

Page 23: CSS Nite in SAPPORO x a-blog cms

本文レイアウトがかなり細かいがほとんど、a-blog cmsのユニットで実現できている

Page 24: CSS Nite in SAPPORO x a-blog cms

フォーマットの自作

Page 25: CSS Nite in SAPPORO x a-blog cms

ユニットグループ

Page 26: CSS Nite in SAPPORO x a-blog cms

マークアップが統一化されているので今後のリニュもしやすい

…でも、使いすぎには注意

Page 27: CSS Nite in SAPPORO x a-blog cms

マークアップが統一化されているので今後のリニュもしやすい

…でも、使いすぎには注意

更新作業の煩雑化

Page 28: CSS Nite in SAPPORO x a-blog cms

「非表示」が地味に便利

Page 29: CSS Nite in SAPPORO x a-blog cms

(3)どこでも編集ボタン

Page 30: CSS Nite in SAPPORO x a-blog cms

ブログ・モジュールIDに関連するパーツにボタンを付けました

Page 31: CSS Nite in SAPPORO x a-blog cms

ブログ・モジュールIDに関連するパーツにボタンを付けました

Page 32: CSS Nite in SAPPORO x a-blog cms

管理メニューを編集するのはこのテーマを作った

私(うぇびん)だけなので本来はなくてもいい

Page 33: CSS Nite in SAPPORO x a-blog cms

でも、こうしておけば細かい設定方法を覚えておかなくて済む

Page 34: CSS Nite in SAPPORO x a-blog cms

でも、こうしておけば細かい設定方法を覚えておかなくて済む

管理作業の効率化

Page 35: CSS Nite in SAPPORO x a-blog cms

その他の工夫

✓2種類の協賛バナーモジュールを使用

✓OGPソーシャル連携を強化

Page 36: CSS Nite in SAPPORO x a-blog cms

og:imageの扱い

Entry_Summaryを使えば、エントリー中のメイン画像をog:imageに指定できる

…でも、敢えて指定してません

Page 37: CSS Nite in SAPPORO x a-blog cms

訪問者に画像を選ばせた方がよいのでは?

<せっかくマーケティング

Page 38: CSS Nite in SAPPORO x a-blog cms

運営側が画像を指定するのがはたしていいことなのか?

写真が豊富なページなら、閲覧者が画像を選ぶ楽しみを

提供できるかも?

Page 39: CSS Nite in SAPPORO x a-blog cms

しかし、スマホでは画像を選べないので

やっぱり指定した方がいいかも

・・・考え中

Page 40: CSS Nite in SAPPORO x a-blog cms

公開後:課題や調整

Page 41: CSS Nite in SAPPORO x a-blog cms

ふたつのイベントを同時に告知

Page 42: CSS Nite in SAPPORO x a-blog cms

ふたつのイベントを同時に告知

完全に想定外…

Page 43: CSS Nite in SAPPORO x a-blog cms

新着情報のタイトル

Page 44: CSS Nite in SAPPORO x a-blog cms

「全てのページが『新着情報』になってますよ」と、Webマスターツールから

突っ込みが入る

Page 45: CSS Nite in SAPPORO x a-blog cms

「全てのページが『新着情報』になってますよ」と、Webマスターツールから

突っ込みが入る

「新着情報」の後ろにページ番号を出すことに

Page 46: CSS Nite in SAPPORO x a-blog cms

%{CATEGORY_NAME} (%{PAGE})

新着情報 (1)新着情報 (2)新着情報 (3)・・・

Page 47: CSS Nite in SAPPORO x a-blog cms

%{CATEGORY_NAME} (%{PAGE})

新着情報 (1)新着情報 (2)新着情報 (3)・・・

← ← 気になる

Page 48: CSS Nite in SAPPORO x a-blog cms

できれば1ページ目はページ番号を出したくない

Page 49: CSS Nite in SAPPORO x a-blog cms

できれば1ページ目はページ番号を出したくない

「1ページ目のとき」というタッチモジュールができるとうれしいなー :D

Page 50: CSS Nite in SAPPORO x a-blog cms

グローバル変数とインクルードでできるよ!

余談:発表後のアドバイス

できるのか?できるのか??やってみるっ><

Page 51: CSS Nite in SAPPORO x a-blog cms

まとめ

Page 52: CSS Nite in SAPPORO x a-blog cms

CMSは作って終わりではない

✓想定通りに運用できてる?✓効果の割に面倒じゃない?✓もっといい方法はない?

Page 53: CSS Nite in SAPPORO x a-blog cms

CMSの利点を生かす

新規イベント追加時は最低限の投稿ができるところまで制作

テーマの細かい調整とコンテンツの流し込みは

同時進行

Page 54: CSS Nite in SAPPORO x a-blog cms

a-blog cmsは構造をきちんとしておけば改修しやすいCMS

Page 55: CSS Nite in SAPPORO x a-blog cms

フィードバックをもらいつつよりよいサイトにしていきたいな

Page 56: CSS Nite in SAPPORO x a-blog cms

ぜひ札幌に来てね (キラキラ

フォローアップ参加もよろしくね

Page 57: CSS Nite in SAPPORO x a-blog cms

ありがとうございましたhttp://webbingstudio.com/