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.

a-blog cms 事例紹介(TalkNote Vol.1)

1,098 views

Published on

a-blog cmsを利用したサイトの紹介とユーザー視点の評価について(2010.1.15 TalkNote Vol.1にて)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

a-blog cms 事例紹介(TalkNote Vol.1)

  1. 1. a-blog cms 事例紹介& more Talk Note Vol.1 2011.1.15 ゃべ ゃすひと 1
  2. 2. ‣事例のご紹介 ‣a-blog cmsを選ぶ理由 ‣学習コスト 今日のお題 2
  3. 3. 名前:ゃべゃすひと 職業:兼業主夫    Web制作    (フリーランス) データファームさんと協業してます カッコよく言うと ユニット 3 自己紹介
  4. 4. 静岡県出身・長泉町在住 ・高校卒業まで静岡市で育つ ・静岡の某社でWeb業界に飛び込む ・焼津の某社に勤務していたことも 4
  5. 5. 5 フェレット飼ってます
  6. 6. 6
  7. 7. 7 よろしくお願いします
  8. 8. 8 ‣事例のご紹介 ‣a-blog cmsを選ぶ理由 ‣学習コスト 今日のお題
  9. 9. ‣ 企業サイト(セミナー) ‣ ECサイト ‣ イベントサイト 9 制作事例 もっとあるのに大人の事情で紹介できないのが残念
  10. 10. 企業サイト(セミナー) FM-Tech 様 http://www.fmtech.jp/ 10
  11. 11. 11
  12. 12. ‣ サイトリニューアル案件 ‣ 作業範囲:サイト構築一式 ‣ 全ページ CMSから出力 12 制作事例 > セミナー
  13. 13. 13 制作事例 > セミナー
  14. 14. 14 制作事例 > セミナー
  15. 15. 15 制作事例 > セミナー
  16. 16. 16 制作事例 > セミナー
  17. 17. 17 制作事例 > セミナー
  18. 18. (ほぼ)全ページをCMSから出力 ‣ 工程(特に設計)の見直し ‣ 管理画面のユーザビリティ 18 制作事例 > セミナー
  19. 19. 19 工程の見直し 制作事例 > セミナー
  20. 20. 20 サイト設計 ↓ デザイン制作 ↓ コーディング 制作事例 > セミナー 手戻り発生… 従来のフロー
  21. 21. 21 サイト設計 ↓ テンプレートデザイン ↓ コーディング+CMS 制作事例 > セミナー 手戻りにも CMSで柔軟に対応 設計の重要性UP 試行錯誤中のフロー
  22. 22. 22 FM-tech_file.OPML 10/08/23 10:55 トップページ /top.html ([MOD] イメージ写真) /topimage ([MOD] あいさつ一言記載欄) /headline ([MOD] 最新情報一覧) /newslist ([MOD] プレスリリース) /presslist ([MOD] 運営者バナー) /unnei ([MOD] FMロゴ) /fmlogo [ct] コース案内(一覧) courcelist/index.html [ct] スケジュール schedule/index.html [ct] お申し込み booking/index.html [ct] トレーニングルーム案内 room/index.html [ct] トレーニングスタッフ紹介(一覧) staff/index.html [ct] 企業向け団体トレーニング cptraining/index.html [ct] FM-Techとは about/index.html [ct] FAQ(一覧) faq/index.html [ct] お客様の声(一覧) voice/index.html [ct] お客様連絡情報 customer/index.html [ct] お問い合わせ contuct/index.html [ct] プライバシーポリシー policy/index.html [ct] 特定商取引に基づく表記 law/index.html [Ent] コース案内(詳細) /detail.html [Ent] トレーニングスタッフ紹介(詳細) /detail.html [Ent] FAQ(詳細) /detail.html [Ent] お客様の声(詳細) /detail.html [ct] 講座情報(一覧) cource/index.html [ct] お知らせ(一覧) news/index.html [ct] プレスリリース(一覧) press/index.html [Fom] お問い合わせ項目 /detail.html [Ent] 講座情報 (詳細) /detail.html [Ent] お知らせ (詳細) /detail.html [Ent] プレスリ リース(詳細) /detail.html [Fom] 内容確認 /detail.html [Fom] 送信完了 /detail.html サイトマップ 制作事例 > セミナー
  23. 23. 23 使用サイトイット一覧 8 9 1 2 3 4 10 写真+キャプション 写真+キャプション記事 で作られる レイアウトです。 記事リスト 主に一覧で構成される レイアウトです。 記事詳細 CMSで作成するため 写真、地図などを 組み合わせが可能です 記事詳細+申し込み ページ上部に 開催中イベント +申し込みボタン 写真一覧 写真をクリックすると 詳細に移動します。 写真の簡易説明となる キャプションあり 写真+記事 写真をクリックすると 詳細に移動します。 写真の簡易説明となる キャプションあり 申し込みフォーム お問い合わせなどに 使います。 サイトイット 制作事例 > セミナー テンプレート検討
  24. 24. 24 トップページ (5) [ct] 企業向け団体ト レーニング (6) [ct] FM-Techとは (7) [ct] FAQ(一覧) (1) [Ent] FAQ(詳細) (8) [ct] お客様の声(一 覧) 提案コンテンツです (9) [Ent] お客様の声(詳 細) 提案コンテンツです 制作事例 > セミナー テンプレートを サイトマップに反映
  25. 25. 25 使用サイトイット一覧 8 9 1 2 3 4 5 6 7 10 写真+キャプション 写真+キャプション記事 で作られる レイアウトです。 記事リスト 主に一覧で構成される レイアウトです。 記事詳細 CMSで作成するため 写真、地図などを 組み合わせが可能です 記事詳細+申し込み ページ上部に 開催中イベント +申し込みボタン 記事リスト+申し込み ページ上部に 開催中イベント +申し込みボタン 見出し画像+文章 大きく見出し画像をいれ 文書が入ります。 ブロック記事 「質問+答え」のような タイプのレイアウトです。 写真一覧 写真をクリックすると 詳細に移動します。 写真の簡易説明となる キャプションあり 写真+記事 写真をクリックすると 詳細に移動します。 写真の簡易説明となる キャプションあり 申し込みフォーム お問い合わせなどに 使います。 サイトイット って何? ページの「見た目」のイメージです。 だいたいこんなレイアウトになるよ。 利用するレイアウトの配置にルールを きめてまとめたものです。 トップページ (5) [ct] 企業向け団体ト レーニング (6) [ct] FM-Techとは (7) [ct] FAQ(一覧) (1) [Ent] FAQ(詳細) (8) [ct] お客様の声(一 覧) 提案コンテンツです (9) [Ent] お客様の声(詳 細) 提案コンテンツです なし [ct] お客様連絡情報 このカテゴリは実装時は隠 す (2) [ct] 講座情報(一覧) (3) [Ent] 講座情報(詳 細) (2) [ct] お知らせ(一覧) (3) [Ent] お知らせ(詳 細) (2) [ct] プレスリリース (一覧) (3) [Ent] プレスリリース (詳細) テンプレート サイトマップ 制作事例 > セミナー 反映 検証
  26. 26. 26 制作事例 > セミナー ワイヤーフレーム
  27. 27. 27 制作事例 > セミナー テンプレートデザイン
  28. 28. 28 制作事例 > セミナー 完成ページ
  29. 29. 29 大きな手戻りは 0に減少 制作者にも高いハードル 制作事例 > セミナー
  30. 30. 30 管理画面のユーザビリティ 制作事例 > セミナー
  31. 31. 31 CMSの管理画面って わかりにくいですよね 制作事例 > セミナー
  32. 32. 32 何がなんだか…
  33. 33. クライアントに 苦痛を強いてませんか? 33
  34. 34. 34 制作事例 > セミナー 通常の表示
  35. 35. 35 ログイン時の表示 ログイン時のみ 該当部分の管理画面へ のリンクを表示 制作事例 > セミナー
  36. 36. 36 制作事例 > セミナー 編集ページ
  37. 37. 37 ログイン時の表示 編集ページへリンク 編集ページへリンク 編集ページへリンク 編集ページへリンク 制作事例 > セミナー
  38. 38. 更新頻度アップ? 38
  39. 39. ECサイト ドラッグスコンドウ 様 http://drugskondo.com/ 39
  40. 40. 40
  41. 41. ‣ 某社ECカートからの移行 ‣ 作業範囲:サイト構築一式 ‣ ショップ拡張プラグイン利用 (注文フォーム・カート・受注管理etcの追加) 41 制作事例 > ECサイト
  42. 42. 42 制作事例 > ECサイト
  43. 43. 43 制作事例 > ECサイト
  44. 44. 44 制作事例 > ECサイト
  45. 45. 45 制作事例 > ECサイト
  46. 46. 46 制作事例 > ECサイト
  47. 47. 47 制作事例 > ECサイト
  48. 48. LPO対策 ‣ リファラー情報から 検索ワードを取得・利用 48 制作事例 > ECサイト
  49. 49. 49 制作事例 > ECサイト 通常の表示(キーワードなし)
  50. 50. 50 制作事例 > ECサイト LPO表示 検索キーワードに 反応して自動挿入
  51. 51. 52 制作事例 > ECサイト LPO対策の裏側 ‣ リファラー情報から 検索ワードを取得・利用 ‣ 上記ワードでサイト内検索、 検索結果を追加で読み込み
  52. 52. ライト級からヘビー級まで カスタマイズの幅が広い 53
  53. 53. イベントサイト CSS Nite in SHIZUOKA http://cssnite-shizuoka.jp/ 54
  54. 54. 55 制作事例 > イベントサイト
  55. 55. ‣ 新規作成案件 ‣ 作業範囲:サイト構築一式 ‣ 主催イベント( 自社サイト) 56 制作事例 > イベントサイト
  56. 56. 57 制作事例 > イベントサイト
  57. 57. 58 制作事例 > イベントサイト
  58. 58. 59 制作事例 > イベントサイト
  59. 59. 60 制作事例 > イベントサイト
  60. 60. 61 制作事例 > イベントサイト
  61. 61. 拡張性を活かす ‣ HTML5 + CSS3 ‣ CMSが苦手な機能は ほかのシステムと連携 62 制作事例 > イベントサイト
  62. 62. 63 HTML5 + CSS3 制作事例 > セミナー
  63. 63. 64 制作事例 > イベントサイト グラデーション 角丸 テキストシャドウ 半透明な背景 複数背景画像 CSSアニメーション
  64. 64. 65 HTML5 + CSS3 ‣ 新しい技術にも対応可 ‣ iPhone/iPad用ページも 対応可能 制作事例 > イベントサイト
  65. 65. 66 CMSが苦手な機能は ほかのシステムと連携 制作事例 > セミナー
  66. 66. 67 制作事例 > イベントサイト 残席数表示 メルマガ
  67. 67. 68 ほかのシステムと連携 ‣ 万能なシステムはない ‣ CMSの制約とうまく付合う 制作事例 > イベントサイト
  68. 68. 残席数表示の裏側 1. 在庫管理機能はCMSにない… 2. SSLの制約で外部フォームを利用 3. 申し込み数を出力できるよう フォーム改造 4. JavaScriptでサイトに読み込み 69
  69. 69. 70 ‣事例のご紹介 ‣a-blog cmsを選ぶ理由 ‣学習コスト 1ユーザーがごく個人的に思う 今日のお題
  70. 70. ‣ Made in JAPANなCMS ‣ サポートが充実 71 a-blog cmsを選ぶ理由
  71. 71. Made in JAPAN 72
  72. 72. Made in JAPAN であること ‣ 日本のWeb向き (日本独自のトレンド、デザイン、需要etc) ‣ 開発元もWeb製作会社 → 制作現場を理解 73 a-blog cmsを選ぶ理由 > Made in JAPAN
  73. 73. 74 a-blog cmsを選ぶ理由 > Made in JAPAN マサチューセッツ工科大学 様
  74. 74. 75 a-blog cmsを選ぶ理由 > Made in JAPAN 制作:アップルップルさん
  75. 75. 76 安心 a-blog cmsを選ぶ理由 > Made in JAPAN
  76. 76. サポートが充実 77
  77. 77. 開発元が直接サポート ‣ 問い合わせ先が明確 ‣ もちろん日本語 ‣ 距離が近い 78 a-blog cmsを選ぶ理由 > サポート
  78. 78. 無償/有償のサポート対応 ‣ #ablogcms でツイート ‣ 公式フォーラム ‣ 有償技術サポート 79 a-blog cmsを選ぶ理由 > サポート
  79. 79. 80 安心 a-blog cmsを選ぶ理由 > Made in JAPAN
  80. 80. 81 ‣事例のご紹介 ‣a-blog cmsを選ぶ理由 ‣学習コスト 今日のお題
  81. 81. a-blog cms 利用実績 ‣ 利用歴:6ヶ月 ‣ 制作サイト:13件(製作中含む) そして今、プレゼンしてます 82 学習コスト
  82. 82. 83 できそうな気がしません? 学習コスト
  83. 83. 84 独学は不安という方には 学習コスト
  84. 84. 各種セミナーも開催 ‣ セミナー(名古屋ほか全国各地) ‣ オンラインセミナー ‣ a-blog cms Training camp (合宿形式、年2回) 85 学習コスト
  85. 85. 86 静岡にはパワーユーザーがいます
  86. 86. 最後に告知を 87
  87. 87. CSS Nite in SHIZUOKA, Vol.2 3月12日(土) グランシップにて開催 近日中に詳細発表! 88
  88. 88. ご清聴ありがとうございました 89 ご質問・感想・お仕事の依頼、お待ちしています Twitter:@yabecchy E-mail:yass@yabecchy.jp

×