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

1. a-blog cms 事例紹介& more
Talk Note Vol.1
2011.1.15
ゃべ ゃすひと
1

2. ‣事例のご紹介
‣a-blog cmsを選ぶ理由
‣学習コスト
今日のお題
2

3. 名前：ゃべゃすひと
職業：兼業主夫
Web制作
（フリーランス）
データファームさんと協業してます
カッコよく言うと ユニット
3
自己紹介

4. 静岡県出身・長泉町在住
・高校卒業まで静岡市で育つ
・静岡の某社でWeb業界に飛び込む
・焼津の某社に勤務していたことも
4

5. 5
フェレット飼ってます

6. 6

7. 7
よろしくお願いします

8. 8
‣事例のご紹介
‣a-blog cmsを選ぶ理由
‣学習コスト
今日のお題

9. ‣ 企業サイト（セミナー）
‣ ECサイト
‣ イベントサイト
9
制作事例
もっとあるのに大人の事情で紹介できないのが残念

10. 企業サイト（セミナー）
FM-Tech 様
http://www.fmtech.jp/
10

11. 11

12. ‣ サイトリニューアル案件
‣ 作業範囲：サイト構築一式
‣ 全ページ CMSから出力
12
制作事例 > セミナー

13. 13
制作事例 > セミナー

14. 14
制作事例 > セミナー

15. 15
制作事例 > セミナー

16. 16
制作事例 > セミナー

17. 17
制作事例 > セミナー

18. （ほぼ）全ページをCMSから出力
‣ 工程（特に設計）の見直し
‣ 管理画面のユーザビリティ
18
制作事例 > セミナー

19. 19
工程の見直し
制作事例 > セミナー

20. 20
サイト設計
↓
デザイン制作
↓
コーディング
制作事例 > セミナー
手戻り発生…
従来のフロー

21. 21
サイト設計
↓
テンプレートデザイン
↓
コーディング＋CMS
制作事例 > セミナー
手戻りにも
CMSで柔軟に対応
設計の重要性UP
試行錯誤中のフロー

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
使用サイトイット一覧
8
9
1
2
3
4
10
写真＋キャプション
写真＋キャプション記事
で作られる
レイアウトです。
記事リスト
主に一覧で構成される
レイアウトです。
記事詳細
CMSで作成するため
写真、地図などを
組み合わせが可能です
記事詳細＋申し込み
ページ上部に
開催中イベント
＋申し込みボタン
写真一覧
写真をクリックすると
詳細に移動します。
写真の簡易説明となる
キャプションあり
写真＋記事
写真をクリックすると
詳細に移動します。
写真の簡易説明となる
キャプションあり
申し込みフォーム
お問い合わせなどに
使います。
サイトイット
制作事例 > セミナー
テンプレート検討

24. 24
トップページ
（5）
[ct] 企業向け団体ト
レーニング
（6）
[ct] FM-Techとは
（7）
[ct] FAQ（一覧）
（1）
[Ent] FAQ（詳細）
（8）
[ct] お客様の声（一
覧）
提案コンテンツです
（9）
[Ent] お客様の声（詳
細）
提案コンテンツです
制作事例 > セミナー
テンプレートを
サイトマップに反映

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
制作事例 > セミナー
ワイヤーフレーム

27. 27
制作事例 > セミナー
テンプレートデザイン

28. 28
制作事例 > セミナー
完成ページ

29. 29
大きな手戻りは ０に減少
制作者にも高いハードル
制作事例 > セミナー

30. 30
管理画面のユーザビリティ
制作事例 > セミナー

31. 31
CMSの管理画面って
わかりにくいですよね
制作事例 > セミナー

32. 32
何がなんだか…

33. クライアントに
苦痛を強いてませんか？
33

34. 34
制作事例 > セミナー
通常の表示

35. 35
ログイン時の表示
ログイン時のみ
該当部分の管理画面へ
のリンクを表示
制作事例 > セミナー

36. 36
制作事例 > セミナー
編集ページ

37. 37
ログイン時の表示
編集ページへリンク
編集ページへリンク
編集ページへリンク
編集ページへリンク
制作事例 > セミナー

38. 更新頻度アップ？
38

39. ECサイト
ドラッグスコンドウ 様
http://drugskondo.com/
39

40. 40

41. ‣ 某社ECカートからの移行
‣ 作業範囲：サイト構築一式
‣ ショップ拡張プラグイン利用
（注文フォーム・カート・受注管理etcの追加）
41
制作事例 > ECサイト

42. 42
制作事例 > ECサイト

43. 43
制作事例 > ECサイト

44. 44
制作事例 > ECサイト

45. 45
制作事例 > ECサイト

46. 46
制作事例 > ECサイト

47. 47
制作事例 > ECサイト

48. LPO対策
‣ リファラー情報から
検索ワードを取得・利用
48
制作事例 > ECサイト

49. 49
制作事例 > ECサイト
通常の表示（キーワードなし）

50. 50
制作事例 > ECサイト
LPO表示
検索キーワードに
反応して自動挿入

51. 52
制作事例 > ECサイト
LPO対策の裏側
‣ リファラー情報から
検索ワードを取得・利用
‣ 上記ワードでサイト内検索、
検索結果を追加で読み込み

52. ライト級からヘビー級まで
カスタマイズの幅が広い
53

53. イベントサイト
CSS Nite in SHIZUOKA
http://cssnite-shizuoka.jp/
54

54. 55
制作事例 > イベントサイト

55. ‣ 新規作成案件
‣ 作業範囲：サイト構築一式
‣ 主催イベント（ 自社サイト）
56
制作事例 > イベントサイト

56. 57
制作事例 > イベントサイト

57. 58
制作事例 > イベントサイト

58. 59
制作事例 > イベントサイト

59. 60
制作事例 > イベントサイト

60. 61
制作事例 > イベントサイト

61. 拡張性を活かす
‣ HTML5 + CSS3
‣ CMSが苦手な機能は
ほかのシステムと連携
62
制作事例 > イベントサイト

62. 63
HTML5 + CSS3
制作事例 > セミナー

63. 64
制作事例 > イベントサイト
グラデーション
角丸
テキストシャドウ
半透明な背景
複数背景画像
CSSアニメーション

64. 65
HTML5 + CSS3
‣ 新しい技術にも対応可
‣ iPhone/iPad用ページも
対応可能
制作事例 > イベントサイト

65. 66
CMSが苦手な機能は
ほかのシステムと連携
制作事例 > セミナー

66. 67
制作事例 > イベントサイト
残席数表示
メルマガ

67. 68
ほかのシステムと連携
‣ 万能なシステムはない
‣ CMSの制約とうまく付合う
制作事例 > イベントサイト

68. 残席数表示の裏側
1. 在庫管理機能はCMSにない…
2. SSLの制約で外部フォームを利用
3. 申し込み数を出力できるよう
フォーム改造
4. JavaScriptでサイトに読み込み
69

69. 70
‣事例のご紹介
‣a-blog cmsを選ぶ理由
‣学習コスト
１ユーザーがごく個人的に思う
今日のお題

70. ‣ Made in JAPANなCMS
‣ サポートが充実
71
a-blog cmsを選ぶ理由

71. Made in JAPAN
72

72. Made in JAPAN であること
‣ 日本のWeb向き
（日本独自のトレンド、デザイン、需要etc）
‣ 開発元もWeb製作会社
→ 制作現場を理解
73
a-blog cmsを選ぶ理由 > Made in JAPAN

73. 74
a-blog cmsを選ぶ理由 > Made in JAPAN
マサチューセッツ工科大学 様

74. 75
a-blog cmsを選ぶ理由 > Made in JAPAN
制作：アップルップルさん

75. 76
安心
a-blog cmsを選ぶ理由 > Made in JAPAN

76. サポートが充実
77

77. 開発元が直接サポート
‣ 問い合わせ先が明確
‣ もちろん日本語
‣ 距離が近い
78
a-blog cmsを選ぶ理由 > サポート

78. 無償/有償のサポート対応
‣ #ablogcms でツイート
‣ 公式フォーラム
‣ 有償技術サポート
79
a-blog cmsを選ぶ理由 > サポート

79. 80
安心
a-blog cmsを選ぶ理由 > Made in JAPAN

80. 81
‣事例のご紹介
‣a-blog cmsを選ぶ理由
‣学習コスト
今日のお題

81. a-blog cms 利用実績
‣ 利用歴：６ヶ月
‣ 制作サイト：13件（製作中含む）
そして今、プレゼンしてます
82
学習コスト

82. 83
できそうな気がしません？
学習コスト

83. 84
独学は不安という方には
学習コスト

84. 各種セミナーも開催
‣ セミナー（名古屋ほか全国各地）
‣ オンラインセミナー
‣ a-blog cms Training camp
（合宿形式、年２回）
85
学習コスト

85. 86
静岡にはパワーユーザーがいます

86. 最後に告知を
87

87. CSS Nite
in SHIZUOKA, Vol.2
3月12日（土） グランシップにて開催
近日中に詳細発表！
88

88. ご清聴ありがとうございました
89
ご質問・感想・お仕事の依頼、お待ちしています
Twitter：@yabecchy
E-mail：yass@yabecchy.jp