GRAMPIXEL ← Blog 一覧へ

Blog

新宿・池袋のもみほぐし・ストレッチ整体HODOKU(ほどく)|Webサイト制作実績

新宿・池袋のもみほぐし・ストレッチ整体HODOKU|Webサイト制作実績

GRAMPIXELでは、このたび新宿・池袋のもみほぐし・ストレッチ整体「HODOKU(ほどく)」のWebサイトを制作いたしました。

今回のプロジェクトでは、単にWebサイトを制作するだけでなく、ブランディングやサービスの方向性についても、HODOKU(ほどく)側と意見を交わしながら共同で検討しました。

ブランドのコンセプトやサービスの特徴を整理したうえで、ロゴの考案・制作、Webデザイン、独自のアニメーションやエフェクトの実装まで一貫して担当しています。

また、CMSにはEmDashを採用し、CloudflareとGitを組み合わせた開発環境でWebサイトを構築しました。

本記事では、HODOKU(ほどく)のブランディングからWebサイトの設計・構築まで、今回の制作で取り組んだ内容をご紹介します。

HODOKU(ほどく)とは

HODOKU(ほどく)は、新宿・池袋を中心にサービスを提供する、もみほぐしとストレッチを組み合わせたリラクゼーションサロンです。

「ほぐして伸ばす」をコンセプトに、一人ひとりの体の状態や悩みに合わせた施術を提供しています。

施術を担当するのは、パーソナルトレーナーとしての経験も持つ葉山もえみさんです。

日常生活で生じる体のこわばりや疲労感、腰まわりの悩みなどに向き合い、もみほぐしとストレッチを通じて、心地よく体を動かせる状態を目指しています。

HODOKU(ほどく)が大切にしているのは、施術そのものだけでなく、忙しい日常から少し離れ、自分自身の体と向き合う時間です。

今回のWebサイトでは、「忙しい大人の体に、ほどける時間」というメッセージを中心に、サロンの考え方やサービスの特徴を伝える構成としました。

ブランディングから取り組んだWebサイト制作

今回のHODOKU(ほどく)では、Webサイトの制作に先立ち、ブランドのコンセプトやサービスの方向性について、HODOKU(ほどく)側とGRAMPIXELが共同で検討を進めました。

どのようなサービスを提供するのか、利用する方にどのような価値を感じていただきたいのか。

こうした基本的な考え方を共有しながら、ブランド全体の方向性を整理しています。

GRAMPIXELでは、Webサイトを単なる情報発信の手段としてではなく、事業者の考え方やサービスの価値を伝えるための重要な接点と捉えています。

コンセプトとサービスの方向性を共同で検討

HODOKU(ほどく)のブランディングでは、「ほどく」という言葉が持つ意味を大切にしました。

体のこわばりをほぐすことだけでなく、日々の忙しさの中で張りつめた気持ちをゆるめ、自分自身と向き合う時間を提供すること。

そうした考え方を軸に、HODOKU(ほどく)側と意見を交わしながら、サービスの方向性やブランドとして伝えたいイメージを整理していきました。

その過程で共有した考え方を、Webサイトのキャッチコピーやデザイン、掲載する情報の構成にも反映しています。

単に依頼された内容を形にするのではなく、ブランドの方向性を一緒に考えるところから制作に携わったことが、今回のプロジェクトの特徴です。

コンセプトの考案から取り組んだロゴ制作

今回のHODOKU(ほどく)では、Webサイトだけでなく、ブランドの象徴となるロゴについてもGRAMPIXELがコンセプトを考案し、制作しました。

ロゴの制作で大切にしたのは、「ほどく」という言葉が持つ意味と、サロンが目指す世界観を視覚的に表現することです。

体のこわばりや日々の緊張をゆるめ、心地よい時間を提供するというHODOKU(ほどく)の考え方を踏まえ、ロゴの方向性を検討しました。

GRAMPIXELがコンセプトの考案から制作まで担当したHODOKU(ほどく)のブランドロゴ
GRAMPIXELがコンセプトの考案から制作まで担当したHODOKU(ほどく)のロゴ

今回のロゴは、Webサイトとは別に制作したものではなく、ブランド全体の方向性を考える中で生まれたデザインです。

ロゴとWebサイトのデザインを一貫して制作することで、ブランドとしての統一感を持たせています。

ブランドを表現するうえでは、ロゴ単体の印象だけでなく、Webサイトやその他の媒体で使用した際の見え方も重要です。

GRAMPIXELでは、ブランドのコンセプトと視覚的な表現に一貫性を持たせることを意識してロゴ制作に取り組みました。

デザインとオリジナルのアニメーション

HODOKU(ほどく)のWebサイトでは、ブランドの世界観を伝えるために、デザインだけでなく、アニメーションやエフェクトにも工夫を取り入れています。

目指したのは、強い視覚効果で印象を残すことよりも、落ち着いた雰囲気の中で自然な動きを感じられるWebサイトです。

サイト全体の印象を統一しながら、写真や文字、動きのバランスを調整しています。

余白や配色を生かしたWebデザイン

リラクゼーションサロンのWebサイトでは、施術内容や料金などの情報に加え、サロンが持つ雰囲気を伝えることも重要です。

今回の制作では、落ち着いた配色や写真の使い方、余白の取り方などを考慮し、HODOKU(ほどく)のコンセプトに合ったデザインを目指しました。

HODOKU(ほどく)のWebサイトは、文章による情報提供も重要な役割を担っています。そのため、テキストの読みやすさを確保しながら、単調な印象にならないよう配慮しました。

具体的には、セクションごとに背景色を緩やかに変化させ、ページ全体に自然な流れと変化を持たせています。

情報を過度に詰め込まず、見出しや文章、画像それぞれの役割を整理することで、閲覧しやすい構成としています。

デザインは装飾を増やすことだけではありません。

伝えたい情報に優先順位をつけ、必要な要素を適切に配置することも、Webデザインの重要な役割だと考えています。

独自に実装したギミックとエフェクト

今回のWebサイトでは、ページ内のアニメーションや視覚的なエフェクトをGRAMPIXELが独自に設計・実装しました。

HODOKU(ほどく)のコンセプトには、体のこわばりだけでなく、心と体に張りつめた緊張をゆっくりとほどいていくという考え方があります。

そのため、アニメーションではスピード感や強い動きを追求するのではなく、穏やかな揺らぎや控えめな煙のエフェクトを取り入れ、緊張が少しずつほどけていくような雰囲気を表現しました。

こうした演出を取り入れる際に重視したのは、動きを加えること自体を目的にしないことです。

写真やコンテンツの見せ方に自然な変化を加えながら、HODOKU(ほどく)が持つ落ち着いた雰囲気を損なわないようにしています。

また、Webサイトの動きは、デザインだけでなく、閲覧時の操作性や情報の伝わりやすさにも関係します。

そのため、演出の印象だけに偏らず、サイト全体の構成との調和を考慮しました。

ブランドの世界観を表現するために、デザインと動きを一体として考えること。

これも、今回のWebサイト制作で大切にしたポイントの一つです。

EmDash・Cloudflare・GitによるWebサイト構築

今回のHODOKU(ほどく)のWebサイトでは、CMSにEmDashを採用し、CloudflareとGitを組み合わせて構築しました。

GRAMPIXELでは、これまでWordPressを中心に、複数のWebサイトの制作や保守・セキュリティ管理に携わってきました。

WordPressは柔軟性の高いCMSですが、サイトの構成によっては、プラグインの更新や互換性の確認、継続的なセキュリティ管理などが必要になります。

こうした実務経験を踏まえ、今回は従来のWordPressとは異なる構築方法を選択しました。

CMSにEmDashを採用した理由

EmDashは、Cloudflareが開発したオープンソースのCMS(コンテンツ管理システム)です。

Web開発フレームワークのAstroを基盤としており、Webサイトのコンテンツ管理や拡張機能の仕組みに特徴があります。

特に注目したのは、プラグインの権限管理や実行環境の分離に関する設計です。

EmDashでは、対応する実行環境を利用することで、プラグインがアクセスできる機能や情報を制限する仕組みが用意されています。

ただし、こうした仕組みだけでWebサイトの安全性が保証されるわけではありません。実際の構築や運用では、設定やアクセス権限などを含めた管理が必要です。

GRAMPIXELでは、これまでのWordPressの運用経験から、サイトの目的や構成に応じてCMSを選定することが重要だと考えています。

今回のHODOKU(ほどく)では、その選択肢としてEmDashを採用しました。

EmDashの技術的な特徴については、Cloudflare公式ブログでも紹介されています。

CloudflareとGitを活用した開発環境

サイトの構築には、EmDashに加えてCloudflareとGitを使用しています。

Cloudflareは、Webサイトの配信やセキュリティなどに関するサービスを提供するプラットフォームです。

Gitは、ソースコードの変更履歴を記録・管理するための仕組みで、開発中の修正内容や変更箇所を把握する際に役立ちます。

今回の制作でも、これらの技術を組み合わせた開発環境を採用しました。

なお、使用するCMSや開発環境によって、すべてのWebサイトの表示速度やセキュリティ性能が向上するわけではありません。

GRAMPIXELでは、新しい技術を取り入れること自体を目的にせず、サイトの特性や公開後の運用を踏まえて技術を選択することを重視しています。

利用者の視点を考慮した情報設計

Webサイトのデザインでは、見た目の美しさと同じくらい、必要な情報をわかりやすく伝えることが重要です。

特にリラクゼーションサロンの場合、初めて利用する方にとって、施術内容や料金、担当者、予約方法などは事前に確認しておきたい情報です。

HODOKU(ほどく)のWebサイトでは、サロンのコンセプトから始まり、サービスの特徴、施術の流れ、料金、セラピスト紹介、店舗情報などを掲載しています。

また、予約に関する案内やよくある質問なども設け、利用を検討している方が必要な情報を確認できる構成としました。

ブランドの魅力を伝えるデザインであっても、情報が探しにくければ、Webサイト本来の役割を十分に果たせません。

GRAMPIXELでは、ブランドの世界観と利用者にとっての使いやすさを両立する情報設計を大切にしています。

HODOKU(ほどく)公式Webサイト

今回制作したHODOKU(ほどく)のWebサイトは、以下からご覧いただけます。

新宿・池袋のもみほぐし・ストレッチ整体 HODOKU(ほどく)公式サイト

ブランディングの方向性を踏まえて制作したロゴやWebデザイン、オリジナルのアニメーション、エフェクトなどをご覧いただけます。

また、施術内容や料金、セラピスト紹介、予約に関する情報についても、実際のWebサイトでご確認いただけます。

GRAMPIXELのWebサイト制作について

GRAMPIXELでは、Webサイトのデザインや構築だけでなく、ブランディングやサービスの方向性を考える段階から、事業者の方と一緒に取り組むことを大切にしています。

今回のHODOKU(ほどく)では、ブランドのコンセプトやサービスの方向性を共同で検討し、ロゴの考案・制作、Webデザイン、独自のアニメーションやエフェクトの実装、CMSを使用したWebサイト構築まで一貫して担当しました。

Webサイトは、単に情報を掲載するためのものではありません。

事業者が大切にしている考え方やサービスの特徴を伝え、訪れた方が必要な情報にたどり着けることも重要な役割です。

GRAMPIXELでは、これまで培ってきたWordPressの制作・運用経験に加え、EmDashやCloudflareなどの技術も活用し、サイトの目的に応じたWeb制作を行っています。

これからも、ブランディング・デザイン・技術のそれぞれの視点から、事業やサービスの価値を伝えるWebサイト制作に取り組んでまいります。

Webサイトの新規制作やリニューアル、ブランディングについてのご相談は、お気軽にお問い合わせください。

GRAMPIXEL公式サイト

この記事の監修

GRAMPIXEL Founder, Technical Director, Designer 松下 太亮

GRAMPIXEL

松下 太亮 Founder, Technical Director, Designer

  • NRIネットコムにて約10年、デザインとディレクションに従事
  • GRAMPIXEL 設立・代表

GRAMPIXELについて

GRAMPIXELは、ブランディング・Webサイト制作・セキュリティ・保守運用までをワンストップで手がける制作ユニットです。デザインと実装の両面から、課題に合わせて表現を組み立てます。「動きのあるUI」から「安全な運用設計」まで、幅広い領域に対応します。

サービスを見る →

Let's Talk

何から相談すればいいか分からない、そんな段階からご一緒します。「課題は何か?」を一緒に整理するところから始めましょう。

お問い合わせ →