Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

855 views

Published on

しえんのわ昼飲み会 2016年12月17日 at 京都府舞鶴市 Cafe&Bar FLAT+

Published in: Government & Nonprofit
  • Be the first to comment

  • Be the first to like this

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

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

×