No Image

WordCamp Kansai 2014に実行委員として参加しました(1)

先日終了したWordCamp Kansai 2014に実行委員として参加しました。

パタパタと駆け回っていたので当日のお話は少なめですが、Campサイト制作のノウハウのようなものをここに残しておきたいなと思います。

キックオフミーティングの頃

去年のWordCamp Kobe 2013に参加して以来、WordBenchに顔を出すようになり、WordFesにも行ったり、東京のCampにも遠征したりとWordPress漬けの日々を送っていましたが、まさかコミュニティ参加歴1年くらいで実行委員やっちゃうとは(正直)思っていませんでした。

もっと思っていなかったのは、チームの割り振り。
11月のキックオフミーティングで、わたしができるのはサイト構築だけだなあと、「サイト構築チーム」に手を上げたのですが、まさかのリーダーに任命されました!

実行委員初参加でチームリーダー。通常のイベント実行委員ならあまり考えられないことですよね。(きっと。多分)

最初は「どうしよう、大丈夫かな」と思うこともとても多かったのですが、チームメンバーの助けもあり、最後まで完走することが出来ました。
実際の担当の割り振りや進め方については、公式サイトのブログにアップしています。興味のある方はぜひそちらも読んでみてください。

ティザーサイトの制作

チームとして動き始めてから、目下の目標はティザーサイトの公開でした。
まず進めたのは、どのテーマを使ってサイトを作るのかということ。

WordCampのサイトはイチからテーマを作ることはできません。
既存のインストールされているテーマから選択し、Jetpackの拡張CSSの機能で体裁を整えます。

WordCamp Kansai 2014のときにプリインストールされていたテーマは以下の通り。

後の方に書いた「WordCamp Base」と「WordCamp Base Redux」は公式テーマには上がっていないようですね。
過去のCampのサイトもざっと見ましたが、わりと「WordCamp Base」が一般的?なようでした。
後者の「WordCamp Base Redux」は使っていないので正確にはわかりませんが、

The new incarnation of the WordCamp Base theme, now with markup based on _s theme.

と説明文にあったので、スターターテーマ「_s」がベースのテーマなのでしょう。

今回採用したのは、Twenty Thirteenです。

Twenty Thirteenのキャプチャ

これが

WordCamp Kansai 2014のティザーサイトのキャプチャ

こうなりました!

Twenty Thirteenに見えないですよね。これはフロントページ設定でティザー用のCSSをごりごり書きました。
固定ページの中に「OVERVIEW」以下の本文の内容を入れていたかと思います。ちょっと昔で思い出せない・・・。

Twenty Thirteenベースなので、サイトは当然レスポンシブになります。
メインビジュアルを各サイズで最適化する作業が一番大変でした・・・。
ぺたりと一枚画像で作るわけにもいかず、細かくパーツを書き出して、position指定で位置を調整して、の繰り返しです。
わたしもレスポンシブたくさんやっている!というわけではない(むしろ不慣れ)ので、「これ出来るだろうか・・・」とちらりと考えたこともありました。

そんなこんなで2/7にティザーサイト公開しました!

当日は当日でバッタバタでした。
開催日付が間違っている!(あえて日付が間違っているティザー画像を持ってきました。なつかしい)とか、フッターのSNSアイコンのガイドライン違反では?とか、OGPがブランク!いう指摘もありました。チーム内外問わず色々な方を巻き込みながら当日にようやく完成した、という感じです。

公式サイトの制作

さて、ティザーサイトの公開が終わったら、次は本番サイトです。ここからが大変!
トップ、開催概要、アクセスなどなど・・・各ページごとのワイヤーフレームはすべて作りました。

デザインチームからカラースキームはもらっていたので、製作途中のメインビジュアルを当てながら同時進行でデザインを進めてもらうことに。
途中ハングアウトやミーティングをしたりしながら、各自分担して作業を進めました。

そして、きたる3/31。ティザーサイトから本番サイトへ切り替えました。

WordCamp Kansai 2014の本番サイトのキャプチャ

これは現時点で公開しているサイトのキャプチャですが、軽いスタイルガイドのようなものを作ったので、後々のページの追加などは楽に出来たのではないかなと思っています。

本番サイトのCSSで大変だったのはメインビジュアル!・・・ではなく、既存のCSSからの変更でした。
メインビジュアルはティザーのときにコツを掴んだのか、割りと早く整えられたような気がします。

例えば、メニューの色。デフォルトのTwenty Thirteenは全体的にオレンジ系の色が設定されているのですが、これを替えるためにaタグとliタグと・・・と、「一体どれだけ指定入れているんだ!」と頭を抱えてしまいました。
サイト幅もデフォルトのサイズから変えているのでその調整だったり、ワンカラムページの作成だったりもこの時にしました。

また、Jetpackの仕様でOGP画像はアイキャッチが入るようなので、サイト上ではアイキャッチをdisplay:noneしています。
一端すべてのページは非公開で作成しているので、公開時にFacebookのデバッガーをかけて、OGP情報をクリアすることも忘れないようにしました。

後悔してホッと一息。というわけでもなく、これからが本番です。

ちょっと長くなってしまったので、続きはまた後日。(ほんとか?という突っ込みはなしで・・・!)
タイムテーブル周りのことや、広報コンテンツのことを振り返ろうと思います。

copyright © mellowchanter.info All Rights Reserved.