a-blog cms 事例紹介（talknote vol.1）

a-blog cms 事例紹介 & more

Talk Note Vol.12011.1.15

ゃべゃすひと

1

‣事例のご紹介‣a-blog cmsを選ぶ理由‣学習コスト

今日のお題

2

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

3

自己紹介

静岡県出身・長泉町在住・高校卒業まで静岡市で育つ

・静岡の某社でWeb業界に飛び込む

・焼津の某社に勤務していたことも

4

5

フェレット飼ってます

7

よろしくお願いします

8


今日のお題

‣企業サイト（セミナー）‣ECサイト‣イベントサイト

9

制作事例

もっとあるのに大人の事情で紹介できないのが残念

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

10

http://www.fmtech.jp

http://www.fmtech.jp

‣サイトリニューアル案件

‣作業範囲：サイト構築一式

‣全ページ CMSから出力

12

制作事例 > セミナー

13


14


15


16


17


（ほぼ）全ページをCMSから出力

‣工程（特に設計）の見直し

‣管理画面のユーザビリティ

18


19

工程の見直し


20

サイト設計↓

デザイン制作↓

コーディング


手戻り発生…

従来のフロー

21

サイト設計↓

テンプレートデザイン↓

コーディング＋CMS


手戻りにもCMSで柔軟に対応

設計の重要性UP

試行錯誤中のフロー

22ページ 1/1

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

使用サイトイット一覧

8

9

1

2

3

4

5

6

7

10

写真＋キャプション写真＋キャプション記事で作られるレイアウトです。

記事リスト主に一覧で構成されるレイアウトです。

記事詳細CMSで作成するため写真、地図などを組み合わせが可能です

記事詳細＋申し込みページ上部に開催中イベント＋申し込みボタン

記事リスト＋申し込みページ上部に開催中イベント＋申し込みボタン

見出し画像＋文章大きく見出し画像をいれ文書が入ります。

ブロック記事「質問＋答え」のようなタイプのレイアウトです。

写真一覧写真をクリックすると詳細に移動します。写真の簡易説明となるキャプションあり

写真＋記事写真をクリックすると詳細に移動します。写真の簡易説明となるキャプションあり

申し込みフォームお問い合わせなどに使います。

サイトイットって何？

ページの「見た目」のイメージです。だいたいこんなレイアウトになるよ。利用するレイアウトの配置にルールをきめてまとめたものです。


テンプレート検討

24

トップページ

（5）

[ct] 企業向け団体トレーニング

（6）

[ct] FM-Techとは

（7）

[ct] FAQ（一覧）

（1）

[Ent] FAQ（詳細）

（8）

[ct] お客様の声（一覧）提案コンテンツです

（9）

[Ent] お客様の声（詳細）提案コンテンツです

なし

[ct] お客様連絡情報このカテゴリは実装時は隠す

（2）

[ct] 講座情報（一覧）

（3）


（2）

[ct] お知らせ（一覧）

（3）[Ent] お知らせ（詳細）

（2）

[ct] プレスリリース（一覧）

（3）



テンプレートをサイトマップに反映

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）


（2）

[ct] お知らせ（一覧）

（3）[Ent] お知らせ（詳細）

（2）

[ct] プレスリリース（一覧）

（3）


テンプレートサイトマップ


反映

検証

26


ワイヤーフレーム

27


テンプレートデザイン

28


完成ページ

29

大きな手戻りは ≒０に減少制作者にも高いハードル


30

管理画面のユーザビリティ


31

CMSの管理画面ってわかりにくいですよね


32

何がなんだか…

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

33

34

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

35

ログイン時の表示

ログイン時のみ該当部分の管理画面へのリンクを表示


36

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

37

ログイン時の表示

編集ページへリンク





更新頻度アップ？

38

ECサイトドラッグスコンドウ様

http://drugskondo.com/

39

‣某社ECカートからの移行


‣ショップ拡張プラグイン利用（注文フォーム・カート・受注管理etcの追加）

41

制作事例 > ECサイト

42


43


44


45


46


47


LPO対策

‣リファラー情報から検索ワードを取得・利用

48


49

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

50

制作事例 > ECサイトLPO表示

検索キーワードに反応して自動挿入

52


LPO対策の裏側

‣リファラー情報から検索ワードを取得・利用

‣上記ワードでサイト内検索、検索結果を追加で読み込み

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

53

イベントサイトCSS Nite in SHIZUOKA

http://cssnite-shizuoka.jp/

54

http://by-standard.jp

http://by-standard.jp

55

制作事例 > イベントサイト

‣新規作成案件


‣主催イベント（≒自社サイト）

56


57


58


59


60


61


拡張性を活かす

‣HTML5 + CSS3

‣CMSが苦手な機能はほかのシステムと連携

62


63

HTML5 + CSS3


64


グラデーション

角丸

テキストシャドウ

半透明な背景

複数背景画像

CSSアニメーション

65

HTML5 + CSS3

‣新しい技術にも対応可

‣ iPhone/iPad用ページも対応可能


66

CMSが苦手な機能はほかのシステムと連携


67


残席数表示

メルマガ

68

ほかのシステムと連携

‣万能なシステムはない

‣CMSの制約とうまく付合う


残席数表示の裏側1.在庫管理機能はCMSにない…

2. SSLの制約で外部フォームを利用

3.申し込み数を出力できるようフォーム改造

4. JavaScriptでサイトに読み込み

69

70


１ユーザーがごく個人的に思う

今日のお題

‣Made in JAPANなCMS‣サポートが充実

71

a-blog cmsを選ぶ理由

Made in JAPAN

72

Made in JAPAN であること‣日本のWeb向き（日本独自のトレンド、デザイン、需要etc）

‣開発元もWeb製作会社 → 制作現場を理解

73

a-blog cmsを選ぶ理由 > Made in JAPAN

74

a-blog cmsを選ぶ理由 > Made in JAPAN

マサチューセッツ工科大学様

75

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

76

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

サポートが充実

77

開発元が直接サポート‣問い合わせ先が明確‣もちろん日本語‣距離が近い

78

a-blog cmsを選ぶ理由 > サポート

無償/有償のサポート対応‣ #ablogcms でツイート‣ 公式フォーラム‣ 有償技術サポート

79

a-blog cmsを選ぶ理由 > サポート

80

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

81


今日のお題

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

82

学習コスト

83

できそうな気がしません？

学習コスト

84

独学は不安という方には

学習コスト

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

85

学習コスト

86

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

最後に告知を

87

CSS Nite in SHIZUOKA, Vol.2 3月12日（土）グランシップにて開催

近日中に詳細発表！

88

ご清聴ありがとうございました

89

ご質問・感想・お仕事の依頼、お待ちしていますTwitter：@yabecchy

E-mail：[email protected]

a-blog cms 事例紹介（talknote vol.1）

Technology