---
title: ブランドイメージを具現化：Phase5 デザイン・クリエイティブ制作
description: Phase5ではブランドガイドラインを踏まえ、デザインやビジュアルを具体化。色・フォント・レイアウトを統一し、ユーザーを惹きつけるサイトを制作します。
image: https://cafenoma.jp/hubfs/articles/b2b-b2c-instagram/hero_website05.jpg
---
[](https://cafenoma.jp/)
[](https://cafenoma.jp/)
[お知らせ](https://cafenoma.jp/news)
[無料相談](https://cafenoma.jp/meeting) [お問合せ](https://cafenoma.jp/inquiry)
[お問い合わせ](https://cafenoma.jp/inquiry)
More results
- [導入事例](https://cafenoma.jp/case)
- 私たちについて
- [私たちのこと](https://cafenoma.jp/aboutus)
- [フィロソフィ](https://cafenoma.jp/philosophy)
- [Q&A](https://cafenoma.jp/faq)
- ナレッジ
- [HubSpot CMS 活用ガイド](https://cafenoma.jp/knowledge-hubspot-cms)
- [HubSpot CMS 構築ガイド](https://cafenoma.jp/hubspot-cms-web-development-series)
- [ソリューション](https://cafenoma.jp/solutions)
[ニュースレター](https://cafenoma.jp/newsletter)[無料相談](https://cafenoma.jp/meeting)[お問い合わせ](https://cafenoma.jp/inquiry)
- [暮らしメディア](https://cafenoma.style/)
- [オンラインストア](https://cafenoma.stores.jp/)
- [導入事例](https://cafenoma.jp/case)
- 私たちについて
- [私たちのこと](https://cafenoma.jp/aboutus)
- [フィロソフィ](https://cafenoma.jp/philosophy)
- [Q&A](https://cafenoma.jp/faq)
- ナレッジ
- [HubSpot CMS 活用ガイド](https://cafenoma.jp/knowledge-hubspot-cms)
- [HubSpot CMS 構築ガイド](https://cafenoma.jp/hubspot-cms-web-development-series)
- [ソリューション](https://cafenoma.jp/solutions)
# ブランドイメージを具現化：Phase5 デザイン・クリエイティブ制作
執筆者 [**刈込 隆二**](https://cafenoma.jp/articles/author/刈込-隆二) 公開日 2025年 02月28日
更新日 2025年 03月01日
情報設計が固まったら、いよいよサイトの“見た目”を作り込む段階です。ユーザーが最初に受け取る印象はデザインやビジュアルによって大きく左右されます。Phase5ではブランドイメージとコンセプトを踏まえ、サイト全体を彩るクリエイティブ制作を行います。
## デザインコンセプト決定
最初に、**デザインコンセプトの決定**。既存のブランドガイドラインやロゴ、使用カラーなどを確認しつつ、Webサイトに最適化した配色・フォントの組み合わせを検討します。たとえば「信頼感」を出したいなら落ち着いた色味を選び、「親しみやすさ」を出したいなら明るいトーンや手書き風イラストなどを活用するといった具合です。
## キービジュアル制作
次に、**キービジュアル制作**。トップページのファーストビューや各セクションの大型バナーなど、ユーザーの目を引く主要ビジュアルを作成します。ここでは写真やイラスト、場合によっては動画も含め、伝えたいメッセージを一瞬で印象づける工夫が大事です。
## UIデザインモックアップ作成
続いて、**UIデザインモックアップ**をPC・モバイル両方で作成し、ヘッダーやボタン配置、文字サイズなどを具体化します。この段階でチーム内レビューを行い、必要に応じて色味や構成を微調整すると、開発工程に入ってからの修正を減らせます。
## デザインシステム・ガイドライン整備
最後に、**デザインシステム・ガイドラインを整備**。カラーコード、フォント、ボタンやフォームのコンポーネントスタイルなどをまとめたドキュメントを作ることで、今後の運用や改修時にもデザインの一貫性を保ちやすくなります。
## まとめ
Phase5で完成するデザインは、ユーザーの印象を左右するだけでなく、企業のブランディングそのものを体現します。ここで作り上げる世界観が、「実際に使いやすい」「わかりやすい」と一致してこそ、質の高いサイトになります。
【Phase5】デザイン・クリエイティブ制作 - チェックリスト  (1)〜(5)がクリアし、最終デザインが固まればPhase6へ。デザイン面で「NO」がある場合は修正して再承認を得る。
デザインコンセプト（配色・フォント・グラフィックスタイル）がブランドイメージと一致している
トップページや主要LPのキービジュアルが確定し、インパクトと統一感を両立できている
PC・モバイル両方でのモックアップが仕上がり、レイアウト崩れがない
デザインガイドライン（ボタン形状、文字サイズ、アイコンなど）をまとめている
関係者のデザインレビューを経て、修正リクエストが反映・承認されている
### 「自社のブランドイメージをWebでどう表現すればいいか分からない…」という方もご安心ください。
当社では写真・動画撮影やロゴ制作まで含めたクリエイティブ全般をサポートしています。
[HubSpot Content Hubを活用したWebサイト構築サービス](https://cafenoma.jp/service-hubspot-cms)
トピックス: [HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms) [Webサイト構築](https://cafenoma.jp/articles/tag/webサイト構築) [Webデザイン](https://cafenoma.jp/articles/tag/webデザイン)
成功するWebサイト構築HubSpot CMSで学ぶ
#### マーケティング戦略から公開・運用・保守まで、Webサイト構築に必要な工程をトータルで解説
[詳しくみる](https://cafenoma.jp/hubspot-cms-web-development-series)
前の記事
[← ユーザビリティを高めるサイト構造：Phase4 情報設計・サイトマップ策定](https://cafenoma.jp/articles/phase4-information-architecture)
次の記事
[サイトの価値を高めるコンテンツづくり：Phase6 コンテンツ制作 →](https://cafenoma.jp/articles/phase6-content-creation)
\\ こちらもおすすめです /
[サイト全体の方向性を固める：Phase2 Webサイトコンセプト策定](https://cafenoma.jp/articles/phase2-site-concept)
[HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms)
### サイト全体の方向性を固める：Phase2 Webサイトコンセプト策定
2025年 02月28日
[サイトの価値を高めるコンテンツづくり：Phase6 コンテンツ制作](https://cafenoma.jp/articles/phase6-content-creation)
[HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms)
### サイトの価値を高めるコンテンツづくり：Phase6 コンテンツ制作
2025年 03月01日
[公開前の品質を左右する重要工程：Phase10 テスト・検証](https://cafenoma.jp/articles/phase10-testing)
[HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms)
### 公開前の品質を左右する重要工程：Phase10 テスト・検証
2025年 03月01日
Marketing Made Visual
## ニュースレター
コーヒー・暮らし・空間をテーマに、カフェノマが蓄えてきたノウハウやブランディング、デジタルマーケティングのヒントをお届けします。
[購読する](https://cafenoma.jp/newsletter)
**Marketing Made Visual**
** 比較されない、選ばれるブランドへ。 **
[instagram @cafe\_no\_ma](https://www.instagram.com/cafe_no_ma/)
[ソリューション](https://cafenoma.jp/solutions)
- [ブランド体験の構築](https://cafenoma.jp/solutions#sec1)
- [DXの推進](https://cafenoma.jp/solutions#sec2)
- [ロイヤリティの強化](https://cafenoma.jp/solutions#sec3)
[導入事例](https://cafenoma.jp/case)
- [住宅・不動産](https://cafenoma.jp/case-real-estate-modelroom-concept)
- [ライフスタイル](https://cafenoma.jp/case-d2c-appliance-ltv-funnel-integration)
会社案内
- [私たちのこと](https://cafenoma.jp/aboutus)
- [フィロソフィ](https://cafenoma.jp/philosophy)
- [FAQ](https://cafenoma.jp/faq)
お役立ち
- [HubSpot CMS活用](https://cafenoma.jp/knowledge-hubspot-cms)
- [HubSpot CMS構築](https://cafenoma.jp/hubspot-cms-web-development-series)
© 2026 otonoma, Inc. (cafenoma is a registered trademark of otonoma Inc.)
- [オンラインストア ｜](https://cafenoma.stores.jp/)
- [サービス利用規約](https://cafenoma.jp/hubfs/terms/ServiceTerms_v3.pdf)
- [プライバシー](https://cafenoma.jp/privacy-policy?hsLang=ja)
### Ryuji Karikomi
Founder & CEO
大学卒業後、フランスへ留学。帰国後、複数のデザインハウス勤務、事業会社のマーケティング職を経て、2006年オトノマ創業。
Webディレクター/プロデューサーとしてのキャリアを基盤に、クリエイティブ領域（写真・映像・Web制作）とマーケティング領域（Webマーケ、コミュニティ構築、事業開発）の双方で実績を築く。
大手IT企業でのWebマーケティングの経験と、自社での事業プロデュースの経験から、新規事業のクリエイティブディレクションからSNS活用を含むデジタル施策、ブランディングまで一貫して推進可能。
おすすめ記事：
[カフェノマのクリエイティブ・ディレクターという仕事](https://cafenoma.jp/articles/20240521)
### Nobuka Yuba
Co-founder
cafenoma（カフェノマ）主宰。
前職ではチーフCAとして国際線を中心に延べ1万時間以上のフライトを経験。2012年より、日常にカフェのような心地よさを取り入れたライフスタイルと空間づくりを提案。著書に『うちカフェ（マイナビ出版）』他。住まいやマンション共用部などの空間スタイリングを通じて、暮らしそのものを豊かにするアイデアを発信しています。
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "刈込 隆二",
"url" : "https://cafenoma.jp/articles/author/刈込-隆二"
},
"dateModified" : "2025-03-01T06:21:57.757Z",
"datePublished" : "2025-02-28T09:51:25.000Z",
"headline" : "ブランドイメージを具現化：Phase5 デザイン・クリエイティブ制作",
"image" : [ "https://cafenoma.jp/hubfs/articles/b2b-b2c-instagram/hero_website05.jpg" ],
"mainEntityOfPage" : {
"@id" : "https://cafenoma.jp/articles/phase5-design-creative",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://cafenoma.jp/hubfs/common/logo/logo_symbol_grey.svg"
}
}
}
```