2016年7月9日
WordCamp Kansai 2016
Cherry Pie Web 川井昌彦
熊本地震支援サイトを30分で立ち上げ、
  独自ドメイン新規取得込みで
         即日運用開始した話
   ~時を超えて繋がる、熊本と舞鶴~
2
自己紹介
●川井 昌彦(かわい まさひこ)
 東京の制作会社に24年間勤めた後、
 京都府舞鶴市に帰郷し、フリーランスで、DTP・Web制作をしています。
 提案・見積・ディレクション・デザイン・コーディング・
   プログラミング・顧客サポート・・・
     制作の上流から下流までを一手に引き受けています。
 「WordBench京都」などで、たまに登壇させていただいています。
3
私のスライドでよく登場する、うちのペットたち
(今回は出てきません)
小桜インコ "すあま"(2015年10月永眠)
                柴犬 "かのこ"
   シロハラインコ "よもぎ"
4
Cherry Pie Web
http://www.cherrypieweb.com
1997年開設
今年で19年目 !
2015年に
  MovableTypeから
    WordPressに移行
5
先週、こんな記事でバズりました・・・
6
本日の予定
1.	「北近畿くまもと地震支援チーム」とは?
2.	 歴史秘話 ~戦国から平成へ、時を超えて繋がる 熊本と舞鶴~
3.	 超短期間制作の流れとポイント
4.	 Webサイト運用方法
5.	 Webサイト開設後の反応
6.	 まとめ
7
2016年4月14日21時26分
熊本県熊本地方でマグニチュード6.5の地震が発生
熊本県益城町で震度7を観測
2016年4月16日1時25分
熊本県熊本地方でマグニチュード7.3の地震が発生
熊本県西原村と益城町で震度7を観測
8
この「熊本地震」は、熊本・大分の各地に甚大な被害をもたらしました。
・・・そして、地震の発生後すぐに、
       日本全国で被災者支援活動が開始されました。
9
そうした支援活動の一つ、
  京都府舞鶴市で立ち上げられた
   「北近畿くまもと地震支援チーム」
                      の活動のために、
        制作時間わずか30分で、即日公開した、
            Webサイトの制作事例をご紹介します。
10
「北近畿くまもと地震支援チーム」
京都府舞鶴市で建築資材等を自社開発・販売されている
「株式会社DIY STYLE」の森本隆社長が、
熊本地震被災者支援のために立ち上げたボランティアチーム
森本 隆 氏
株式会社DIY STYLE 代表取締役
http://diystyle.jp/
・	日本防災士会京都府支部 副支部長 (防災士)
11
日本防災士会京都府支部協賛取扱品である、
高密度断熱シート「ゆうさいくんの籠城シート」を、自社開発して販売
12
実はこの、"ゆうさいくん" が、
        被災地「熊本」と
          私の住む「舞鶴」を
                時を超えて結んでいる!
13
歴史秘話
~戦国から平成へ
  時を超えて繋がる 熊本と舞鶴~
14
ゆうさいくんとは?
・	京都府舞鶴市 田辺城城主・細川幽斎公イメージキャラクター
 
   田辺城城主 細川幽斎公 イメージキャラクター「ゆうさいくん」公式サイトより
    http://www.yusai-kun.com/
15
細川幽斎とは?
・	本名:細川藤孝
 
・	幽斎は武将として優れていただけでなく、
 歌道、茶道、料理、陶芸、音曲など、
 あらゆる芸能・学問に通じた文化人であり、
 古今和歌集研究「古今伝授」の
           伝承者でもあった。
細
川
藤
孝
明
智
光
秀
  麝
香
  熙
子
(
三
女
)
玉
(
ガ
ラ
シ
ャ
)
(
長
男
)
忠
興
織田信長織田信長
家臣
16
1582年「本能寺の変」
・	藤孝は、盟友 光秀からの誘いを断り、
主君信長を弔うために剃髪して
名を幽斎玄旨(ゆうさいげんし)と改め、
丹後・田辺城(現在の舞鶴市)に隠居
  
丹後・田辺城
●
本能寺
●
今日の「世界ふしぎ発見」は、
     本能寺の変の特集です!
17
1600年「会津征伐」→「関ヶ原の戦い」
・	会津・上杉征伐のため、幽斎の長男・忠興は
徳川家康ら多くの大名と共に出陣
・	畿内が手薄になったのを見計らい、
石田三成が大坂で家康討伐の兵を挙げる
・	三成は、大坂にいた忠興の妻
ガラシャを人質にとろうとするが
ガラシャは家臣に命じて自らの首をはねさせ、屋敷に火を放つ
・	これに激怒した三成は、丹後 田辺城攻略のため出兵
会津
大坂
18
1600年「田辺城の戦い」
 
・	幽斎は籠城戦を敢行、天皇の介入もあり膠着状態のまま2か月続いた
・	田辺城開城後、15,000の兵は関が原に向かうが、
関が原の戦い本戦に間に合わず、西軍が敗れた
細川幽斎細川幽斎
古今伝授保護
 のため介入
古今伝授保護
 のため介入
石田三成(西軍)石田三成(西軍) 天皇
15,000人15,000人
凸
田辺城田辺城
500人500人
古今伝授
19
丹後から肥後へ、現代まで続く細川氏の系譜
・	家康は、妻ガラシャを殺され、父幽斎を窮地に立たせても
東軍に味方した忠興の功績をたたえ、肥後五十四万石の大大名とした
・	肥後は、明治になり「熊本県」となる
・	細川氏直系の子孫の一人が、
熊本県知事から
第七十九代内閣総理大臣になった
細川護熙氏
肥後
丹後
20
2013年5月21日 ゆうさいくんからくまモンに、古今伝授が行われた
 わくわく中央区【熊本市中央区役所】Facebookページ
 【ひと♥まちわくわく中~ 「ゆうさいくん」とくまモン、古今伝授再現】より
21
  超短期間制作の流れとポイント
22
制作タイムライン
2016年4月18日
「株式会社DIY STYLE」の森本氏が、被災者支援のための活動を開始
14:18
森本氏よりFacebookメッセージにて、
Webサイト制作の依頼あり
すぐに電話で詳細を確認
23
依頼内容
・	WordPressベース (森本氏に使用経験があった)
・	ちゃんとした団体っぽい感じの見た目
・	寄付金等の支援方法・口座等の情報をわかりやすく表示
・	支援の進捗状況を日々報告して健全性をアピールしたい
・	支援の内容を記録しておきたい
・	独自ドメインの取得
("ゆうさいくん"を使用したい → 権利者の許可が出るまで保留)
24
14:45
WordPressを使用して
「災害支援チーム ゆうさいくん」を仮公開
川井が使用中のレンタルサーバー
(エックスサーバー)の自動インストール機能
を使用し、WordPressをインストール
・	 テーマ「Lightning」
・	 連携プラグイン「VK All in One Expansion Unit」
 依頼から
わずか28分
25
21:00
権利者より、"ゆうさいくん" の使用許可が
得られなかったため、
支援チーム名を変更
「北近畿くまもと地震支援チーム」
独自ドメインの取得申請(お名前.com)
kitakinki-kumamoto.info
26
 
21:18
ドメイン取得完了
21:25
ネームサーバー設定完了
22:04
新ドメインでのアクセスが可能になったため
正式公開
 チーム名
決定から
わずか64分
27
制作したWebサイトがこちら
http://kitakinki-kumamoto.info
ほぼゼロコーディング
※子テーマにして、
 1行だけCSSを書きました
メインイメージは、
無料素材を利用して、
仮公開から正式公開までの間に
川井がちゃちゃっと作成
28
超短期間で制作できた要因
・	顧客(森本氏)の要求仕様が、簡潔かつ明確
・	制作者(川井)が、
要求仕様に合致するテーマ・プラグインを知っていた
・	デザインや詳細仕様は制作者に、本当の意味で"お任せ"
(デザイン・仕様変更は事後承諾でOK)
・	スタート時は制作側が投稿し、更新しながら顧客を教育
・	そして、顧客側と制作側の共通認識・・・・・
29
Done is better than perfect !
「完璧を目指すより、まず終わらせろ」
(Facebook社の壁に書かれている言葉)   
30
要求仕様に合致したテーマ「Lightning」
株式会社ベクトルさんが公開されているWordPress公式テーマ
日本語でもカッコ悪くならず、ブログっぽくない、会社っぽい見た目
Bootstrapベース
レスポンシブデザイン
31
これだけ入れときゃ何とかなる高機能プラグイン
「VK All in One Expansion Unit」
株式会社ベクトルさんが公開されているWordPress公式プラグイン
日本の企業サイトに欲しい機能がたっぷり詰まっていて使いやすい
「Lightning」と
制作者が同じなので
相性が良い
32
今回役に立った「VK All in One Expansion Unit」の機能
・	CTR(Call To Action)
寄付金のお願いを         
コンテンツ下部に表示
投稿と固定ページに自動で適用
・	問い合わせバナー
問い合わせページへのリンクを  
簡単に作成し
フッター等に表示
33
・	関連記事を表示
記事の下に関連記事を自動で表示        
・	PRボックス
トップページから重要コンテンツへ誘導
34
・	VK All in One Expansion Unit のその他の機能
・	ファビコン設定
・	SEO関連機能
 Titleタグの最適化、meta descriptionタグ(記事の概要)自動生成
・	ソーシャルメディア連携
 シェアボタン表示、OGP自動生成)
・	Google Analyticsタグ出力
・	追加ウィジェット
 サムネイル付き最新記事リスト、カスタム投稿タイプ対応のアーカイブリスト
 Facebookページプラグイン、プロフィール表示 など
・	固定ページの子ページを一覧表示、先祖階層からの子ページリスト表示
・	HTMLサイトマップの表示
35
その他のプラグイン(一部)
・	Googleマップを簡単に表示
「Simple Mapプラグイン」
・	お問い合わせ内容をデータベースに保存できるメールフォーム
「MW WP Formプラグイン」
・	ビジュアルエディタのボタンカスタマイズ
「TinyMCE Advancedプラグイン」
・	投稿を複製できるプラグイン
「Duplicate Postプラグイン」
36
Webサイト運用方法
クラウドストレージの利用
・	Dropboxに共有フォルダを作成し、
サイト管理メンバー間で材料等を共有
メンバー間の連絡方法
・	Facebookメッセージを使用
(メンバーは"おじさん"ばかりなので、LINEより使い慣れている)
・	電話は使わない
お互いの空き時間を活用する(本業を圧迫しない)ため
37
Webサイトの更新方法
スタート時
・	森本氏より、掲載内容をWord文書にて受け取り
・	川井が森本氏のユーザーで代理投稿
その後
・	A4 1枚程度の「簡易投稿マニュアル」を作成
・	森本氏が、我流で適当に投稿
川井がフォーマットなどを適宜修正(添削)して
Facebookメッセージなどを通じて指導
38
Webサイト開設後の反応
新聞掲載
4月20日 京都新聞
                5月2日 朝日新聞
                
39
5月3日 京都新聞
       5月6日 舞鶴市民新聞 
40
ラジオ出演
5月16日
舞鶴市のコミュニティラジオ FMまいづる「プレミアムきょうと」に、
森本氏が出演
支援状況の報告と、支援いただいた方々への感謝を伝えるとともに、
さらなる支援を呼びかけ
41
現在の支援状況と今後について
  
            
42
まとめ
レンタルサーバーの自動インストール機能の活用
・	WordPressは、レンタルサーバーなどの自動インストール機能を
使うと、高速・簡単・確実にシステム構築ができる
依頼者と制作者の関係性
・	依頼者から制作者への信頼感は非常に重要
お任せにしてもらえないと、超短納期での制作は難しい
43
常日頃からの準備・経験
・	WordPressは、テーマ・プラグインの数が多すぎて、
いざという時に合うものを探そうとしても難しい
           ↓
・	結局は、普段からの準備・経験がものを言う
44
         でも、正直難しいですよね・・・・
45
コミュニティに参加しよう!
・	準備や経験を積もうとしても、自力だけでは限界がある
           ↓
・	コミュニティに参加してみよう!
近くで開催されている、WordBenchなどに参加して、
懇親会で他の方と話をしてみよう!
いろんな話をするなかで、何かきっと「発見」があるはず
・	公式テーマ・プラグインの作者、書籍の著者なども
普通に参加していて、とても気さくに話をしてくれます!
46
   本日も懇親会がありますので、
         ぜひ、私にも話しかけてください(笑)
47
ご清聴ありがとうございました。

熊本地震支援サイトを30分で立ち上げ即日運用開始した話