Snow Monkey爆速サイト制作生活 2020

Apple MusicのグローバルTOP100に、じわじわ往年のクリスマスソングが入るようになり、ああ今年ももうすぐ終わりなんだな。と感じるアクツです。こんばんは。

奇特な人は気づいたかもしれませんが、今回のブログ記事は2018のSnow Monkeyアドベントカレンダーで投稿させていただいた内容の2020年版です。

https://ah-kutsu.net/2018/12/23/snow-monkey-bakusoku/

前回はSnow Monkeyってこんな素敵なんだぜ!?みたいな語りが多かったのですが、その魅力は十分体感していただいてるかと思うので、今回は私が行っている制作フローをご紹介させていただければと思います。
(前回と大きく違うところが、ウィジェットでトップページ作ってない点ですw)

わたしの爆速制作フロー

テスト環境にWordPressをインストールし、サイト制作できる環境をびゅんとつくっていきます

後々のことを考えた場合、ローカル環境をまず用意してそこで開発しろよ!ってなるのですが、とりあえず早く形を作りたい!って気持ちが止まらず、会社のテスト環境(レンサバ)にサブドメインを当てて、簡単インストール機能でWordPressをインストールしてしまいます!

インストールしたら、早速ログインし、Snow Monkeyのテーマをインストールします。
続いて、プラグインの画面にて、Snow Monkey Blocks・SnowMonkey Forms・Snow Monkey Editor のお猿三銃士をインストールします。

このへんで自分の中のコウペンちゃんに「テスト環境立ち上げてすごい!」って褒めてもらいます。
自分で自分を褒めていくスタイルは積極的に行う方です。

必要なページをひとまず用意します

固定ページにて、ひとまずサイトに必要なページを作っていきます。
タイトルとslug(パーマリンク)だけ設定して保存したものを作っていきます。

ページ数が多いときは、手動ではなく、CSVからインポートしてページ作成できるプラグインを活用したほうがいいかもしれません

  • Really Simple CSV Importer
  • Wp All Import 等

カスタマイザーでとりあえず設定すると、もうサイトっぽくなります

Adminバー(一番上にある黒いバーのこと)にある「カスタマイズ」をクリックし、サイトの屋台骨を設定していきます。
とりあえず、上のメニューから順々に入れてきます。

※ここで、Figmaなどで適当に仮置用のロゴを作って設定しておくと、なんとなくサイトできてる感が強くなるので、おすすめです

ファビコン

ヘッダーとフッターが定まるだけで、どことなくサイトっぽくなり、制作のモチベーションが高まるので、あまりきちんと設定できることが少ない状況でもやってしまってます

必要なプラグインをさらに入れていきます

このへんで、ページ複製できない!とか、コメント欄邪魔だ!とか気になってくるので、必要なプラグインをインストールしていきます

  • All-in-One WP Migration(データ移行・バックアップ用)
  • Disable Comments(コメント欄削除)
  • Yoast Duplicate Post(記事・ページ複製)
  • WP User Avatar(著者プロフィールを使う場合。Gravatar使わず好きなアバター画像設定できる)
  • Snow Monkey Diet(Snow Monkeyで不要な機能を無効化するのに)
  • Site Kit by Google(Analyticsの結果などさくっと見る用)
  • Query Monitor(デバッグ取り用)
  • Public Post Preview(公開前の記事確認してもらう用)
  • Disable Emojis (GDPR friendly)(絵文字を無効にする)
  • EWWW Image Optimizer(WebP対応する場合)
  • Custom Post Type UI (カスタム投稿・タクソノミー使う場合)

トップページを作ってきます

私はワイヤーもWordPress上で起こしてしまってます。
これは、自分のデザイン能力があまりないことと、ワイヤー段階からいつでもお客様やチームメンバーに見てもらえることができるからです。
特に、実際に触れる状態で見せると、割とお客様の意見がでやすく、すでにサイトの形になっているという部分で「おお!」って思ってもらえることが多いので、このスタイルはずっと続けてます。

大体

  • メインビジュアル(セクションかカバー)
  • 文章(セクションかグループでくくった見出し+段落)
  • サービスなど2階層目への導線(セクションか項目・パネルブロック)
  • お知らせ(セクションブロックに最近の投稿ブロックをつっこんだの)

の感じでワイヤーを作ることが多いです。
とにかくSnow Monkey のセクションブロック使いまくってます。

(たぶん付き合いたいブロックNo.1ぶっちぎりだし、無人島に1つだけブロックもってけるならどれにするもセクションだと思います。(いやパネルブロックかもw))

CSSで調整をかけてくこともあるのですが、この段階では、My Snow Monkey準備するのめんどくさい〜となり、カスタマイザーの追加CSSに記述をしていきます(苦笑)

ここでCMです – 類人猿について

ブロックでワイヤーを作ってくとこまでは早くできるのですが、そこからお客様のサイトらしく装飾を施していくのが手間取ります。

鉄板で使うCSSとかあるのに(セクションの余白調整とか)、きちんと汎用できるようにまとまっておらず、他のメンバーに引き継ぎするときもなんとなくこんな感じでよろしく!!みたいな雑な感じでしかお願いできてない始末。
鉄板に使うものがまとまってて、しかもプラグインかなにかになってたら、サイト作りをお願いするときも便利だし、そもそも自分のサイト作りも捗るだろう!!
なんだったら、これを社外でも使えるようにきちんとプロダクト化をしていったら、お客様自身でもっとコンテンツも作ってもらえるし、他の方も効率的にサイト作りできて良いのでは?!

※もっと背景に色々あるのですが、超訳するとSnow Monkeyベンリ!Snow Monkeyサイコウ!Snow Monkeyモットサイコウナッタラ、カイシャモ キタジマサンモ ミンナモ トテモトテモハッピー!!ヨシ サービスダソウ! です。

ということで、自分が所属しているmgnでは、類人猿というサービスを作っています。

Snow Monkeyでもっとサイト作りが便利になるように、第一弾にコーポレートサイト用のブロックパターン配布予定です。 もしよろしければβ版リリースの際には使っていただけたらうれしいです。

2階層目のページの内容を入れていきます。

内容が未定の場合でも、よりサイトらしさを出せるように、入れられるテキストや画像はサイトに沿ったもの(公開してしまっても支障がないレベルぐらいのもの)を私の方で入れ込んでしまいます。

内容を作ってもらうのは基本お客様にお願いしているので、全面差し替えになってしまうこともあるのですが、あらかじめこちらで入れたものを用意するほうが、お客様の反応も得られやすいし「こういうものを用意すればいいのか!」と思ってくれて、準備していただけるというメリットがあるので、やってます。

ファビコン

そして、どうやらそれっぽいページを作り出せるというのは一種の能力らしく(?)ナイス!と職場で褒めていただけるので、ますます調子づいてますw

だいたいここらへんでお客様とのMTGがあるのでみてもらいます

大体1週間〜2週間に1回程度、お客様とのMTGがあるので、テストサイトをみてもらってます。
そして、時間や意見をいただけるようであれば、その場でテキストや画像などを直してしまうこともあります。

※中途半端な状態で見せることに抵抗を感じてしまうこともあるのですが、見せて良かった!って思えることがほとんどなので、途中の段階でも見せることをおすすめします

My Snow Monkeyで細かいCSSを調整していったり、フックでカスタマイズを入れたりします

毎回@media とか打つのしんどい!ってなっていき、そろそろローカル作るかってなります。
ずっと沈黙を守っていたgit先生もこのあたりから息をし始めます.
wp-instant-setup を利用して、WordPress環境を立ち上げつつ、gitとAll in One WP Migrationでテスト環境からデータを引っ張って突っ込むスタイルでデータ移行を終わらせます。(※Local アプリを利用する形に移行する予定なので、来年はここは全面的に変わるかもしれません)

あとは、My Snow Monkey でCSSを入れていきます。
※このへんはおれのゴリラというサイトでもちょこっと紹介しているのでよろしければご覧ください

このへんで検収・修正期間に入ります

おおよそのカスタマイズができ、サイトが一通りできたら、お客様に確認していただく期間に入ります。
(内容を随時確認してもらっている場合や全面おまかせいただいてる場合はこの工程を後回しにして公開してしまうこともあります)

サイトが無事公開!やった!

お客様のサーバにテスト環境のデータを移行し、公開します。
公開時には、OGP周りちゃんと設定できてるかの確認やAnalyticsなどの設定も行います。

制作の流れは以上です。

以後は、お客様に実際にサイト更新してもらって、わからない部分をフォロアップしていったり、更新や保守などの契約いただけた場合は、引き続きサイトのお手伝いをしていっています。

この記事を書こうと思った背景を話させてください

今年のSnow Monkey アドベントカレンダーでOleinさんが、サイト制作のフローを紹介していたのを見て、自分のSnow Monkey作業でのフローを書いてもいいのかもしれない。と思ったのがきっかけです。

そもそも請け負っているサイト制作の規模や背景・スキルセットが違うので比較できるとかではないのですが、多種多様な制作フローパターンを紹介するのも面白いのかもしれないと思ったのと、単純に記事ネタがまったく思い浮かんでないので、めっちゃ便乗したということもあります(すみません・・・)

爆速 であることの強みをもっと持ってほしいなとも思ってます

今年は、これまでみなかったような属性のSnow Monkeyユーザーがとても増えたな!Snow Monkeyの輪がどんどん広がっていくのは、とてもとても嬉しいなと思うような1年でした。

その中で、爆速で納品していけるツールとしてSnow Monkeyが重宝されているようなことを知りました。
私も、爆速で納品していくスタイルでSnow Monkeyを大活用させていただいていますし、そのことは強みにもなってるなと思います。

ただ、Twitterとかで見てみると、爆速でたくさんサイトを作った!これだけの数を納品してこれだけ稼いだ!といった雰囲気が強いことはちょっともやっとしてしまうことがあります。

私は、お金欲しいし、お金を稼ぐためにサイト制作をしています。
でもせっかくだったら、作ったサイトは役立ってほしいし、お客様にもよかったなと思ってほしい。そこは目を離さずにサイトを作っています。

なので、時間をかけずにサイトを作れたことだけが自慢になってくのは嫌な気持ちがあるし(それが大好きなプロダクトを利用してだからもある)、数をこなしてくことに特化していく形に対して、ずっとそのスタイルで仕事を続けていくの無理だろうと思っています。(少なくとも私は体悪くする始末で無理でした)

時間をかけずサイトを仕上げていく能力はとても必要です。そこは誇りつつ、ぜひその能力を使って次のステップに進んでくれたらと。

  • 早くサイトを作るということは、お客様のサービスをいち早くアピールすることができるし、アピールするための手段に時間をとることができる
  • Snow Monkeyでサクサク作れることによりコストが抑えられたので、その分運用などでお手伝いできる

上記ができるようになれば、サイト制作以外に力を持つこともできるし、力が持てれば請け負える案件も大きくできるし、単価も上がることも多くなる可能性が大きくなると思います。

もしWeb制作をしていって、ずっとこの仕事をしていきたいな。と思った場合は、ぜひ速さをとる意味と、速さの武器をもっと増やしていっていただけたらうれしいなと勝手に思っています。

このことを伝えたいなという意味もこめたくて、今年のアドベントカレンダーは「爆速」のことをまた語らせてもらいました。