概要

AIに関する最新情報を提供するメディアサイト。

制作上の課題

• トップページだけで19回のループが必要なデザインで読み込みに課題があった。
• ５種類のタクソノミーを使って記事を分類・出し分けるため、カスタム投稿やタクソノミー設計が非常に複雑。
• 複数のタクソノミーやカスタム投稿を横断したアーカイブ設計が必要で、レンダリングに要する時間の短縮に課題。
• WordPressに不慣れな入稿者が直感的に操作できるような入稿UIが必要。
• セキュリティ対策として問い合わせフォームでは個人情報やSMTPなど機密情報をWordPressに関与させない。

実施した対策

• 速度対策：２つのサイドバーに読み込むリンク項目を事前にJSON化することでデータベースアクセスを削減。ループを５件まで削減。
• 　〃　　 ：トップページ最上段のヘッドラインは初期表示分のみSSRとし、タブ切り替えはAJAXによりCSR化し読み込み時間を短縮。
• 　〃　　 ：最終的にトップページのデータベースアクセス回数は当初想定の250回前後から60回まで大幅に削減した。
• 入稿UI：サイドバーや広告を設定するオプションページを導入。直感的なUIを構築した他、サイドバーの設定はオプションページ保存と同時にJSONを作成しトップページで読み込む。
• 　〃　 ：タクソノミータームの持つキーカラーはタクソノミー設定画面でカラーパレットから選択。サーバーレンダリング時にインラインCSSを生成し動的対応した。
• 問い合わせフォーム：外部フォームを活用してWordPressによるフォーム設置を回避。ステップフォームはJSによる擬似的な確認画面、画面遷移で実装。

制作期間

コーディング・CMS構築：3週間