完全インハウス！1,700以上のページをどう設計し直すか、サイトリニューアルの裏側！

こんにちは。DODでWEB制作を担当しているうーたんです。

DODのブランドサイトをリニューアルして、早2ヶ月が経過しました。リリースに合わせた同時セール企画「DODメタモルフォーゼ記念！24時間限定全品20％値下げ！」も本当にたくさんの反響をいただき、10年ぶりのサイトリニューアルにふさわしい最高のお祭りの日になりました。本当にありがとうございました！

旧ブランドサイトは約10年間運用されてきたため、いきなり見た目がガラッと変わって「少し使いにくいな〜」と感じている方もいるかもしれません。長年慣れ親しんでいただいた家をいきなりリフォームしてしまったようなものですから、戸惑うのも当然だと思います。

でも、今回のリニューアルにはDODの「これから」に向けた想いが込められています。新しいサイトの意図や現在の形になった理由、制作の裏側を知っていただけたら嬉しいです。

サイトリニューアルはWebチーム（コズエさん＆うーたん）で取り組んだのですが、この記事はうーたん目線で書いていきたいと思います。

10年ぶりの大改修、新ブランドサイトは「完全インハウス制作」
- なぜ外部に頼まなかったのか？
リニューアルプロジェクトの各工程
課題の洗い出しとリサーチ
DODのブランド理念を言語化するビジョンマップの設計
ブランドアーキタイプ、トーン&マナー設計
サイト構造の交通整理、サイトマップ作成
企画書、ワイヤーフレームの作成
ワイヤーフレームの作成
デザインシステムの構築
サイトデザインと写真撮影
WEBサイトの実装
Webデザインギャラリー「MUUUUU.ORG」にてSITE OF THE DAYに選出！
長きに渡るサイトリニューアルを振り返って
おまけ
掲載いただいたギャラリーサイトのご紹介

10年ぶりの大改修、新ブランドサイトは「完全インハウス制作」

今回のブランドサイトリニューアルプロジェクト、実は外部の制作会社さんには一切お願いせず、完全インハウス（内製）で制作しました。

一般的な会社であれば、これだけ大規模なブランドサイトのリニューアルはWeb制作会社に外注することが多いです。しかし、あえて自分たちでゼロから作り上げる道を選びました。

なぜ外部に頼まなかったのか？

僕たちがインハウスにこだわるのは、「DODというブランドの思いを余すことなく反映させるため」です。

DODは、ただアウトドア用品を売っているだけのブランドではありません。アソビゴコロや、ちょっとクレイジーなアイデア、そして何より「アウトドアって自由で楽しい」というメッセージを発信することを大切にしています。この空気感や熱量は、外部の方に仕様書として渡して言語化できるようなものではありませんでした。

「自分たちのブランドの顔であるサイトは、自分たちの手で作り上げたい！」

そんな決意のもと、Webチーム（コズエさん＆うーたん）が一丸となってこの壮大なプロジェクトがスタートしました。

リニューアルプロジェクトの各工程

表面的なデザインを整えるだけなら、もっと簡単にできていたかもしれません。しかし今回はただサイトをリニューアルするのではなく、DODの根本を見つめ直すところから始めました。
そのためこのプロジェクトは、企画フェーズにしっかりと時間をかけ、土台作りを行う以下の流れで進行しました。

課題の洗い出しとリサーチ
DODのブランド理念を言語化するビジョンマップの設計
ブランドアーキタイプ、トーン&マナー設計
サイト構造の交通整理、サイトマップ作成
企画書、ワイヤーフレーム作成
デザインシステム構築（カラー、フォント、コンポーネント、設計ルール）
サイトデザイン、写真撮影（トップ、下層ページ含む全40ページ以上）
WEBサイトの実装

全ての工程において紆余曲折や思い入れがたくさんあるため、全て話しているとこの記事では説明しきれないので、各工程の大事なところに絞って説明していきたいと思います。

課題の洗い出しとリサーチ

このプロジェクトの始まりは、昨今のアウトドア業界とWEB業界の動向をリサーチし、DODとしての方針などの前提情報を整理したうえで、課題を洗い出していくところからスタートしました。
課題を抽出するにあたり、主にユーザーの視点、運用者の視点、ブランディングにおける視点、3つの視点でカテゴリ分けし、これまでのユーザー様からのご意見を参考にしたり、DODスタッフ全員からヒアリングを行いました。

ここではただ単に「〇〇が使いにくい」などの意見を集めるだけではなく、なぜその機能が使いにくくて、どこに原因があるのか？どういうアクションが解決や落としどころとなるのか？を徹底的に深堀りした課題をもとに、自分たちに近い課題を持っていて、それらを解決した事例はないかを軸に参考サイトなどのリサーチを行いました。

DODのブランド理念を言語化するビジョンマップの設計

旧ブランドサイトに、DODのブランドメッセージをまとめた「Aboutページ」があったのをご存知でしょうか。そこにはブランドのミッションや活動方針が記されており、僕たちもその思いを胸に刻みながらモノづくりやコトづくりをしていました。

しかし、このAboutページの内容が考えられた当時から年月が経過し、アウトドア市場も大きく変化しました。その中でDODも成長し、ブランドに関わる人が増え、製品や販売方法も多様化していくにつれて、当時の理念と現在の姿に少しずつ乖離する部分が出てきていました。

なので、このサイトリニューアルを機に、私たちがブランドとして目指す姿を表す「ビジョンマップ」を再構築することにしました。

もちろん再構築にあたり、ブランドマネージャーのおにぃ、なでさんを筆頭とした、DODで長く働く方たちと何度かミーティングを行い、ブランドの歴史、ロゴに込められた思い、将来叶えたいこと、大切にしていきたい価値観などを話しながら自分たちについて深堀りし、言語化していきました。

最終的には、ブランドマネージャーのおにぃにDODのMVV（ミッション、ビジョン、バリュー）を定めてもらい、その内容を整理して新しいAboutページに反映させました。
「STAY CRAZY.」というメッセージや「オフの時間から、世の中をゆるくする。」というミッションの軸はブレさせることなく、目指す姿（ビジョン）や行動指針（バリュー）を改めて言語化・再構築し、DODメンバー全体にも共有しています。

ブランドアーキタイプ、トーン&マナー設計

次に見た目の部分を作るブランドアーキタイプ、トンマナ設計を考えました。DODでは写真も全て外部にお願いすること無く、インハウスの制作チームのカメラマンが撮影を行っています。そのことから少し抽象的で感覚に近い部分ではあるのですが、カメラマンによって写真のトーンにバラつきが発生するのが課題でした。　

そこで制作チームへアンケートと数回のMTGを行い「ブランドアーキタイプ」という考え方を用いて、ブランドの人格を視覚化。統一された世界観の中に製品によって見せ方やコンセプトに合せて表現がしやすくなるように、自分たちはどのアーキタイプになるかを考えました。

結果、ビジュアルは「EveryPerson（一般大衆）＝等身大、親しみやすい」、メッセージは「Jester（道化師）＝型にはまらない、ユーモアのある」に分類し、その2つが合わさることで『DODらしさ』が生まれると定義しました。
このような抽象的な部分を見える化し、チーム全体で意識して撮影を行うことで、ブレない世界観の維持につながっています。

サイト構造の交通整理、サイトマップ作成

これまでお話ししてきたブランド方針や見せ方の整理と並行して、旧ブランドサイトを作成したコズエさんにサイトマップと各ページのファイル一覧をまとめてもらいました。そして、そのリストとにらめっこしながら、新サイト構造の交通整理を進めました。

具体的に行ったのは以下の作業です。

ページとファイルの紐づけ（このページはどのファイルと関連しているか）
サイト構造、導線の再構築（適切な導線を作るためのページ統合や新規ページ作成）
リニューアル後も必要なページと不要なページの選別
不要ページの代替ページ作成、または遷移先の整理（リダイレクトリスト作成）
ページごとの機能の棚卸し（移行時に制約が残りそうなページと、その具体的箇所の抽出）

この新しいサイトの情報設計は、リニューアルのなかでも特に時間のかかった仕事の1つです。しかし、ここを慎重に行わないと後のデザインや構築工程で大きな手戻りが発生してしまうため、ときには社内のサポート部署などにも確認を取りながら交通整理を進めました。

企画書、ワイヤーフレームの作成

これまでまとめてきた内容を1つの企画書にしていきます。この企画書はDODメンバー全員に共有する内容になるので、メインビジュアルのモックアップなどを添えて、専門知識がなくてもイメージしてもらいやすいように作成しました。

中身を見せることは大人の事情でできないのですが、ざっくり言うと以下の構成でまとめました。

サイトリニューアルの目的
解決したい課題、効果
ターゲット、ペルソナ
コンセプト
コンテンツ案、デザインイメージ
サイトマップ
サイト制作と運用におけるゴール

企画書が完成し、承認もいただいたところでいよいよWEBサイトの骨格であるワイヤーフレーム（設計図）を作ります。

ワイヤーフレームの作成

旧サイトのこれまでまとめた仕様や機能、移行時の制約を考えながらワイヤーフレームを作成しました。
書き出したらキリがないほど悩んだ部分はたくさんあるのですが、1番難しかったのは製品ページの購入導線の構築でした。

DODでは商品によって、DODストア以外の店舗で販売されることもよくあります。最近では店舗限定カラーが展開されるケースも増えてきました。こうした販路の多様化に伴い、旧サイトでは以下のように直感的な操作がしづらい状態になっていました。

それに対して、直接購入機能と各販売店一覧の画面を切り分け、選択したカラーに応じた販売先が表示される仕組みを考えました。もちろん、製品ページに関してはデータ移行も絡んでくるため、そもそも構築が可能なのか、過去のデータが新しい仕様に対応できるのかといった点も考慮しながら進めました

ワイヤーフレームを作成する時はこうした課題の一つひとつに目を向け、少しでもユーザーがDODのサイトを使いやすくなるように設計しています。

デザインシステムの構築

旧ブランドサイトではページによってデザインのトーンにばらつきがあり、同じサイトの中なのに、ユーザーにとっては「別々のサイトを見ているような違和感」を与えてしまっていたかもしれません。

この課題を解決し、サイトのどこを見ても一貫した「DODらしさ」を感じてもらうために取り組んだのが、「デザインシステム」の構築です。デザインシステムとは、簡単に言うと「サイトを作るためのルールブックと、共通で使うレゴブロックのセット」のようなものです。

画像は一部抜粋したものですが、サイト内で使う「色」「余白」「文字の大きさ」「見出し」「ボタンの形」「レイアウト幅の可変条件」などをあらかじめルールとして決め、いつでも使い回せる共通パーツとして用意しておきます。これを作っておくことで、今後新しくページを作る際にもデザインがバラバラにならず、誰が作っても統一感のある「DODらしい」サイトを保つことができます。

また、デザインシステムの構築にあたって多様なユーザー環境におけるアクセスのしやすさを向上させるため、WCAG2.2レベルAAの基準を指針として、可能な範囲での準拠を目指しました。

サイトデザインと写真撮影

ここでようやく、これまで練ってきた企画や要件、デザインシステムをベースに、いよいよサイトのデザインに落とし込んでいきます。「このフェーズが一番時間がかかるのでは？」と思われがちですが、実はそうではありません。一番時間がかかるのは、デザインに入る前の「企画の土台を念入りに固めるフェーズ」なのです。

今回のブランドサイトでは、あえて色を多用して世界観を作り込むことはしませんでした。なぜなら「ブランドアーキタイプ」でも説明したように、制作メンバーが撮影した素敵な写真（ビジュアル）と、サイト内のコンテンツ（メッセージ）が掛け合わさって「DODらしさ」が生まれると言う考えが根底にあるからです。

そのため、写真の魅力が最大限に活きるモノトーンを基調としつつ、見やすさや心地よいアニメーションにこだわったデザインに仕上げています。

特にメインビジュアルはWEBサイトの顔になる部分です。ここではDODのメッセージとともに、「キャンプだけのブランドじゃない（キャンプ、釣り、ライフスタイルなどもある）」ということも表現したかったため、かなり頭を悩ませました。

そうして色々と考えた結果、浮かんだメインビジュアルのコンセプトは「陸・海・食う」でした。（笑）
語呂が衣食住ぽくていいでしょ（笑）

一見ふざけているようですが、誰でもわかりやすい形がこれだなってなりました。このコンセプトを軸に、過去のアーカイブ写真からイメージに合うカットを厳選。さらに足りないシーンはコンセプトに合わせて追加撮影を行い、それらを組み合わせることで現在のメインビジュアルが完成しました。

WEBサイトの実装

デザインが完成したら、いよいよ最後のフェーズであるWEBサイトの実装（コーディング）に入ります。コードを書いて、デザインを実際のWEBサイトとして動かしていく作業ですね。

セキュリティや仕様の都合上、具体的な実装内容について深くはお話しできないのですが、今回の構築は僕とコズエさんの2人で行いました。膨大なページ数を2人でブレなくスムーズにコーディングしていくために、事前に独自の「コーディングルール」を策定し、それに沿ってひたすら手を動かしてサイトを完成させました。

見えない部分の裏話になるのでうまく伝えにくいのですが、実は「今後WEBサイトを拡張していく際にも対応しやすい構造」で作られています。運用していく僕たちにとって、これはとても重要なことだったりします。

そんなこんなでようやく、10年ぶりのリニューアル！DODの新ブランドサイトが完成しました！

Webデザインギャラリー「MUUUUU.ORG」にてSITE OF THE DAYに選出！

リリース後、めちゃくちゃ嬉しい出来事がありました。様々なWEBデザインギャラリーサイトで新しいブランドサイトを取り上げていただいたのですが……なんと、私がこの仕事を始めてからの目標の一つでもあった、Webデザインアワード「MUUUUU.ORG」にて、2026年9月7日の『SITE OF THE DAY』に選出されました！

このギャラリーサイトは毎日拝見していたので、当日画面を開いた時に自分のサイトが出てきて声が出てしまったことを覚えています（笑）

数多くの優れたWebサイトがひしめく中、私たちインハウスチームが作り上げたサイトが評価されたことは、チーム全体にとって大きな自信に繋がりました。DODの熱量や、妥協せずに考えたデザインと使い勝手が、客観的に評価していただけたと実感できた瞬間でした。

長きに渡るサイトリニューアルを振り返って

今回のDODブランドサイトリニューアルは、僕のWEB制作キャリアにおいて最大規模のプロジェクトでした。
本当は細部へのこだわりやビフォー・アフターなど、まだまだ語り尽くしたいほど、思い入れの深い仕事になりました。正直、楽しいことより苦しいことの方が多かったり、自分たちの実力不足に気付かされたりもしましたが、すべてひっくるめて最終的には「最後までやりきった！」と胸を張って言えます。

もちろん、WEBサイトは作って終わりではありません。

この制作で得た数え切れないほどの学びを今後のコトづくりに活かし、もっと使いやすいサイトへの改善や、DODらしい面白いコンテンツの発信を続けていきます。これからも長く愛されるサイトになるよう頑張っていきますので、どうぞよろしくお願いします！