# GRAMPIXEL

横浜・大阪のホームページ制作 GRAMPIXEL。Webサイト制作・UI/UXデザイン・WebブランディングからSEO、WordPressのセキュリティ対策・ホームページの保守運用までワンストップで対応。伝わるデザインと安全な運用で事業の成長に伴走します。

- サイト: https://grampixel.jp/

## AI時代にWebサイトは必要？自作とプロ制作の違い

- リンク: https://grampixel.jp/blog/73/
- 公開日: 2026-10-14T16:46:11+09:00
- 作成者: 松下 太亮

この記事の目次

 1.  [AI時代でもWebサイトが必要な理由](https://grampixel.jp/blog/73/#s1)
 2.   a. [企業自身が発信する一次情報の価値](https://grampixel.jp/blog/73/#s1-1)
      b. [信頼とブランドを伝える場所としての役割](https://grampixel.jp/blog/73/#s1-2)
 3.  [AI検索が普及したらSEOは不要になるのか](https://grampixel.jp/blog/73/#s2)
 4.  [自作のWebサイトとプロが制作するWebサイトの違い](https://grampixel.jp/blog/73/#s3)
 5.   a. [デザインを始める前の「目的の整理」](https://grampixel.jp/blog/73/#s3-1)
      b. [見た目だけでは判断できない品質](https://grampixel.jp/blog/73/#s3-2)
      c. [自作で十分なケースもある](https://grampixel.jp/blog/73/#s3-3)
 6.  [AIが作るWebデザインとプロのデザインの違い](https://grampixel.jp/blog/73/#s4)
 7.   a. [仕上げの精度を高めるほど、AIの調整に時間がかかることも](https://grampixel.jp/blog/73/#s4-1)
 8.  [AI生成のソースコードをそのまま公開してよいのか](https://grampixel.jp/blog/73/#s5)
 9.   a. [実際に増えている、AI制作サイトの相談](https://grampixel.jp/blog/73/#s5-1)
      b. [HTML・SEO・アクセシビリティの確認](https://grampixel.jp/blog/73/#s5-2)
      c. [セキュリティと公開後の保守](https://grampixel.jp/blog/73/#s5-3)
 10. [GRAMPIXELが実務で大切にしていること](https://grampixel.jp/blog/73/#s6)
 11.  a. [ブランディングと表現を一体で考える](https://grampixel.jp/blog/73/#s6-1)
      b. [CMSの選定から運用まで見据える](https://grampixel.jp/blog/73/#s6-2)
 12. [AIを使う時代にプロへ依頼する意味](https://grampixel.jp/blog/73/#s7)
 13. [まとめ｜Webサイトの価値を決めるのは誰か](https://grampixel.jp/blog/73/#s8)

AIに指示を出すだけで、文章も画像もソースコードも生成できるようになりました。Webサイト
も、以前よりずっと短い時間で形にできます。

それなら、企業のWebサイトをプロに依頼する必要はなくなるのでしょうか。

実際、最近GRAMPIXELには、AIを使ったWebサイト制作を外部の制作会社に依頼したものの、
完成後の品質について困っているという相談が増えています。

だからといって、AIによる制作や低価格のサービスが悪いわけではありません。GRAMPIXEL
が伝えたいのは、**Webサイトを形にすることと、事業に必要な品質まで仕上げることは違う**
という点です。

AI検索と一次情報の関係、企業の信頼性、ブランディング、自作サイトとの違い、AI生成
コードの注意点を、実際に寄せられる相談とWebサイト制作・保守管理の経験を踏まえて考え
ます。

## AI時代でもWebサイトが必要な理由

検索結果やAIの回答だけで概要を把握できる場面は増えました。それでも、会社を調べる、
サービスを比較する、問い合わせ先を確認するといった場面では、事業者自身が管理する
情報の重要性は変わりません。

むしろ、外部サービスを介して情報が届く機会が増えるほど、情報の発信元を確認できる
場所が必要になります。

### 企業自身が発信する一次情報の価値

一次情報とは、企業や当事者が自ら持ち、発信する情報です。例えば、サービスの提供範囲、
料金、制作実績、担当者の考え方、実際の導入事例などが該当します。

AIは情報を探したり整理したりするうえで便利ですが、生成した回答が常に正しいとは限り
ません。また、企業がまだ公開していない実績や方針を、AIが正確に知ることもできません。

GRAMPIXELが新しい制作技術を採用した理由や、あるWebサイトでどのような設計判断をした
のか。こうした情報は、実際に仕事を行った側だからこそ説明できます。

**AI向けに文章を量産するのではなく、他では得られない事実や経験を自社サイトに残す
こと。**これが、AI時代の情報発信で大切になると考えています。

### 信頼とブランドを伝える場所としての役割

例えば、初めて知った制作会社に仕事を依頼するとき、料金だけを見て決める人ばかりでは
ないはずです。

どのような実績があり、何を得意としていて、誰が担当するのか。会社概要や問い合わせ
方法が明確かどうか。こうした情報を確認しながら、依頼先を判断します。

Webサイトには、サービスを説明するだけでなく、配色、余白、写真、言葉の選び方を通じて、
その事業者らしさを伝える役割もあります。

信頼はデザインだけで生まれるものではありません。しかし、**必要な情報が整理され、
誠実に伝えられていることは、安心して比較・検討するための材料**になります。

## AI検索が普及したらSEOは不要になるのか

AIによる検索機能が広がるなかで、「もう検索エンジン向けの対策は必要ない」という意見
もあります。しかし、現時点でそう結論づける根拠はありません。

Googleは、AIによる概要やAIモードでも関連するWebページへのリンクを表示し、従来のSEO
の基本的な考え方が引き続き有効であると説明しています。

参考：[Google検索セントラル「AI機能とウェブサイト」](https://developers.google.com/search/docs/appearance/ai-features?hl=ja)

もちろん、将来の検索行動や流入の割合まで断定することはできません。ただ、企業が公開
する情報を検索サービスが見つけ、理解できる状態にしておく意義は、今もあります。

読みやすい見出し構造、内容に合ったタイトル、適切な内部リンク、表示や操作のしやす
さ。そして何より、読者が知りたいことに正確に答えているか。奇抜な「AI向けSEO」を探す
より、まずはこうした基本を整えることが重要です。

## 自作のWebサイトとプロが制作するWebサイトの違い

今はテンプレートやノーコードツール、AIを利用して、自分でWebサイトを公開できます。
これは大きな進歩です。

ただし、**自分で公開できることと、事業の目的に合ったサイトに仕上がっていることは
別**です。違いが表れやすいのは、制作ツールよりも、その前後の判断にあります。

### デザインを始める前の「目的の整理」

例えば、同じサロンのWebサイトでも、新規予約を増やしたいのか、価格より施術者への信頼
を伝えたいのかによって、トップページで優先すべき情報は変わります。

プロの制作では、見た目を整える前に、誰が訪れるのか、何に迷うのか、どの情報を確認
したうえで行動するのかを考えます。その判断によって、導線や文章、写真の配置も決まり
ます。

GRAMPIXELでは、依頼された画面をそのまま形にするだけでなく、必要に応じてブランドや
サービスの方向性から一緒に検討します。

### 見た目だけでは判断できない品質

デスクトップで美しく見えるページでも、スマートフォンでは文字が読みにくかったり、
ボタンが押しづらかったりすることがあります。画像が重く、読み込みに時間がかかる場合
もあります。

公開前には、端末ごとの表示、キーボード操作、フォームの入力、リンク切れ、見出し構造、
画像の代替テキストなどを確認する必要があります。管理画面や外部サービスを利用する
場合は、権限設定や更新方法も検討対象です。

ここに制作の難しさがあります。見た目だけを修正しても、HTMLの構造やフォームの動作、
公開後の更新方法まで適切になるとは限りません。

プロに依頼する価値の一つは、**デザイン・実装・検索への対応・運用を切り離さず、サイト
全体として確認できること**にあります。

### 自作で十分なケースもある

すべてのWebサイトを制作会社に依頼する必要はありません。短期間の告知ページや個人の
作品紹介など、目的と必要な機能が明確なら、自作が適している場合もあります。

一方で、集客や採用に継続的に使うサイト、顧客情報を扱うサイト、事業のブランドを長期
的に育てるサイトでは、設計と保守の重要性が高まります。

判断基準は「自作かプロか」という肩書きではなく、**求める品質を、誰がどこまで確認
し、維持できるか**です。

## AIが作るWebデザインとプロのデザインの違い

AIが提案するWebデザインは、短時間で複数の方向性を検討できる点が便利です。一方、生成
されたデザインをそのまま採用すると、どこかで見たようなレイアウトや、目的に合わない
装飾が残ることがあります。

例えば、必要以上のグラデーション、均一に並んだカード、意味のないアニメーション。
個々の表現が悪いわけではありませんが、ブランドの性格と合っていなければ、整ってい
ても印象に残りにくいサイトになります。

プロが行うのは、AIの提案から一つを選ぶ作業だけではありません。事業の特徴、読み手
の視線、文字量、写真の質、動きの速度まで調整し、なぜその表現を使うのかを説明できる
状態にすることです。

反対に、AIを使っていても、適切な方向づけと検証によって質の高いデザインを制作する
ことは可能です。問題はAIの使用そのものではなく、**生成した結果を十分に吟味せず、
完成品として扱うこと**だと考えています。

### 仕上げの精度を高めるほど、AIの調整に時間がかかることも

AIはデザイン案やソースコードを短時間で生成できる一方、完成度を高める段階では、かえって
時間がかかることがあります。例えば、余白をわずかに調整する、スマートフォンだけで
起きるレイアウトの崩れを直す、アニメーションの速度や揺らぎをブランドの雰囲気に合わせる
といった作業です。

人間のデザイナーやエンジニア同士なら、画面を見せながら短い言葉で意図を共有できる
場合でも、AIは指示を異なる意味に解釈したり、修正を頼んでいない部分まで変更したり
することがあります。

そのたびに、意図を説明し直し、変更してよい範囲を指定し、出力結果を確認する必要が
あります。**生成そのものは速くても、何度もやり取りを重ねることで、結果的に制作時間
が増えてしまうことがある**のです。

もちろん、すべての作業で人間のほうが速いという意味ではありません。GRAMPIXELでは、
AIに任せる部分と、人が直接設計・実装したほうが確実な部分を見極めることも、Web制作
の専門性だと考えています。

動きの設計に関する技術的な考え方は、関連記事「[ピクセルストレッチで魅せる、動きのあるWebデザインの作り方](https://grampixel.jp/blog/26/)」
でも紹介しています。

## AI生成のソースコードをそのまま公開してよいのか

AIはHTML、CSS、JavaScriptなどのコードも生成できます。試作品を作る段階では有用ですが、
画面が表示されたことだけで、公開に必要な品質が満たされたとは判断できません。

### 実際に増えている、AI制作サイトの相談

最近、GRAMPIXELには**「価格が安かったのでWeb制作会社にAIを使ってWebサイトを作って
もらったけれど、いろいろな部分がおかしい」**といったご相談が増えています。

これは、実際にGRAMPIXELへ寄せられている相談の傾向です。ただし、制作会社がAIをどの
工程で使ったのか、問題の原因がAIそのものにあるのかは、個々の制作物を検証しなけれ
ば判断できません。

依頼者が感じる「おかしい」という違和感も、原因を調べるには切り分けが必要です。デザイン
の整合性なのか、スマートフォンでの表示なのか、操作やフォームの動作なのか。それとも、
ソースコードやサイトの管理方法に問題があるのか。

価格が安いこと自体を否定するつもりはありません。AIの活用によって、制作の効率を上げ
られる場面もあります。しかし、**納品前に誰が検証し、不具合があれば誰が対応するの
か**は、制作方法や価格とは別に確認すべきことです。

制作工程が効率化されても、公開するWebサイトの品質を確認する作業まで不要になるわけ
ではありません。

### HTML・SEO・アクセシビリティの確認

例えば、見出しが内容に合った階層になっているか。リンクが正しく動作するか。画像に
適切な代替テキストがあるか。スマートフォンやキーボード操作でも問題なく利用できる
か。

こうした項目は、見た目の完成度だけでは確認できません。検索エンジンが情報を理解し
やすい構造と、利用者が無理なく操作できる構造は、どちらも設計段階から考える必要が
あります。

AIが生成したコードに限らず、人が書いたコードも検証は必要です。**誰が作ったかより
も、公開前に何を確認したか**が品質を左右します。

### セキュリティと公開後の保守

フォームやCMS、外部サービスとの連携があるサイトでは、入力値の扱い、認証、権限、依存
ライブラリなど、目に見えない部分にも注意が必要です。

AIが生成したコードに脆弱性が必ず含まれるわけではありません。しかし、採用したコード
の仕組みを理解しないまま運用すると、問題が発生した際の原因特定や修正が難しくなり
ます。

特にWordPressでは、本体・テーマ・プラグインの更新状況や相互の互換性など、公開後も
継続して確認する項目があります。

Webサイトは公開が終点ではありません。修正や追加に対応できる構成、引き継げるコード、
必要な保守体制まで含めて制作することが重要です。

## GRAMPIXELが実務で大切にしていること

ここまで述べたことは、単にAIの弱点を並べたものではありません。GRAMPIXEL自身も新しい
技術を活用しながら、デザインとエンジニアリングの両面で品質を判断することを大切にし
ています。

### ブランディングと表現を一体で考える

新宿・池袋のもみほぐし・ストレッチ整体「HODOKU」のWebサイト制作では、Webページを
作る前の段階から、サービスの方向性やブランドのコンセプトをHODOKU側と共同で検討しま
した。

ブランディングからロゴ制作、独自のエフェクト実装までの取り組みは、[HODOKUのWebサイト制作実績](https://grampixel.jp/blog/60/)
で詳しく紹介しています。

GRAMPIXELはロゴのコンセプト考案と制作を担当し、Webサイト内のアニメーションやエフェクト
も独自に実装しています。

「ほどく」というコンセプトに合わせ、スピード感の強い動きではなく、穏やかな揺らぎ
や控えめな煙の演出を採用しました。文章が中心のセクションでは背景色を緩やかに変え、
読み進める際に単調にならないよう調整しています。

これは、AIに一枚の完成イメージを作らせるだけでは完結しない工程です。何を伝えるため
にその動きが必要なのかを決め、サイト全体で一貫した表現にすることを重視しました。

制作したサイトは[HODOKU公式Webサイト](https://hodoku-stretch.jp/)でご覧いただけます。

### CMSの選定から運用まで見据える

GRAMPIXELでは、WordPressサイトの制作・保守・セキュリティ管理に継続して携わってき
ました。その経験を踏まえ、案件に応じて新しいCMSや開発環境も検討しています。

HODOKUではEmDash・Cloudflare・Gitを組み合わせて構築しました。技術選定で大切なのは、
流行しているかどうかではなく、必要な機能や運用方法に合っているかという点です。

EmDashとCloudflareを採用した背景については、「[EmDashとCloudflareを活用したWeb制作サービスを開始](https://grampixel.jp/blog/53/)」
でも説明しています。

AIが制作を助ける場面は今後も増えるでしょう。それでも、技術を選び、コードを確認し、
公開後の運用を考える判断は欠かせません。

## AIを使う時代にプロへ依頼する意味

Web制作の相談で重要なのは、「どのツールを使って作るか」だけではありません。

誰に届けたいのか。サービスの強みは何か。どの情報があれば安心して問い合わせできる
か。公開後は誰が更新し、問題が起きたらどう対応するか。

これらを整理したうえで、適切なデザインと技術を選択することが、Webサイト制作の仕事
だと考えています。

制作会社を選ぶ際には、価格や納期だけでなく、何を設計し、どこまで動作確認を行い、
納品後の修正にどう対応するのかも確かめてほしいと思います。制作にAIを使う場合も同じ
です。

AIによって作業の一部が速くなっても、ブランドの価値や事業の課題を理解し、最終的な
品質に責任を持つ必要がなくなるわけではありません。

**プロの価値は、AIを使わないことではなく、AIも含めた手段を使いこなし、事業に必要
な形へ仕上げること**にあります。

## まとめ｜Webサイトの価値を決めるのは誰か

AI時代のWebサイトに求められるのは、ただ情報量が多いことでも、派手なデザインでもありま
せん。

企業自身による正確な情報があり、ブランドの考え方が伝わり、必要な人が迷わず利用できる
こと。そして、公開後も適切に維持できることです。

GRAMPIXELでは、ブランディング、Webデザイン、エンジニアリング、SEO、セキュリティを
別々の作業としてではなく、一つのWebサイトを支える要素として考えています。

実際に寄せられる制作後の相談を通じて、GRAMPIXELは「納品できること」と「安心して使い
続けられること」の違いを改めて感じています。

AIの便利さを取り入れながら、最終的な判断と品質には人の専門性を生かす。これからも、
その姿勢でWebサイト制作に取り組みます。

Webサイトの新規制作やリニューアルについては、[GRAMPIXEL公式サイト](https://grampixel.jp/)
からご相談いただけます。

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

- リンク: https://grampixel.jp/blog/60/
- 公開日: 2026-10-12T13:46:21+09:00
- 作成者: 松下 太亮

この記事の目次

 1.  [HODOKU（ほどく）とは](https://grampixel.jp/blog/60/#s1)
 2.   [ブランディングから取り組んだWebサイト制作](https://grampixel.jp/blog/60/#s2)
 3.   a. [コンセプトとサービスの方向性を共同で検討](https://grampixel.jp/blog/60/#s2-1)
      b. [コンセプトの考案から取り組んだロゴ制作](https://grampixel.jp/blog/60/#s2-2)
 4.   [デザインとオリジナルのアニメーション](https://grampixel.jp/blog/60/#s3)
 5.   a. [余白や配色を生かしたWebデザイン](https://grampixel.jp/blog/60/#s3-1)
      b. [独自に実装したギミックとエフェクト](https://grampixel.jp/blog/60/#s3-2)
 6.   [EmDash・Cloudflare・GitによるWebサイト構築](https://grampixel.jp/blog/60/#s4)
 7.   a. [CMSにEmDashを採用した理由](https://grampixel.jp/blog/60/#s4-1)
      b. [CloudflareとGitを活用した開発環境](https://grampixel.jp/blog/60/#s4-2)
 8.  [利用者の視点を考慮した情報設計](https://grampixel.jp/blog/60/#s5)
 9.  [HODOKU（ほどく）公式Webサイト](https://grampixel.jp/blog/60/#s6)
 10. [GRAMPIXELのWebサイト制作について](https://grampixel.jp/blog/60/#s7)

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（ほどく）のブランドロゴ](
https://grampixel.jp/wp-content/uploads/2026/10/hodoku-logo.jpg)

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公式ブログ](https://blog.cloudflare.com/emdash-cms-plugin-registry/)
でも紹介されています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## HODOKU（ほどく）公式Webサイト

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

[**新宿・池袋のもみほぐし・ストレッチ整体 HODOKU（ほどく）公式サイト**](https://hodoku-stretch.jp/)

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

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

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

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

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

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

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

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

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

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

[**GRAMPIXEL公式サイト**](https://grampixel.jp/)

## EmDashとCloudflareを活用したWeb制作サービスを開始

- リンク: https://grampixel.jp/blog/53/
- 公開日: 2026-10-11T12:23:29+09:00
- 作成者: 松下 太亮

この記事の目次

 1. [EmDashとは？Cloudflareが開発した新しいCMS](https://grampixel.jp/blog/53/#s1)
 2. [WordPressの運用経験から見直したWebサイトの保守管理](https://grampixel.jp/blog/53/#s2)
 3.  [EmDashとCloudflareを組み合わせる理由](https://grampixel.jp/blog/53/#s3)
 4.  a. [セキュリティを考慮したサイト構築](https://grampixel.jp/blog/53/#s3-1)
     b. [継続的な保守管理を考慮した開発環境](https://grampixel.jp/blog/53/#s3-2)
 5. [WordPressとEmDashはどちらを選ぶべきか](https://grampixel.jp/blog/53/#s4)
 6. [GRAMPIXELの今後のWebサイト制作について](https://grampixel.jp/blog/53/#s5)

GRAMPIXELでは、新たに**EmDash（エムダッシュ）とCloudflare（クラウドフレア）を活用
したWebサイト制作サービス**の提供を開始しました。

これまでWordPressを中心にWebサイトの制作・保守管理を行ってきましたが、近年のWeb技術
の進化を踏まえ、サイトの構築方法や運用体制を改めて見直しています。

近年、Webサイトのセキュリティ対策は、企業や事業者にとって重要な課題となっています。
特に利用者の多いWordPressは攻撃対象となる機会も多く、継続的なセキュリティ対策が欠
かせません。

GRAMPIXELでは、これまで複数のWordPressサイトの保守管理を行い、プラグインの脆弱性
対策や不正アクセスへの対応など、セキュリティを重視した運用に取り組んできました。

こうした経験を踏まえ、従来のCMSにとらわれないWebサイト構築の可能性を検討してきま
した。その結果、EmDashとCloudflareを活用した新たな制作環境に着目し、このたびサービス
の提供を開始しました。

今回採用するEmDashは、Cloudflareが開発したオープンソースのCMS（コンテンツ管理システム）
です。

従来のWordPressとは異なる設計思想を持ち、セキュリティや拡張機能の管理方法に特徴が
あります。

GRAMPIXELでは、EmDashとCloudflareを組み合わせることで、**保守性・セキュリティ・拡張
性のバランスを考慮したWebサイト制作**を目指します。

## EmDashとは？Cloudflareが開発した新しいCMS

EmDashは、Cloudflareが開発したオープンソースのCMSです。

Web開発フレームワークのAstroを基盤としており、2026年9月28日に正式版となる[EmDash 1.0](https://blog.cloudflare.com/emdash-cms-plugin-registry/)
が公開されました。

従来のCMSと同様に管理画面からコンテンツを編集できるほか、APIやCLI（コマンドライン
操作）による管理にも対応しています。

特に注目しているのは、プラグインの実行環境を分離できる仕組みです。

EmDashでは、対応するプラグインを独立した実行環境で動かし、アクセスできる機能や情報
を制限できます。

これにより、プラグインに必要以上の権限を与えない構成が可能になります。

ただし、すべてのプラグインが自動的に隔離されるわけではありません。適切な設定と対応
する実行環境が必要です。詳しい仕組みについては、[EmDash公式ドキュメント](https://docs.emdashcms.com/deployment/plugin-sandbox/)
で確認できます。

GRAMPIXELでは、こうした実務経験から、プラグインの権限管理や実行環境の分離に着目し、
EmDashを新たなWebサイト制作の選択肢として採用しました。

## WordPressの運用経験から見直したWebサイトの保守管理

WordPressは世界中で利用されているCMSであり、豊富なテーマやプラグインによって、さまざま
なWebサイトを構築できます。

GRAMPIXELでも、これまでWordPressを使用したWebサイト制作や、既存サイトの保守・セキュリティ
管理に取り組んできました。

その一方で、長期的な運用には継続的なメンテナンスが欠かせません。

WordPress本体やプラグインの更新、互換性の確認、アクセス制御、セキュリティ設定など、
サイトの構成に応じて対応すべき項目は異なります。

特に複数のプラグインを使用している場合、更新による不具合や機能の競合にも注意が必要
です。

もちろん、これらはWordPressそのものの欠陥を意味するものではありません。

適切に設計・管理されたWordPressは、現在でも有力な選択肢です。

しかし、すべてのWebサイトにWordPressが最適とは限りません。

GRAMPIXELでは、これまでの運用経験を踏まえ、**サイトの目的に応じてCMSやインフラを
選定することが、長期的な運用品質につながる**と考えています。

## EmDashとCloudflareを組み合わせる理由

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

EmDashはCloudflare Workersへのデプロイに対応しており、Cloudflareのインフラを利用
したWebサイト構築が可能です。

GRAMPIXELでは、EmDashのCMS機能とCloudflareの配信基盤を組み合わせることで、サイト
の構成や管理方法を整理しやすい開発環境を目指しています。

### セキュリティを考慮したサイト構築

EmDashの特徴の一つが、プラグインの権限管理と実行環境の分離です。

対応するプラグインでは、利用可能な機能やアクセス先を制限する仕組みが用意されてい
ます。

ただし、CMSの設計だけでWebサイトの安全性が保証されるわけではありません。

実際の運用では、管理者アカウントの保護、アクセス権限、設定内容、外部サービスとの
連携なども含めた対策が必要です。

GRAMPIXELでは、特定の技術に依存するのではなく、サイト全体の構成を踏まえたセキュリティ
設計を重視します。

### 継続的な保守管理を考慮した開発環境

Webサイトは公開して終わりではありません。

コンテンツの更新、機能の追加、不具合への対応など、公開後も継続的な管理が求められ
ます。

GRAMPIXELでは、EmDashとCloudflareに加え、Gitによるソースコードのバージョン管理を
活用する方針です。

Gitを利用することで、プログラムの変更履歴を記録し、修正内容を確認しながら開発を進
められます。

ただし、Gitはデータベースやアップロードファイルのバックアップを自動的に保証するもの
ではないため、必要に応じて別途バックアップ体制を構築します。

こうした仕組みを組み合わせ、公開後の変更や保守を考慮した制作環境を整えていきます。

## WordPressとEmDashはどちらを選ぶべきか

GRAMPIXELでは、EmDashの採用によってWordPressの利用を全面的に終了するわけではありま
せん。

WordPressには、長年にわたって蓄積された開発実績や、豊富なテーマ・プラグインがあり
ます。

既存のWebサイトで必要な機能が安定して動作している場合、無理にCMSを変更する必要は
ありません。

一方、新規制作では、必要な機能や更新方法、保守管理の方針によって、EmDashが適した
選択肢になる可能性があります。

CMSの移行を検討する際には、既存コンテンツの引き継ぎだけでなく、URL構造、リダイレクト、
SEO設定、フォームなどの機能についても確認が必要です。

GRAMPIXELでは、導入する技術を先に決めるのではなく、Webサイトの目的と運用条件に応
じて判断していきます。

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

Webサイトに求められる役割は、企業や事業の規模、サービス内容によって異なります。

デザインや操作性だけでなく、検索エンジンへの対応、セキュリティ、更新のしやすさ、
公開後の保守管理も重要な要素です。

GRAMPIXELでは、これまで培ってきたWordPressの制作・運用経験を生かしながら、新しい
技術の導入にも取り組んでいきます。

今後の新規Webサイト制作では、EmDash・Cloudflare・Gitを組み合わせた構築方法を新た
な選択肢として提案します。

既存のWordPressサイトについても、引き続きサイトの構成や運用状況に応じた保守・セキュリティ
管理を行います。

特定のCMSにこだわるのではなく、それぞれのWebサイトに適した技術を選択すること。

これからもGRAMPIXELは、**デザインと技術の両面から、長期的な運用を見据えたWebサイト
制作**に取り組んでまいります。

## ピクセルストレッチで魅せる、動きのあるWebデザインの作り方

- リンク: https://grampixel.jp/blog/26/
- 公開日: 2026-09-26T15:58:36+09:00
- 作成者: 松下 太亮

この記事の目次

 1.  [はじめに](https://grampixel.jp/blog/26/#s1)
 2.  [ピクセルストレッチとは](https://grampixel.jp/blog/26/#s2)
 3.  [動きが与える印象](https://grampixel.jp/blog/26/#s3)
 4.  [実装の3つのポイント](https://grampixel.jp/blog/26/#s4)
 5.   a. [Canvasで画像を描き直す](https://grampixel.jp/blog/26/#s4-1)
      b. [スクロール連動で発火させる](https://grampixel.jp/blog/26/#s4-2)
      c. [パフォーマンスへの配慮](https://grampixel.jp/blog/26/#s4-3)
 6.  [使いどころと注意点](https://grampixel.jp/blog/26/#s5)
 7.   a. [効果が高いケース](https://grampixel.jp/blog/26/#s5-1)
      b. [避けたいケース](https://grampixel.jp/blog/26/#s5-2)
 8.  [まとめ](https://grampixel.jp/blog/26/#s6)
 9.  [GRAMPIXELについて](https://grampixel.jp/blog/26/#s7)

## はじめに

Webサイトの第一印象は、最初の数秒で決まります。静止画だけでは伝わりにくい世界観も、
わずかな動きを添えるだけで印象が大きく変わります。本記事では、画像が砂のように引き
伸ばされて解像していく「ピクセルストレッチ」演出を題材に、その考え方と実装の勘所
をまとめます。

## ピクセルストレッチとは

ピクセルストレッチは、画像の一部の列を横方向へ引き伸ばし、時間とともに本来の絵へ
解像させていく表現です。読み込みの「間」を演出に変える手法と言えます。主な特徴は
次のとおりです。

 * **段階的な解像：**左から右へ、確定した部分が少しずつ広がっていく。
 * **素材を選ばない：**人物・風景・抽象画像のいずれにも馴染む。
 * **軽い意外性：**派手すぎず、記憶に残るアクセントになる。

## 動きが与える印象

動きは情報であると同時に、感情を伝える手段でもあります。同じ画像でも、現れ方によって
受け手の印象は変わります。ピクセルストレッチは、次のような効果を狙えます。

 * ブランドの世界観に「丁寧さ」や「技術的な余裕」を添える。
 * スクロールの体験にリズムを生み、離脱を抑える。
 * 画像が主役のセクションで、視線を自然に引き込む。

## 実装の3つのポイント

### Canvasで画像を描き直す

HTMLの<canvas>（描画用の領域）に、読み込んだ画像を一度コピーします。表示枠に合わせ
て切り抜いたうえで、確定済みの列はそのまま、未確定の列は1ピクセルを横へ引き伸ばし
て描くと、解像の途中経過を表現できます。たとえるなら、写真を端から少しずつ現像し
ていくイメージです。

### スクロール連動で発火させる

演出はページ読み込み時に一斉に動かすのではなく、その要素が画面に入った瞬間に動かす
と効果的です。IntersectionObserver（要素が見えたかを監視する仕組み）を使えば、対象
が一定割合だけ見えたタイミングでアニメーションを開始できます。画面外に出たら状態
を戻し、再表示時に再生する設計にすると、回遊しても破綻しません。

### パフォーマンスへの配慮

描画は毎フレーム行われるため、負荷管理が欠かせません。次の点を押さえます。

 1. 解像度は端末の倍率を上限2倍までに抑え、描画量を増やしすぎない。
 2. 進行中のアニメーションは、再発火時に必ずキャンセルして競合を防ぐ。
 3. 「動きを減らす」設定の利用者には、エフェクトを控える。

## 使いどころと注意点

![ピクセルストレッチの適用例を示す参考画像](https://grampixel.jp/wp-content/uploads/
2026/09/blog.png)

適用イメージ（差し替え用ダミー画像）

### 効果が高いケース

 * **メンバー紹介や実績：**顔写真や事例画像が、印象的に立ち上がる。
 * **ヒーロー画像：**最初の一枚を、世界観の宣言として見せられる。

### 避けたいケース

 * **情報量の多い一覧：**すべてに動きを付けると、かえって読みにくい。
 * **即時性が求められる画面：**解像の「間」が操作の妨げになる。

## まとめ

ピクセルストレッチは、読み込みの待ち時間を演出へ転換し、ブランドの世界観を静かに
語る手法です。Canvasで描き直し、スクロールに連動させ、負荷と利用者の設定に配慮する——
この3点を守れば、やりすぎない上質な動きが実現できます。動きは目的ではなく手段です。
伝えたい印象から逆算して、使いどころを選びましょう。