サイト立ち上げをいかに効率化しつつ、品質も確保していくか

クリエイティブチーム

SKIYAKIクリエイティブチームのヒトミと申します。 私は主に新規サイト立ち上げ、特にフロントコーディング部分を担当しております。

クリエイティブチームは現在7名で、サイトのデザイン・コーディング・運用業務をメインで担当しており、日々の運営業務と平行しつつ、

前期には100を越えるアーティスト、タレント、事務所様のファンクラブ、オフィシャルサイト、ECサイトなどを立ち上げさせて頂きました。

これを、祝日＋土日＋年末年始／夏期休暇／GW休暇などを加味して、年間240日程度の稼働日数だったとすると、約2日に1サイトのペースで立ち上げさせて頂いた事になります。

このサイト数を立ち上げられた背景には、弊社の主力商品である「EXTRA」のシステム的な立て付けがエンタメ業界用に最適化されている事があげられますが、

システム的なバックエンド側の話はエンジニアチームにお譲りするとしてして、今回は我々クリエイティブチームが取り組んでいるサイト立ち上げ時のフロント側の効率化・最適化に関して記してみようと思います。

はじめに

まず、SKIYAKIの事業の1つとして「アーティスト支援」を掲げておりますので、"より多くの" アーティスト、タレントさんなどのサイトを立ち上げさせて頂き、

「WEBでの情報発信の場」や「ファンクラブや専用ストア設立に伴う活動資源の調達の場」「ファンサービスの拡充の場」などをご提供させて頂きたいという思いで日々の業務に取り組んでおります。

"より多くの"というところがポイントで、それを実現するには限られたリソースと限られた時間の中で効率よくサイトを立ち上げていく必要があります。

それには、日々の業務内容を細かく洗い出し、パターン化しておき、ムダを省いていくというのがまず大切だと考えております。

それに加え、アーティストやタレントさんの世界観の表現や、サイト内の誤表記・誤作動などを極限にゼロになるようにも努めなければいけません。

そこでクリエイティブチームでは、以下のような取り組みを行い、サイト立ち上げの効率化・最適化を進めています。

サイト立ち上げの必要項目をリスト化

これはクリエイティブには関係ないのではないかと思われるかもしれませんが、基本的な事でとても大切です。

サイトを構築する際に、必要となる情報を予めリスト化して、プロデューサーにはそのリストに沿って情報を予めまとめてもらいます。 言ってみれば仕様書ですね。

仮にこの仕様が決まっていなくて、仮の内容やデータで作業を進めるとします。 そうした時に、仕様が想定のものから変わってしまってページの修正が出てしまったり、仮データがそのままサイト内に残ってしまっている事に気付けずミスに発展する危険性もあります。

それを予めリスト化して洗い出しておくことで、そういった作業の巻き戻りの時間ロスや、誤ったデータの混入というのを未然に防ぐ事ができます。

そして、プロデューサーもサイトを構築する際に何を確認すればいいのかが一目でわかりますし、構築する側としてもそのリストを元に必要なページやデータを用意すればいいので、作業が進めやすく、作業漏れも極限に無くすことができます。

レスポンシブデザインの採用

今となっては一般的な技術ですので真新しい事ではありませんが、弊社でもできる限り再現可能なものは「レスポンシブデザイン」で構築しております。

仮にPCとスマートフォン・タブレットの記述を別々にしていく場合、テンプレート、CSS、JS...など、広域に渡ってそれぞれの記述をする必要が出てきてしまうため、 約2倍(厳密には2倍ではないと思いますが...)程度の構築時間を要してしまう事があります。

そこを1ソースで各デバイスに対応できるレスポンシブデザインの技術を採用すれば、そこでも構築時間を短縮できます。

またレスポンシブサイトの場合、特に運用フェーズに入ってからもPC、スマートフォン・タブレットの記述が1ソース内にされているので、修正などの対応もしやすくなり事故の軽減にも役立ちます。

サイトのデザインテンプレート化

予め弊社独自のサイトの骨組みを複数パターン用意しておき、その中からお好みのデザインパターンを選んで頂くという手法を取っております。 (※もちろんテンプレートではなく、フルスクラッチでデザイン・構築させて頂く場合もございます)

各アーティストさんやタレントさんによって世界感は異なってきますので、大枠の骨組みだけはテンプレートを使用して頂き、サイト全体の色味や使用フォントなどは、都度デザイナーが各アーティストさんやタレントさんにマッチするデザインをデザインをご提案させて頂いております。

そうさせていただく事で、 ・骨組みを一定化させて頂く事でサイトの構築スピードをあげられる ・デザイナーが都度デザインする事で各アーティストやタレントさんの世界感を表現できる

といった事が実現でき、見た目と構築スピードを保ちつつサイトを構築する事ができます。

また、フォントの指定に関してもできる限りWebフォントを採用させて頂くようにご相談させて頂くなど、細かい部分でも時間軽減できるように努めております。

デザインパーツのコンポーネント化

例えばですが、News記事をリスト表示させる時に、「サムネイルを出したい」「サムネイルはいらないけど本文はちょっとだけ見せておきたい」などなど、 サイトに応じて要望が異なってくる事があります。

その場合、都度テンプレート上の記述とCSSを調整する必要が出てきますので、ここでも時間のロスが生まれる可能性があります。

そこで弊社では過去の経験を元に、予め複数パターンのコンポーネントを用意しておく事で、サムネイルありバージョンならこのコンポーネントを使うといったように対応し、構築時間の短縮に取り組んでいます。

また、コンポーネント化のメリットはソースレビューでも活かされます。

弊社のコンポーネントは、テンプレート、CSS、JSが1セットになっていますので、ソースの記述が一定で、書くスタッフによって記述の差がなくなります。

そのため、ソースレビューの時間を軽減できると共に、一定品質の表示を短時間で実現する事ができます。

最後に

今回の内容以外にも、開発環境面やツール面などなど、まだまだ構築の効率化に関する事項はありますが、今回は私が特に意識している点をピックアップさせて頂きました。

今後もスタイルガイドを作り込んでソースを全体的に一定化していったり、テンプレートパターンを追加していくなど、より、効率的に高品質のサイトをご納品できるようにチーム一丸で取り組んでいこうと思います。