Hello, I'm Matsunaga, a coder on the operations team.

Our operations team updates various client websites every day, but when coding as part of our operations work, we need to work while studying the production rules of existing websites.

For example, even a simple task like "adding a banner" requires analysis of which line of the page's source the code should be added to, so even coding just one line can take time.

When updating, what should be added or changed and where?

I have always thought that if the production rules were visible in an easy-to-understand way, the time required for operational work could be significantly reduced.

These production rules are compiled into production guidelines, but we call the list of components used on the site the "parts collection."

Today, I would like to introduce you to a collection of parts that are key to speeding up operational tasks.

What is a "parts collection" anyway?

When creating a new website of a certain size, we create a "parts collection" that lists the components that will be included in the website.

For example, for titles, IDs are assigned to each module (Title01, Title02, etc.) for each design. Also, if there is a left/right layout for the images, they are listed by layout.

<Example of a parts collection>

As an example, let's take a specific heading part, the "main heading."

• First, give the main heading the ID "Title1".
• And then we actually code it like this:
• Being able to copy the code would make it even easier to use.

<Common parts>

<h1 class="ttl-cmn-01">Title Heading</h1>

As shown above, if you create a collection of parts for each component on your site, you can create content pages without designing the layout by simply specifying the part ID in the instructions.

Having a collection of parts allows you to create pages by combining modules, so you can create a page without having to design and code each page; all you need is the manuscript, materials, and instructions.

This eliminates the labor required to create a design and the labor required to create CSS for each page, resulting in a significant reduction in labor costs.

In other words, having a parts collection...

• By specifying parts in the instructions, you can communicate smoothly with customers.
• If you know the page structure, you can create a page without designing it.
• You can reduce the amount of work required by copying and pasting parts during coding work.

The above effects are expected.

The current situation where "parts collections" are not shared

However, the reality is that when customers request operations, the chances of them requesting operations with a collection of parts are almost zero.

Having a parts collection makes subsequent operational efforts much easier, which is a major benefit to both the customer and the production company; however, when creating a new website (or renewing a website), the top priority is probably to launch the website on schedule, so even if a parts collection is created during the production stage, it may not be possible to devote the time and effort to organizing and saving the parts in a form that can be used for operation after launch.

In addition, creating and maintaining a parts collection requires a certain amount of work, skill, and experience. It is not something that is created once and then finished; it is meaningless unless it is updated. Therefore, it is necessary for customers to understand the necessity of a parts collection. From this perspective, I think that parts collections are not shared easily as essential items for operation.

Although the initial cost of creating a parts collection is necessary, the running costs should go down as the operation work can be sped up. Understanding the modules of the site is very important when updating it after it is published.

Significant reduction in labor hours is no longer a dream!

Now let's actually try simulating the amount of work required.

When creating a normal page, the production flow is to draw the wires while checking the details of each module based on the instructions, have the designer adjust the layout, create illustrations, etc., and then code based on that.

However, if we have a parts collection, we can code without a design, based on the instructions and materials you provide.

To give a concrete example of the amount of coding time involved, a page that would normally take around four hours to code (equivalent to about three pages when printed on A4 size paper) can be produced in just under an hour by using the parts collection.

Let's do a very rough comparison.

<Comparison of man-hours>

If you have a set of parts, you can understand the elements of the page, so you won't need wires, and you won't need to adjust the layout in the design, so the time will be halved. Also, instead of coding the page from scratch, you can just copy and use the code of the parts, so you can reduce the coding time by about 3 hours.

Although this is just an estimate, the figure that came out was a 70% reduction.

In reality, it depends on the content of the update, so we cannot say that it will be possible to reduce time to this extent in all cases, but it is clear that the amount of work will be reduced compared to before.

Use the time saved to achieve better operations

In this way, by utilizing parts collections, operational labor costs can be significantly reduced.
Also, what you do with that time is important, I think.

In the never-ending business of managing a website, it is easy to get caught up in updating the website. However, what is really important is to achieve the results that the customer desires for the website.

How can we make our site better?
We believe that by reducing the amount of work required for updates, we will be able to help with "operations that are one step ahead," such as coming up with suggestions to increase the creativity of the site and considering measures that take UI/UX into consideration.

By streamlining the update process, which is part of the "Do" part of the PDCA (Plan, Do, Check, Action) cycle, it is possible to shift from a schedule-driven operation to one that also includes improvement measures (Plan) and confirmation and improvement (Check and Action).

"Improving the efficiency of renewal work" is important for smoothly progressing with the PDCA cycle.

Why not try incorporating this production style that uses a collection of key parts into your website operations?