WordPressで劇団のウェブサイト作った
同じシェアハウスに住んでいる児玉さん（@damak0_3）が立ち上げた劇団『かまどキッチン』のホームページを制作しました。
劇団かまどキッチンのウェブサイト制作に協力しました、見てください https://t.co/TnyrzQzEtp
— 能力の高い女 (@silloi93) September 8, 2019
七月下旬に依頼を受けて着手し、一ヶ月半ほどの制作期間で昨日公開となりました。
初期学習
WordPressは以前一度ダウンロードして管理画面にログインしたことがあるレベルの知識だったので、とりあえず仕組みについて学習する必要がありました。
当初サーバーにWordPressを導入するところから始めるものと想定していましたが、すでにレンタルサーバー上にWordPressがインストールされていたので、それを触ってみるところから始めました。
テーマ選定
納期と工数の観点から、デザインを一からマークアップする代わりに既存のテーマをアレンジして使うことに決めました。
シンプルなモノトーン調のデザインを希望とのことだったので、数あるテーマの中でも比較的ゴテゴテしていない次のテーマを採用しました。
要件定義
サイトを構造化してパスを命名するために、まず要件を定義しました。
ページ要素の要求としてはトップの他に、劇団紹介、メンバー紹介一覧、次回公演情報、過去公演情報一覧、お問い合わせ、そして記事一覧がありました。このうちメンバー紹介一覧、過去公演情報一覧、記事一覧は都度更新できることが好ましいとのことでした。
WordPressには「固定ページ」と「投稿ページ」という二種類のページ形態があり、後者はブログのようなスタイルになっています。そこで記事一覧（後にお知らせも追加）を投稿ページに当て、その他のページを固定ページとして構成することにしました。いずれの場合も、パス（スラッグと呼ばれる）は /{カテゴリー名}/{ページ名またはページ数} となります。
デザイン調整
基本的なマークアップ要素を流し込み、デザインを追加メニューや追加CSSやで調整しました。
メニューは二種類ありましたが、当初採用した方はソーシャルリンクとバッティング知って機能しなかったため、もう一方を使うことになりました。これらを上下でなく横に並べるのに苦戦していましたが、同時期に読んでいたCSS本から得た知識によって解決しました。
デザインはモノトーンを基調に、テーマカラーのマゼンタを差し色として入れました。要素をすっきりさせるために、見出しの太字をキャンセルしたり、重すぎる黒色を取り除いたりしました。テーマのレスポンシブ対応にもそれぞれ合わせました。
機能追加
既存の機能では補えない箇所については、プラグインを使ったりPHPを直接いじったりして機能を追加しました。スライダーにはSmart Slider 3、お知らせ情報にはWhat's New Generatorを、お問い合わせフォームにはContact Form 7を使いました。あと固定ページの複製が簡単にできるように、Duplicate Postでテンプレートからページを複製できるようにしました。便利ですね。
業務管理
作業に要する時間は多くて36時間くらいと見積もっていましたが、最終的に40時間以上かかったのでまあだいたい合ってました。工数にして5人日だからちょうど平日一週間分ですね。
初期学習に9時間、設計に9時間、実装に18時間かける計画でしたが、初期学習はWordPressがサーバー上にすでに乗っていたことで4時間に、設計もスムーズに決まって4時間に短縮された代わりに、残りの30時間以上を実装に費やすことになりました（実際には手が止まって悩んでいた時間も多かったと思います）。CSSの調整くらいなら仕事から帰ってシュッとできたのですが、各詳細ページの要素流し込みなどはやはり休日のまとまった時間にしかできなかったですね。
難しかったこと
当初はコンセプトイメージやワイヤーフレーム等もなく、WordPressの制約もありページ構成を考えるのに苦労しました。要件定義を固めてレイアウト要素を整理したのもそうした理由からでした。このような状況から既存テーマをテコにデザインを調整したわけですが、かえってコードが複雑になり読み解くのに苦労した面もあります。
流し込むべきコンテンツが揃っていなかったのも、完成後のイメージがつきづらい要因でした。参考として示された他の劇団のウェブサイト（WordPress）や現行サイト（Tumblr）を見つつ、こういった画像が入るかしらと予想しながらやるしかありませんでした。逆に、コンテンツが埋まってきた終盤は如実に進捗を感じられるようになりました。これには児玉さんおよび美術制作の坂田さんのデザインセンスがそもそも高かったこともあると思います。
学んだこと
要望ヒアリング、WordPressの仕組み、サイト設計、サイトデザイン、CSS、レスポンシブデザイン、業務管理、以上サイト受注制作の一連の流れ。
制作した感想
もう少し直すべき箇所があったり編集用のドキュメント整備したい気持ちもあるのですが、公開まで漕ぎ着けたので僕の仕事はひとまず完了です。
依頼を引き受けるまで児玉さんのことは常に金回りに困っている青年という印象だったのですが、仕事をするなかで多くの演劇人と関わっていたり芝居の出演者や協力者から厚い信頼と尊敬を受けている様子が伝わってきて、見え方がかなり変わりました。過去作品やいくつか運営しているアカウントの影響力からしても、実のところかなりやり手の演劇人なんだろうなと思います。その活動に自分も手を貸すことができて良かったです。
公開当日も日中は家におらず公開後もかなり疲弊していたので色々大変だったんだろうなあと察します。今日までお疲れ様でした。
そんなわけで、できたばかりの公式ホームページを見て劇団かまどキッチンを応援しましょう。
www.kamado-kitchen.com
