残り7日! 大公開 WordFes 2016 ウェブサイト制作の裏側

WordFes まであと7日

こんにちは。Katz です。

昨日のあひるさんの「残り8日!名工大へのオススメルート!」はたまたま別の名工大で開催された勉強会のついでに通りましたが、本当にポケストップでいっぱいで、無事、レベル7からレベル8にレベルアップできました(遅い)

WordFes Nagoya 2016 副実行委員長を務め、Ustream 放送と、5215教室で13:15から「時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記」を努めており、サイト制作のディレクション担当をしています。

せっかくの WordPress のカンファレンスです。去年のブログ記事に引き続き、今年も、こちら WordFes 2016 サイト制作の裏側を紹介します。

 

WordFes Nagoya では毎年オリジナルでサイト制作

「WordPress のイベントだから、 WordPress サイトを作ろう」ということで、サイト設計、デザイン、コーディング、構築、運用を一つの WordPress で行い、イベント終了後は StaticPress を使って静的 HTML サイトとして永代供養をしています。

 

WordFes Nagoya 2016 サイト制作チーム

今回のサイト制作チームは

以上のメンバーを中心に行いました。

今年は、魚住さんと泉さんを新メンバーとして加え、情報入力を中心にご協力いただきました。新メンバーでもいろいろプラグインの導入などを提案していただいてすごく助かりました。

ちなみに、WordFes では、毎年、サイト制作を手伝っていただける方を募集しています。

来年のデザイン、ディレクション、コーディング、サイト構築などを手伝っていただける方を今から募集していますので、是非、Katz までお問い合わせください。

 

今回のテーマ:森

今回のテーマは森。

実行委員長直々にお忙しい時間を割いて素晴らしいデザインを作っていただきました。伊達さんありがとうございます。

WordFes サイト基本仕様

  • PC 横幅1000px
  • スマホ対応する
  • ブラウザは IE10 以降

去年に引き続き、同じ仕様で行いました。

WordFes サイト進行表

去年に引き続き、専用の Facebook Group と、Google Spreadsheet を使って課題管理用&サイトマップを作って管理を行いました。

情報コミュニケーション

コミュニケーションをとるために下記のサービスを利用しました。

  • サイボウズLIVE
    • 実行委員全体と Web  サイトの仕様を話し合うのに使いました
  • 秘密の Facebook グループ
    • Web チームの人のみがメンバー秘密のFacebook グループを作成
    • 1投稿記事 = 1 課題として、コメントで話し合いました。
    • Backlog や GitHub も考えたのですが、仕事ではないので Facebook グループのみにしました
  • Facebook メッセージ
    • 気軽に相談したいときは個別で Facebook メッセージでやりとりしました

 

課題管理:サイボウズLive でチーム全体と

サイボウズLIVEでは、サイト制作チーム以外の広報、セッション、リレーブログなどのチームと、サイトをどうやって公開していくか、原稿を書いてもらうにはどうしてもらうかを調整しました。

特にサイト制作チーム以外のメンバーはバグ取りチェックをしていただいたようなもので、常に不具合を発見しサイボウズLIVEにレポートしていただきました。ありがとうございます!

サイボウズLIVE

去年とほぼ同じですが、まず、実行ウイン全体で共有すべきことは、サイボウズLIVEで話し合い、Web チームのみで話し合うことは Facebook グループに移動して話し合いました。

サイボウズLIVE でのコミュニケーションで気をつけたところは、話し合いである程度仕様などが固まってきたら、各トピックのトップの本文を変更して、決まった仕様などを書き込んでいきました。

こうすることで、誰もがコメントを追う必要なく最新の状況をチェックできるようになるように心がけました

まとめをトピックの本文に随時まとめていくという心がけは、今回の WordFes サイボウズ Live だけでなく、普段の仕事でも行っています。こうすることにより、Katz が不慮の事故でいなくなっても、担当者は各トピックの最初の文章にまず目を通してもらうだけで済むはずです。

 

課題管理:Google Spreadsheet

本当ならば Backlog などの課題サービスや GitHub の Issue を使うことも考えたのですが、それほど規模は多くないので、こちらから Excel での課題管理テンプレートをいただき Google Spreadsheet を利用しました。

タスクリスト

Google Spreadsheet 上で公開することにより

  • Excel などのアプリを毎回立ち上げる必要がなくなる
  • ファイルをメールでやりとりしてどれが最新のファイルかわからなくなる

というよくある課題管理のミスを最小限に抑えました。

この課題管理表はチーム全体と共有するというより、Katz 自身が、今日は○○さんに確認をしないといけないなーという確認を行うためや忘備録として使っていることが多かったです。この課題管理表はあくまでディレクターさん自身が責任をもって管理しているという意味合いが大きかったです。

また、去年の課題管理表に加えて、今年は「サイトマップ」を作成。サイトの構成と、制作する画像バナーの一覧とその進捗を管理できるようにしました。

 

サイトマップ

この Google Spreadsheet は誰でも閲覧することができます!

https://docs.google.com/spreadsheets/d/1eS50wLChjqLo-iKUIiBScaRa2JiF4xMcJ3kthBLFMnI/edit?usp=sharing

イベントサイトを WordPress で作成している人は、イベントサイト制作のテンプレートとしても使えるかも!?

 

課題管理:Web チーム専用 Facebook 秘密グループ

これも去年と同じです。

サイボウズLIVE は実行委員会全体が話を進めるところなので、時々、更新についていけないメンバーが居たのがわかっていたので、去年から Web チームは、別で Facebook グループでやりとりをしていました。

Group の投稿を一番最初に掲載できるピン機能で、課題表へのリンクや必要な情報を記載し、1投稿 = 1課題として登録。担当者に向けてコメントをするときは、その人をタグ付けして行いました。

グループの更新に気づかなかった人は、メッセージを送って気づいてもらうなど、ゆるいプロジェクトなりに進行を進めていけたと思います。

仕事でもないので、 Facebook を見る時間 = 仕事以外の時間に確認という切り分けてもらうという意味で Facebook グループの活用は良かったかもしれません。

今回は、新メンバーにもかかわらず、積極的にいろいろな提案を魚住さんにしていただき、コンテンツ入力、画像制作でも長い時間をかけて挑戦していただけたのですが、Facebook Group を通じてコミュニケーションが取れたのかなと思います。

Facebook 秘密グループ

 

GitHub でコードの管理 & 今年もコードを完全公開!

コードの管理は GitHub で行いました。

そして、去年に引き続き、今年も WordFes Nagoya 2016 で使用したコードは、全て公開しています

https://github.com/WordBenchNagoya/WordFes2016

まあ、GitHub にお金を払わないと公開レポジトリになってしまうので・・・。

去年と同じく

  • イベントサイトには持って来い! Bootstrap ベースの WordPress テーマ
  • カスタマイズした CampTix
  • タイムテーブル & セッション情報のカスタム投稿タイプ
  • トップページ用バナー公開

などのコードが書いてあります。

WordFes 2014 から、石原さん、今井さんのコードを引き継いで小田島さんにバトンタッチ。

小田島さんにはコーディングと WordPress 実装で大変お世話になりました。

また今年は泉さんも一部 WordPress 実装に挑戦してもらいました。

仕事をするのはまだ自身がなくても、こういったイベントサイトを手掛けることで実践の経験を得られるのが WordFes の良い所!ここで経験すると次は仕事ができますよ

 

使用プラグインリスト

恒例の使用プラグインリストです。

  • Admin Post Navigation
  • Advanced Custom Fields
  • Advanced Custom Fields: Repeater Field
  • CampTix Event Ticketing
  • CampTix Payment Method: Bank transfer
  • Contact Form 7
  • Crayon Syntax Highlighter
  • Custom Post Type Permalinks
  • Debug Bar
  • Duplicate Post
  • Image Widget
  • Imsanity
  • PS Taxonomy Expander
  • Regenerate Thumbnails
  • Smart Slider 3
  • Theme Test Drive
  • Ustream Status
  • WordPress インポートツール
  • WP Admin UI Customize
  • WP Extend Toolbar
  • WP Multibyte Patch
  • Wp Pagenavi Style
  • WP-PageNavi
  • Yoast SEO
  • Post Types Order

 

イベント終了後は永代供養

去年と同じです。

動的 CMS を運用する上で重要になってくるのが、メンテンナンス。

WordFes Nagoya 2016 が終了すると、基本的に更新はストップします。

そうすると WordPress の脆弱性などが問題になってくることもあるので WordPress を今後も一生アップデートするか、サイトを閉鎖するか、それとも HTML サイトとして永代供養するかのオプションがあります。

WordFes では、過去のサイトも含めて StaicPress というプラグインを使って HTML ファイルとして出力し、PHP ファイルを一切排除しています。

古い WordPress を走らせ続けて、ハッキングされることを防ぎます。

 

まとめ

以上、長くなってしまいましたが WordFes Nagoya 2016 サイトの裏側の紹介でした。

もしも WordFes のサイトについて詳しく知りたい方は、WordFes の会場で各担当者の人を見つけてお話してみてください。

宿泊する人は、夜な夜ないろいろなお話を聞けるかもです。

深夜の Ustream 放送でも、いろいろ聞くことができるかもですので、遠隔の方もぜひ参加くださいませ。

最後に、バナーデザインをしていただいた、だーやまさん。「バナーデザインは完了」とお伝えしていたにも関わらず、実はこのバナー制作を忘れていたーなんてお願いをしたりしてしまったり、すいませんでした・・・。

また、わぷーデザインなどをしていただいた、くのーさん。ありがとうございました。

 

WordFes 開催まであと7日。いよいよ来週、2016年8月27日、開催です!

明日は魚住さんの出番です。