SlideShare a Scribd company logo
CSS Nite in SAPPORO

     a-blog cms
  a-blog cms Training Camp 2012 Autumn : 2012.11.22 (Thu)
                           Seiko Kuchida @webbingstudio
CSS Nite in SAPPOROの公式サイトは
          a-blog cms
      http://cssnite-sapporo.jp/
サイトの裏側をご紹介

企画:情報設計

制作:考慮したところ

公開後:課題や調整
企画:情報設計
札幌版のWeb担当




  口田        益子
 制作・管理      原稿執筆
新規イベント追加   新着の更新
CMSベースのサイトを作ると
   立ち上げの作業量が
     ハンパない
かといって
適当にサイトを作ると
絶対あとで後悔する
かといって
 適当にサイトを作ると
 絶対あとで後悔する

  しかも、a-blog cmsは
   ディレクトリ構造が
カテゴリーの条件分岐に影響する
最初のサイト構造・
  情報設計だけは
きっちりすることにした
サイト構造を    a-blog cmsの
  策定     運用に合うよう調整




   他のメンバーに意見をもらい
   ワイヤーや導線を検討
こういう構造になった
親ブログ        子ブログ

ホーム      Vol.7   Vol.5
新着情報
ヘルプデスク
観光情報     Vol.6   Vol.4
こういう構造になった
親ブログ          子ブログ

ホーム        Vol.7   Vol.5
新着情報     最新回の複製
ヘルプデスク
観光情報       Vol.6   Vol.4
ホームが最新回の複製なのは

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


 管理作業の省力化
制作にかかった時間
構造の策定:実質5日

デザイン:5時間

テーマ作成:10時間

追加調整:その後一ヶ月
制作にかかった時間
構造の策定:実質5日
   構築とコーディングは
      同時進行
デザイン:5時間

テーマ作成:10時間

追加調整:その後一ヶ月
制作:考慮したところ
(1)2種類のテーマ
2種類のテーマ

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

イベント告知用
メイン画像+各回の情報
新しいイベントを告知するときは
      新規ブログ作成と
  トップページの調整で済むように
  子ブログのテーマを工夫しました




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


   回を重ねるほど
 前の使い回しができて
  楽になってきた!
(2)ユニット機能
本文レイアウトがかなり細かいが
  ほとんど、a-blog cmsの
  ユニットで実現できている
フォーマットの自作
ユニットグループ
マークアップが
 統一化されているので
今後のリニュもしやすい


…でも、使いすぎには注意
マークアップが
 統一化されているので
今後のリニュもしやすい
   更新作業の煩雑化



…でも、使いすぎには注意
「非表示」が地味に便利
(3)どこでも編集ボタン
ブログ・モジュールIDに
関連するパーツにボタンを付けました
ブログ・モジュールIDに
関連するパーツにボタンを付けました
管理メニューを編集するのは
   このテーマを作った
 私(うぇびん)だけなので
   本来はなくてもいい
でも、こうしておけば
 細かい設定方法を
覚えておかなくて済む
でも、こうしておけば
 細かい設定方法を
覚えておかなくて済む



管理作業の効率化
その他の工夫

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

OGP
ソーシャル連携を強化
og:imageの扱い

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

…でも、敢えて指定してません
訪問者に画像を
選ばせた方がよいのでは?




    <せっかくマーケティング
運営側が画像を指定するのが
 はたしていいことなのか?

 写真が豊富なページなら、
閲覧者が画像を選ぶ楽しみを
   提供できるかも?
しかし、スマホでは
   画像を選べないので
やっぱり指定した方がいいかも

        ・・・考え中
公開後:課題や調整
ふたつのイベントを
  同時に告知
完全に想定外…




ふたつのイベントを
  同時に告知
新着情報のタイトル
「全てのページが
『新着情報』になってますよ」
と、Webマスターツールから
   突っ込みが入る
「全てのページが
『新着情報』になってますよ」
と、Webマスターツールから
   突っ込みが入る


 「新着情報」の後ろに
 ページ番号を出すことに
%{CATEGORY_NAME} (%{PAGE})



       新着情報 (1)
       新着情報 (2)
       新着情報 (3)
        ・・・
%{CATEGORY_NAME} (%{PAGE})



       新着情報 (1)    ←	 ←	 
       新着情報 (2)
                   気になる
       新着情報 (3)
        ・・・
できれば1ページ目は
  ページ番号を
  出したくない
できれば1ページ目は
  ページ番号を
  出したくない

 「1ページ目のとき」
というタッチモジュールが
できるとうれしいなー :D
余談:発表後のアドバイス

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


   できるのか?できるのか??
      やってみるっ><
まとめ
CMSは作って終わりではない

 想定通りに運用できてる?

 効果の割に面倒じゃない?

 もっといい方法はない?
CMSの利点を生かす

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


 テーマの細かい調整と
コンテンツの流し込みは
       同時進行
a-blog cmsは
構造をきちんとしておけば
  改修しやすいCMS
フィードバックをもらいつつ
   よりよいサイトに
    していきたいな
ぜひ札幌に来てね
   (キラキラ
フォローアップ参加もよろしくね
ありがとうございました
 http://webbingstudio.com/

More Related Content

PDF
WordPress ユーザーのための a-blog cms 入門
PPTX
自由自在にWebサイト作るためのbaserCMS入門
PDF
WordPressで複数のプラグインをまとめて一気にインストールする方法
PDF
エンジニアとデザイナーとの距離
PDF
サーバ管理はサーバレスで
PPTX
WordPress で強力にお勧めしたいプラグインのお話
PDF
Word bench埼玉2017年2月
PDF
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
WordPress ユーザーのための a-blog cms 入門
自由自在にWebサイト作るためのbaserCMS入門
WordPressで複数のプラグインをまとめて一気にインストールする方法
エンジニアとデザイナーとの距離
サーバ管理はサーバレスで
WordPress で強力にお勧めしたいプラグインのお話
Word bench埼玉2017年2月
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編

What's hot (20)

PDF
Jawsdays2014 AMIMOTO ハンズオン
PDF
20120826 ec cube-handson
PDF
レスポンシブWebデザイン【基礎編】
PDF
Concrete5で運用をデザイン
PDF
イマドキのCMSトレンドからWeb運用を再考する
PDF
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
PDF
世界一即戦力なCMS
PDF
はじめてのWordPress勉強会 vol.03 Word Pressの基本操作
PDF
コンポーネント指向と余白の設計
KEY
WordPress 3.4 〜新機能や変更点〜
PDF
グローバルなCSSコンポーネントを避ける
PDF
WordPress はどこへ向かう?〜コミュニティが支える未来〜
PDF
a-blog cms 基本機能でつくるスタンプラリー
PPTX
jQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズ
PDF
Enduring CSS
PDF
WordPressで行う継続的インテグレーションのススメ
PPTX
Chrome GPO Availability
PDF
Ultrafast WordPress Virtual Word camp2015
PDF
駆け足で紹介する concrete5のおすすめ機能5選
PDF
a-sap 07セッション「Movable Typeとa-blog cmsの今」
Jawsdays2014 AMIMOTO ハンズオン
20120826 ec cube-handson
レスポンシブWebデザイン【基礎編】
Concrete5で運用をデザイン
イマドキのCMSトレンドからWeb運用を再考する
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
世界一即戦力なCMS
はじめてのWordPress勉強会 vol.03 Word Pressの基本操作
コンポーネント指向と余白の設計
WordPress 3.4 〜新機能や変更点〜
グローバルなCSSコンポーネントを避ける
WordPress はどこへ向かう?〜コミュニティが支える未来〜
a-blog cms 基本機能でつくるスタンプラリー
jQuery UI Tabs で効率よくタブ機能を実現しよう! 14.05.23 HTML5 jQueryビギナーズ
Enduring CSS
WordPressで行う継続的インテグレーションのススメ
Chrome GPO Availability
Ultrafast WordPress Virtual Word camp2015
駆け足で紹介する concrete5のおすすめ機能5選
a-sap 07セッション「Movable Typeとa-blog cmsの今」
Ad

Viewers also liked (20)

PDF
Galage labsサーバー部6U自己紹介
PDF
a-blog cms Training Camp 2014 Autumn「来年作るべきCMSのテーマとは?」
PDF
CMSテーマ「logical jp」について
PDF
20150615_改めて知っておきたい、MovableTypeの魅力
PDF
a-sap08「a-blog cmsとMovable Type」
PDF
a-blog cmsのインポート機能を使いこなす
PDF
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
PDF
a-sap10「モジュールIDを理解する」
PDF
プロ用CMSフレームワークテーマ「echo」のご紹介
PDF
自動化ツール「Grunt.js」について
PDF
a-sap09「a-blog cmsとWordPress」
PPTX
MovableTypeの実務制作で考慮すること
PDF
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
PDF
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
PDF
a-sap06「カスタムフィールドを使いこなす」
PPTX
a-sap04「ちょっとすごい!a-blog cmsのカスタムフィールド」
PDF
SaCSS vol.26「ちょっと本格的なFacebookページを作ろう」
PDF
a-sap 02セッション「a-blog cmsのモジュールを理解する」
PPT
DevDo:WebbingStudio(090426)
PDF
a-sap 01セッション「まずは導入!a-blog cmsにおすすめの案件と注意点」
Galage labsサーバー部6U自己紹介
a-blog cms Training Camp 2014 Autumn「来年作るべきCMSのテーマとは?」
CMSテーマ「logical jp」について
20150615_改めて知っておきたい、MovableTypeの魅力
a-sap08「a-blog cmsとMovable Type」
a-blog cmsのインポート機能を使いこなす
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
a-sap10「モジュールIDを理解する」
プロ用CMSフレームワークテーマ「echo」のご紹介
自動化ツール「Grunt.js」について
a-sap09「a-blog cmsとWordPress」
MovableTypeの実務制作で考慮すること
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
a-sap06「カスタムフィールドを使いこなす」
a-sap04「ちょっとすごい!a-blog cmsのカスタムフィールド」
SaCSS vol.26「ちょっと本格的なFacebookページを作ろう」
a-sap 02セッション「a-blog cmsのモジュールを理解する」
DevDo:WebbingStudio(090426)
a-sap 01セッション「まずは導入!a-blog cmsにおすすめの案件と注意点」
Ad

Similar to CSS Nite in SAPPORO x a-blog cms (20)

PDF
CMSとIAで変化ヲ抱擁セヨ
PDF
IA2010 - アジャイル時代のWeb解析事例
PDF
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
PDF
制作者にとってのWeb解析
PDF
a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」
PDF
Apiドキュメンテーションツールを使いこなす【api blueprint編】
PDF
2021-03-05.osc online-spring(connect-cms)
PDF
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
PDF
チェックポイント(1)(2)(3) デモンストレーション
PDF
Htmlコーディングの効率化 後編
PDF
Lambda EdgeとALB認証を導入した話
PPTX
2012 05-19第44回cocoa勉強会発表資料
PPTX
シラサギハンズオン 2016 05-26
PPTX
Team Foundation Server/Visual Studio Onlineアップデート(2015/07/22)
PDF
自分達のサイボウズ office-を開発しよう
KEY
WordPressってブログじゃないの?
PDF
20150606 CMS Fun名古屋 vol.2 baserCMSのご紹介
PDF
自分達のサイボウズ Office を開発しよう
PDF
Lotus iNotes をカスタマイズしてみよう
PDF
コードをさわらずにビジネスサイトを作ろう!
CMSとIAで変化ヲ抱擁セヨ
IA2010 - アジャイル時代のWeb解析事例
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
制作者にとってのWeb解析
a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」
Apiドキュメンテーションツールを使いこなす【api blueprint編】
2021-03-05.osc online-spring(connect-cms)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
チェックポイント(1)(2)(3) デモンストレーション
Htmlコーディングの効率化 後編
Lambda EdgeとALB認証を導入した話
2012 05-19第44回cocoa勉強会発表資料
シラサギハンズオン 2016 05-26
Team Foundation Server/Visual Studio Onlineアップデート(2015/07/22)
自分達のサイボウズ office-を開発しよう
WordPressってブログじゃないの?
20150606 CMS Fun名古屋 vol.2 baserCMSのご紹介
自分達のサイボウズ Office を開発しよう
Lotus iNotes をカスタマイズしてみよう
コードをさわらずにビジネスサイトを作ろう!

CSS Nite in SAPPORO x a-blog cms