株式会社オーレック様のアジア向けブランドサイト構築プロジェクトです。
アジア市場に向けた情報発信基盤として、オーレック様が大切にされてきた理念や取り組みをグローバルに発信するためのサイトをDrupalで構築しました。
プロジェクトの背景と目的
オーレック様がアジア市場への展開を進めていくうえで、対象地域に特化したウェブサイトが存在せず、ビジネス機会の損失が生じているという課題がありました。また、今後の海外向けマーケティングや販促活動も見据え、保守運用の持続性と中長期的な取り組みを前提とした基盤づくりが求められていました。
こうした背景から、以下を目的としてサイトリニューアルプロジェクトが始動しました。
- 対象地域に向けた情報発信基盤の整備
- ブランド認知の強化
- 精度の高い新規顧客の獲得
アプローチ
Drupal標準機能の活用による英語対応
従来サイトでは日本語以外の情報が限定的であり、ビジネス機会の損失が懸念されていました。本プロジェクトでは、Drupalの標準機能を活用することで英語対応を実現しています。
Drupalはデフォルト言語が英語であることに加え100言語以上に対応しており、将来的な多言語展開にも柔軟に対応が可能です。構築後の言語追加や拡張も容易なため、今後の海外展開を見据えた基盤としても安心して運用いただける設計となっています。
製品情報の構造データ化
これまでは、製品追加や更新時の対応が煩雑になりがちという運用面における課題がありました。そこで、データベース志向CMSであるDrupalの特性を活かし、データのリレーションを丁寧に組み上げることで、製品情報の構造データ化を試みました。
Drupal標準のメディアやECKモジュールを活用し、運用負荷を抑えつつ正確でスピーディな情報更新を可能にしました。こうした設計については実運用の観点からも、高く評価をいただくことができました。
サステナブルなSEO対策
Drupalの標準機能であるクリーンなURLやパンくずリスト等に加えMetatagモジュールを活用し検索エンジンへの最適化を実施しました。
SEO対策は継続性が肝心なため、運用者への負担を最小限に押さえ、「意識せずとも最適なメタ情報が埋め込まれる」ような設計としています。
UI/UX 最適化
デザイン設計
本プロジェクトでは、ワイヤーフレーム受領後のデザイン設計も当社が担当しました。
トップページのスライダーでは、オーレック様のロゴマークと連動した斜線のモチーフを取り入れ、ブランドらしさを感じられる表現を採用しています。実装には工夫を要しましたが、シンプルでありながら印象に残るデザインに仕上げています。
SDC活用による開発効率と保守性の向上
Drupalテーマは元々リージョンとブロック単位で構成されており、柔軟な組み換えや再利用が可能です。今回はさらに、Drupal10.3で安定版としてコアに取り込まれたSDC（Single Directory Components）を採用しました。
各パーツをコンポーネント単位で管理することで保守性を高めるだけでなく、今後の目玉機能となるDrupal Canvasの利用を見据えています。
参考：Drupal Canvas is Now Available: Inside Drupal's New Visual Page Builder
デバイス最適化を実現するレスポンシブ画像対応
本プロジェクトでは、アジア圏特有の多様な閲覧環境も考慮し、あらゆる端末・回線で快適に閲覧できる状態を目指しました。
Drupalコアのレスポンシブ画像モジュールを利用し、画面幅ごとに最適な画像を出し分ける設計としています。表示速度を最適化することで利用者のUX向上に寄与しつつ、運用者は画像サイズを意識することなく投稿ができ、双方にとってメリットのある設計を実現できました。
CDNを核に、高速・高安定を実現するインフラ設計
世界335都市にサーバー拠点を持つCloudflare（クラウドフレア）を採用し、世界中どこからアクセスしてもノンストレスな表示を提供できる配信環境を構築しました。
キャッシュ戦略においては、DrupalのCache APIを中核に据え、オリジンサーバーへのリクエスト数を最小化する設計を採用しています。特に、キャッシュタグ機能をフル活用した粒度の細かいキャッシュ制御により、コンテンツ更新時に、関係のないページのキャッシュまで一括削除してしまう非効率を回避しつつ、影響するページだけをピンポイントで更新する制御を実現。これにより、サーバーへの負荷を抑えながら、高速表示を維持することに成功しました。
インフラ構成は、安易にAWSへ一元化するのではなく、アプリケーションサーバーにさくらのVPS、CDNにCloudflareという役割分担を明確にした構成を選択。要件に応じた技術選定により、コストパフォーマンスと運用性を両立するとともに、サーバーを国内に配置することで運用面の安心感を確保しながら、CloudflareのCDNを通じて全世界へ高速にコンテンツを配信できる環境を実現しています。
さらに、デプロイフローには、Blue/Green デプロイ（本番環境と同等の待機環境を並走させ、トラフィックを切り替えることでダウンタイムをほぼゼロにする手法）を採用。データの整合性を保ちながら、安全かつ迅速なリリースを可能にする継続的デリバリー基盤を構築しました。
プロジェクト体制
本プロジェクトは、クライアントであるオーレック様、当社参画以前よりマーケティング戦略の立案・ペルソナ設計・導線設計・ワイヤーフレーム策定等を一貫してご支援されてきたトリニティワークス様、そして技術実装を担う弊社スタジオ・ウミの三社体制で推進しました。
プロジェクトの初期段階より、FigmaやAsanaといったモダンツールの活用にご理解を示していただけたことも、本質的な議論に集中できる環境づくりを後押しし、スムーズで効率的なコミュニケーションにつながりました。本プロジェクトを円滑に推進できたのは、関係者の皆様のご協力あってのものと実感しています。この場をお借りして、改めて感謝申し上げます。
制作後記
本プロジェクトはコンペ段階から参加させていただき、提案内容を高くご評価いただいたことがチームとしても強く印象に残っているプロジェクトです。
プロジェクトの背景やリニューアルのポイントについて、オーレック様が PR TIMES でも詳しく公開されていますので、あわせてご覧ください。
オーレック、ASEANを中心としたアジア市場向け公式Webサイトを刷新｜PR TIMES
また、今回のプロジェクトはスタジオ・ウミにとって、AI活用を本格的に開発フローへ組み込んだパイロットプロジェクトとなりました。議事録作成やプロジェクト進行管理から開発工程まで、幅広くAIを積極活用。特に設計書・仕様書などのドキュメント整備においては、人間とAIの双方が参照しやすい形式で充実した内容を実現でき、途中参加メンバーのキャッチアップコスト削減にも寄与しました。
本プロジェクトを通じて得た知見と成果物の品質向上へのアプローチは、今後のプロジェクトでも積極的に活用してまいります。
案件概要
- クライアント名
- 株式会社オーレック 様
- URL
- https://www.orec-asia.com/
- Drupal バージョン
- Drupal 11
- ジャンル
- ブランドサイト
- 当社スコープ
- プロジェクト管理／要件定義／デザイン／Drupal導入／フロントエンド実装／機能開発／インフラ構築／運用支援／保守
- プロジェクト期間
- 約8ヶ月
