---
title: デザインを形にする：Phase9 フロントエンド実装でサイトを完成させる
description: Phase9ではHTML/CSS/JavaScriptの実装やレスポンシブ対応を実施。ブランドを表現しつつ、あらゆるデバイスで快適に閲覧できるWebサイトを仕上げます。
image: https://cafenoma.jp/hubfs/articles/b2b-b2c-instagram/hero_website09.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)
# デザインを形にする：Phase9 フロントエンド実装でサイトを完成させる
執筆者 [**刈込 隆二**](https://cafenoma.jp/articles/author/刈込-隆二) 公開日 2025年 03月01日
Phase5で完成したデザインを、実際にコードとして組み上げるのがフロントエンド実装の工程です。ノーコードやテーマ活用で多くをまかなえるとはいえ、微妙な演出やレイアウト調整など、より高い完成度を求めるならHTML/CSS/JavaScriptの最適化が欠かせません。Phase9ではレスポンシブデザインやアクセシビリティ対応を含め、最終的なユーザビリティを仕上げていきます。
## HTML/CSS/JavaScriptコーディング
まず**HTML/CSS/JS実装**では、デザインモックアップをもとに各ページをコーディングし、テーマのレイアウトやモジュールを微調整します。ノーコード編集だけでは再現しきれないアニメーションや細かな位置調整を行う場合は、子テーマにCSSやJavaScriptを追加して対応します。
次に、**レスポンシブ最終調整**。モバイルやタブレットなど複数の画面サイズで見たときに、文字が読みにくい、画像が切れるといった問題がないかを確認し、必要に応じてメディアクエリを調整します。スマホファーストで設計しているなら、特に重要なページで実機検証をしっかり行いましょう。
## デバイステスト・ブラウザ対応
また、**主要ブラウザ・デバイステスト**も重要です。Chrome、Safari、Firefox、Edgeなどでレイアウト崩れが発生しないか確認し、OSによるフォントレンダリングの違いにも留意します。
## アクセシビリティチェック
さらに、**アクセシビリティチェック**として画像のalt属性やARIAラベルの設定、色コントラストの確保などを行い、あらゆるユーザーが使いやすいサイトに仕上げます。こうした取り組みは検索エンジン評価の向上や、企業の社会的信頼にもつながります。
## 具体例
スクロールに合わせてふわっと要素が出現するパララックス演出などを導入したい場合、テーマの標準機能だけでは足りないケースがあります（Act3の最新Verでは標準で使えます）。その際、子テーマのJavaScriptに軽いライブラリを導入して実装し、ブランドイメージに合った動きを追加します。
## まとめ
Phase9はサイトの使いやすさと魅力を最大化する最終的な“仕上げ”の工程です。ここで丁寧にブラウザ・実機テストを繰り返すことで、ユーザーがストレスなくページを閲覧できる体験を提供できます。
【Phase9】フロントエンド実装 - チェックリスト  問題がなければフロントエンド面は概ね完了。Phase10へ進行。
デザイン通りにHTML/CSS/JSがコーディングされ、崩れやズレがない
レスポンシブデザインが適切に機能し、スマホ・タブレットでも美しく表示できる
必要なアニメーションやホバーエフェクトが実装され、サイト速度を損なっていない
主要ブラウザ（Chrome, Safari, Firefox, Edge）での表示確認を完了している
アクセシビリティ（altテキスト、ARIA属性、色コントラスト）が一定水準以上確保されている
### フロントエンドの細かな実装やアクセシビリティ対応まで、プロの開発チームがフルサポート。
見た目の美しさだけでなく、使いやすさと動作安定性にもこだわりたい方は、ぜひ当社にご相談ください。
[HubSpot Content Hubを活用したWebサイト構築サービス](https://cafenoma.jp/service-hubspot-cms)
トピックス: [HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms) [フロントエンド実装](https://cafenoma.jp/articles/tag/フロントエンド実装) [レスポンシブ](https://cafenoma.jp/articles/tag/レスポンシブ) [JavaScript](https://cafenoma.jp/articles/tag/javascript) [アクセシビリティ](https://cafenoma.jp/articles/tag/アクセシビリティ) [ブラウザテスト](https://cafenoma.jp/articles/tag/ブラウザテスト)
成功するWebサイト構築HubSpot CMSで学ぶ
#### マーケティング戦略から公開・運用・保守まで、Webサイト構築に必要な工程をトータルで解説
[詳しくみる](https://cafenoma.jp/hubspot-cms-web-development-series)
前の記事
[← リードを獲得＆育成する：Phase8 HubSpot Marketing Hub連携](https://cafenoma.jp/articles/phase8-marketing-hub-integration)
次の記事
[公開前の品質を左右する重要工程：Phase10 テスト・検証 →](https://cafenoma.jp/articles/phase10-testing)
\\ こちらもおすすめです /
[公開前の品質を左右する重要工程：Phase10 テスト・検証](https://cafenoma.jp/articles/phase10-testing)
[HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms)
### 公開前の品質を左右する重要工程：Phase10 テスト・検証
2025年 03月01日
[リードを獲得＆育成する：Phase8 HubSpot Marketing Hub連携](https://cafenoma.jp/articles/phase8-marketing-hub-integration)
[HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms)
### リードを獲得＆育成する：Phase8 HubSpot Marketing Hub連携
2025年 03月01日
[ノーコードで効率UP：Phase7 HubSpot Content Hubを導入・設定する方法](https://cafenoma.jp/articles/phase7-hubspot-cms-setup)
[HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms)
### ノーコードで効率UP：Phase7 HubSpot Content Hubを導入・設定する方法
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:27:42.860Z",
"datePublished" : "2025-02-28T23:37:58.000Z",
"headline" : "デザインを形にする：Phase9 フロントエンド実装でサイトを完成させる",
"image" : [ "https://cafenoma.jp/hubfs/articles/b2b-b2c-instagram/hero_website09.jpg" ],
"mainEntityOfPage" : {
"@id" : "https://cafenoma.jp/articles/phase9-frontend-development",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://cafenoma.jp/hubfs/common/logo/logo_symbol_grey.svg"
}
}
}
```