Snow Monkeyでさらに効率よくサイトを作るためのアプローチ

この記事はSnow Monkey / unitone Advent Calendar 2025の15日目の記事です。

Snow Monkeyはブロックエディター対応のWordPressテーマで、豊富なブロックやパターンを使って見た目の整ったサイトを素早く構築できるのが魅力です。

Snow Monkeyをそのまま使うだけでも十分効率的にサイト制作できますが、工夫次第でさらに効率よく制作を進められます。そこでこの記事では、greenciderが実践している制作フローやアプローチを紹介します。

なお、これはgreenciderが実践していることの紹介であって「こうするべき」と主張するものではありません。こういうやり方もあるんだな、程度に読んでいただければ幸いです。

ワイヤーフレームをSnow Monkeyで作成する

greenciderでは、ワイヤーフレームをSnow Monkeyで作成しています。

まずFigmaでラフなワイヤーフレーム案を作成します。これは画像やテキストの配置を示す簡素なもので、細かいデザインは詰めません。それをもとにSnow Monkeyでサイトを組み立て、ワイヤーフレームとします。この時点では各ブロックはデフォルトのスタイルのまま使用し、カスタマイズはしません。

この方法には3つのメリットがあります。

1つ目は、デザインツールで精緻に作り込む場合と比べて短時間で済むことです。

2つ目は、このワイヤーフレームをそのままテストサイトに転用できることです。コンテンツやスタイルを追加していけば、ワイヤーフレームがそのままテストサイトになります。

3つ目は、完成形に近いワイヤーフレームが得られることです。実際にブラウザで動作するため、レスポンシブ表示やページ遷移、インタラクションなど、静的なデザインツールでは分かりにくい要素もこの段階で体験できます。

用意されているブロックで実現できる範囲にデザインを収める

デザインは用意されているブロックで実現できる範囲に収めることを意識しています。

ブロックの制約を超えたデザインはHTMLの構造変更やCSSの追加が必要になり、実装工数が増えてしまいます。逆にブロックでできることを前提にデザインすれば、実装工数を大幅に削減できます。

ブロックで実現できるかどうかはSnow Monkeyの仕様を把握していないと判断が難しいため、デザイン段階からエンジニアが関わるようにしています。

デザインカンプは必要な箇所だけ作る

一般的なWEB制作では全ページのデザインカンプを作成しますが、Snow Monkeyを使う場合はカスタマイズが必要な箇所だけをブロックまたはパーツ単位でデザインします。

前述のとおり、ブロックで実現できる範囲にデザインを収めるなら、カスタマイズが必要な箇所は限られます。それ以外はSnow Monkeyのデフォルトスタイルで十分なので、デザインカンプも必要な箇所だけで済みます。

ただし、トップページについては必ずデザインカンプを作成します。サイト全体のトーンやブランドイメージをクライアントと共有し、認識を合わせるためです。

CSSを極力書かない

必要な箇所はデザインをもとにカスタマイズしていきますが、このときなるべくCSSは書かずにエディターやカスタマイザーで実現するようにします。

理由は2つあります。

1つ目は運用性です。エディターやカスタマイザーで設定した内容はクライアント自身がノーコードで変更できます。納品後の軽微な修正を自分たちで対応できるので、修正を依頼するコストも減ります。

2つ目は効率性です。CSSを書くと記述・検証・レスポンシブ対応などの工数がかかります。エディターやカスタマイザーで済ませることで、これらの工数を削減できます。前述の「用意されているブロックで実現できる範囲にデザインを収める」と同じ考え方です。

Snow Monkeyはデフォルトのブロックにもスタイルが豊富に用意されていますし、Snow Monkey Editorなどを活用すればさらに幅広いカスタマイズができます。これらを組み合わせれば、CSSを書かなくても十分見栄えの良いサイトを作れます。

それでもCSSやPHPによるカスタマイズが必要な場合のみ、プラグインとして実装します。

まとめ

greenciderで実践しているSnow Monkeyのサイト制作を効率化するフローやアプローチを紹介しました。

根底にあるのは「Snow Monkeyが用意してくれているものを最大限活用する」という考え方です。役に立ちそうなものがあれば参考にしてみてください。