こんにちは。羽野めぐみ ( @featherplain )と申します。この記事は WordCamp Tokyo 2015のリレーブログ として投稿しています。

普段はフリーランスの Web デザイナーをしていますが、今年は Web 制作班の班長として WordCamp Tokyo に参加しています。サイト制作だけでなく、他班の方や委員長達と一緒にコンテンツを作り、運営しています。ちなみに WordCamp って何？という方のために一言で説明すると、「世界中で開催されている WordPress の大きなイベント」です。詳しくは WordCamp とは？ | WordCamp Tokyo 2015をご覧ください。

この記事では WordCamp Tokyo 2015のテーマデザインがどんな風に決まっていったのかを書いていきたいと思います。

More Publishing

まずは、デザインのもととなるコンセプトやテーマがなければ何も始まりません。今年のわぷーを含め、全ての制作物は今年のテーマに沿ってデザインされています。

実行委員会が発足して、今年の WordCamp Tokyo のテーマは More Publishing に決まりました。コードを書いて WordPress のテーマやプラグインを公開したり、ブログを書いたり、デザインをしたり(描く)、本を書いたり…etc というように、形は違っても何かしらの情報発信をしたいと思ってもらえるような WordCamp Tokyo にしたいという意味合いです。開催概要に、実行委員長が WordCamp Tokyo への思いを綴っています。

テーマは決まった…ビジュアルどうする?

More Publishing というテーマは決まりました。次のステップはこれをビジュアルに落としこむ作業です。わぷーはもちろんのこと、ロゴや背景イメージも今年仕様のデザインにします。わぷー、ロゴ、背景イメージはサイトデザインだけでなく、パンフレット、スタッフTシャツ、などの様々なグッズのキービジュアルとして大活躍します。

この3つのビジュアル達をデザインしてくれたのが、印刷班(一般向けだとデザインチームと言うと分かりやすいでしょうか)のお三方。More Publishing のテーマに沿って、とってもステキにデザインしてくれましたヽ(=´▽`=)ﾉ 皆さんイケてるデザイナー過ぎて眩しいです。

書道家わぷー

「わぷー（Wapuu）」は、ja.wordpress.org の公式キャラクターです。わぷーは、姿形を変えて、日本の WordCamp や WordBench など色んなところに登場しています。最近では海外の WordCamp にも出没しているみたいです。わぷー人気すごいですね！今までのわぷーは、わぷーアーカイブから見ることができます。

嵩本康志さん ( @jack_13_rocket ) より

わぷー案。「More Publishing」のテーマにそって書道家バージョン描いてみました。
ブログを書く、本を書く、グラフィック・デザインを描く、テーマ・プラグインの開発のコードを書く、といったそれぞれの発信を重点に置いて日本風に落とし込んで制作しています。

書道家わぷーが出来上がるまでの軌跡は WordCamp Tokyo 2015のわぷーは「書道家わぷー」 からご覧いただけます!

今年のメインカラーも決まった

確かこの時点で、今年のメインカラーも決まったような気がします。More Publishing のテーマを日本風に落としこんだ書道家わぷーに決まったので、そこから派生して「白」や「黒(=墨のイメージ)」がいいのではないかという風になりました。それに加えて白と黒に合いそうな藍色みたいな青系のものもいいよね、という感じに。最終的に、青は「瑠璃紺(るりこん)」という色になりました。さらにこの3色から派生して、日本風でメインカラーと合う金色などがよく使われています。

書道家わぷーが生まれ、メインカラーも決まり、背景イメージとロゴも決まっていきます。

背景イメージ

ナツミーヌさん ( http://matsyoi.jp ) より

毛筆の筆跡を海に見立てデザインしました。右上の月には、「この WordCamp Tokyo が参加者の道しるべとなりますように！」という気持ちをこめています。(メインカラーがブルーなので太陽ではなく月)
今年は和風なわぷーなので、テクスチャにも日本の伝統文様を使っています。

ロゴ

濱野さん ( Go！Go！CoworkingSpace ) より

• 色味は藍色メインとし、黒、白で配色構成する。
• 書道わぷーに決定したため、日本色を全面に出したい。とはいえ、ロゴに関しては和風すぎるイメージを持たせたくない。
• 少し立体的で迫力のある形に
• 「筆で描いたようなイメージ」と「発信していくイメージ」を持たせたかった
• 「2015」の部分は目立たせたかったので藍色に合わせるのによく使われる黄金色を採用。

これで今年のキービジュアルが勢揃いしました！わーいヽ(=´▽`=)ﾉ

サイトのテーマデザイン開始

今年のデザインは More Publishing と書道家わぷーの誕生によって、筆や伝統模様のモチーフを使った現代和風の雰囲気になりました。

メインビジュアル

イベントのキービジュアルとなるわぷーと背景とロゴが揃ったので Web 用に最適化してメインビジュアルを作りますが、レスポンシブでの実装も多少考慮しながら考えていきます。今年の会場名、開催日程、テーマのテキスト情報も入れたいです。どういう風にしようかな〜と思ったのですが、今年のロゴは格ゲー感のある力強いデザインです。中央配置にして全面に出す形が一番ロゴの良さを引き出せるかなと思い、どどーんと大きく配置しました。テキスト情報は控えめに、わぷーは去年と同様ぷかぷか浮かせています 🙂 背景イメージは手を一切加えていないです。そのまま使うのが一番だと思ったので。

コンテンツ部分

魅せる部分のメインビジュアルの次は、コンテンツ部分ですね。コンテンツではワンポイントに和柄のモチーフを入れる以外はシンプルなデザインにしています。私個人としてはコンテンツ部分には読みやすさを求めるので、余計な装飾は加えていません。背景には和紙のようなテクスチャをあてました。

後述の実装段階では、CSS の margin、line-height、font-size、 font-weight あたりを細かく調整しました。レスポンシブのサイトでも、スマートフォンで見ると「見出しのフォントでかっ！」と思うことが割とあったりするので、スマートフォンでもストレスなく読めるよう、デバイスごとに font-size や段落ごとの margin などの CSS を必要に応じて書き換えています。

フッター

去年は東京の町並みのシルエットを反映させたのですが、今年は違った見せ方をしたいと思いました。

何かしらの模様をあてこむのが一番やりやすいなと思い、パターンをいくつか作成しました。当初は WordPress のロゴを載せようと思っていたのですが、白黒のわぷーをさりげなく入れています。メインビジュアルと合うように、渋くなりすぎず、現代和風なイメージでフッター部分を作っていきました。

テーマの実装

デザインが固まったところで、Photoshop で作ったカンプから必要な画像を切り出すなどして実装の段階に入っていきます。ただし、WordCamp サイトのテーマは CSS によるカスタマイズ しか認められていません。

WordCamp サイト制作のお約束

WordCamp サイト制作ではいくつかの制限が設けられています。ぱっと思いついたものを挙げてみます。

• PHP, JavaScript 禁止 -> テーマファイルは一切触れない
• テーマ、プラグインのインストールができない -> Jetpack や Tagregator などのプリインストールされたプラグインを活用します
• background-image などで画像を使いたい場合はその都度 メディア にアップロード -> ファイルのパスが月ごとに変わるので注意 -> /files/2015/**/

テーマを作るには、用意されたテーマから好きなものを選んで Jetpack のカスタム CSS 機能を利用してカスタマイズしていきます。あとはウィジェット機能を活用すると便利ですね。ちなみに子テーマも NG です。実際の制作でどうやったのか、技術的な面も後で記事にできればなあと思います。興味のある方は GitHub のリポジトリを覗いてみてください。

ベースにしたテーマ

ベースにできるのは、Twentyfifteen などのデフォルトテーマ、WordCamp 用に用意された WordCamp Base, WordCamp Base Redux, P2 というテーマです。今年の WordCamp Tokyo では、WordCamp Base Redux を採用しました。このテーマはカスタマイズ前提のテーマなので、スタイルは必要最小限しかあたっていません。また、ウィジェットエリアが豊富で、全部で11個もあります。このうち使ったのは4つだけです。使いきれませんねw

せっかくなのでビフォーアフターの画像を載せておきます。デザイナーお3方の力も加わり、味気ないテーマが…

↓こうなりました。無事にビジュアルお披露目することができました！

おわりに

こんな感じでサイトデザインは好きにやらせていただきました。テーマ作るの楽しかったです(=´ ω｀=)今年のデザインを見て、皆様色々な感想を持ったかと思いますが、私はとても満足しています。次の WordCamp Tokyo のデザインはどうなるのでしょうか。次回も楽しみですね！

WordCamp Tokyo 2015の開催まで、残すところ20日を切りました。開催に向けて、スタッフの準備もラストスパートというところでしょうか。タイムテーブルも公開されて、もうすぐ始まるんだなーという感じがしています。

私もスタッフとしてまだまだ頑張っていきます:)