2016年12月17日
しえんのわ昼飲み会
Cherry Pie Web 川井昌彦
熊本地震支援Webサイトの実例紹介と
 支援のためのホームページを作りたい人に
        絶対知っていてほしいこと
2
自己紹介
●川井 昌彦(かわい まさひこ)
 舞鶴市生まれ。舞鶴高専電気工学科卒業
 東京で24年間働いたのち、6年前に親の都合で帰郷し、
   現在はフリーランスで、DTP・Web制作をしています
 京都・大阪・奈良などで行われている
  Web系のセミナーやカンファレンスでの登壇多数
3
2016年7月に大阪大学で開催された国際的大規模カンファレンス
「WordCamp Kansai 2016」では、セッションスピーカーを担当
「熊本地震の支援サイトを30分で立ち上げ、
 独自ドメイン新規取得込みで即日運用開始した話」
4
Cherry Pie Web
http://www.cherrypieweb.com
1997年開設
今年で19年目 !
FacebookやTwitterも
       やっています
5
本日の予定
1.	「北近畿くまもと地震支援チーム」Webサイトの紹介
2.	 もう人の手だけでは作れない! 現代のWeb制作事情
3.	 CMSとは
4.	 ドメインの重要性
5.	 ボランティアでも押さえておくべき、著作権とキャラクター使用
6
「北近畿くまもと地震支援チーム」
京都府舞鶴市で建築資材等を自社開発・販売されている
「株式会社DIY STYLE」の森本隆社長が、
熊本地震被災者支援のために立ち上げたボランティアチーム
被災者支援だけでなく、
現地のボランティアが
必要としている機材も支援
7
Webサイト制作タイムライン
2016年4月18日
熊本地震本震発生
森本さんが、被災者支援のための活動を開始
14:18
森本さんよりFacebookメッセージにて、
Webサイト制作の依頼あり
すぐに電話で詳細を確認
8
依頼内容
・	WordPressベース (森本さんに使用経験があった)
・	ちゃんとした団体っぽい感じの見た目
・	寄付金等の支援方法・口座等の情報をわかりやすく表示
・	支援の進捗状況を日々報告して健全性をアピールしたい
・	支援の内容を記録しておきたい
・	独自ドメインの取得
("ゆうさいくん"を使用したい → 権利者の許可が出るまで保留)
9
14:45
WordPressを使用して
「災害支援チーム ゆうさいくん」を仮公開
川井が使用中のレンタルサーバー
(エックスサーバー)の自動インストール機能
を使用し、WordPressをインストール
・	 テーマ「Lightning」
・	 連携プラグイン「VK All in One Expansion Unit」
 依頼から
わずか28分
10
21:00
権利者より、"ゆうさいくん" の使用許可が
得られなかったため、
支援チーム名を変更
「北近畿くまもと地震支援チーム」
独自ドメインの取得申請(お名前.com)
kitakinki-kumamoto.info
11
 
21:18
ドメイン取得完了
21:25
ネームサーバー設定完了
22:04
新ドメインでのアクセスが可能になったため
正式公開
 チーム名
決定から
わずか64分
12
http://kitakinki-kumamoto.info
13
超短期間で制作できた要因
・	依頼者(森本さん)の要求仕様が、簡潔かつ明確
・	制作者(川井)が、
要求仕様に合致するWebサイト制作方法を知っていた
・	デザインや詳細仕様は制作者に、良い意味で"お任せ"
・	スタート時は制作者が投稿し、更新しながら依頼者を教育
・	そして、依頼者と制作者の共通認識・・・・・
14
Done is better than perfect !
「完璧を目指すより、まず終わらせろ」
(Facebook社の壁に書かれている言葉)   
15
"お任せ"と"丸投げ"は違う
・	役割分担をして、お互いを尊重するのが "お任せ"
依頼者に代わって制作者が作り上げてしまうのが "丸投げ"
・	制作者は依頼者の"考えを形にする人"であって、
      依頼者の代わりに"考える人ではない"
・	お互いの専門の立場から指摘を行うことは必要
16
もう人の手だけでは作れない!
     現代のWeb制作事情
17
10年前
・	Web制作とは、ホームページビルダーやドリームウィーバーを使って、
HTMLで画像やテキストをレイアウトすることだった
・	専門家以外は
ページ作成ができないため、
依頼者が制作者に原稿を渡して、
Webページを作ってもらっていた
18
現在
・	依頼者が自らページを作成して情報を発信
制作者はそのための仕組みを作るだけ
現代においては、
Web制作は見た目よりも
"見えないところ"にかかる比重が大きく、
人力ではとても対応することができない
19
多様なデバイスへの対応
画面幅の違い
・	あらゆる画面幅で見やすく表示させるには、
パソコン・タブレット・スマートフォン
それぞれに違う見た目を
用意する必要がある
20
操作方法の違い
スマートフォンは、マウスでなく指で操作
・	テキストリンクは、リンク同士が近いと正しくタップできない
→ 間隔を広くしたり、ボタン表示にする
・	ページを切り替えるより
長いページをスクロールするほうが楽
→ ページ構成の変更
・	文字入力がキーボードに比べてやりづらい
→ スマートフォン用の入力補助機能をつける
21
検索エンジン対策
タイトルと概要の適切な設定
検索結果のタイトルと概要は、Webサイト側でコントロールする
22
XMLサイトマップ
サイトの構造、各ページの更新頻度、重要性を検索エンジンに伝えて、
更新を素早く反映させ、検索結果を最適化する
23
SNSのシェアへの対応
シェアされたときに表示される画像、タイトル、概要は、
            Webページにデータとして仕込んでおく
仕込んでおかないと、
ページ内の広告の画像が出たりすることも!
og:image
og:title
og:description
og:url
24
頻繁な仕様変更への対応
Webは時代の流れとともに、ルールや仕様がどんどん変わる
”昨年の常識が今年の非常識”
(例)Facebookのシェア用画像のサイズの仕様
 90 x 90px
  → 200 x 200px
   → 468 x 468px
    → 1260 x 630px
     → 1500 x 1500px
最初の仕様から20倍近くに変更され、
今では、90 x 90px はエラーになってしまう
25
CMSとは
コンテンツ・マネージメント・システムの略
コンテンツ(テキストと画像)と、レイアウト(ひな形)を保存しておき
ユーザーのリクエストに合わせて、ページやデータを自動生成する
26
CMS導入の方法
Webサービスの利用
アメブロ、Jimdo、Wixなど
・	無料プランでは広告が出たり表示速度が遅くなったりする
・	基本機能は無料、高度な機能は有料
(独自ドメイン、広告非表示、高速化、アクセス量制限)
・	初心者でも運用できるように工夫されている
システム管理、セキュリティなどはサービス側が面倒を見てくれる
・	カスタマイズの自由度が低い
27
サーバーを借りてシステムを設置
WordPress、MovableTypeなど
・	導入には、ある程度の専門知識が必要
・	費用はピンキリ(無料もある)
高いほうが高速で高アクセスに耐える (Webサービスより比較的安価)
・	運用自体は初心者でも可能だが、セキュリティなど自己責任
(サーバーである程度の機能はあり)
・	かなり自由にカスタマイズできる
28
ドメインの重要性
http://www.kitakinki-kumamoto.info(←ドメイン)
ドメインとは、Webサイトの住所をわかりやすく表したもの
・	ドメインがサイト独自のもの:独自ドメイン
・	プロバイダやサービスのもの:共有ドメイン
ドメインは管理の単位
・	検索エンジンの評価単位:ドメイン
・	アクセス解析はドメイン単位(アメブロなどのアクセス解析は当てにならない)
・	個別ページの評価 → ドメイン全体の評価
※ 他のページの評価も上がる
29
(例)http://kokintnb.wixsite.com
  (FLAT+をやっておられるKOKINさんのサイト)
・	管理単位:wixsite.com
・	KOKINさんの作られたページの評価 → wixsite.com の評価
※ 宰嘉庵など、他のページの評価には影響しない
・	もし、wixからjimdoに引っ越したら、ページの評価は失われる
→ 検索に出てこなくなる
独自ドメインならば、
 引っ越してもドメインは変わらないので評価も引き継げる
・	実はkokinさんは、過去に独自ドメインkokin.netでサイトを持っておられ、
これが今でも検索トップに出てきます
30
ボランティアでも押さえておくべき
    著作権とキャラクター使用
31
著作権について
・	ネット上にあるものは、「落ちている」のではない
・	日本では、子どもの落書きやメモでも、著作権が発生
・	権利者の許可なく利用することは、個人利用以外は著作権侵害
(一部例外あり)
場合によっては刑事罰も
・	権利者がプロかアマチュアか、
使用方法が商用利用かボランティアかは
関係がない
32
他の媒体の内容を使いたい場合は「引用」する
・	引用には法律で定められた決まりがあり、
正しく引用されていないと著作権侵害
・	キュレーションサイト、まとめサイトは
これを満たしていないものも多いので、安易に真似しないように
33
フォントにも著作権がある
・	プロが使っているフォント:
→ パソコン1台当たり年間5万円程度のライセンス料
  ライセンスのないパソコンで使うと違反
・	Windows搭載のMSゴシック、メイリオなど
Mac搭載のヒラギノなど:
→ 正規ユーザーであれば商用使用可能
・	MS Office搭載の「HG丸ゴシックM-PRO」など:
→ 個人利用以外での使用には有償ライセンス契約が必要
・	年賀状ソフトなどに付属しているフォント:
→ 個人利用以外での使用には有償ライセンス契約が必要
34
フリー素材集は、"権利を買った人だけ" がフリー
・	フリー素材集:
→ 購入した人あるいは登録した人だけが、自由に使用できる
  無断で他人に使わせたらライセンス違反
  依頼者が購入し "自身の依頼物のため" に制作者に使わせるのはOK
 ★お願い★
  素材集から探すのは、
  非常に大変なので
  依頼者が探してください!
35
キャラクターの使用には、細心の注意を
・	キャンペーンキャラクターなどの使用には事前許諾が必要
・	イメージを保護するために定められた厳密な使用規則を守る
         ↓
   イメージの保護が目的なので、
    使用目的が商用でもボランティアでも、
              まったく関係がない
  (参考)くまモンのイラストの支援活動等への利用について
   https://kumamon-official.jp/information
36
     他者の権利やイメージを尊重しなかったり、
       関心が薄いような支援活動が、
      はたして、支持されるのでしょうか?
37
それは難しいことでも何でもなくて、
  少し相手のことを考えてあげるだけの、
       当たり前のことなんじゃないかな、と思います
38
ご清聴ありがとうございました。

熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと