a-blog cms 事例紹介(talknote vol.1)
Post on 14-Jun-2015
814 Views
Preview:
DESCRIPTION
TRANSCRIPT
a-blog cms 事例紹介 & more
Talk Note Vol.12011.1.15
ゃべ ゃすひと
1
‣事例のご紹介‣a-blog cmsを選ぶ理由‣学習コスト
今日のお題
2
名前:ゃべゃすひと職業:兼業主夫 Web制作 (フリーランス)データファームさんと協業してますカッコよく言うと”ユニット”
3
自己紹介
静岡県出身・長泉町在住 ・高校卒業まで静岡市で育つ
・静岡の某社でWeb業界に飛び込む
・焼津の某社に勤務していたことも
4
5
フェレット飼ってます
6
7
よろしくお願いします
8
‣事例のご紹介‣a-blog cmsを選ぶ理由‣学習コスト
今日のお題
‣企業サイト(セミナー)‣ECサイト‣イベントサイト
9
制作事例
もっとあるのに大人の事情で紹介できないのが残念
11
‣サイトリニューアル案件
‣作業範囲:サイト構築一式
‣全ページ 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)
[Ent] 講座情報(詳細)
(2)
[ct] お知らせ(一覧)
(3)[Ent] お知らせ(詳細)
(2)
[ct] プレスリリース(一覧)
(3)
[Ent] プレスリリース(詳細)
制作事例 > セミナー
テンプレートをサイトマップに反映
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
制作事例 > セミナー
ワイヤーフレーム
27
制作事例 > セミナー
テンプレートデザイン
28
制作事例 > セミナー
完成ページ
29
大きな手戻りは ≒0に減少制作者にも高いハードル
制作事例 > セミナー
30
管理画面のユーザビリティ
制作事例 > セミナー
31
CMSの管理画面ってわかりにくいですよね
制作事例 > セミナー
32
何がなんだか…
クライアントに苦痛を強いてませんか?
33
34
制作事例 > セミナー通常の表示
35
ログイン時の表示
ログイン時のみ該当部分の管理画面へのリンクを表示
制作事例 > セミナー
36
制作事例 > セミナー編集ページ
37
ログイン時の表示
編集ページへリンク
編集ページへリンク
編集ページへリンク
編集ページへリンク
制作事例 > セミナー
更新頻度アップ?
38
ECサイトドラッグスコンドウ 様
http://drugskondo.com/
39
40
‣某社ECカートからの移行
‣作業範囲:サイト構築一式
‣ショップ拡張プラグイン利用(注文フォーム・カート・受注管理etcの追加)
41
制作事例 > ECサイト
42
制作事例 > ECサイト
43
制作事例 > ECサイト
44
制作事例 > ECサイト
45
制作事例 > ECサイト
46
制作事例 > ECサイト
47
制作事例 > ECサイト
LPO対策
‣リファラー情報から検索ワードを取得・利用
48
制作事例 > ECサイト
49
制作事例 > ECサイト通常の表示(キーワードなし)
50
制作事例 > ECサイトLPO表示
検索キーワードに反応して自動挿入
52
制作事例 > ECサイト
LPO対策の裏側
‣リファラー情報から検索ワードを取得・利用
‣上記ワードでサイト内検索、検索結果を追加で読み込み
ライト級からヘビー級までカスタマイズの幅が広い
53
イベントサイトCSS Nite in SHIZUOKA
http://cssnite-shizuoka.jp/
54
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
‣事例のご紹介‣a-blog cmsを選ぶ理由‣学習コスト
1ユーザーがごく個人的に思う
今日のお題
‣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を選ぶ理由‣学習コスト
今日のお題
a-blog cms 利用実績‣利用歴:6ヶ月‣制作サイト:13件(製作中含む)そして今、プレゼンしてます
82
学習コスト
83
できそうな気がしません?
学習コスト
84
独学は不安という方には
学習コスト
各種セミナーも開催‣セミナー(名古屋ほか全国各地) ‣オンラインセミナー‣a-blog cms Training camp(合宿形式、年2回)
85
学習コスト
86
静岡にはパワーユーザーがいます
最後に告知を
87
CSS Nite in SHIZUOKA, Vol.2 3月12日(土) グランシップにて開催
近日中に詳細発表!
88
ご清聴ありがとうございました
89
ご質問・感想・お仕事の依頼、お待ちしていますTwitter:@yabecchy
E-mail:yass@yabecchy.jp
top related