社内インナーメディア「BApedia」のリニューアルプロジェクトを、Business Architects（ビジネス・アーキテクツ、以下BA）の若手メンバーが主導しました。
前編の上流工程の記事に引き続き、本記事（後編）では、デザインやCMS構築を担う実装フェーズの3名に焦点を当てます。

今回のプロジェクトでは、桑田がデザイナーとしてUI設計やテンプレートデザインを担当。
大日がフロントエンドエンジニアとして「PowerCMS X クラウド」の構築・実装を、ムハイミンがシステムエンジニアとして環境構築やサーバー設定を担いました。

更新しやすさを重視したUI設計やテンプレート標準化、そして未経験のCMSを扱う中での試行錯誤。それぞれの挑戦を通して、プロジェクトが進む中での判断と工夫を具体的に掘り下げ、現場で磨かれていくBAの「伴走力」を追います。

BAの「伴走力」はどう生まれる？

• 【前編】社内ナレッジベース刷新の上流工程に挑む若手たちの試行錯誤
• 【後編】デザインとシステムを担う現場の奮闘（本記事）

実装フェーズ、まず何からはじめる？

プロジェクト計画書や要件定義書を、システムやデザインとして落とし込む「実装フェーズ」に入る際、まずは何から着手しましたか？

桑田：まずは、前編のプロジェクトマネージャーやディレクターが作ってくれた要件定義書や仕様書を徹底的に読み込みました。それとともに、リニューアル前のサイトの記事を数年分さかのぼって読む、使われているコンポーネントを片っ端から洗い出す、といった参考情報の整理をしました。

その後、同業他社のオウンドメディアを研究しながら、クリエイティブブリーフとムードボードなどの作成に取り掛かり、コンセプトやトンマナを合意できる状態まで言語化していきました。

大日：自分は今回、「PowerCMS X クラウド」を扱うのは初めてでした。2020年頃にリリースされた比較的新しいCMSで、機能追加のスピードも速く、常に仕様が進化しています。そのため、まずはCMS自体の理解を進めることからはじめました。

そこで、過去にコーポレートサイトをPowerCMS X クラウドで構築したエンジニアの先輩にヒアリングして、「仕様書・設計書のあるべき姿」を学びました。要件とのズレを出さないための準備に時間を使いましたね。

ムハイミン：私も大日さんと同じくPowerCMS X クラウドを扱うのは初めてだったため、まずは仕組みの理解から始めました。社内の詳しいメンバーに定期的に相談し、環境構築やサーバーセットアップの勘所を得ながら準備していきました。

若手中心のプロジェクトかつ経験のないCMSを扱うのは、苦労した部分も多かったのではないでしょうか。

ムハイミン：そうですね。そのため、小さな仮説検証すること、社内有識者にすぐ相談してその場で手を動かすこと、この2つのサイクルをとにかく意識して動いていました。

大日：社内でもPowerCMS X クラウドの経験者は限られているため、若手中心で進行しているこのプロジェクトを通じて、知見を蓄積・標準化し、BA全社の対応力を底上げする狙いもありますね。設計書の作成など、何を記載すべきなのか情報の選択も苦労しました。

運用する担当者の「体験」をデザインする

デザイナーとして、UI設計やテンプレートを考える際に重視したポイントを教えてください。

桑田：まず、このサイトの対象は「全社員」なので年齢も職種も幅広いです。そのため「誰が見ても迷わないシンプルさ」を優先しました。

さらに、見た目だけでなく投稿・更新する作業担当者の体験を想定し、「誰が更新しても品質が揃う」ことをゴールとして考えていきました。

リニューアル前のサイトは「WordPress」だったのですが、色や装飾の自由度が高すぎて統一感が崩れがちでした。

そこで今回は、コンポーネントのバリエーションを整理し、たとえばボタンの色やサイズを限定するなどして、迷いを減らす設計にしました。

実際に運用する方を意識した設計になっているんですね。ロゴやトップページの見え方については、どのように考えたのでしょうか？

桑田：社内のナレッジシェアサイトとして「BAの百科事典＝サイトを訪れるたびに発見がある」というコンセプトを、虫眼鏡モチーフで視覚化しました。

トップページはメインコンテンツとサイドナビに分かれています。メインコンテンツエリアではピックアップ記事や各カテゴリごとの最新記事を表示します。

サイドナビは検索・カテゴリ一覧・注目タグ・新着記事という構成になっており、ユーザーの興味関心に合わせて記事にアクセスできる導線を多く設けることで、「探しやすさ」を第一に設計しています。

実装フェーズで試されるエンジニアの技術力

エンジニアチームへのデザインの受け渡しはどのように行いましたか？

桑田：活用したツールは「Figma」です。そのうえで、画面上で伝わりにくい意図は、短時間のミーティングで口頭で補足するなどし、チーム内の情報の解像度を合わせていきました。ドキュメントと会話を併用しながら、手戻りを最小化することを意識しました。

また、これは個人の反省ですが、自分でサイト全体のデザインを最初から設計をする経験が乏しく、かつツールもまだ使い慣れていないFigmaだったため、どれくらい作業工数がかかるのかの予測が難しかったですね。

CMS構築やテンプレート開発で最も大変だったのはどういった部分でしょうか。

大日：既存のPowerCMS X クラウド環境で運用しているBAコーポレートサイト内に、別ドメインのスペースを新設する構成が、最も難易度の高い部分でしたね。

社内的にも前例も資料もない状態からのスタートで、通常ではインフラエンジニアが対応するようなドメインや環境構築の論点まで踏み込みました。社内の有識者に都度ミーティングで相談しつつ、ムハイミンさんとも頻繁に連携しました。

かなり手探りの状態でしたが、無事使えるようになった時は達成感がありましたね。

ムハイミン：大日さんの話とも重なる部分が多いですが、やはりインフラ周りです。サーバー設定・環境構築はとくに時間がかかりました。想定の10倍近い手間に膨らんだ印象です。

しかし、この経験を通してPowerCMS X クラウドの知見がかなり深まったのは大きいですね。さらに、「誰が調査するのか」「誰が暫定対応するか」「誰が上長へ報告するか」といった分担を明確化する重要性も実感できました。

エンジニアとして、デザイナーとの連携で心がけた点はありますか？

大日：テスト投稿でUIを実データで確認しながら、仕様の解釈違いを早期に潰すことを意識しました。デザイナーの桑田さんも言っていたように、Figmaだけに依存せず、こまめにミーティングで疑問点を解消できたのは良かったと思います。

ムハイミン：なにより桑田さんの仕事が早く、定例会で出た情報にもとづいて、迅速にデザインを更新してくれました。今後もコンポーネント仕様の確認など、早い段階から密に連携していきたいですね。

限られた時間とトラブルの中で培われる対応力

スケジュール通りに進めるために、限られたリードタイムの中で意識したことは何でしょうか。

桑田：今まで自分で一からサイト全体のデザイン設計をしたことがなかったので、どんな成果物を作らないといけないかの具体的なイメージがつきづらかったです。また、Figmaの機能の研究も並行しながら進める必要があり、作業工数の見立てが難しい部分がありました。

その際、先輩の過去のアウトプットを参考にしながら、自分が最終的に作るべき成果物のイメージを認識し、そのためにどんな作業が発生するのかを考えていきました。

途中に手戻りも発生しましたが、作業を続けていく中で徐々に工数の予測もつくようになり、スケジュール通りに設計を完了させることができました。

大日：経験がないPowerCMS X クラウドを扱うため、作業工数の見積もり自体がとても難しかったです。

先輩に伺って作業時間を見積もりはしたのですが、できる人が作業するのと初心者が作業するのではまったく工数が異なってしまうため、予想より大きく工数がかかりました。

ムハイミン：社内案件ゆえに、どうしても優先度的にも他案件との両立も課題でした。そこで「今日は自分がこれをやる」「明日は大日さんがこれをする」とタスクを細かく分担し、わからないことはすぐに議題にすることを意識しました。

大日：システムは常に新しいものが出てきますし、今後のクライアントワークにおいても馴染みのないCMSに触れることはあると思います。その際に、このプロジェクトの経験や資料を使って、工数見積もりやチームでの知見共有などを円滑にしていきたいです。

今回の「BApedia」リニューアルでできなかったことや、今後実施したいと考えていることはありますか？

大日：当初のデザインで考えていたものの、スケジュールの関係で「リアクションボタン（サイト上で記事にいいねができる仕組み）」の実装が先送りになりました。次のアップデートのタイミングまでに、さらに知見を積んで実装したいと考えています。

桑田：社内ユーザーへの簡易アンケートやヒアリングを実施することで、運用目線の解像度がさらに上がると考えています。インナーメディアである強みをもっと活用していきたいですね。

このプロジェクトで自分が成長したと感じる部分や、今後、お客さまとの案件に活かせると思ったことを教えてください。

桑田：「誰でも迷わず更新できて品質が揃うUI設計」は、どんな案件でも求められる視点だと感じました。今回、コンセプトを言語化し、論理的に設計へ展開する筋道を経験できたので、今後の案件でも説明責任を果たせるようなデザイナーをめざしていきます。

大日：仕様書・設計書と実装のズレを出さない進め方や、経験のないCMSの立ち上げ方を現場で学べたことで自信がつきました。また、チーム開発では、エンジニア同士での相談や作業の分担をすることも新鮮でした。

ムハイミン：このプロジェクトを通じて、チーム開発の大変さと面白さを実感しました。今回はPowerCMS X クラウドの技術的な部分をインプットしましたが、他案件でも未知の技術を迅速に習得することは重要です。そのうえで、自分だけでなくチームとして使えるようにするために何ができるのか考えていきたいです。

現場の奮闘から見えるBAの伴走力

後編の締めくくりとして、クライアント役を務めた小山に、本プロジェクト（実装フェーズ）の取り組みと成果について振り返りをお願いしました。

「今回の実装フェーズでは、とにかく『理解しようとする姿勢』が印象に残りました。

要件や仕様、機能の意味を一つひとつ丁寧に読み解いて、時には同業他社の事例を研究しながら、自分たちなりに考えて進めていました。

当然、初めてのCMSなのでトライも多く、特に工数算出には苦戦していました。

でも、想定と違っていた時はすぐにミーティングを開いたり、お客さま（僕）に相談したりしながら、プロジェクトメンバー同士でお互いを補完し合って進めていたのが印象的でしたね。

誰かが指示しなくても、自然と『理解しようとする力』と『補い合う姿勢』、そして『未知の領域に挑戦する姿勢』がプロジェクトの中で芽生えていったのかなと思います。

こういう姿勢でメンバーが取り組んでくれるからこそ、Business Architectsでは実際のプロジェクトでもお客さまに伴走力が評価され、長くお付き合いいただけているんだと思います」（小山）

前後編にわたって紹介した「BApedia」リニューアルプロジェクト。後編では、デザインとエンジニアリングの両面で若手が奮闘し、成長していく姿をお伝えしました。
上流工程での構想づくりや要件整理に焦点を当てた前編も、あわせてご覧ください。

企画から構築、運用までを通して磨かれた「伴走力」は、今後のBAのプロジェクトを力強く支えていきます。その姿勢は、クライアントの課題や想いを理解し、ともに解決策を形にしていくBAのものづくり全体に通じています。

Webサイトのリニューアルや運用体制の見直しなど、課題解決のパートナーをお探しの際は、ぜひBAにご相談ください。
私たちが実践的な知見とチームの力で、御社のプロジェクトを成功へ導きます。