「読むサイト」から「旅するサイト」へ。Webサイトリニューアルにおけるデザインの進め方を公開。

こんにちは。株式会社O-KUN デザイナーのYUIです。

現在、O-KUNのサイトリニューアルを進めています。今回はその途中経過として、「チームでどんな順番で合意を作り、どうデザインに落としているか」を、できるだけ具体的な工程でまとめます。

完成したものだけを見ると「センスで作ったのかな？」と思われがちですが、実際は逆で、合意すべきことを先に合意し、迷うポイントを先に解決して、、最後に「美しさ」に集中できるように設計しています。

この記事が、サイトリニューアルや新規サイト制作を担当する方、これからサイトをご検討する方の参考になれば嬉しいです。

今回のリニューアルは、３名体制で進めています

今回のリニューアルは、役割をきっちり線引きするというより、視点が重なり合いながら対話で精度を上げていく進め方です。

- アートディレクター（福岡さん）：どんな体験やストーリーを描くか

- ディレクター（中川さん）：O-KUNとして何を大切にするか（アイデンティティの深掘り）

- デザイナー（私）：訪問者に残したい感情を考えながら、体験を画面へ落とし込むデザイン

※こちらはリニューアル立ち上げ段階の体制です。

1. まず決めたのは「情報」ではなく「残したい感情」

サイト制作というと、最初に「何ページ必要？」「どんな機能？」から入ることが多いと思います。

でも今回、私たちが最初に決めたのはそこではなくて、訪問者が、サイトを見終わった後にどんな感情を持ってもらいたいかでした。

特にコーポレートサイトは「情報を集める」だけでなく、無意識のうちに

• どんな姿勢でお仕事に関わってくれるのか
• どこまで一緒に向き合ってくれるのか
• 信頼して任せられる相手か

を判断される場所でもあります。

だからこそ、ページ数や機能より先に、まず「残したい感情」を決めるところから始めました。

この会社となら、面白い未来をつくれそう

想像を超えたワクワクしたものを作ってくれそう

そんな感覚が、言葉を読むより先に、ふっと立ち上がる。

O-KUNの価値観やスタンスを“説明”するのではなく、まず“感じてもらえる”状態をつくリました。

2. 体験コンセプトの言語化

今回の体験設計は、この3段階を前提にしました。

• 世界観に没入してもらう
• 会社の理念を理解していただく
• 「共に歩む」イメージが立ち上がる

O-KUNの業務内容として、自社サービスのプロダクト＋受託開発を軸にした事業成長に並走するパートナーです。

ここが決まると、ページ構成も、ビジュアルのイメージも、CTAの置き方もブレにくくなります。

コンセプトの核

今回のコンセプトの核は、この一文です。

共に未来を創り、共に成長し、共に楽しむ

この言葉を軸に、次の3要素を用意しました。

• 共創：開発提案ではなく、顧客と共に本質的な課題に向き合う
• 想像できる働き方：日々の働き方や空気感が伝わる（多様な個性が影響し合う）
• 信頼感：技術力だけでなく、人間味を含めて「任せられる」と感じていただく

見ていただきたいターゲットは、クライアントと求職者に絞ります。絞ることで、情報設計も表現も判断がしやすくなります。

3. サイトマップ、導線を「旅」として組み立てる

ここからが、いわゆる「サイト制作っぽい」工程です。
でもやっていることは単なるページの分解ではなく、体験の編集です。

私たちはコーポレイトサイトを「読む場所」ではなく「旅する場所」にしたい。
そのために、導線は1本の正解ルートに固定せず、おすすめルートを置きつつも、寄り道できる構造にしています。

導線（旅のルート）の一例

• 世界観（入口）
  → CULTURE
  → SERVICE
  → 一緒に働く（RECRUIT）
  → つながる場所（CONTACTなど）

ただし、順路を押しつけるのではなく、どこからでも入れる自由に移動できるルートも用意しています。
旅は、強制されると旅じゃなくなるので、その部分の設計にも慎重に取り組みます。

4. ビジュアルコンセプト（世界観）をメタファーで統一する

世界観を作るときに非常に重要だったのが、メタファーを決めることでした。

今回のコンセプトは「島」と「船」の２つで表現しています。

• 島＝クライアント（課題・価値観・事業フェーズがそれぞれ違う独立した存在）
• 船＝O-KUN（島々を巡回しながら、共に成長していく存在）

さらに「島・木・光」の関係としても整理しています。

• 島の木＝クライアントの事業そのもの
• 船の木＝価値を生み出すエネルギー源（O-KUNのメンバーのエネルギー）
• 生まれた価値が 光／風／波として必要な場所へ自然に流れていく

この整理があると、制作の途中で迷ったときに
「これは島っぽい？船っぽい？光っぽい？」と立ち戻れて、表現が迷いにくくなります。

5. キャラクター設計について

サイトのナビゲーターとして説明役が必要となったため、世界観を作り込む内に「キャラクター」をデザインとして入れることになりました。

ただし、キャラクターはあくまでナビゲーターです。
前面に出しすぎないようにするため、３つの基本ルールを設けました。

キャラクターの存在感：3つの基本ルール

1. 常に小さく表示する
2. 背景側に存在させる
3. 写真や実績より前に出ない

目指すのは「気づいたら、そこにいる」「一緒に何かをしている気配がある」レベルにしようと考えています。

6. いま進めていること（UIルールの設計）

体験コンセプト、情報設計、世界観が決まった後は、これから本格的なデザインに入ります。

私はUI制作に入るとき、いきなりボタンや余白を詰めません。
先にやるのはこの2つです。

① そのページの役割を一言で表現する

例：

• CULTURE：没入の温度を保ったまま、姿勢を理解できるページ
• SERVICE：信頼をつくるページ（実績より先に“向き合い方”が伝わる）
• RECRUIT：一緒に歩むイメージを現実にするページ

② 判断に迷ったら戻る軸をページごとに持つ

今回だと、体験の流れ（没入→理解→共に歩む）が、UI判断の背骨になります。

画面制作で迷ったときのチェックリストは、以下の通りです。

- いまの画面は「没入 → 理解 → 共に歩む」のどの役割を担っているか

- “説明”になりすぎず、姿勢や空気が先に伝わっているか

- 入口の自由さ（選べる感覚）を壊していないか

- 信頼感（任せられそう）が立ち上がる要素があるか

- 8 Valuesが「読ませる」ではなく「感じられる」形になっているか

7. まとめ：デザインは「完成品」より「途中過程」が重要

今回のリニューアルで、私が重要だと感じていたことを箇条書きにしました。

• 最初に見ていただいた方に残したい感情を考える
• 自社のことを言語化、体験コンセプトを言語化して合意する
• サイトマップは「旅」として編集する
• 世界観はメタファーで統一する
• キャラクターはルールで抑える

完成したデザインを素晴らしいものに仕上げることは重要です。
でも実は、完成品を作る力より、途中でブレないためのコンセプトやルールを作る力のほうが、サイトリニューアルでは価値になりやすいと感じています。

これからも、途中で見えてきた発見や、迷ったポイント、判断した理由などを残していく予定です。

最後まで読んでいただき、ありがとうございました！