SlideShare a Scribd company logo
1 of 38
Download to read offline
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
ご清聴ありがとうございました。

More Related Content

What's hot

WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」LIQUID DESIGN Ltd.
 
南実業会Webサイト開設について
南実業会Webサイト開設について南実業会Webサイト開設について
南実業会Webサイト開設についてCherry Pie Web
 
Yat-wbnara201602
Yat-wbnara201602Yat-wbnara201602
Yat-wbnara201602YAT blog
 
2015年のWebを考える
2015年のWebを考える2015年のWebを考える
2015年のWebを考えるkenji goto
 
第10回ゼロからはじめるWordPress勉強会(初心者向け)
第10回ゼロからはじめるWordPress勉強会(初心者向け)第10回ゼロからはじめるWordPress勉強会(初心者向け)
第10回ゼロからはじめるWordPress勉強会(初心者向け)kenji goto
 
フリーランスに必要な “リサーチスキル”と仕事の作り方
フリーランスに必要な “リサーチスキル”と仕事の作り方フリーランスに必要な “リサーチスキル”と仕事の作り方
フリーランスに必要な “リサーチスキル”と仕事の作り方kenji goto
 
Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用Junzo Matunoo
 
WordPressカスタム投稿とカスタム分類を使ってみよう
WordPressカスタム投稿とカスタム分類を使ってみようWordPressカスタム投稿とカスタム分類を使ってみよう
WordPressカスタム投稿とカスタム分類を使ってみようkenji goto
 
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015Hiroki Saiki
 
Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)Yasuhito Yabe
 
一歩踏み込むWordPress
一歩踏み込むWordPress一歩踏み込むWordPress
一歩踏み込むWordPress正樹 平野
 
Web制作のためのおすすめツール
Web制作のためのおすすめツールWeb制作のためのおすすめツール
Web制作のためのおすすめツールkenji goto
 
WordCamp Tokyo 2015 リアルフォーラム
WordCamp Tokyo 2015 リアルフォーラムWordCamp Tokyo 2015 リアルフォーラム
WordCamp Tokyo 2015 リアルフォーラムHajime Ogushi
 
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介kenji goto
 
新入生歓迎LT祭り2014
新入生歓迎LT祭り2014新入生歓迎LT祭り2014
新入生歓迎LT祭り2014Azusa Uezu
 
concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)Kazuhiro Matsuda
 
Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想Hidekazu Ishikawa
 
コミュニティ立ち上げのときに本当にあった恐い話
コミュニティ立ち上げのときに本当にあった恐い話 コミュニティ立ち上げのときに本当にあった恐い話
コミュニティ立ち上げのときに本当にあった恐い話 Mio Konagaya
 
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoテーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoHidekazu Ishikawa
 
MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料Yasufumi Nishiyama
 

What's hot (20)

WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
 
南実業会Webサイト開設について
南実業会Webサイト開設について南実業会Webサイト開設について
南実業会Webサイト開設について
 
Yat-wbnara201602
Yat-wbnara201602Yat-wbnara201602
Yat-wbnara201602
 
2015年のWebを考える
2015年のWebを考える2015年のWebを考える
2015年のWebを考える
 
第10回ゼロからはじめるWordPress勉強会(初心者向け)
第10回ゼロからはじめるWordPress勉強会(初心者向け)第10回ゼロからはじめるWordPress勉強会(初心者向け)
第10回ゼロからはじめるWordPress勉強会(初心者向け)
 
フリーランスに必要な “リサーチスキル”と仕事の作り方
フリーランスに必要な “リサーチスキル”と仕事の作り方フリーランスに必要な “リサーチスキル”と仕事の作り方
フリーランスに必要な “リサーチスキル”と仕事の作り方
 
Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用
 
WordPressカスタム投稿とカスタム分類を使ってみよう
WordPressカスタム投稿とカスタム分類を使ってみようWordPressカスタム投稿とカスタム分類を使ってみよう
WordPressカスタム投稿とカスタム分類を使ってみよう
 
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
『ライターと制作者のメディアの作り方』WordCamp Tokyo2015
 
Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)Designer Meets Bootstrap(22th Knock!)
Designer Meets Bootstrap(22th Knock!)
 
一歩踏み込むWordPress
一歩踏み込むWordPress一歩踏み込むWordPress
一歩踏み込むWordPress
 
Web制作のためのおすすめツール
Web制作のためのおすすめツールWeb制作のためのおすすめツール
Web制作のためのおすすめツール
 
WordCamp Tokyo 2015 リアルフォーラム
WordCamp Tokyo 2015 リアルフォーラムWordCamp Tokyo 2015 リアルフォーラム
WordCamp Tokyo 2015 リアルフォーラム
 
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
 
新入生歓迎LT祭り2014
新入生歓迎LT祭り2014新入生歓迎LT祭り2014
新入生歓迎LT祭り2014
 
concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)concrete5 CMS FES 2016(CMS夏祭り2016)
concrete5 CMS FES 2016(CMS夏祭り2016)
 
Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想Lightning ✕ ExUnit の開発背景と設計思想
Lightning ✕ ExUnit の開発背景と設計思想
 
コミュニティ立ち上げのときに本当にあった恐い話
コミュニティ立ち上げのときに本当にあった恐い話 コミュニティ立ち上げのときに本当にあった恐い話
コミュニティ立ち上げのときに本当にあった恐い話
 
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoテーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyo
 
MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料MTDDC Meetup NAGOYA 2014_LT資料
MTDDC Meetup NAGOYA 2014_LT資料
 

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