こんにちは、運用チームのコーダー、松永です。

私たち運用チームでは日々さまざまなお客様のサイトを更新していますが、運用業務においてコーディングをする場合、既存サイトの制作ルールを探りながら作業を進める必要があります。

例えば、「バナーを追加する」という簡易な作業であっても、そのページのソースの何行目にコードを追加するベきか解析する必要があるので、たった1行コーディングするだけでも時間が掛かることがあります。

更新する場合にどこに何を追加・変更をすれば良いのか。

制作のルールがわかりやすい形で見えていれば、運用業務に掛かる時間がぐっと短縮できるのではないかと常々思っています。

これらの制作ルールは、制作ガイドラインなどにまとめられるのですが、中でもサイトで使用されているコンポーネントを一覧にしたものを、私たちは「パーツ集」と呼んでいます。

今日は、運用業務スピードアップの鍵となるパーツ集についてご紹介したいと思います。

そもそも「パーツ集」とは？

ある一定の規模のサイトを新規制作する際、サイト内のコンポーネントをリスト化した「パーツ集」を作成します。

例えば、タイトルはタイトルでデザインごとにTitle01、Title02というモジュールごとにIDを割り当てて行き、また、画像の左右レイアウトがあればレイアウトごとに一覧にしていきます。

＜パーツ集の一例＞

例として、具体的に一つの見出しパーツ「大見出し」を抜き出してみます。

• まず、大見出しに当たるパーツに、ID「Title1」をつけます。
• そして、下のように実際にコーディングしていきます。
• コードをコピーできるようにするとさらに使いやすくなります。

＜共通パーツ＞

<h1 class=”ttl-cmn-01”>タイトル大見出し</h1>

上記のように、サイト内のコンポーネントごとにパーツ集を作成しておくと、指示書でパーツIDの指定をすれば、レイアウトのデザインをすることなくコンテンツページを作成することができます。

パーツ集があることによって、モジュールを組み合わせてページの制作をすることができるため、ページ毎にデザイン・コーディングしなくても、「原稿」「素材」「指示書」があれば、それだけでページを作成することができます。

デザインを作成する工数が無くなり、ページごとにCSSを作成する工数も無くなるため、結果として大幅に工数が削減できるのです。

つまり、パーツ集があることで・・・

• 指示書でパーツを指定することでお客様とスムーズにやり取りできる
• ページ構成が分かればデザインレスでページ作成できる
• コーディング作業でパーツをコピー＆ペーストすることで工数削減できる

上記のような効果が期待されます。

「パーツ集」が共有されない現状

しかしながら、お客様から運用をご依頼いただく際に、パーツ集がある状態で運用を依頼されることは、ほぼゼロに近いのが現状です。

パーツ集があればその後の運用工数はぐっとラクになるので、お客様にも制作会社にも大きなメリットがあるのですが、おそらくサイトを新規制作（リニューアル）する際には、スケジュール通り公開することが最優先になるため、仮に制作段階でパーツ集を作成したとしても、公開後の運用に使える形に整理して残すところまで、工数をかけることができないということが考えられます。

また、実際にパーツ集を作成して維持していくには、それなりの工数と、スキル・経験も必要です。一度作ったら終わりではなく、更新しなければ意味が無いからです。そのため、お客様側にもパーツ集の必要性を理解していただくことが必要です。そういう面からも、パーツ集が運用の必須アイテムとして、なかなか共有されてないのではないかと思います。

しかし、初期費用としてパーツ集の作成コストは必要になりますが、その後の運用業務がスピードアップできることによって、ランニングコストは下がる筈です。サイトのモジュールを理解しておくことは、公開後の更新を進めていく上では非常に大切なことではないでしょうか。

工数の大幅カットも夢じゃない！

では実際に、工数のシミュレーションをしてみたいと思います。

通常のページ制作の場合、指示書を元に各モジュールの詳細を確認しながらワイヤーをおこし、デザイナーがレイアウトを調整し、イラストなど制作し、それに基づいてコーディングを行うという制作フローで進めます。

しかし、パーツ集があれば、いただいた指示書と素材を元にデザインなしでコーディングを行うことが可能となります。

具体的にコーディングの工数を例に挙げると、通常4時間ほどかかるページ（A4印刷した場合に3ページ程度になるボリューム）のコーディングが、パーツ集を使うと1時間弱で制作することが可能です。

かなりざっくりとした概算で比較してみましょう。

＜工数の比較＞

パーツ集がある場合、ページの要素は分かるのでワイヤーが不要になり、デザインでもレイアウト調整がまるっとなくなるため時間は半減します。また、いちからページをコーディングするのではなく、パーツのコードをそのままコピーして使えるため、コーディングにおいても約3時間の時間を削減することができます。

机上の試算ではありますが、7割削減という数字がでてきました。

実際は、更新内容によっても変わってくるので、全てにおいてここまで時間を削減できるとは言えませんが、それでも従来より工数が削減されるのは明らかだと思います。
 

削減した時間を使って、より良い運用の実現へ

このように、パーツ集を活用することで運用工数は確実に削減することができます。
また、その時間をつかって何をするのか。そこが重要だと考えています。

終わりのない運用業務では、どうしても目先の更新作業に追われてしまいがちです。しかし、本当に必要なのは、お客様が求める「サイトの目的」に対して結果を出すことではないでしょうか。

もっと良いサイトにするにはどうすればいいのか。
更新作業の工数が減ることで、サイトのクリエイティビティを上げる提案を考えたり、UI・UXを考えた施策を検討するなど、「一歩先へ向けた運用」へのお手伝いが出来るのではないかと考えています。

PDCA（Plan・Do・Check・Action）サイクルにおいて、「Do」の一部である更新業務を効率化することで、スケジュールに追われる運用から、改善施策（Plan）や確認＆改善（Check・Action）も含めた運用スタイルにシフトすることが可能です。

PDCAを滞りなく進めていく上で重要な「更新業務の効率化」。

その鍵となるパーツ集を使った制作スタイルを、サイト運用に取り入れてみてはいかがでしょうか。