マーケティング部署での半年間のWordPress・LPコーディング業務

2021年8月のお盆明けから2022年2月末まで、ブランド品などの出張買取サービスを運営する企業のマーケティング部署で、WordPressを使用したコラム記事の制作や、LPのコーディングを担当しました。

当時はフリーランスとしてWebサイト制作の案件にも取り組んでおり、個人での制作活動と並行しながら、派遣社員として週3日勤務していました。

案件は、クリエイティブ職専門の人材エージェントであるAQUENTから紹介を受けました。

この記事では、担当した業務内容や使用した技術、チームでの制作体制、先輩コーダーからレビューを受けながら制作した経験について振り返ります。

業務概要

企業のコーポレートサイト内にある「お役立ち情報」ページへのコラム記事の掲載と、サービスを紹介するLPのコーディングを担当しました。

コラム記事では、文章はライターが作成し、見出しや表などのデザインはデザイナーが用意していました。

私は、用意された原稿とデザインをもとに、WordPress上で記事の構造や見た目を再現しました。

また、LP制作では、デザインを確認しながらHTMLとCSSでページをコーディングし、先輩コーダーに実装内容をチェックしてもらいながら修正を進めました。

担当した業務

主に以下の作業を担当しました。

• WordPressへの記事原稿の入稿
• 見出しや文章の構造化
• 表やリストのHTML実装
• CSSによる表示の微調整
• LPのHTML・CSSコーディング
• デザインとの表示差分の確認
• 先輩コーダーによるコード・表示レビューへの対応
• 公開前の記事やページのチェック

単純に文章をコピーして登録するだけではなく、読みやすさやデザインを意識しながら、記事やページごとに表示を調整する必要がありました。

WordPress記事のコーディング

WordPressの標準機能だけではデザインを再現できない表やリストについては、カスタムHTMLを使用して実装しました。

表のセルや見出し、箇条書きなどをHTMLで組み立て、必要に応じて余白、文字サイズ、罫線などをCSSで調整しました。

当時の環境では、CSSファイルを直接編集するのではなく、カスタムHTML内にstyleタグを記述して対応することもありました。

既存サイトのデザインを崩さないように、影響範囲を確認しながら調整することを意識していました。

LPのコーディング

コラム記事の制作だけでなく、サービスを紹介するLPのコーディングも担当しました。

デザイナーが作成したデザインをもとに、HTMLとCSSを使用してページを実装しました。

LPは、コラム記事と比べてレイアウトや装飾の自由度が高く、セクションごとの余白、文字サイズ、画像の配置などを細かく調整する必要がありました。

実装した内容は先輩コーダーに確認してもらい、デザインとの差異やコードの書き方について指摘を受けながら修正しました。

自分だけで完成と判断するのではなく、経験のあるコーダーによるレビューを受けることで、デザインをより正確に再現するための見方や、保守しやすいコードの書き方を学びました。

先輩社員から学んだこと

業務中には、先輩社員からVisual Studio Codeの全体検索機能を教えてもらいました。

Ctrl + Shift + Fを使用すると、開いているファイルだけではなく、プロジェクト内の複数のファイルを横断して文字列を検索できます。

それまでは必要な記述をファイルごとに探すこともありましたが、全体検索を使うことで、修正対象のコードや関連する記述を効率よく確認できるようになりました。

また、LP制作では、先輩コーダーから実装内容のレビューを受けました。

デザインとの細かな違い、自分では気づかなかった表示上の問題、コードの記述方法などを指摘してもらい、一つずつ修正しました。

レビューを受けながら制作したことで、実装して終わりではなく、第三者が確認しやすく、既存のルールに沿ったコードを書くことの重要性を学びました。

チームでの進行管理

プロジェクトの進行状況はExcelで管理されていました。

記事や制作物ごとに、ライターによる原稿作成、デザイナーによるデザイン作成、コーディング、マネージャーによる最終チェックといった各工程の状況が記録されており、誰がどこまで対応しているのかを確認できるようになっていました。

Excelによる一覧管理に加えて、同じオフィス内で働いていたため、確認や依頼を口頭で行うことも多かったと記憶しています。

デザイナー、ライター、コーダー、マネージャーがそれぞれの役割を担当し、一つの記事やページを順番に完成させていく制作体制でした。

オフィスの環境

私たち制作担当者が働くスペースの後方には、電話対応を担当している人たちが集まっていました。

電話でお客様に対応する人たちと、Webサイトや記事を制作する人たちが同じ部屋で働いており、会社の営業活動とWebマーケティングの両方を身近に感じられる環境でした。

オフィスでは比較的新しい音楽が流れており、当時は［Alexandros］の「閃光」や、Takaと絢香の「Victim of Love」などを耳にしたことを覚えています。

音楽が流れる空間で6時間の業務を終えた後には、気分が高揚しているように感じる日もありました。

作業環境に流れる音楽によって集中や気分が変化することを体感し、音楽が心理状態に与える力を実感した時期でもあります。

使用した技術・ツール

業務では、主に以下の技術やツールを使用しました。

• WordPress
• HTML
• CSS
• WordPressのカスタムHTMLブロック
• Visual Studio Code
• Excel
• ブラウザを使用した表示確認

WordPressの記事制作だけでなく、HTMLとCSSを使用したLP制作や、先輩コーダーによるレビューを受けながら修正する経験も積みました。

業務の進め方

コラム記事では、ライターが作成した文章と、デザイナーが作成した見本を確認しながら、WordPress上で記事を制作しました。

記事内の要素によっては、WordPressの標準機能で対応できるものと、HTMLやCSSの記述が必要なものがありました。

LP制作では、デザインを確認しながらHTMLとCSSで各セクションを実装しました。

実装後は、先輩コーダーに確認してもらい、指摘された箇所を修正しました。

文章の抜け、レイアウトの崩れ、デザインとの差異がないかを確認し、最終的にはマネージャーによるチェックを経て公開へ進む流れになっていました。

フリーランスのWebサイト制作との並行

この業務に従事していた時期は、フリーランスとしてのWebサイト制作も継続していました。

派遣業務では、ライターやデザイナーが用意した素材をもとに、決められたデザインやルールに沿ってWordPressの記事やLPを実装しました。

一方、フリーランスのWebサイト制作では、案件ごとに異なる要望を確認しながら、WebページのコーディングやWordPressを使ったサイト制作に取り組んでいました。

企業の制作体制の中で、先輩コーダーのレビューを受けながら制作する経験と、個人で案件を管理して進める経験を並行して積めたことは、この時期の大きな特徴です。

決められた勤務時間の中で派遣業務を行いながら、勤務日以外の時間を使ってフリーランスの制作活動を進めていました。

複数の仕事を並行する中で、納期や作業量を確認し、自分で時間を管理しながら業務を進める経験にもなりました。

勤務時間

勤務日は週3日でした。

勤務時間は10時から17時までで、途中に1時間の休憩があり、実働時間は1日6時間でした。

フルタイム勤務ではなかったため、勤務日以外の時間をフリーランスのWebサイト制作に活用しながら働いていました。

報酬

報酬は時給1,300円でした。

派遣社員として、約半年間継続して業務を担当しました。

この業務で得た経験

この業務を通して、WordPressの管理画面を使用した記事制作だけでなく、HTMLやCSSを使って既存デザインを再現する経験を積みました。

LPのコーディングでは、先輩コーダーに実装内容を確認してもらい、指摘を受けながら修正するという、実務におけるレビューの流れを経験しました。

自分では問題ないと思っていた実装でも、第三者から確認してもらうことで、細かなデザインの違いやコードの改善点に気づけることを学びました。

また、ライター、デザイナー、コーダー、マネージャーの役割が分かれている制作体制の中で、自分の担当範囲を理解し、前後の工程を確認しながら作業することの重要性も学びました。

Excelによる進捗管理や、同じオフィスで働くメンバーとの口頭でのやり取りを通して、Web制作が一人だけで完結するものではなく、複数の職種による連携で成り立っていることを実感しました。

フリーランスのWebサイト制作と並行して働いたことで、企業のルールやレビューに沿って制作する力と、個人で案件を管理して進める力の両方を身につけることができました。

この時期に経験した、デザインを確認して実装し、レビューを受けて修正するという流れは、その後のWordPressテーマ制作やWebアプリケーション開発にもつながっています。

まとめ

2021年8月から2022年2月まで、企業のマーケティング部署で、WordPressを使用したコラム記事制作とLPのコーディングを担当しました。

ライターが作成した原稿や、デザイナーが用意したデザインをもとに、WordPress、HTML、CSSを使用して記事やページを実装しました。

LP制作では、先輩コーダーによるレビューを受けながら修正を行い、デザインを正確に再現する力や、チームのルールに沿ってコードを書くことの重要性を学びました。

Excelで各工程の進捗を確認しながら、デザイナー、ライター、コーダー、マネージャーと連携して制作物を完成させる、チームでの制作経験も積みました。

この期間は、派遣社員として週3日勤務する一方で、フリーランスとしてのWebサイト制作も継続していました。

約半年間の業務を通して、WordPressの記事制作、LPコーディング、コードレビューへの対応、チームでの進行管理、複数の仕事を並行する経験を積むことができました。