NOVILOG

株式会社ノヴィータが運営するブログメディアです。メンバーのこと、文化や価値観、ノウハウ、様々な活動などについて発信します。

生成AI時代でも欠かせない設計や段取り。複雑な状況や要件で問われるフロントエンドの“見えない品質”

生成AIツールや、様々なノーコード・ローコードツール、情報発信ツールが浸透したことで、Webサイトやデジタルでの発信は身近になりました。一方で、特に規模が大きく、信頼性が求められるWeb制作の進行において、フロントエンドエンジニアが担う役割はますます重要になっています。

要件の理解、デザイナーとの連携、そしてスピーディかつ正確な実装。規模や影響力が大きく、着実な制作を依頼したい企業や代理店にとって、制作物の品質を落とさず進行面でも不安を残さない実装パートナーであるかどうかは、プロジェクトの成否を左右する重要なポイントです。
ノヴィータのフロントエンドチームでは、複数の状況や前提を整理しつつ、制作を並行しながらも品質を落とさない丁寧な実装を重視しています。一例として、WordPressの複雑なカスタマイズや大量ページのコーディングなど、幅広いニーズに対応しています。

本記事では、フロントエンドエンジニアとして日々制作の現場を支える2名に、担当案件や仕事の向き合い方について話を聞きました。安心して任せられるWeb制作に向けて、どのように考えて業務を行っているのか、裏側をお伝えしていきます。

今回のインタビュー対象者
株式会社ノヴィータ 深堀(フロントエンドエンジニア)2019年入社
株式会社ノヴィータ 磯部(フロントエンドエンジニア)2020年入社

 

現在の担当プロジェクト・役割

インタビュアー:
まず、お二人の現在担当しているプロジェクトについて教えてください。

深堀:
今は、保険会社やリフォーム会社のサイトのフロントエンド実装を担当しています。お客様からの要望に基づき、デザインが必要な場合はデザイナーが対応し、その後フロントエンド側で実装を行います。
長期で運用されている案件に参画すると、サイトの中身が複雑な環境になっている状況によく直面します。最近では生成AIツールを使って、単純作業の効率化、アニメーションなどの実装や複雑なソース構造の解析も行っていますが、そのうえで、他の人が作業することになってもなるべくわかりやすいように、全体の構造(アーキテクチャ)を整えるように意識しています。

インタビュアー:
単にページをコーディングするだけではなく、運用全体を見据えた改善業務も大きいんですね。

深堀:
Webサイトを運用する立場のお客様にとっても、コードやファイルがちゃんと整ってるもののほうが、後でメンテナンスのしやすさなど違うはずなので。納品した後も、なるべくお客様もメリットがあるように品質は持っていきたいと思いますね。

インタビュアー:
磯部さんは、現在どのような案件を担当されていますか?

磯部:
代理店様経由でご依頼いただく飲食ブランドのサイトや、大学サイトのコーディングを中心に担当しています。また、WordPressを使用したサイト制作・運用のご相談も多くいただいており、、複雑なカスタマイズに対応しています。
WordPressは拡張性が高く、お問い合わせフォームや予約システムなどの機能を、管理画面上の操作だけで組み込むことが可能です。一方、多様なカスタマイズに対応するためには、管理画面だけで簡単には補えない部分がどうしても出てくるため、実装のベースになっている言語をある程度理解している必要があります。

インタビュアー:
WordPressは手軽にページを作れる印象がありますが、実際の制作現場では、どんな場面で難易度が上がってくるのでしょうか?

磯部:
確かに、WordPressは手軽にページが作れるCMSですが、会員向けページや条件によって表示を切り替えるような仕様になると、裏側のシステム構造(アーキテクチャ)への深い理解が求められます。生成AIも活用しながらコードは書けますが、保守性やセキュリティの観点から、生成されたコードをそのまま採用していいか、書き方でサイト全体のパフォーマンスを落とさないかは人が確認しながら制作を進める必要があります。
前職のシステム開発会社でも、WordPressやアプリ開発の要件定義、システム設計から実装までを経験していたことがそのまま活きています。

 

ノヴィータでは、運用しやすさと拡張性の両立を見極めながら、長期運用を前提とした実装を行っています。

保険会社やリフォーム会社など、運用年数が長く更新頻度の高いサイトを担当する深堀さんは、フロントエンド実装に加え、機能設計やコード構造の整理にも注力しています。運用を続ける中で構造が複雑化するというのはよくあることです。複雑化しているサイト構造を可能な限り正確に理解し、成果物への品質を担保するよう努めています。機能追加によって生じやすい実装ルールのばらつきや属人化を極力防ぐ「基盤づくり」を担っているともいえます。

一方、磯部さんはWordPressの高度なカスタマイズを強みとしています。例えば、『会員ランクに応じて細かくマイページの内容を書き換える』『独自の複雑なルールで表示を出し分ける』といった、市販のプラグインだけでは対応しきれないオーダーメイドな実装を得意としています。一見シンプルなページでも、裏側で高度な制御が必要なケースは少なくありません。こうした緻密な要件を形にするには、プログラム(PHP)やサイト構造への深い理解が欠かせないのです。

仕様を正確に読み取り、柔軟性をもって顧客の要望に応える

インタビュアー:
深堀さんがエンジニアを目指すきっかけはあったのですか?前職ではQA(品質管理)を担当されていたとのことですが、その経験は今の業務にも活きているのでしょうか?

深堀:
そうですね。幼少期のパソコン教室での経験がきっかけでものづくりに携わりたいという思いが強く、大学では情報工学部で学びました。前職では企業常駐の業務支援、QA(品質管理)として、新規公開されるページや機能の確認を行っていました。

インタビュアー:
そこからどういう流れでノヴィータへ?

深堀:
前職で常駐していた現場でのつながりで、ノヴィータの齋藤と出会いました。私が転職を考えていたタイミングで声をかけてもらい、面談を受けてノヴィータに入社しました。
最初は課題をやりながら案件に関わり、1年ほど経って一人で案件を任せてもらえるようになったのがすごく嬉しかったですね。

磯部:
深堀さんは、人より“整理”が得意なんですよ。プロジェクトが複雑になると自然と『一回ここ整理しません?』って言ってくれる。そう言ってくれることで救われている場面は本当に多いです。

インタビュアー:
磯部さんはノヴィータの“柔軟に応える姿勢”に共感されて入社したとのことですが、それはこれまでのご経験とつながっている面もありますか?

磯部:
ありますね。実はエンジニアになる前に6年ほど、接客業や飲食業で働いていたんです。お客様の表情を見て気を配ったり、求められている以上のことを返したい、という気持ちはその頃からのものです。お客様の意図を汲み取って、よりよい形にして返す。その考え方は、接客の経験ともすごく近くて。
今の仕事でも、たとえば代理店様やエンドクライアントが動きやすいように、先回りして情報を返したり、レスポンスを早めにしたりといった“コミュニケーションの細やかさ”が自然と身についていると思います。裁量を持って任せてもらえる環境だからこそ、それを存分に活かせていて、すごくやりがいがあります。

 

深堀さんが前職で、新規公開前のページや機能を第三者視点で確認してきた経験は、現在のフロントエンド実装にも活きているといいます。仕様を正確に読み取り、抜けや違和感を見逃さない視点は、今携わっている設計や実装においても重要です。

磯部さんは「顧客の要望に柔軟に応えたい。例えばフランス料理で小籠包を頼んだら出すようなサービス精神」というノヴィータの考え方を聞いたとき、「自分の考え方と合っていると思った」と語りました。これは“お客様の要望を汲み取り、可能な限り応えていく柔軟さ”を意味しており、チームの価値観として大切に共有されているそうです。

仕事で大切にしている「品質」

Web制作の現場では、見た目の仕上がりや公開スピードが話題になりやすい一方で、「コードの品質」や「設計ルール」といった、ユーザーから見えない部分が軽視されがちです。
しかし、この“見えない品質”こそ、公開後の運用を左右し、改修コストやトラブル発生率を大きく変えます。ノヴィータのフロントエンドチームは、まさにこの部分を日々の実装の中心に据えて仕事をしています。

見た目も、担保すべき“品質”ではあります。
デザインとの整合性、機能の正確な挙動、表示速度、ソースコードの可読性・保守性。これらはいずれも、ユーザーが直接触れる部分ではないものの、サイトの価値に直結します。

品質とは見た目だけでなく、「構造的な一貫性」も含まれる

インタビュアー:
今の業務で、とくに大切にしていることはなんでしょうか?

深堀:
品質を維持することですね。これはずっと変わらない軸です。入社当初から、フロントエンドチーム内では“品質とは何か”という議論を常に行っていて、“どんな状態が高品質と言えるのか”を共通認識にしてきました。

インタビュアー:
“品質”と一言で言っても様々な観点がありますが、どんな状態を高品質と考えて取り組んでいるのでしょうか?

深堀:
大規模なサイトは特に、ユーザーからは見えない部分ほど丁寧に作らないと、後から確実に困るんです。コンポーネント(部品)の分け方や命名規則など、構造的な一貫性を保ちつつ、人が関わるので見やすいように、ソースコード側のインデントのような表面的な体裁もツールや生成AIで整えます。
Webサイトの見た目だけを気にしがちかと思いますが、1ページだけのサイトならまだしも、大規模サイトは数百ページ以上あることもありますので、『構造的な一貫性が保たれているか』という深い部分の品質は非常に大切です。運用が長いサイトであればあるほど、コード管理の状態がそのまま未来の“コーディングのやりやすさ”、“運用のしやすさ”に影響します。

インタビュアー:
コード管理というと、具体的にはどういった点でしょう?

深堀:
ノヴィータでは、共通のコーディングルールを運用することで、チーム内での標準化を図っています。
コードの書き方や配置がバラバラだったり、必要以上にファイルが増えてしまったりすると、表示速度にも影響が出ますし、メンテナンスの際にエンジニアが“どこを見ればいいのか”分かりづらくなります。結果的に改修コストが上がったり、トラブルの温床になったりします。こうした課題を避けるために、チームメンバーが変わっても、機能追加を重ねても品質が崩れない、実装ルールを整理し、誰が担当しても同じ品質で開発できるコード設計を行っています。

“習慣”レベルで品質に向き合う

品質について、磯部さんにも話を聞きました。

磯部:
フロントエンドチームには、自然と共通認識があるんです。もう“習慣”レベルで、品質を保つことが身体に染み込んでいるというか…。逆に、雑な状態だと気持ち悪く感じるくらい(笑)。

インタビュアー:
ノヴィータの文化として根づいているんですね。

磯部:
はい。入社したばかりのメンバーには、これまでどういう経緯でルールが形作られたか、“なぜ今のやり方になっているのか”を書いたドキュメントを読んでもらいます。単に『このルールを守ってね』じゃなくて、『こういう理由があるから、この形がベストなんだよ』と理解してほしいんですよね。

深堀:
意味を理解してもらうことで、品質を保つ行動が“自分ごと”になると思うんです。
ルールを『単に守らなければならない』ものだと思うと負担になるので。

やりたいことに寄り添い、Webの観点から代替案を提案

インタビュアー:
お客様からの要望をそのまま実装すると品質を損なってしまう場合もありませんか?

深堀:
ありますね。Web制作に詳しくないお客様ほど、“やりたいこと”だけをいただく場合があります。
仮にお客様のやりたいことを詰め込んでそのまま実装してしまうと、サイト全体の整合性が崩れたり、表示速度が落ちたりすることもあります。

インタビュアー:
そんなときはどうされるんですか?

深堀:
“できません”とは基本的に言わないです。『なぜお客様からその要望が出たのか』を丁寧に読み取りながら、メリット・デメリットを説明して、目的を達成するために別の方法を提案します。

インタビュアー:
どうしても“これでやってほしい”と言われるケースもありますか?

深堀:
あります(笑)。そういうときはデメリットを明確にしたうえで対応します。
“なぜその実装が難しいのか”“どういうリスクがあるのか”をしっかりお伝えしますね。最終的には、お客様の意図と、実際にサイトを使うユーザーの視点を両方見ながら、一番よい形になる提案をしたいと考えています。

磯部:
深堀さんは、プロジェクトが複雑になるほど、自然と全体を整理しようと動いてくれる存在です。要望の表面だけでなく、「なぜそれをやりたいのか」という背景まで考えたうえで提案する姿勢が、結果的に顧客からの信頼につながっていると感じています。

品質を実現させる段取り力とコミュニケーション

プロジェクトの品質は、実装の巧拙だけで決まるものではありません。
「限られたスケジュールのなかでどう優先順位をつけるか」
「要件変更があったときにどう軌道修正するか」
「関係者との認識のズレをどうなくすか」
こうした“段取り力”と“コミュニケーション”が、最終的なアウトプットの質を大きく左右します。

二人は、過去の困難なプロジェクトを通して、これらのスキルを独自のスタイルで磨いてきました。
ここでは、その具体的な姿勢と実践についてお話を伺いました。

経験から学んだ「段取りの重要性」と、要件の線引き

インタビュアー:
お二人とも、過去に大変だったプロジェクトがあったと伺いました。

深堀:
はい。以前、デザイン変更が毎日のように発生して、夜遅くまで作業が続く案件がありました。変更が入るたびにタスクの組み直しが必要になるので、最終的に“どこまでが必須で、どこが追加要望なのか”が曖昧になってしまいました。

インタビュアー:
その経験が、深堀さんの仕事の取り組み方を大きく変えたそうですね。

深堀:
スケジュール管理はより意識するようになりました。あとは、最初に決めた要件を振り返りながら、『ここまでは当初の範囲か』『追加要望になるならどう調整するか』を考えるようになりました。

インタビュアー:
お客様の要望に対しても、そのまま実装するのではなく、一度立ち止まって整理することを大切にしている、ということでしょうか?

深堀:
はい。お客様の要望はできるだけ応えたいですが、条件が整っていないまま進めると、結果的に品質を落としてしまうので。

インタビュアー:
磯部さんも同じプロジェクトに関わっていたんですよね?

磯部:
そうなんです。あの案件は本当に大変でした(笑)。途中で遅延が発生しても、公開日は変えられない。だから、最終的にはコーディングの期間で帳尻をあわせるしかない状況になるんですよね。

前倒しを想定し、コミュニケーションで実現する

こうした経験を通して、磯部さんも段取りの重要性を強く実感したといいます。

磯部:
遅れたことはもう仕方ないので、『じゃあこのあとどうするか』を考えるようになりました。振り返ってみると、事前準備や考慮が足りなかったことが、あとから響く場面が多かったんですよね。それ以降は、プロジェクトに対してある程度の道筋や、何か起きたときの対応パターンを事前に考えておくようになりました。

インタビュアー:
“前倒しで考える習慣”がついたわけですね。

磯部:
はい。あの案件を経験してから、事前の準備や考え方が本当に大事だと感じるようになりました。何か起こったときに慌てないように、ある程度の道筋を考えておいたり、『もしこうなったらどうするか』という策を事前に用意しておくようにしています。
そうしておくことで、後からの混乱を減らせると思っています。こうした『先回りしてリスクを摘み取る思考』は、効率化が進む生成AI時代であっても、最終的に人が担うべき重要な役割だと考えています。AIにコード生成を任せることはできても、現場の複雑な状況や課題を汲み取り、プロジェクト全体を完遂させるための『コミュニケーション品質』や『プロセス管理』は、人にしかできない領域です。だからこそ、最後まで責任を持ってやり切る姿勢に、これからもこだわっていきたいです。


こうした経験を通じて、磯部さんは「事前に想定しておくこと」「起こりうる事態を考えておくこと」の重要性を強く意識するようになったといいます。仕様変更が起きやすい案件ほど、前もって整理し、関係者と認識を揃えておくことが、結果として品質や進行の安定につながるのです。

Webにおける多様な専門性から品質を高める

インタビュアー:
品質を守る上では、他チームとの連携も大切ですよね。

深堀:
「はい。スケジュールやお客様の温度感、かけられる作業工数などフロントエンドだけでは判断できないことも多いので、ディレクターやデザイナーと相談しながら進めるようにしています。また、今はツールや生成AIを使ってデザインをそのままコードにすることもできる時代ですが、それをやるだけでは達成できない、サイト内の細かな運用ルールの反映や影響範囲・整合性の確認・調整も行う必要があります。こうした複雑な調整も、他職種の視点を交えて話し合うことで、最適な落とし所や実装方針がより明確になっていきます。

インタビュアー:
多様な視点を絡めることで、より良い解を出すんですね。

深堀:
そうです。お客様に提案する前に、チーム内で“どこまでが最適か”を揃えておくのはすごく大事です。デザインの再現性、ユーザーが迷わない導線などを、コストや工数を抑えながらどこまでやるかなどのテーマは、職種ごとに視点が違ってくるので。

インタビュアー:
磯部さんは、日々のコミュニケーションで意識していることはありますか?

磯部:
代理店のディレクターさんやエンドクライアントに対して、“同じ会社で働く仲間”のように接することを心がけています。プロジェクトを一緒に行う方々なので、目的が達成できるよう、またよりよい結果に導けるよう、どうしたら相手が進めやすいか、次に何が必要かを考えて、なるべく先回りして動くようにしています。

インタビュアー:
具体的には、どのような対応を心がけているのでしょうか?

磯部:
とにかくレスポンスは早く返すようにしています。質問を止めてしまうと、相手の進行も止まってしまうので。小さな確認待ちが積み重なることで遅延のリスクが上がります。
また、スムーズなコミュニケーションのため、文章にも気をつけています。確認ポイントを整理したり、判断しやすい選択肢を示したり、認識のズレが起きやすい点をあらかじめ補足したりもします。
生成AIなどでどれだけコードを早く書けても、人間の意思決定が止まればプロジェクトは止まります。仕様の曖昧さも進行を止める原因になるので、気づいた時は先回りして確認します。先回りコミュニケーションで進行を滞りなく行うことも、我々が大事にしているプロセス品質です。

インタビュアー:
相手が動きやすいように細かなところにも気配りをされているんですね。

深堀:
そのとおりです。磯部さんは相手のことを考えて、ストレスを減らすのが本当に上手いです。心理的安全を保って良い仕事をしたいという熱意があるので、外部ディレクターさんからも“やりやすい”と言われることが多いですね。

今後の展望

最後に、今後の展望についてお二人に伺いました。

深堀さんは「ディレクターやデザイナーとともにお客様の課題を解決していけるように」。
磯部さんは、「心理的安全性の高い組織をつくり、相談しやすい環境を社内だけでなく顧客との関係性にも広げていきたいです。」と話してくれました。

二人は、要件整理から実装、公開後の運用までを見据え、品質を守る「最後の砦」としてプロジェクトを支えるのが役割と捉えています。
技術的な品質だけではなく、プロジェクト全体を成功に導くための段取り力・コミュニケーション力の重要性を繰り返し伝えてくれました。これらの姿勢は、制作を外部に依頼する際にこそ、安心材料になると考えています。

生成AI時代だからこそ、表面的なものだけでなく品質への考え方を深め、継承しながら、ノヴィータのフロントエンド品質を担う存在になっていくはずです。

まとめ

「状況に合った何らかのコードを出力する」ことは、生成AIやノーコードツールによって機械的にできる時代になりつつあります。しかし、フロントエンドエンジニアは、単にデザインを再現しコードを納品するだけの存在ではありません。要件を正確に理解し、デザイナーやディレクターと連携しながら、公開までの段取りを組み立て、顧客満足度とユーザー体験を損なわない品質を守る。その積み重ねによって「安心して任せられる実装」が成立します。今回取材した二人は、まさにその役割を現場で体現している存在でした。

深堀さんは、長期運用サイトや更新頻度の高い案件を多く担当し、フロントエンド実装と同時に、機能設計やコード構造の整理にも力を注いでいます。機能追加で起こりやすい複雑な実装ルールや属人化を放置せず、品質を保てる状態をつくる。生成AIツールの積極的な活用が避けられない今後、その「整える力」は、チーム全体、そしてツール活用をふまえても、生産性と品質を底上げしています。

一方、磯部さんはWordPressの高度なカスタマイズや、納期が厳しい現場での対応力に強みを持ちます。生成AIを駆使して効率化を図りつつも、生成AIでは汲み取ることが難しい、現場特有の細かな文脈やクライアントの真意をプロセスに反映。人ならではの柔軟なコミュニケーションと、隣の範囲への影響もふまえ最後まで責任を持ってやり切る姿勢にて結果的に手戻りや認識違いを減らし、プロジェクト全体の品質向上につなげています。

二人に共通しているのは、「品質は目に見えない部分に宿る」という価値観です。
コード構造が整理されていなければ、小さな修正でも原因特定に時間がかかり、運用に大きな負担を残します。そうした“後から効いてくる課題”を見据え、長く使われることを前提とした実装を徹底している点が印象的でした。

生成AIでも容易にできるようになったコードの出力。しかし、ビジネスでのサイト運用の現場でのニーズを考慮すると、生成AIにまるごと任せることはまだ難しいといえます。
特に、大きなサイトでは「多数の人」が「長期間」関わるという特徴があります。属人的なエラーを防ぐアーキテクチャ設計や、トラブルを未然に・小さいうちに防ぐリスクヘッジとそれらのコミュニケーション。この「プロセス品質」への徹底したこだわりこそが、ノヴィータが提供する最大の価値です。

 

制作の途中で手戻りが増えている、長期運用を見据えた設計に不安がある、フロントエンドを「品質面で任せきれるパートナー」を探している――。

そんな課題を感じているなら、ノヴィータのフロントエンドチームにぜひご相談ください。

 

ノヴィータのサービスにご興味がございましたらお問い合わせください!

docs.google.com

 

コーポレートサイトもぜひご覧ください。

www.novitanet.com

 

仲間を求めています! 募集中の職種はこちらから(Wantedly)

www.wantedly.com