自社サイトのリニューアルの記録（デザイン編）｜戦略から逆算した、情報設計とデザインの判断

はじめに ── 「正解」は、ひとつではない

こんにちは。株式会社 X Umbrella代表の宮川です。先日、弊社のリニューアルサイト（本サイト）を公開しました。

ディレクター・デザイナーの皆さんは、デザインを制作するにあたり、どのような流れで進めていますか？案件ごとに多少異なるかもしれませんが、土台としては「何を、どう見せるか」を固める設計がサイトの仕上がり、ひいては、目的とする成果を大きく左右するかと思います。

実装をどう進めたかは実装編（後日公開予定）で詳しく扱うことにして、本記事では、その前段にあたるデザインの設計に焦点を当てています。

はじめにお伝えしておきたいのは、デザインにもコーディングにも、「これが正解」というやり方は無いと私自身、考えています。手法は会社や人によって違いますし、何よりAIの進化が目まぐるしい今の時代は、たとえ今この瞬間の最適解があったとしても、数ヶ月後や1年後には陳腐化しているかもしれません。

この記事で紹介する方法の中にも、すでにAIでもっと簡単に対応できるものがあるはずです。なので、ここでお話しすることをそのまま受け取るのではなく、

自分なりのやり方に昇華させる
AIに任せる

このどちらかの形で、あなたにとって最適な方法へ落とし込む、というつもりで読み進めてみてください。特にディレクターの方やデザイナーの方にとって、何か一つでも得るものがあれば嬉しいです。

実際のデザイン── デザインカンプの公開

まずは今回のリニューアルで実際に作ったデザインカンプのFigmaを、以下のリンクから共有します。
（Figmaアカウントでログインすると、レイヤー構造など詳細を見ることができるかと思われます）

デザインカンプFigma

補足

自社サイトのため、主要ページ・PCサイズを中心に作成しています。（スマホサイズは実装時に縦積みにするなど、調整しました）
レイヤー構造は、お見せする前提で整えたものではないので、ご容赦ください。

この記事で解説するのは、このデザインが「どういう判断の積み重ねで出来上がったか」です。トーンの決め方、配色やフォントの選び方、質感やUIの考え方——一つひとつの判断をどのようにしたかを以降ご紹介します。

デザインの前にコンテンツがある

デザイナーやWeb制作に携わる方にとっては当たり前の認識ですが、デザインはコンテンツがあって初めて決まります。中身が決まっていないと「どう見せるか」が決まらず、コンテンツの内容や量によって、最適な見せ方は変わります。たとえば、こんな検討が生まれます。

ビジュアル要素：どんなアイコンを使うか、どんな装飾にするか、どんな画像を合わせるか
レイアウト：タブで見せるか、リストで並べるか、複数カラムにするか
コンテンツ量に応じた形式：長い文章はアコーディオンで畳むか、テーブル表で分かりやすくするか

これらは、料理と器の関係に似ているかもしれません。汁物なら椀、刺身なら平皿、パスタなら深皿——どんな料理を出すかが決まって、はじめてふさわしい器が決まりますよね。器を先に選んでから料理を考えることは、普通ありません。デザインも同じで、だからこそ、盛りつける中身であるコンテンツを先に固める必要があるのです。

なお、その「何を伝えるか（コンテンツ）」をどう固めたかは、経営・マーケティングの視点で戦略編に詳しくまとめています。

本記事では、固まったコンテンツを、どう構造化し（情報設計）、どう骨格に起こし（ワイヤーフレーム）、どう見た目に仕上げるか（デザイン制作）を、実際に進めた順にたどっていきます。

1. 情報設計 ── 「役割・情報・感情」から各ページを設計する

デザインに入る前の情報設計は、実際はディレクションの領域ですが、大事な工程なので触れておきます。ここで各ページの中身と順番を固め切っておくと、以降のワイヤー・デザインのクオリティが上がります。この情報設計で使ったのが Octopus.do でした。

Figmaの前段として、Octopus.doを選んだ理由

Octopus.doは、ツリー構造でサイトマップを作りながら、各ページにヘッダー・コンテンツパーツ・フッターといったブロックを積んでいけます。マウス操作だけで直感的に構造を組め、ページ間の繋がりも手間なく可視化できる。いわば簡易的なワイヤーフレームを、情報設計と同時に組めるツールです。

作り込んだワイヤーはFigmaで描くとして、その前段——「何を、どの順で置くか」を素早く形にするには、これがちょうどいい塩梅でした。

サイトマップとディレクトリマップを、分けて持つ

全体設計では、サイトマップ（サイト全体の構造）とディレクトリマップ（各ページの詳細情報）の2枚を用意しました。

サイトマップは、先ほどのOctopus.doでも作れますが、ここではページ内の構造ではなく、サイト全体の構造だけを俯瞰して確認するために、別途スプレッドシートで用意しました。

一方のディレクトリマップには、各ページのタイトルやスラッグ、旧サイトからのリダイレクト元URL・リダイレクト先URLなどを整理してまとめています。役割が違うので、1枚に混ぜず分けておくと、後の実装やリダイレクト設定のときにそのまま使えます。

各ページを「役割・情報・感情」の3点で設計する

Octopus.doで簡易ワイヤーを組む狙いは各ページを、次の3点で設計することです。

そのページの役割は何か
読んだ人が、どんな情報を得るか
読み終えたとき、どんな感情を抱くか

この3点を元に、各ページどのようなコンテンツを配置するかを決めていきました。特に3つ目の「感情」まで設計に含めるのが、今回いちばん意識したところです。レイアウトや装飾は、突き詰めれば「読み手にどんな感情を持ってほしいか」という終着点を先に決めておくと、後のデザイン判断がしやすくなります。

具体例として、代表メッセージのページを挙げます。それぞれ以下のように定義しました。

役割：「代表の人柄」と「本気度」を伝えること
情報：メッセージ・プロフィール・インタビュー形式の想い
感情：「この人になら任せられそう」という安心と信頼感

どんなビジネスでも、最後に効くのは「この人に任せられるか」です。なのでこのページでは、役割から逆算して、代表がどんな想いで事業に取り組み、どんな人物なのかが伝わるコンテンツを揃えました。

後の工程のデザイン時の写真も、「抱いてほしい感情」から決めています。会ったことのない人に届けるからこそ、かっちりした仕事の顔だけでなく、素の表情も見せたい。そう考えて、代表の写真をビジネスとプライベートの両面で配置しました。ビジネスから少し離れた一面も、偽りのない人柄として見せることで、信頼を立体的にする狙いです。

2. ワイヤーフレーム ── UIキットを起点に、最初のデザインシステムをつくる

情報設計で各ページの中身と順番が固まったら、Figmaでワイヤーフレームに起こします。

この工程で意識したのは、ワイヤーの段階で、最初のデザインシステムの土台まで一緒に作ってしまうことです。そうすると、後のデザイン制作で「余白やタイポグラフィをゼロから決め直す」手戻りが減ります。

ゼロからではなく、UIキットを起点にする

デザインシステムを、白紙から立ち上げることはしませんでした。土台にしたのは、Figma Communityで公開されているUIキットです。

理由は、シンプルに速いからです。ボタン・入力・カードといった基本コンポーネントや、色・タイポの構造が最初から一式揃っているので、ゼロから一つずつ作り起こす手間を丸ごと省けます。一人で全工程を回す以上、巻けるところは徹底的に巻きたい。ワイヤーの土台づくりは、その最たる部分でした。

ただし、キットをそのまま使ったわけではありません。自社のブランドカラーやタイポグラフィへ差し替え、不要なコンポーネントを削り、足りないものを足していく。キットは「叩き台」であって「完成品」ではないため、ゼロイチの労力だけ省いて、最終的には自社仕様のシステムへ育てていく、という進め方です。

後日談：結果的に、土台づくりは不要だった

最終的に、実装ではWordPressテーマの unitone を採用したのですが、このunitoneには、洗練された余白やタイポグラフィがデフォルトで備わっていました。結果だけ見れば、ここでUIキットを使ってデザインシステムの土台を整えた工程は、必要なかったことになります。

もっとも、この時点ではunitoneで作ると決めていたわけではないので、土台を用意したこと自体は妥当な判断でした。これまでの受託案件でもデザインの管理がしやすく、かつ、スムーズにコーディングに移行できるようにデザインシステムを作っていました。

しかし、「使うテーマ次第で、デザインシステムづくりの前提はまるごと変わる」というのは、良い教訓になりました。なお、unitoneがあまりに素晴らしかったので、今後しばらくは制作にunitoneを使っていくことになりそうです(詳しくは、後日公開の実装編で触れます)。

AIでの生成を試みたが、手作業に切り替えた

実は、このワイヤーとデザインの工程、最初はAIでの生成を試みました。Pencil というツールを知り、Markdown形式と自然言語で指示を書いて、ワイヤーフレームやデザインをAIに生成させようとしたのです。

しかし、制作時点では、期待するクオリティには至らず、断念しました。そのため、今回のFigmaデータは、ほぼ手作業で作成しています。

ただ、これは「AIは使えない」という話ではなく、Figma自体、最近はAI機能の追加が相次いでいますし、最近ではClaude Designなどデザイン生成に特化したツールも急速に進化しています。今回は手作業が最適解でしたが、今後はAIを活用しながらのデザイン制作も探っていきたいと考えています。

実際のワイヤーフレーム

言葉で構成を説明するより、現物を見ていただくのが早いかと思います。実際に作成したワイヤーフレームのFigmaを、以下のリンクから共有します。

冒頭で紹介した完成デザイン前の、骨格だけの状態です。各ページの役割・情報・感情が、レイアウトとしてどう起こされているか、という視点で見てみてください。
（Figmaアカウントでログインすると、レイヤー構造など詳細を見ることができるかと思われます）

ワイヤーフレームのFigma

補足

自社サイトのため、主要ページ・PCサイズを中心に作成しています。（スマホサイズは実装時に縦積みにするなど、調整しました）
レイヤー構造は、お見せする前提で整えたものではないので、ご容赦ください。

3. デザイン制作 ──「らしさ」を、判断の積み重ねで乗せる

ワイヤーで骨格が決まったら、そこに視覚的な「らしさ」を乗せていきます。この工程での判断基準は、情報設計で定めた”届けたい印象”に合っているか、という点です。色も、フォントも、質感も、すべてそこから逆算していきます。

トーンを言葉で決める

色や形に入る前に、目指すトーンを言葉で定義しました。知性、信頼感、安心感、誠実さ。この4つを、サイト全体で一貫して感じさせることをゴールにしました。

そして、この抽象的なトーンを、次の4つの方向で表現しました。

余白を広くとる：要素を詰め込まず、ゆとりを持たせる。余白は「余裕」につながり、品位と知性を感じさせる
淡いブルーを基調に、彩度を抑える：主張の強い色を避け、清潔感と誠実さ、冷静さ(知性)を伝える
透明感を効かせる：光やグラスモーフィズムでやわらかさと軽さを加え、硬くなりがちな「信頼感」を、親しみのある安心感へ寄せる
直線的で繊細なあしらい：細い罫線や大きめの欧文タイポで、端正さとシャープさを添える

この方向性が、配色、フォント、質感、あしらい、などの判断の土台になります。ある表現を採るか迷ったら、「それは知性・信頼・安心・誠実に近づくか」に立ち返る。トーンとその翻訳を先に言葉にしておくと、個別の判断がブレず、サイト全体で印象が揃います。

配色

配色は、デザインシステムとしてトークン化しました。下が実際のカラートークンです。

考え方としては、色を「見た目」ではなく「役割」で定義することです。ブランドカラー(Brand)は強ボタン・リンク・インタラクティブ要素という”操作や強調の色”、グレー(Gray)はテキスト・背景・区切り線という”UIの基盤”、そのほかエラーを伝えるRed、注意を促すYellow、成功を示すSuccessと、それぞれに役割を持たせています。各色は25〜900の階調の変数（バリアブル）で持っておき、「濃い青が必要」ではなく「Brandの600」と指定できるようにする。こうすると、実装でもエディタでも、色の選択が迷いなく一意に決まります。

ちなみに、Brand300・500・600、はそれぞれロゴに使われている色にしました。知性と信頼感というトーンに、青は素直に効きます。その青を軸に、明るい階調は背景やアクセント、濃い階調はテキストや強調と、役割ごとに使い分けています。

タイポグラフィ

フォントは、日本語と欧文で1書体ずつ選びました。

欧文はMontserrat。幾何学的でバランスの取れた印象があり、見出しやロゴまわりの欧文に、端正な安定感を与えてくれます。
日本語は游ゴシック。直線的でスマートなフォルムに、文字間のゆとりが上品さを生む書体です。「知性」「誠実さ」というトーンに素直に合い、長文でも読み疲れしにくい印象があります。

どちらも、端正で上品なトーンと読みやすさを両立するフォントを選択をしました。

グラスモーフィズム

視覚的な質感として、グラスモーフィズム（すりガラス調の半透明表現）を取り入れました。

そもそものきっかけは、iPhoneのUIでした。コントロールセンターなどで使われている、背景がうっすら透けるすりガラスのような質感が、以前から気になっていたのです。これはAppleの新しいデザイン言語「Liquid Glass」によるもので、あの上質さと未来感を、自社サイトでも表現できないかと考えていました。

Liquid Glassとの違いと、グラスモーフィズムを選んだ理由

ただ、調べていくと、Liquid Glassとグラスモーフィズムは、似ているようで役割が違うことが分かってきました。

グラスモーフィズムは、半透明とぼかし（blur）で「見た目の奥行きや美しさ」を演出する、静的な視覚表現です。情報の上にガラスのレイヤーを重ねて”魅せる”役割を担います。
一方のLiquid Glassは、Appleの次世代OS全体に採用された動的なUIシステムで、コンテキストや操作に応じて透明度や見え方が変化し、情報を「通す／遮る」という判断をUI側が環境に応じて行います。

見た目の演出にとどまらず、UIそのものがユーザーとのインターフェースになる、という思想です。実は、このLiquid Glassも、もとをたどればグラスモーフィズムから影響を受けた表現だとされています。

グラスモーフィズムとLiquid Glassの違い（引用元：https://zenn.dev/machikado_dev/articles/99dcd16b4714fe）

結論として、今回はグラスモーフィズムを採用しました。理由は、今回必要だったのは「質感による印象の演出」であって、「動的なUIシステム」ではなかったからです。

Liquid Glassは、OSレベルで環境に応じて振る舞う、高度で動的な仕組みです。コーポレートサイトに求められる「上質で、少し未来的な質感」を出すという目的に対しては、明らかにオーバースペックでした。対して、グラスモーフィズムは、半透明とぼかしという枯れた表現で、狙った”質感”を過不足なく実現できます。

どこに効かせるか

グラスモーフィズムは、多用すると画面が散らかり、可読性も落ちます。どこに効かせるかを絞るのが勘所で、今回、意図的に効かせたのは次の3か所です。

ヘッダー

下部のCTAエリア

コラム記事のアイキャッチ

いずれも、「浮かせたい要素」「背景と重ねて奥行きを出したい要素」に限って使っています。

写真・イラスト・アイコンを、組み合わせて使う

ビジュアル素材は、写真だけ・イラストだけに寄せず、写真・イラスト・アイコンの3つを、意図的に組み合わせて使いました。これは、それぞれの長所と短所が裏返しの関係にあるからです。

写真は、リアルな情報やイメージを伝えやすく、信頼感・安心感があります。反面、堅く、敷居が高い印象にもなりがちです。一方、イラストやアイコンは、想像を掻き立て、テキストの多いサイトの窮屈さを和らげ、老若男女に親しみやすい。反面、伝わる内容が受け手のイメージに委ねられます。

つまり、写真の「信頼感」とイラスト・アイコンの「親しみやすさ」は、互いの弱点を補い合えます。だから、どちらか一方に振り切るのではなく、両方の良いところを取りつつ、弱点を打ち消す配分を探りました。信頼を伝えたい場面は写真、概念や流れを分かりやすく見せたい場面はイラストやアイコン、という使い分けです。トーンの「信頼感」と「親しみやすさ」を、素材の選び方でも両立させています。

素材の調達先も、目的で使い分けました。写真は PIXTA、アイコンは Flaticon を利用し、イラストはサイト全体のトーンに合わせて用意しています。既製の素材に頼りきらず、絵柄のトーンを揃えることで、サイト全体の統一感を保ちました。

UI/UX

見た目のトーンは、細部の UI と挙動にも一貫させました。

ひとつは、角丸です。ボタンやカードなど、要素の角は基本的に丸めています。角のとがった四角形は、シャープで硬い印象を与えます。今回のトーンは「安心感」「親しみやすさ」なので、角を丸めることで、視覚的な柔らかさを持たせました。小さな判断ですが、サイト全体で徹底すると、印象は確実に変わります。

もうひとつは、ヘッダーとCTAボタンのスクロール挙動です。これは実装時の対応になりますが、デザイン制作時点で考えていました。画面上部のヘッダーと、スクロールに追従する CTA ボタンは、下スクロール時には非表示(スライドアウト)にし、上スクロール時に再表示(スライドイン)する挙動にしました。