1.
2016年12月17日
しえんのわ昼飲み会
Cherry Pie Web 川井昌彦
熊本地震支援Webサイトの実例紹介と
支援のためのホームページを作りたい人に
絶対知っていてほしいこと

2.
2
自己紹介
●川井 昌彦（かわい まさひこ）
舞鶴市生まれ。舞鶴高専電気工学科卒業
東京で24年間働いたのち、6年前に親の都合で帰郷し、
現在はフリーランスで、DTP・Web制作をしています
京都・大阪・奈良などで行われている
Web系のセミナーやカンファレンスでの登壇多数

3.
3
2016年7月に大阪大学で開催された国際的大規模カンファレンス
「WordCamp Kansai 2016」では、セッションスピーカーを担当
「熊本地震の支援サイトを30分で立ち上げ、
独自ドメイン新規取得込みで即日運用開始した話」

4.
4
Cherry Pie Web
http://www.cherrypieweb.com
1997年開設
今年で19年目 ！
FacebookやTwitterも
やっています

5.
5
本日の予定
1. 「北近畿くまもと地震支援チーム」Webサイトの紹介
2. もう人の手だけでは作れない！ 現代のWeb制作事情
3. CMSとは
4. ドメインの重要性
5. ボランティアでも押さえておくべき、著作権とキャラクター使用

6.
6
「北近畿くまもと地震支援チーム」
京都府舞鶴市で建築資材等を自社開発・販売されている
「株式会社DIY STYLE」の森本隆社長が、
熊本地震被災者支援のために立ち上げたボランティアチーム
被災者支援だけでなく、
現地のボランティアが
必要としている機材も支援

7.
7
Webサイト制作タイムライン
2016年4月18日
熊本地震本震発生
森本さんが、被災者支援のための活動を開始
14：18
森本さんよりFacebookメッセージにて、
Webサイト制作の依頼あり
すぐに電話で詳細を確認

8.
8
依頼内容
・ WordPressベース （森本さんに使用経験があった）
・ ちゃんとした団体っぽい感じの見た目
・ 寄付金等の支援方法・口座等の情報をわかりやすく表示
・ 支援の進捗状況を日々報告して健全性をアピールしたい
・ 支援の内容を記録しておきたい
・ 独自ドメインの取得
（"ゆうさいくん"を使用したい → 権利者の許可が出るまで保留）

9.
9
14：45
WordPressを使用して
「災害支援チーム ゆうさいくん」を仮公開
川井が使用中のレンタルサーバー
（エックスサーバー）の自動インストール機能
を使用し、WordPressをインストール
・ テーマ「Lightning」
・ 連携プラグイン「VK All in One Expansion Unit」
依頼から
わずか28分

10.
10
21：00
権利者より、"ゆうさいくん" の使用許可が
得られなかったため、
支援チーム名を変更
「北近畿くまもと地震支援チーム」
独自ドメインの取得申請（お名前.com）
kitakinki-kumamoto.info

11.
11
21：18
ドメイン取得完了
21：25
ネームサーバー設定完了
22：04
新ドメインでのアクセスが可能になったため
正式公開
チーム名
決定から
わずか64分

12.
12
http://kitakinki-kumamoto.info

13.
13
超短期間で制作できた要因
・ 依頼者（森本さん）の要求仕様が、簡潔かつ明確
・ 制作者（川井）が、
要求仕様に合致するWebサイト制作方法を知っていた
・ デザインや詳細仕様は制作者に、良い意味で"お任せ"
・ スタート時は制作者が投稿し、更新しながら依頼者を教育
・ そして、依頼者と制作者の共通認識・・・・・

14.
14
Done is better than perfect !
「完璧を目指すより、まず終わらせろ」
（Facebook社の壁に書かれている言葉）

15.
15
"お任せ"と"丸投げ"は違う
・ 役割分担をして、お互いを尊重するのが "お任せ"
依頼者に代わって制作者が作り上げてしまうのが "丸投げ"
・ 制作者は依頼者の"考えを形にする人"であって、
依頼者の代わりに"考える人ではない"
・ お互いの専門の立場から指摘を行うことは必要

16.
16
もう人の手だけでは作れない！
現代のWeb制作事情

17.
17
10年前
・ Web制作とは、ホームページビルダーやドリームウィーバーを使って、
HTMLで画像やテキストをレイアウトすることだった
・ 専門家以外は
ページ作成ができないため、
依頼者が制作者に原稿を渡して、
Webページを作ってもらっていた

18.
18
現在
・ 依頼者が自らページを作成して情報を発信
制作者はそのための仕組みを作るだけ
現代においては、
Web制作は見た目よりも
"見えないところ"にかかる比重が大きく、
人力ではとても対応することができない

19.
19
多様なデバイスへの対応
画面幅の違い
・ あらゆる画面幅で見やすく表示させるには、
パソコン・タブレット・スマートフォン
それぞれに違う見た目を
用意する必要がある

20.
20
操作方法の違い
スマートフォンは、マウスでなく指で操作
・ テキストリンクは、リンク同士が近いと正しくタップできない
→ 間隔を広くしたり、ボタン表示にする
・ ページを切り替えるより
長いページをスクロールするほうが楽
→ ページ構成の変更
・ 文字入力がキーボードに比べてやりづらい
→ スマートフォン用の入力補助機能をつける

21.
21
検索エンジン対策
タイトルと概要の適切な設定
検索結果のタイトルと概要は、Webサイト側でコントロールする

22.
22
XMLサイトマップ
サイトの構造、各ページの更新頻度、重要性を検索エンジンに伝えて、
更新を素早く反映させ、検索結果を最適化する

23.
23
SNSのシェアへの対応
シェアされたときに表示される画像、タイトル、概要は、
Webページにデータとして仕込んでおく
仕込んでおかないと、
ページ内の広告の画像が出たりすることも！
og:image
og:title
og:description
og:url

24.
24
頻繁な仕様変更への対応
Webは時代の流れとともに、ルールや仕様がどんどん変わる
”昨年の常識が今年の非常識”
（例）Facebookのシェア用画像のサイズの仕様
90 x 90px
→ 200 x 200px
→ 468 x 468px
→ 1260 x 630px
→ 1500 x 1500px
最初の仕様から20倍近くに変更され、
今では、90 x 90px はエラーになってしまう

25.
25
CMSとは
コンテンツ・マネージメント・システムの略
コンテンツ（テキストと画像）と、レイアウト（ひな形）を保存しておき
ユーザーのリクエストに合わせて、ページやデータを自動生成する

26.
26
CMS導入の方法
Webサービスの利用
アメブロ、Jimdo、Wixなど
・ 無料プランでは広告が出たり表示速度が遅くなったりする
・ 基本機能は無料、高度な機能は有料
（独自ドメイン、広告非表示、高速化、アクセス量制限）
・ 初心者でも運用できるように工夫されている
システム管理、セキュリティなどはサービス側が面倒を見てくれる
・ カスタマイズの自由度が低い

27.
27
サーバーを借りてシステムを設置
WordPress、MovableTypeなど
・ 導入には、ある程度の専門知識が必要
・ 費用はピンキリ（無料もある）
高いほうが高速で高アクセスに耐える （Webサービスより比較的安価）
・ 運用自体は初心者でも可能だが、セキュリティなど自己責任
（サーバーである程度の機能はあり）
・ かなり自由にカスタマイズできる

28.
28
ドメインの重要性
http://www.kitakinki-kumamoto.info（←ドメイン）
ドメインとは、Webサイトの住所をわかりやすく表したもの
・ ドメインがサイト独自のもの：独自ドメイン
・ プロバイダやサービスのもの：共有ドメイン
ドメインは管理の単位
・ 検索エンジンの評価単位：ドメイン
・ アクセス解析はドメイン単位（アメブロなどのアクセス解析は当てにならない）
・ 個別ページの評価 → ドメイン全体の評価
※ 他のページの評価も上がる

29.
29
（例）http://kokintnb.wixsite.com
（FLAT+をやっておられるKOKINさんのサイト）
・ 管理単位：wixsite.com
・ KOKINさんの作られたページの評価 → wixsite.com の評価
※ 宰嘉庵など、他のページの評価には影響しない
・ もし、wixからjimdoに引っ越したら、ページの評価は失われる
→ 検索に出てこなくなる
独自ドメインならば、
引っ越してもドメインは変わらないので評価も引き継げる
・ 実はkokinさんは、過去に独自ドメインkokin.netでサイトを持っておられ、
これが今でも検索トップに出てきます

30.
30
ボランティアでも押さえておくべき
著作権とキャラクター使用

31.
31
著作権について
・ ネット上にあるものは、「落ちている」のではない
・ 日本では、子どもの落書きやメモでも、著作権が発生
・ 権利者の許可なく利用することは、個人利用以外は著作権侵害
（一部例外あり）
場合によっては刑事罰も
・ 権利者がプロかアマチュアか、
使用方法が商用利用かボランティアかは
関係がない

32.
32
他の媒体の内容を使いたい場合は「引用」する
・ 引用には法律で定められた決まりがあり、
正しく引用されていないと著作権侵害
・ キュレーションサイト、まとめサイトは
これを満たしていないものも多いので、安易に真似しないように

33.
33
フォントにも著作権がある
・ プロが使っているフォント：
→ パソコン1台当たり年間5万円程度のライセンス料
ライセンスのないパソコンで使うと違反
・ Windows搭載のMSゴシック、メイリオなど
Mac搭載のヒラギノなど：
→ 正規ユーザーであれば商用使用可能
・ MS Office搭載の「HG丸ゴシックM-PRO」など：
→ 個人利用以外での使用には有償ライセンス契約が必要
・ 年賀状ソフトなどに付属しているフォント：
→ 個人利用以外での使用には有償ライセンス契約が必要

34.
34
フリー素材集は、"権利を買った人だけ" がフリー
・ フリー素材集：
→ 購入した人あるいは登録した人だけが、自由に使用できる
無断で他人に使わせたらライセンス違反
依頼者が購入し "自身の依頼物のため" に制作者に使わせるのはOK
★お願い★
素材集から探すのは、
非常に大変なので
依頼者が探してください！

35.
35
キャラクターの使用には、細心の注意を
・ キャンペーンキャラクターなどの使用には事前許諾が必要
・ イメージを保護するために定められた厳密な使用規則を守る
↓
イメージの保護が目的なので、
使用目的が商用でもボランティアでも、
まったく関係がない
（参考）くまモンのイラストの支援活動等への利用について
https://kumamon-official.jp/information

36.
36
他者の権利やイメージを尊重しなかったり、
関心が薄いような支援活動が、
はたして、支持されるのでしょうか？

37.
37
それは難しいことでも何でもなくて、
少し相手のことを考えてあげるだけの、
当たり前のことなんじゃないかな、と思います

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