--- title: "Snow Monkeyを活用したウェブサイトの制作から納品・運営補助までのフローについて" canonical_url: "https://olein-design.com/blog/the-flow-of-creating-a-website-using-snow-monkey" language: "ja" date_published: "2020-12-04T09:00:00+09:00" date_modified: "2020-12-04T09:00:00+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" --- # Snow Monkeyを活用したウェブサイトの制作から納品・運営補助までのフローについて この記事は[Snow Monkey アドベントカレンダー](https://adventar.org/calendars/5421) ４日目の記事になります。 [Snow Monkey エキスパート](https://snow-monkey.2inc.org/snow-monkey-expert/)に認定いただきましたオレインデザインです。今後も名に恥じない形で貢献していこうと思います。 さて、こちらの記事では、**Snow Monkeyを活用したウェブサイトを制作際の制作開始から納品・運営補助までの流れ**を解説してみようと思います。 といっても、**ゆーてもWordPressを活用したウェブサイトということに変わりはない**ので、Snow Monkey特有の部分を除いて考えていただければ、**一般的なウェブサイト制作におけるフローの参考にも使っていただけるかと**思います。 そして、掲載した内容については、僕（オレインデザイン代表）の**個人的な思想や考えも多く**、そして**強く反映されているもの**かと思います。ですので、**一概に平たく皆さんに参考にしていただけるかどうか微妙**なところではありますので、その点ご理解をお願い致します。 --- 以前はSnow Monkeyの開発方法やテーマ構造の性質上、エンジニア層に多く利用者が集まっていましたが、最近ではWeb制作を学習して副収入を得ようと考えている方々や、ワークライフバランスのクオリティを高めようと努力されている方々にも活用されているようです。 そういった学習を進められている初学者の方々にも、Snow Monkeyを活用したウェブサイトを提供する上で失敗を少なくしていただくための**一つの参考として使っていただければ幸いです。** また、こちらで紹介しているような話題をはじめとするWeb制作スキルアップに関する情報交換や、[オレイン自学室](https://jigaku.olein-design.com/)で提供している学習課題などへの**ご質問を自由にしていただける有料コミュニティの立ち上げを検討しています。** よろしければ[こちらのTwitterアカウント](https://twitter.com/Olein_jp)にて情報をキャッチアップしていただけますと幸いです。 ## 前提条件 ウェブサイトには様々な形がありますので、どんなウェブサイト立ち上げを想定しているのか前提条件が必要になります。 ここからお話していくウェブサイト制作に関しては、以下のような条件下を想定して進めていきます。 - WordPressを利用、かつSnow Monkeyをテーマとして採用 - 一般的なコーポレートウェブサイトの構築依頼 通常、WordPressの採用を確定するのも、テーマに何を採用するのかを確定するのも、**ヒアリングが完了してから**です。 ### テーマを決め打ちして制作・提案をする弊害について WordPressテーマはとてもたくさん存在します。当記事執筆時のデータで、WordPress公式ディレクトリで検索可能なテーマ数は**7,988**となっていました。 [埋め込みコンテンツ](https://ja.wordpress.org/themes/) しかし、日本語環境での表示も最適化されており、かつ拡張性や汎用性などを考えると、利用しようとする既成テーマが限られてきてしまうことは否定できません。（デモサイトではめちゃくそカッコイイのに採用したら全然かっこよくならない問題） しかし、制作サイドが**「〇〇のテーマしか使えないから」**や**「〇〇のテーマしか詳しく知らないから」**という理由でテーマ選定をすることは、**結果としてクライアントに最適なウェブサイトを提供できているということにはなりません。（というか、言い切れません）** ですので、仮にSnow Monkeyを含む既成テーマを活用してウェブサイトをお仕事として提供していくことで金銭を授受していくのであれば、**可能な限りのプロダクトを採用する選択肢を持つ努力が必要**になります。（Snow Monkeyだけ触れるようになってｳｪｰｲ!できるってのは一瞬だぞ） Snow Monkeyであれ、SWELLであれ、Lightning Proであれ、その他のテーマであれ、**各々の個性とできることの違いはあります。**それを**可能な限り理解し、クライアントの気持ちになって代わりに選択してあげることが制作者には必ず必要**です。その努力は惜しまないで下さい。 ### 全体の流れ 先に全体の流れを説明しておきますと、このような流れになるかと思います。**🐵ポイントあり** という部分は、Snow Monkey特有の知識や判断ポイントが必要になる部分があるという箇所になります。 ヒアリング 提案・見積もり・スケジューリング共有🐵ポイントあり 制作環境の用意**（🐵ポイントあり）** 制作・カスタマイズ作業**（🐵ポイントあり）** クライアント確認 修正作業 本番環境にアップ 操作方法など必要なレクチャー**（🐵ポイントあり）** 運用スタート・サポート開始 では、各々の項目を解説してきます。 ## ヒアリング ### 受注に至らなかった場合についての説明 ヒアリングから次の工程までをクライアントに提示し、発注を受けるのかどうかが確定します。しかし、そこまでこちらの時間とスキル・労力をつかって提案内容などを作成します。 ですので、**結果的に受注に至らなかった際にも、そこまでの最低限の作業は発生しているため請求は発生することを事前に同意を得ておきます。** **この点に合意いただけない場合には、そもそもヒアリングを実施しません。** ### ヒアリング開始 入念なヒアリングなくして、目的を達成できるウェブサイトの構築はできません。ですので、しっかりとヒアリングを行います。 過去に作成したヒアリングシートはGitHubに公開していますが、ヒアリングでお聞きする内容は今でもそれほど変わっていませんので、よかったらこちらも参考にしてみてください。 [埋め込みコンテンツ](https://github.com/Olein-jp/hearing-sheet) そして、大概１時間ちょっとのミーティングを予定しながら、午前中わいわい喋ってしまうことが多いですが、それはここでは伏せておきます。 ### 課題を明確にする ヒアリングをする上で、まず明確にしないといけないのが、**クライアントが何を実現したいのか？どんな課題をクリアするために、ウェブサイトを用意しよう（またはリニューアル・改変しよう）と考えているのか**を、理解できるまで深掘りしてお聞きします。 そこへの理解を進めるためには、クライアントへの表面的な理解だけではなく、それまでのバックグラウンドであったり思想であったりと、幅広い理解が必要になることが少なくありません。 ### デザインテイスト確認 次に行うのは、デザイン的な嗜好の方向性を確認します。 ここで間違って理解してほしくないのが、**クライアントが気に入るデザインや見た目を提供するために確認をしているわけではない**という点です。 あくまでも**一番重要なのは、クライアントが抱いている課題を解決すること**です。ゼロとは言いませんが、クライアントのデザイン的な満足度の優先順位は（個人的には）高くありません。 しかし、運用が始まった際にお知らせやページの更新など手入れをしていくのはクライアントであるケースは多いです。 その本人（または法人であれば担当者全体）のホームページを更新したい！改善したい！というモチベーションを高いレベルで保つためには、少なからず**自身（クライアント）がそのウェブサイトを持っていることを誇れるような、自慢したくなるようなものである必要があります。** 成果物（ウェブサイト）とクライアント満足度のバランスを正確に測るためにも、この確認を行なっています。 ## 提案・見積もり・スケジューリング共有 ヒアリング内容を元に、課題解決のための提案内容を提示し、その実行のために必要なコストを提示（見積もり）したり、作業スケジュールを共有します。 ### 課題を解決するワイヤーフレーム作成 ヒアリングが完了したら、その内容を元に提案内容を詰めていきます。そして、その提案内容を視覚的説得力を高めるためにワイヤーフレームを作成します。 「なぜ、Snow Monkeyでサクッとサンプルページ作らないの？」と思われる方も多いかもしれませんが、見積もり内容に同意いただいてないからです。**見積もり内容にGOサインが出ていない状態では、可能な限り作業はしません。**してはダメだとすら思っています。 ワイヤーフレームはAdobe XDを利用して作っています。最近ではFigmaも流行っていますが、まだまだ現状業界標準までは来ていない気がしています。現に僕の周りでは、まだ受託制作においてもFigmaを使っているデザイン制作会社さんはお見えになりません。 Web制作やWebデザインを学習されている方のカリキュラムを拝見すると、よくFigmaを採用されているものもあるようです。一人で完結する仕事であれば自分の使いやすいツールを選択しても良いですけどね。 ### ワイヤーフレームを作成するために必要な知識 ただただ適当にワイヤーフレームを作るだけではいけません。**デザインには全て意図があり、閲覧者の動きをコントロールして設計することがデザイン制作です。** 僕の場合、ワイヤーフレームはまず紙に書きます。何通りも書いたり、変えたりしながら紙に書きます。iPad ProとApple Pencilで書く方がかっこよく見えるんですけど（家だから誰にも見られてないけど）、格段に出てくるアイデアが違います。個人的感覚ですが。 そのようにワイヤーフレームを作成する際に、Snow Monkeyを利用する場合に必ず必要な知識があります。 それは、**「Snow MonkeyやSnow Monkey Blocksなどで実現できることを可能な限り把握しておく」**ことです。 Snow Monkeyで出来ることを把握していなければ、サイトやページの構造を提案することができないでしょう。当然、標準ブロックの活用方法も熟知している必要があります。そういった意味では、**WordPressやSnow Monkeyに関わってそれを生業にすることは、日々修行を重ねられるかどうかということにもなってきます。**僕も日々鍛錬を続けています。 全てSnow Monkey Blocksでやれ！という意味ではありません。他のカスタムブロックを提供してくれるプラグインを採用することもありますし、カスタムHTMLブロックを利用してコーディングをすることもありますし、ショートコードを作成して動的な処理を任意の箇所に組み込むこともあります。 ### スケジュールの組み方と共有 「できたら見せるね！」というカジュアルな形で仕事を進められることはありません。 スケジュールを作成することはウェブ制作においても大切な仕事です。そして、**スケジュールを作成するためには、自身の力量と作業スピードを把握していないとできません。** どんな作業にどれくらい時間が必要なのか。その作業の工数はどれくらい必要なのか。などなど、考えることはたくさんあります。 意外にやってしまいがちなのが、**スケジュールにバッファ**を設けないということです。 予定通りに進んで欲しいけど、予定通り完璧には進まない。よくあることです。人生と同じです。 大小問わず予期せぬトラブルが発生することもありますので、**多少の時間的余裕を作っておくことも仕事**です。ですので、適切なバッファは設けましょう。（**適切でないと詐欺っぽくなる**ので気をつけましょう） そして、そのスケジュールをクライアントとしっかりと共有しましょう。 そして、最後に大切なことをお伝えします。 **「自分で作ったスケジュールは、絶対に自分が原因で崩さない」** これは大事です。スケジュールに遅延（ディレイ）を発生させることは自分原因では絶対にしないよう強く心がけています。 ### クライアントとの連絡手段 みなさん様々あるとは思いますが、僕の場合はエンドユーザーもしくはデザイン制作会社さんなどと一緒にお仕事をすることが多いので、**Slackだとオーバースペック**（というか、操作方法を覚えれない場合が多い）**なのでChatworkを利用**しています。 個人to個人でのやり取りではなく、ウェブサイト用のグループを作成して、そちらで全ての情報をやり取りします。基本的に連絡チャンネルを決めたら、そこ以外からの連絡は一切受けません。情報が分散することで確認漏れも増えますし、言った言わないが発生することもあるので電話も利用しません。 ## 制作環境の用意 提案・見積もりやスケジュールといった部分にGOサインが出たら、初めて着手を始めます。 ### ローカルで制作環境を作る 何か特別な理由がない限り、**ローカル開発環境で作業を行います。**その際の流れを簡単に紹介すると、 1. 案件用のGithubプライベートリポジトリを作成 2. LocalでWordPress環境を作成 3. プラグインを作成してクローン 4. 適宜コミット＆プッシュ というような流れです。たぶん多少違いはあれど皆さんとそれほど違わないと思いますが。 CSSカスタマイズだけで済んでしまう場合には、追加CSSで済ませられる程度なのかを判断します。その場合は、リポジトリは要らないですね。（追加CSSだけで終わらせた案件というのは遭遇したことありませんが） リポジトリを作る理由は、**バージョン管理といった側面よりもバックアップ的な側面の方が強い**です。何かしらのトラブルが発生してPCが使えなくなった際にも、データを外部に持っておくことで臨機応変な対応が可能となります。 また、**ソースコード以外の部分（要するにWordPress全体やコンテンツ部分など）は、All-in-One-WP-Migrationのエクステンションを活用して外部クラウドに定期保存**するようにしています。 これでトラブルが発生した際にもなんとかなります。 ### WP-CLIを活用して簡単環境設定 Localではコマンドラインにてテーマやプラグインの設定を行うことができます。 例えば、Snow Monkeyを利用する際によく利用する以下のプラグイン - Snow Monkey Blocks - Snow Monkey Editor - Snow Monkey Forms これらをコマンドラインで一括でインストールし有効化を行うことができます。 ``` $ wp plugin install snow-monkey-blocks snow-monkey-editor snow-monkey-forms --activate ``` これで３つをインストールし有効化まで完了できます。ローカルに置いてあるzip圧縮のテーマファイルを指定してテーマをインストールすることもできます。 これをスニペットとして持っておくと、秒でSnow Monkeyの開発環境を作ることができます。 ## 制作・カスタマイズ作業 さて、制作やカスタマイズに関しては、案件によりけりなので具体的な内容で紹介できません。 しかし、一般的な調べ方というか流れというか、そういったものは以下のような感じになります。 ### CSSだけのカスタマイズ 追加CSSに記述しながら表示を確認する or プラグインからアプローチして書く。 ### PHPを使ったカスタマイズ方法 Snow MonkeyでPHPを使ったカスタマイズとなると、フックで良しなにやるということかと思います。その際に、僕がどのように調べたり進めたりしているかをご紹介します。 #### とりあえずHSM やりたいことにも寄るんですが、基本的にSnow Monkeyに関するカスタマイズの場合には、手前味噌で申し訳ないんですが、[HAPPY SNOW MONKEY](https://happy-snow-monkey.olein-design.com/)をまず参照します。 [埋め込みコンテンツ](https://happy-snow-monkey.olein-design.com/) 実際に行なったカスタマイズなども出来るだけ出そうとしていますが（まだまだ出せてないものたくさんあるんだけど…）、フックの名前などを調べたりします。 自分が調べやすいように、フックリファレンスページの下部に、公式フォーラム内でそのフック名で調べられるボタンもつけておきました。**完全にオレオレ仕様**です。 ![](https://olein-design.com/wp-content/uploads/2020/12/image.png)*この青いボタンのところ* #### Snow Monkey 公式フォーラムを調べる フック名からSnow Monkey公式フォーラムの中を調べます。また、フック名だけでなくカスタマイズしたい部位の名前で検索したりしてみます。 このSnow Monkey公式フォーラムというのは、大げさにいうと**「これまでのSnow Monkeyにおける知見の集合知」**です。 **多くの先人のみなさまが悩まれてきたことを、この公開の場で共有し、解決してきてくれています。そのリソースを公式に公開されている**のです。**これを利用しない手はありません。** #### Snow Monkey 公式フォーラムで質問する 逆にここで見つからないものは、質問してみても良いでしょう。 年額サブスクリプションを契約していると公式フォーラムに投稿することができます。**調べてみて該当するトピックスを発見できなかった場合には、どんどん質問してみることをお勧めします。**僕もできるだけ回答しています。 インターネット検索で調べても、Snow Monkeyのフック利用に関するカスタマイズはあまり検出されません。ですので、直接質問した方が色々な人の意見を聞くことができます。 お仕事案件に関する質問の場合、なかなか外に出しにくいことは多々あります。その場合は、**そのためだけのデモサイトをインターネット上に用意してURL共有をして質問しても良いでしょう。** そうすることで、**未来で自身と同じ悩みを抱いた方が、あなたの質問を見て問題を解決できるかもしれません**し、糸口を見いだすことができるかもしれません。 この考え方やリソースの循環こそが、オープンソース的であり、Snow Monkeyが目指している姿勢の一つだと僕は考えています。（違ったらごめんやで） ## クライアント確認 必要な制作作業が完了したら、一度クライアントに確認をしていただきます。 この時点でコンテンツなどもローカル環境で作り上げてしまい、**ほぼ完成したデータをデモ環境（当方で用意）にAll-in-One-WP-Migrationでスコンと入れてしまうことが多い**です。（逆に、コンテンツが出来上がっていないのにクライアント確認はしません） そして、**クライアントに確認していただく期間は１週間くらい**充てることが多いです。その期間は事前にスケジュール共有の際にお知らせしてあります。 修正の依頼などご意見をもらいますが、**全てをトップダウンで（言われたこと全てを）実行することはありません。**こちらの提案に意図があるので、その意図から逸れてしまう場合には、逸れるだけの妥当な理由があるかどうかを判断しクライアントと協議します。 そして、現状でどちらの形で行くべきか、変更して反応を測定するかなど、様々な対応策を提案します。 ページの見た目部分の確認も大切ですが、WordPressの操作やブロックエディタの利用が初めてという方も少なくないでしょう。 そういう場合に僕がよくやるのは、受注が確定した段階で本番環境に検索エンジンにインデックスされない状態でWordPress環境を用意しておきます。テーマはTwenty系で良いです。 その状態で、思いっきり好きなようにWordPressを使ってもらいます。投稿に記事を書く練習もできますし、コンテンツに利用するテキストや画像をそちらに用意してもらうことで、操作の練習になったりもします。 そして、試してみた上で操作方法などで悩まれた際には、僕の方で操作方法を動画撮影した映像などを共有してレクチャーを進めたりもします。これは制作と平行して行うことがほとんどです。 ## 修正作業 協議の結果、修正する必要がある部分に関しては早急に修正をします。 修正したものをデモ環境にアップしてクライアントに確認してもらいます。特にこれと言ったチップスはありませんが、ファイル転送ソフトには[Transimit](https://panic.com/jp/transmit/)を使っています。[Panic](https://panic.com/jp/)社のUIは昔から好きです。 ## 本番環境にアップ 修正作業も確認OKをもらったら、デモ環境のデータをそのままAll-in-One-WP-Migrationでガチコンします。そんな難しいことはありません。 ただ、ここまではローカル開発環境で変更したものは**デモ環境**へアップロードしていましたが、これ以後の変更は**本番環境へアップロード**しなくてはならないので、アップロード先を間違えないように変更しておきましょう。 ## **操作方法など必要なレクチャー** こちらが制作を進めている間に、クライアントにはWordPressを実際に触ってもらう期間を用意しますが、WordPressが初めての方の場合は、それよりも先に「これ読んで見てください」と参考となる書籍を一つプレゼントすることがあります。 クライアントさんのその時の理解度にもよるのですが、 - [いちばんやさしいWordPressの教本](https://www.amazon.co.jp/%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%84%E3%81%95%E3%81%97%E3%81%84WordPress%E3%81%AE%E6%95%99%E6%9C%AC-5-x%E5%AF%BE%E5%BF%9C-%E4%BA%BA%E6%B0%97%E8%AC%9B%E5%B8%AB%E3%81%8C%E6%95%99-%E3%81%88%E3%82%8B%E6%9C%AC%E6%A0%BCWeb%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-%E3%80%8C%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%84%E3%81%95%E3%81%97%E3%81%84%E6%95%99%E6%9C%AC%E3%80%8D%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4295006661/)（Snow Monkeyエキスパートの株式会社mgnさんの代表である大串さんも著者の一人！） - [世界一わかりやすいWordPress 導入とサイト制作の教科書](https://www.amazon.co.jp/%E4%B8%96%E7%95%8C%E4%B8%80%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84WordPress-%E5%B0%8E%E5%85%A5%E3%81%A8%E3%82%B5%E3%82%A4%E3%83%88%E5%88%B6%E4%BD%9C%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8%EF%BC%BB%E6%94%B9%E8%A8%822%E7%89%88%EF%BC%BD-%E4%B8%96%E7%95%8C%E4%B8%80%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84%E6%95%99%E7%A7%91%E6%9B%B8-%E6%B7%B1%E6%B2%A2-%E5%B9%B8%E6%B2%BB%E9%83%8E-ebook/dp/B08KPRP6YT/) このどちらかを選択することが多いです。 それでも操作に心配を覚えられる場合でも、次の運用フェーズへと進んでもらいます。実際に運用をスタートしてもらい、その中でわからないことを徹底的にレクチャーしていく方法を取ります。 ### Snow Monkey BlocksやEditorの利用方法について **「触って慣れろ」というのは初心者には横暴なのでサポートが必要**です。 最近では、Youtubeにて動画がたくさん用意されていたりしますので、そちらを参考にされると映像で操作の動きを確認できるので習得が早くなるかもしれません。 また、[HAPPY SNOW MONKEY](https://happy-snow-monkey.olein-design.com/)では、Snow Monkey Blocksで提供されているブロックのサンプル集を公開しています。 [埋め込みコンテンツ](https://happy-snow-monkey.olein-design.com/snow-monkey-blocks) 今後、こちらに解説動画も加えていく予定ですので、ぜひご活用いただければと思います。 ## **運用スタート・サポート開始** 基本的に、**僕がウェブサイトを制作して納品するもの全てにおいて、１ヶ月の無料サポート期間を提供**しています。 そちらの中では、**仕様に基づいて搭載された機能に支障がある場合には無償で修正対応する**というものも含んでいます。 また、運用の中で分からない操作方法などは連絡をもらい、必要であればオンラインで繋いで操作方法を説明したり、こちらで操作方法の動画を撮影したものを共有したりして、運用に必要な操作を慣れていただきます。 ### 納品完了後の運用サポートについて １ヶ月の無料サポート期間が終了した時点で、完全納品完了となります。その時点で、クライアントに今後ご自身のみで運用されていくか、有償サポートを用意するかどうかをお聞きします。 以前は、有償サポートサービスを価格固定パッケージとして提供していたのですが、より一層クライアントそれぞれの状況に合わせたサポートを提供できるように、**フレキシブルにサポート内容を組み立てて、無理のない価格設定とサポートを提供**するようにしています。 ## まとめ このような流れでウェブサイト制作をしています。そして、Snow Monkeyを活用する際にポイントとなってくる部分も少々お伝えできたかと思います。 オレインデザインでは、このような形でウェブサイトを制作し、クライアントへ提供しています。個人事業として８年目になりますが、**数をこなして売り上げをあげることを目標にはしておらず、僕と一緒にウェブサイトを作りたい・仕事をしたいと言ってくださる方々と一緒に**歩んで来させていただきました。 そして、まだ僕が存在するということは、ある程度満足していただきながら歩んで来られたのかなと解釈しています。 今後は、自身の制作業務もさることながら、**レクチャー業務（[オレイン自学室](https://jigaku.olein-design.com/)）**にも力を入れていき**「オレインさんに教えてもらいたい！」と言ってもらえるようなレクチャー課題を提供**し、そして**その課題に関する質問、Web制作に関する質問、副業やフリーランスとしてWeb制作などに従事していくための情報共有などが自由に行える有料オンラインコミュニティの立ち上げ**も視野に入れています。 ぜひ、今後ともオレインデザインと[@Olein_jp](https://twitter.com/Olein_jp)をよろしくお願いいたします。