--- title: "Snow Monkeyを使ったウェブサイト制作チップス2022" canonical_url: "https://olein-design.com/blog/snow-monkey-my-tips-2022" language: "ja" date_published: "2022-12-01T10:00:00+09:00" date_modified: "2023-08-26T23:08:47+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "Snow Monkey" --- # Snow Monkeyを使ったウェブサイト制作チップス2022 この記事は [Snow Monkey / unitone Advent Calendar 2022](https://adventar.org/calendars/8154) の1日目の記事になります。 もう一年が終わってしまうんですか？年々、歳を重ねるごとに１年が過ぎ去るスピードの速さを痛感しております。そして、その加速度にも驚きしかありません。 みなさん、こんにちは。本記事は上記アドベントカレンダー向けの記事となります。また、はじめましての方も見えるかと思います。よろしくお願いいたします。 普段から Snow Monkey フォーラムやYoutube配信などで知っていただいている方も見えるかと思いますが、ここ数年 Snow Monkey にも大変お世話になっておりまして、公私共に楽しく関わらせていただいております。 [HAPPY SNOW MONKEY](https://happy-snow-monkey.olein-design.com/)、[オレイン自学室](https://jigaku.olein-design.com/) というサイトを作ったり、[Youtube](https://www.youtube.com/olein_jp)なども時間のあるときにやらせていただいております。また、[WordPressサイトエディターに対応したブロックテーマ「Cormorant」](https://ja.wordpress.org/themes/cormorant/)をWordPress公式ディレクトリに掲載したりもしております。 --- さて、今回は「Snow Monkeyを使ったウェブサイト制作チップス2022」と題しまして、今年もお仕事でも使わせていただきました Snow Monkey の、現在僕個人として思う、ウェブサイト制作において、最適な制作利用フローをご紹介しようかと思います。 また、こちらをご覧になった方で「いや、私はこうしてる！」「ここはこうしてます！」なんていうコメントなどいただけると、とても楽しいかと思いますので、Twitter 等でお待ちしております。 ## デザインデータを用意しない 僕自身がハンドルを握れる制作案件の場合、特にデザインデータを制作してお客さんに確認いただくフローは用意しないことが多いです。 俗にいう、デザインカンプと呼ばれるものですが、最近では本当に用意しないことが多くなりました。しかし、お客さん側としては、見た目を確認せずにプロジェクトを進めることに不安を感じる方も少なくないでしょう。 ですので、僕の場合ですが、以下のような流れで進めることが多いです。 - ワイヤーフレームの作成（主要ページでの情報設計構成図）と提示 - カラーパターンや配色サンプルの用意 - 完成雰囲気を共有できる参考・参照サイトの提示 ### ワイヤーフレームの作成 こちらはデザインデータの有無に関わらず作成するものではあるのですが、情報設計を施した上での画面構成を事前共有しておきます。 また、ホイッと見せるだけではなく、各主要ページの構成意図などをしっかりと伝えるようにしています。そうすることで、各パーツがそこに配置される意味を共有することができます。 ### カラーパターンや配色サンプルの用意 ブランドカラーやコーポレートカラーなどを既にお持ちの場合には、そちらをベースとした配色パターンなど資料を用意し、事前に共有をします。 そうすることで、上記ワイヤーフレームと併せて確認いただけるので、よりイメージがしやすくなります。 ### 完成雰囲気を共有できる参考・参照サイトの提示 完成時デザインを作成しない代わりに、完成イメージのすり合わせが可能となるように、参考・参照サイトのキャプチャーなどを事前に提示して共有します。 こうすることで、実際に参照サイトを見ることができますし、よりイメージいただけるようにしています。 ### デザインデータを用意する場合 場合によっては、デザインを用意することもあります。案件によってはデザインを用意された上で実装部分のみの依頼をいただくこともありますので、そういった場合には以下のような点を**デザイン制作開始前に確認**するようにしています。 - 利用するテーマに対する理解をされているデザインを制作 - 利用するテーマの特徴を理解した上でのデザイン制作 - WordPressの基本的な部分への理解をされた上での制作 ここでは「利用するテーマ」と書いていますが、この部分は Snow Monkey ではなく他のテーマを利用する場合でも同じように確認をします。 実際、Snow Monkey（以外にもありますが） においては、CSSの詳細度自体がカスタマイズを考慮した設計となっており、上書きのしやすい形になっています。また、各種テンプレートに対してフィルターフックを利用することで、構造的な部分にも最小限の影響力で変更を加えることができます。 ですので、仮に Snow Monkey や WordPress をあまり考慮されていないデザインが上がってきたとしても、実現可能な範囲はとても広いと思います。 しかし、メンテナンス性・拡張性・汎用性などを考慮すると、場合によっては **Snow Monkey や WordPress の特徴を理解された上で用意されたデザインの方が、お客さんにとって使いやすいウェブサイトになることが多い**と個人的には考えています。 ですので、上記した内容をデザインを用意する場合には確認をし、対応できない内容がある場合には、それに付随するリスクやデメリットなどをすり合わせて最適解を探すようにしています。 ## デモサイトを常時共有する 実際に作られるものが事前に見えないとお客さんは不安になるということを前述しましたが、その点をカバーする意味でもデモサイトを常時共有する形をとっています。 まず最初は、（上記した）ワイヤーフレームを実際のサイトに再現したものを用意します。掲載する情報はダミーのものになることが多いですが、それでもお客さんが実際にPC/スマホのブラウザで見て確認できる状態を用意することはとても大切です。 また、随時制作が進んだものに関してはアップロードをして、日常的に進捗を共有し、デモサイト上でプロジェクトに関わる全員が確認できるような体制を持つようにしています。 制作側としてのワークフローとしては、ローカルとの連携が必要となってきますが、以下のように進めることが多いです。 - プロジェクトをGitHubで管理 - masterにプッシュ→ GitHub Actions でFTPアップロード 再利用ブロックや固定ページ、または Snow Monkey Forms のIDをデモとローカルで一致させたい場合には、デモサイトの方で定まった値をローカルのDBで調整して合わせるようにしています。 ## フックを活用する Snow Monkey を活用してウェブサイト制作をしている方の多くは既に活用されている方も多いとは思いますが、Snow Monkey にはとても多くのフックが用意されています。 そもそも WordPress 自体がフックで構成されていると言っても過言ではない設計思想に基づいており、その上で利用する Snow Monkey も似た特徴を持っていると言えます。 フックの利用に関しては、どうしても PHP の利用が必要になりますので基本的な知識を持っていないと対応は難しいかもしれません。 簡単に試してみたいという方には、昔作成した My Snow Monkey LITE というプラグインをお勧めします。こちらは、特にコンパイルを必要とする仕組みを持たせず、書いたコードがそのまま反映されるシンプルな仕組みになっています。 [埋め込みコンテンツ](https://olein-design.com/blog/my-snow-monkey-lite) そして、冒頭でも紹介していますが、HAPPY SNOW MONKEY というサイトには、各箇所に対応するアクションフックとそのサンプルコードが掲載されているので、コピペだけでも実行結果を確認することができます。 [https://happy-snow-monkey.olein-design.com/](https://happy-snow-monkey.olein-design.com/) まだ試したことがない方は、ぜひ試してみてください。活用できるようになるとカスタマイズの幅が格段に広がります。 **「フックを利用してカスタマイズをしても、今後そのフックが廃止になったりしたらどうするんですか？」**と思われる方も見えるかもしれません。 可能性としてはゼロではありません。ですが、Snow Monkey の公開後から今まで使わせてもらってきましたが、そういった経験は今の所ありません。今後もないかどうかは分かりませんが、今の所ないのであまり気にしなくても良いでしょう。 ## CSSファイルの管理は用途で分ける [おれおれな My Snow Monkey](https://github.com/Olein-jp/my-snow-monkey) を作ってカスタマイズ時に利用したりしていますが、CSSはSassファイルを以下のように分けるようにしています。 - フロント用スタイル - エディター用スタイル - フロント・エディター両方利用スタイル 一番簡単なのは、単純にフロント用にスタイルを用意して、それをエディター側に読み込ませる方法なのですが、たまにフロントとエディターでスタイルを分けたい場合が発生したりします。 そういう場合には、都度対応できるようにしています。箇所によってはMixinにまとめて必要部分だけ上書きするようなこともしたりしますね。 ## 困った時の対処法 Snow Monkey では様々なことが実現できます。ですので、全てのことを記憶しておくなんて無理です。ですので、最も確実でほとんどの開発・制作者がやっていることをご紹介します。それは… **調べる（ググる** です。 そんな簡単に言うなよ、と言われるかもしれませんが、（たぶん）みんな調べていると思います。僕もめっちゃ調べます。 そして、同じことを何度も調べています。調べてから「あ、これ前も調べたな…」と気づくことが日常です。そして、それを繰り返していくことで記憶になるのだと思っているので、全く不要な作業ではないと~~強く思い込んで~~思っています。 では、どう考えて、どう調べているのかという点ですが、簡単に問題の切り分け方をご紹介します。 ### 問題の起因場所を見定める 疑問を抱いている問題が、Snow Monkey（テーマ）側に関係するものなのか、そもそも WordPress の機能や仕様に関係するものなのかを見定めます。 これが意外と難しいようですが、難しいと感じる方に共通しているなという点が個人的にはありまして。それは「WordPress や Snow Monkey の利用頻度・期間」に関係しているという点です。 当然ですが、カスタマイズしよう・活用しようとしている対象を詳しく知らなければ何もできませんよね。 フォーカスしている問題が WordPress の仕様上の問題なのか、Snow Monkey 内部で解決できる問題なのかと判断するためには、最低限の各への理解が必要になります。 ですので、まずは「とにかく触ること」です。ここで勘違いしていただきたくないのですが、「仕事で触る」ばかりではなく「個人的に触る」ことをどんどん増やしていくことです。 お仕事で触れる部分というのは意外と共通していることが少なくありません。ですので、同じような事案に遭遇することも少なくありません。しかし、それだけだと偏りが出てしまうかもしれません。ですので、個人プロジェクト（自分のサイトやブログなど）を進めていく上で様々な課題を自身に設けて、対応していくことで知見と経験を得ていくことができます。 ### フォーラムをフル活用する 僕は最近ではあまりトピックを作成することは少なくなりました。しかし、何かわからないことがあれば、まずはフォーラムを検索します。 実際にどう検索しているのかを紹介しますね。例えば、特定のテンプレートの値を書き換えたいとしましょう。例えば、`templates-part/loop/entry-sumary.php` で出力される HTML 構造に何かしらを付け加えたいとします。 そういう場合、僕であれば Snow Monkey 公式フォーラムで「entry-summary $html」と検索します。 [https://snow-monkey.2inc.org/forums/search/?bbp_search=entry-summary+%24html&bbp_forum_id=&bbp_type=](https://snow-monkey.2inc.org/forums/search/?bbp_search=entry-summary+%24html&bbp_forum_id=&bbp_type=) すると上記のような結果を得ることができます。ざっと見てみて「あ、僕がやりたいのは要素を別のもので置き換えたいんだから `replace()` するな」と思いついたとします。 であれば、検索ワードに `replace` も追加してみましょう。 [https://snow-monkey.2inc.org/forums/search/?bbp_search=entry-summary+%24html+replace&bbp_forum_id=&bbp_type=](https://snow-monkey.2inc.org/forums/search/?bbp_search=entry-summary+%24html+replace&bbp_forum_id=&bbp_type=) こうすることで、かなり絞り込みが実現しますね。そこでやりたいことに似たようなことをしているトピックを確認したり、掲載されているソースコードを実際に試したりします。 それでほとんどのことが解決してしまいます。当然言うまでもないですが、最低限カスタマイズを行う上で必要な WordPress や HTML/CSS/JavaScript/PHP の基本的な知識があるというのは前提です。 先ほど僕は「最近あまりトピックを立てていない」と書きましたが、それには大きな理由があります。 それは、**Snow Monkey フォーラムが共有知として活用できるレベルにまで成長した**ということが考えられます。 それはまさに、これまで Snow Monkey に関わってきた方々が積み重ねてくださった知識が豊富に集まり共有できる場所として、Snow Monkey フォーラムが存在しているということです。 これはプロダクトにとってはとても有意義なことだと思いますし、今後も Snow Monkey ユーザーを支えてくれる大きな柱になるでしょう。みなさんも、今後もどんどん活用していいきましょう。 ### WordPressやPHPに不安になったら そうなった場合には、公式ドキュメントをまずは確認しましょう。どこかの誰かの記事ではありません。公式ドキュメントを見ましょう。 [https://wpdocs.osdn.jp/Main_Page](https://wpdocs.osdn.jp/Main_Page) [埋め込みコンテンツ](https://ja.wordpress.org/support/) [https://www.php.net/manual/ja/index.php](https://www.php.net/manual/ja/index.php) 僕も今だにまだまだよーく見ます。 ## まとめ いかがでしたでしょうか？「別に2022じゃなくね？」と思われた皆さん、図星です。特に今年だから云々という内容ではないかと思います。 ナウでヤングかは別として、デザインを用意する部分や、何か困りごとが見つかった場合の対処法などは、特に WordPress や Snow Monkey を使い始めた方々には参考にしていただける内容ではないかな？と思います。 来年も変わらず WordPres と Snow Monkey を楽しんでいこうと思います。今後ともよろしくお願いいたします。