web制作の幅が広がる！ プロジェクトの傾向から考える、...
TRANSCRIPT
Web制作の幅が広がる！
プロジェクトの傾向から考える、 ２つ目•３つ目のCMS選び
Seiko Kuchida :: ウェビングスタジオ 2015.09.12(Sat)
WCAN 2015 Autumn@名古屋商科大学
WCAN当日からの変更点
• 69ページ •WordPressのセキュリティ対策を加筆・修正 • 86ページ •他言語サイト構築の説明スライドを、Katzさん推薦の「WCAN2014秋版」に差し替え
ブラッシュアップ。
質 問
Web制作 好きですか？
はーい
CMSを利用した プロジェクトを
経験したことある？
クライアントの 要望を
直接聞く立場？
ありがとうございます
今日の話は
明日 役に立ちません
（えっ）
でも
CMSを扱うなら得てほしい「知識」
三ヶ月後、半年後、一年後必ず役に立つ話
今日の内容
▼私とCMS
▼なぜ、複数のCMSを使える方が良い？
▼要件別 CMS選定のポイント
▼まとめメイン
私とCMS
口田 聖子（うぇびん） Webエンジニア CMSアドバイザー
CMSのウェビングスタジオ
愛知に来て もうすぐ２年
Nagoya
Sapporo
CMSと 出会って11年
日本に、ブログブームをもたらした シックスアパート平田さんの本
ウェビングスタジオの業務
制作会社の 助っ人
CMSに関する コンサルティング
ウェビングスタジオの業務
a-blog cms Movable Type
WordPress
興味があるCMS
HOT!テーマ 配布
baserCMS
Jimdo
Drupal
concrete5
各種CMSイベントに出没
時代は変わったねー
• WordPress王朝から、戦国時代へ • 日本で再建を果たしたMovable Type帝国 • 中堅CMSが、各地で個性的な国を築く • 黒船・Drupalが今、CMSファンの間でアツい
しみじみ
なぜ、複数のCMSを 使える方が良い？
パワーユーザーの皆さん
うちの CMS 最高
どんな サイトも 作れる!
Drupal WordPress Movable Type a-blog cms
パワーユーザーの皆さん
うちの CMS 最高
どんな サイトも 作れる!
Drupal WordPress Movable Type a-blog cms
仰る通りです
では、なぜ 複数のCMSを 使える方が良い？
3つの理由
1. 手段の目的化を防ぐ
2. 知識の停滞を防ぐ
3. 抽象化思考が身に付く
1. 手段の目的化を防ぐ
2. 知識の停滞を防ぐ
3. 抽象化思考が身に付く
どのCMSも得意•苦手がある
•他のCMSよりも制作の手数を減らせる
•コアに含まれており安全に実装できる
•バージョンアップしても問題は起きにくい
•他のCMSよりも制作の手数が大きくなる
•実装するとセキュリティリスクが高まる
•バージョンアップ時の問題が起きやすくなる
得意分野 苦手分野
使えるCMSがひとつだけだと
「要件をクリアすること」に固執しがち
なんとか するしか ない！
この 要件は マストで
魔 改 造
☢
魔改造の恐ろしい副作用
修正のコストが激増
修正が数年後だと自分でもどうやったか忘れてることも
制作者が退職•廃業すると目も当てられない
手段が 目的に なっている
1. 手段の目的化を防ぐ
2. 知識の停滞を防ぐ
3. 抽象化思考が身に付く
1. 手段の目的化を防ぐ
2. 知識の停滞を防ぐ
3. 抽象化思考が身に付く
同じCMSを使い続けている制作者ほど、知識が古い
•最低限のセキュリティ対策をしていない •対応する機能がなかった頃の、裏技を使っている •何年も前にバージョンアップが止まったプラグインを提案してくる
古古
古
古古 あらら
なぜそうなる？
•よほど、そのCMSが好きでない限りある程度のレベルに達すると、学習しない
•慣れた手法で充分と思ってしまう •制作のパターン化過去の納品データの使い回し
いそが しくて つい
デザイン・コーディングでも よくあること
1. 手段の目的化を防ぐ
2. 知識の停滞を防ぐ
3. 抽象化思考が身に付く
最後に 話します
パワーユーザーがそうならないのは
• そのCMSが大好きで • イベント参加・自習で最新の情報を吸収し • リスクにも対応できる体制を常に整えている
愛 努力 自信
そこまでできる？
ぼく、アクセス解析も勉強したい…
本日のメイン
• 様々な要件ごとに、注意すべき点やCMS選定のポイントをご紹介
• 受注するプロジェクトの傾向と照らし合わせ、自社・自分に適した2つ目・3つ目のCMSを探ってみよう
要件別 CMS選定のポイント
ブログメディア
WordPress+JetPackは鉄板
• .com運営の世界企業、Automattic製 • ブログ運営に便利な機能を多数追加 • SNSアカウントへ自動共有 • 記事中に簡易フォームを挿入 • 関連記事リスト etc…他のCMSで、すべて実装するのは手間
だが
コンテンツによっては 他のCMSの方が 良いこともある
見た目へのこだわり
• bootstrapの３段組、1：2の２段組 • ボタン飾り枠アイコンとフキダシで会話 etc…
• ウィジウィグ・AddQuicktagでは登録作業がたいへん
お問い合わせ
a-blog cmsは 装飾が多いほど便利
• 最初から利用できるユニット（本文に挿入するパーツ）が多い
• 自作ユニットを追加して案件に併せた、細やかな装飾を実現
制作コストとのバランスを考えて！ そこまで装飾が必要？
人気ゲーム•ビッグイベント
• PVが多い・特別な日にはさらに急増 • WordPressはシステム上大量のリクエスト処理は苦手
• Wp Super Cacheが王道だが、限界がある
静的サイト＋独自CMS というケースも
敷居高い 学習コスト高い
クラウド…ですか…
Movable Typeでの負荷軽減
• 共通パーツは極力、静的ファイルに • Cronでの予約投稿 • アクセス増が予想される日は全ページ、静的ファイルにしてしまう
学習コストが低い＋安価なサーバーでも可能
個人事業・店舗
とにかく予算がない
• 更新のリソースもない • WordPress指定が多いが…
みんなが 勧めるので
ネットで 良いという 記事が
WordPress 以外のCMSを 知らない
サーバー設置型のリスク
• 自力でメンテナンスできるの？ • バージョンアップしたら不具合発生…させない？いやいやいや
• 納品後のサポートもする？WordPressを一般人が利用するリスクを
しっかり説明すること！
Jimdoでコンパクトに
• メンテナンス不要な、ASP型のCMS • 手厚いサポート • メール • 全国のJimdo Cafe • スマートフォンアプリで更新
納品後のサポートが難しいサイト向き
安定のMovable type.net
• Movable Type 6の縮小版、かつ、ASP • 再構築不要な、動的生成 • カスタムフィールドを作れる • 簡易ながらフォームもある
商品紹介など、ある程度の構造化が必要なサイト向き
現行サーバー維持ならbaserCMS
• 必要な機能のみ、無駄がない • 優れたフォーム機能 • スタッフ紹介、レシピ等の各業種にピンポイントなプラグイン
WordPressよりは、攻撃リスクも低い（単純なシェアの問題だが）
「Wix」は予約システムがある！？http://ja.wix.com/app-market/wix-hotels/overview
最大の壁は、夢見るクライアント
• コンテンツを広げすぎて、けっきょくブログさえ更新できないことも…
• 目標達成のために何が必要か、無謀な要望はないか制作側がリードしよう
大学•研究機関•大手企業
真っ先に 確認すべきは
サーバー！
☢
専用サーバーまじこわい
稼働中のシステムによっては静的書き出しが必須＝Movable Type一択
CMSを設置できないことが判明したり… •サーバーのスペック不足 •Perlのライブラリ不足 •PHP・MySQLのバージョン不足
先生はアーカイブにこだわる
• 研究機関は、アーカイブに関する要望が多い • 集会の記録は年度別アーカイブで • 研究資料は４階層くらいカテゴリーを作って… • Movable TypeはアーカイブURLの自由度高い • WordPressも可能だが、PHPの知識は必要
年度別アーカイブはどのCMSも困難
セキュリティの要望も厳しい
• WordPressは攻撃の標的になりやすいがきちんと設置すれば、防御できる
• ログインURLの変更 • 重要ファイルのパーミッション変更 • wp-config.phpを一階層上の非公開領域へ • 強力なパスワード＋まめなアップデートが基本
WordPress › フォーラム » wp-login.php へのアタックが多くなってきているので……https://ja.forums.wordpress.org/topic/13830
SiteGurad WP Pluginhttps://ja.wordpress.org/plugins/siteguard/
簡単にひととおりの対策が可能
All In One WP Security & Firewallhttps://ja.wordpress.org/plugins/all-in-one-wp-security-and-firewall/
難易度高め、全方面から徹底防御
最良の対策はIP制限 and
公開領域にCMSを置かない
Uploader for Movable Typehttps://www.ideamans.com/mt/uploader/
Drupalが公的機関に人気な理由
• 専門のセキュリティチームによる24時間365日の対応
• 安全性に惹かれて、各国の政府機関が導入 • 豊富なフィードバックを受けてさらに安全性アップ
理想的な、らせん型コミュニティ
複数ドメインで運用
WordPressのマルチサイト機能
• とにかく罠が多い • マルチドメインにできないサーバーがある • 非対応プラグインが多い • ブログ間の導線がわかりにくい
行きはよいよい帰りはこわい
本番サーバーでの検証は必須！！
a-blog cmsの独特のライセンス
•ドメイン１個なら、54,500円とお得 •ドメイン追加で、プラス30,000円 •サブドメイン利用で、プラス50,000円
あっちゃー
聞いてないよー！と言われないよう注意
将来のことも聞いておこう
• 公開してからドメイン拡張の相談が来ることも •サブドメインで英語・中国語サイトを作りたい •同じ管理画面で別の自社サイトを管理したい • Movable Typeは、94,500円で固定なのでサイトが多いほどコストが下がる
1サーバー 1ライセンス ユーザー無制限
多単語対応
多言語…と言ってもいろいろ
•どうしたいかを詳しく聞くこと！ • 日本語サイトに、違う言語のページを作るだけ？ • 担当者はひとり？国別？ • 「各国のサーバーにサイトを設置したい」というケースも
日本のサーバーに設置していると ブラジルなど、遠方の国は 接続が遅くなってしまう
Oi lá!
固定ページ中心のサイトならconcrete5がわかりやすい
親ページ単位で言語を変えられる
a-blog cmsは 担当者がひとりのときに威力を発揮
各言語の本文を、まとめて投稿
あれ？
そもそもの話
• ひとつのデザインで言語だけ変えればいいの？ • 国によって刺さる見た目や文言は違う • 一部は共通、一部は国別にできるのが理想
普通のサイト企画でも使える！失敗しない！多言語サイト制作で絶対に知っておきたいこと
http://www.slideshare.net/katz515/how-to-build-multilingual-website
国際企業に選ばれるDrupal
• ジョンソン&ジョンソン•ファイザー•インテルワーナーミュージック etc…
• 充実の翻訳機能 • 各国の言語ファイルが翻訳サーバーに集結 • コアファイルとは別に、管理画面でアップデート • サイト内の未翻訳を自動抽出するモジュールも
Drupal 7 の多言語機能についてhttp://www.slideshare.net/bkenro/drupal-45849022
学習コストは まだまだ高い
がんばって ついてきてくださいね★
うひゃあ
会員コンテンツ
会員…と言ってもいろいろ
•どうしたいかを詳しく聞くこと！（デジャヴ？） • ログインした業者に、卸売価格を表示したい • グループのみ閲覧できるページを作りたい • コミュニティサイトを作りたい
<!-- BEGIN_MODULE Touch_Login -->
ログインしていれば誰でも
<!-- END_MODULE Touch_Login -->
<!-- BEGIN_MODULE Touch_SessionWithContribution --
>
読者以外のユーザー（投稿権限がある）
<!-- END_MODULE Touch_SessionWithContribution -->
<!-- BEGIN_MODULE Touch_SessionWithAdministration
-->
管理者権限があるユーザーのみ
<!-- END_MODULE Touch_SessionWithAdministration --
>
公式なのでキャッシュ管理も問題なし
表示のみの変更ならa-blog cmsはかなり楽
WordPressの、ページ保護でもいいよね
単に、１ページをメンバー限定にしたいだけかも
コミュニティサイトは工数大
• とにかくカスタマイズ・動作検証がたいへん • 資料も利用者も多いWordPressのBuddyPress・BBPressが無難
• Movable Typeの コミュニティ掲示板はテーマがレスポンシブ非対応
そもそもの話
• 本当に必要？ • 会員を獲得→稼働する見込みはある？ • 費用と時間をかけても誰も投稿しないとか… • コミュニティの傾向によってはFacebookグループの方が敷居が低いことも（ファイル共有やリンクも楽だし）
Webマーケティング
• まずbootstrap等でプロトタイプを作成し導線から検討
• 公開後も、アクセス解析やABテストの結果でレイアウトを見直していく
コンバージョン重視のCMS構築
人気記事の 場所を 右側に…
ドラッグ・ドロップで レイアウトを編集
• 難しい分、自由度が高いa-blog cms • Concrete5はシンプルでお手軽 • WordPressにも、見たまま編集できるテーマ・プラグインがある
• PowerCMSも「見たまま」ではないが可能
だが
見たまま編集が最適とは限らない
レイアウト修正を行うのが制作会社の場合、都度ログインさせるより FTPでテーマ直書きの方が喜ばれることも…
その場合はインクルードを使い改修しやすいテーマに！
制作のついでに できた方が、楽なんです
行動ターゲティング
• URLに付与したGET値•Cookieを参照し訪問者によって、ページ内容を切り替える
• a-blog cmsの「ルール」 • よく使われる条件を簡単に設定 • Drupalの「Views」モジュール •条件をURL単位でも細かく設定できる
Cookieを利用したコンテンツ切り替えハンズオンhttp://developer.a-blogcms.jp/blog/acmscamp/cookie.html
Drupal7の強力なViewsモジュールを使ってみよう！http://knowledge.sakura.ad.jp/beginner/3045/
CMSの特徴を整理してみよう
WordPress 早・安・旨！ブログで最強 リスク回避はしっかりと
2015年版 CMSの特徴まとめ
Movable Type 盤石のアーカイブ管理 お固いサイトほど本領発揮
a-blog cms 多機能！スルメな奥深さ会員コンテンツを楽に作成
baserCMS 中小企業にぴったりサイズ すぐれたフォーム機能
concrete5 お手軽さくさくレイアウトわかりやすい多言語化
Jimdo 個人店舗の救世主 スマホで更新・サポート充実
Drupal 政府・国際企業の御用達極めたいならついて来い！
まとめ
3つ目の理由
1. 手段の目的化を防ぐ
2. 知識の停滞を防ぐ
3. 抽象化思考が身に付く
1. 手段の目的化を防ぐ
2. 知識の停滞を防ぐ
3. 抽象化思考が身に付く
抽象化思考とは
• 物事を抽象的に考えることで枝葉にとらわれず、目的や意味を明確にする
米や麺を控える 糖質を減らす 脂肪の蓄積を抑える
体重が減る 健康になる 幸せに暮らせる
Webクリエイティブに活きる抽象化思考力http://www.slideshare.net/KeysukeMizuno/wcan-2014autumn03
CMSなら？
WordPressでブログを作る
スタッフが更新できる体制でコンテンツを配信する
比較•検討が抽象化思考を育てる
• クライアントの目的を見出す • 目的に沿って、複数のCMSから比較•検討 • 特定のCMSにとらわれない広い思考が身につく
…と 思ってます。
やってみよう！と決めた人へ
プロジェクトの傾向だけで決められない…
• 今後、進みたい方向で検討すると良い • 他分野に注力したい場合 • 軽いCMSにする？MT＋MT.netという手も • 大きなプロジェクトを進めたい場合 • Drupal・a-blog cmsなどを社内でがっつりCMSはチームワーク社員ひとりに押し付けない！
学習コストを下げる工夫
• イベント・勉強会に出る • ネットや書籍にはない、現場情報が飛び出すことも • 交流する気持ちで！仲間ができるとやる気も出ます
• 意味のあるサイトを作ってみる • 考えなくても書けて、カテゴリー・カスタムフィールドを持つサイトを！
• 過去案件リスト・社内議事録・宝物アーカイブ・スマホゲーの入手キャラリスト etc…
外注をしてみる
• 基本的な構築までは、勉強しよう • 協業先を探そう • 各CMSのイベントで発表している人は信頼性大（ノウハウをまとめられるだけの経験があるため）
• 固定IPと、プロジェクト管理ツールがあれば遠方でもOK
よろしく！
それでも 困ったときは
ご相談ください♪
CMSのウェビングスタジオ
アドバイスしますー。
