プロジェクト概要
総合住宅設備メーカーであるタカラスタンダード様のオウンドメディア（コラムページ）における、トップページから詳細、一覧ページに至る一連のデザイン制作プロジェクトです。詳細なワイヤーフレームがない状態から、掲載要件のみをまとめた簡易指示書をもとにゼロベースでページ構成と情報設計を実施。デザインの完成後は、外部コーディング会社の仕様書に準拠したコーディング指示書を作成し、他社を巻き込んだプロジェクトにおいて手戻りのないスムーズな実装・リリースを実現しました。
基本情報
サイト名：タカラスタンダード リフォームコラム
URL：https://www.takara-standard.co.jp/reform/column/（他、詳細・一覧ページ）
担当領域
Webデザイナー / UI・UXデザイナー
（要件定義からのページ構成・情報設計 / Webデザイン / 外部コーディング会社向け指示書作成）
プロジェクトの目的と課題
-
コラム読者の回遊性向上とコンバージョンへの誘導: 記事を読みにきたユーザーに対し、他の人気記事やカテゴリ、さらには「WEB予約来場」などのコンバージョン（目的）へ自然に誘導できる、メディアとしての強固なUI/UXを構築すること。
-
ブランドガイドラインに則った可読性の高いデザイン: 住宅設備メーカーとしての清潔感と信頼性を担保しつつ、長文のコラム詳細ページでもユーザーがストレスなく読み進められる読みやすさを両立すること。
-
外部パートナーとの摩擦のない連携: コーディングを担当する外部制作会社の仕様を正確に読み解き、実装時の認識ズレや手戻りを防ぐディレクション（指示出し）を行うこと。
施策とこだわったポイント
1. ワイヤーフレーム不在から最適解を導き出した、メディア情報設計とUI/UX
簡易的なテキストベースの掲載要望のみをインプットとし、ユーザーが迷わず目的の記事を探せる最適なレイアウトをゼロから考案しました。トップページ上部のスライダーで目玉記事を訴求しつつ、メインエリアにはサムネイルが美しく並ぶ「カード型UI」を採用。右サイドバーには「人気記事」「カテゴリ」「タグ一覧」や「WEB予約来場バナー」を追従・配置する2カラムレイアウトを構築し、記事の読了後もサイト内に留まらせる高い回遊性と離脱防止を意識したUI/UXへと落とし込みました。
2. 既存サイトのブランドイメージを踏襲したビジュアルデザイン
ゼロからのデザイン構築でありながら、タカラスタンダード様の既存サイトのトーン＆マナー（配色、フォントルール、あしらいのテイスト等）を分析・踏襲し、大規模サイトの一部として統一感を徹底しました。ブランドイメージである「清潔感」や「高品質」を損なわないクリーンなデザインをベースに、コラム詳細ページでは見出しの階層や画像配置のルールを整理。スマートフォンでも読み疲れしない可読性の高いデザインに仕上げています。
3. 先方のコーディング仕様を考慮した、「コーディング指示書」の作成
本プロジェクトにおける重要なポイントとして、外部コーディング会社へのスムーズな引き継ぎとディレクションを徹底しました。先方から提供された仕様書を深く読み解き、リンク範囲（赤）、画像書き出し箇所（青）、JavaScriptでのスライダー等の動的挙動（緑）、共通パーツ（紫）などを、デザインデータ上に色分けして明記した指示書を作成。フロントエンドの実装構造を理解した的確な指示出しにより、外部企業との連携における手戻りやコミュニケーションコストを削減しました。
成果・評価
運用を見据えた拡張性の高いUIと、高精度な外部連携フローの確立
「ワイヤーフレームの構築（UX設計）」から「既存サイトと美しく調和するトンマナでのデザイン制作」、そして「外部企業への正確な実装バトンパス」という、Web制作における重要工程を完遂しました。完成したコラムページは、カテゴリやタグによる絞り込みが直感的に行える優れたナビゲーションを備えており、現在もタカラスタンダード様のコンテンツマーケティングを支える拡張性の高いオウンドメディアとして機能しています。
コーディング仕様書
コーディング指示書
