Snow Monkeyの好きなところと、現在の制作の流れ

  • 投稿日
  • 更新日
  • 著者 kwmaster
  • カテゴリー 未分類

まえがき

今この記事を書いているのが12月1日の21時頃なんですが、最初にこの不親切なとりとめもない記事ができる言い訳から始めたいと思います。

キタジマさんのツイートでアドベントカレンダーの募集をされていることを知り、「昨年はいろいろ情報収集させてもらったなぁ」「今のところまだ空いているみたいだけど、書いたことがないし、自分が書くことはないなぁ」と案件に追われる忙しさも理由にして一度考えが終わりました。

しばらくして、オレインさんが常日頃アウトプットを啓蒙されていることを思い出し心がゆるぎます。(ほんとオレインさんの記事やYou Tubeではたくさん学ばせてもらいました。）「とはいえ、自分が書くことは無いなぁ。正確な情報提供もできそうにないし」と考えたのですが、のりさんが「自分のことだけを考えていたらダメだ。みんながよくなっていくことを考えないと！（正確に覚えていないんですがこのようなニュアンスだったような）」と言われていたことを思い出します。

腰が重いなぁと思うことを思い切ってやってみるのは良い経験になりそうだし、反面教師の内容が多くても、誰かが一部でも取り入れたい情報提供ができるかもしれないと考えはじめました。忙しさを理由にしたらダメだ。とりあえず登録してしまえばブログ記事のひとつくらいきっと書ける！と、キタジマさんにレベルが低い内容になるかもしれないことをお断りしてアドベントカレンダーに登録したのが、昨日でした。あちらこちらへの配慮をせずに自由に書こうと思うと、新しいドメイン取りたいなと思い、昨日mishima-hirugata.comという投げやりなドメインを取りました。

今朝、Xサーバーとの紐付けは終えたので、この記事が書き終わる頃には実際のサーバーにアップできるだろうと書き始めています。しかし時間がありません。文章主体で、最後まで読んでも得るものがないかもしれないことを予めお断りしておきます。

この記事の注意事項

過去の自分を対象にと、とりとめもなく書いていたらやっぱりとても冗長になったので、目次で飛んだり、飛ばし読み推奨です。

Snow Monkeyのことだけを書こうと思ったんですが、それについては先人のみなさんがより詳細にいろいろと解説されているので、Snow Monkeyを使ったひとつの受託制作の全体の流れを書きたいと思います。

なので、Snow Monkeyだけに言及するのではなく、WordPress、各種プラグイン、お世話になっているツール類などにも触れたいと思います。

また、本来解説の記事は図解だったりスクリーンショットがあるイメージなんですが、案件はどうせ終わらないので先に2時間前後でこの記事を書き上げようという隠れた目的を持っていますので、図解や詳細な説明は割愛させていただきます。気になる内容があったら、それぞれを詳細に解説された記事がネット上にありますので探していただければと思います。

さらに。制作会社勤務でもなく、小さな企業や個人事業の方を相手に営業というか請負内容の交渉、提案、制作、納品、保守までをほぼ一人で請け負っていますので、分業制の方や従来の制作のフローよりは粗い内容になるかと思います。制作後の手離れが良くの思想ではなく、社内にWebの担当者を置けないというところを割と好んで引き受けています。記事の更新以外は、電話・LINE・SNSなどで相談を受けたら月に何回かは自分が直接Webサイトを書き換えていく流れにしています。なぜかエクセルやWebサイト以外のことの相談もたくさん受けます。そのような請負状況のために、保守契約が前提で、最初の作り出しを制作費も低めに押さえていますが、工数少なく自由にやれているというのもあります。全員の方におすすめできる内容ではありませんのでご注意ください。

※MACを使っていますので、ショートカットやツールがWindowsでは異なるかと思います

Snow Monkeyの好きなところ

※テーマ、Snow Monkey Blocks、Snow Monkey Editorなど、ここではひとくくりにSnow Monkeyと表現しています。

・クラシックエディタ前提で自作テーマをつくっていたときより工数が数分の1になり、ブロックエディタで記事作成などもしやすいこと。（受託で請け負う時は、事前に制作フローやテーマ利用について案内は必要と思います）

・ブロックエディターの良さに気づけた事（ドラッグや矢印でセクションごと移動できたりするのが個人的に便利）

・テーマを入れて、カスタマイザで設定していくだけでサイトができあがっていくこと。メニューのレイアウトを始めカスタマイザでいろいろなバリエーションが作れること。サブナビゲーションの配置や、メニューをCSSで装飾したりも行いやすい。

・My Snow Monkeyを利用して様々なカスタマイズができること。子テーマを作らずとも、ある程度のカスタマイズができること。部分的に、テーマを上書き？する方法も用意されていること。フック類を豊富に用意されていること

・Snow Monkeyフォーラムでの、キタジマさんや、有志の方々による回答がかなり多岐にわたり、知見が豊富にあること

・キタジマさんが、日々バージョンアップですごい進化をテーマに与えていること

・項目ブロックがあること。PC、タブレット、スマホ相当のデバイスサイズごとにカラム数を出し分けできること。（項目ブロックの中身を自由ブロックにして、それぞれに追加CSSなどあてればかなり自由な表現ができると思います）

・ウィンドウサイズごとにブロックを表示・非表示が選べること。

・セクションの背景色やしきりのデザインなどが簡単に設定・変更できること

あげればきりがないんですが、本当に使いやすくドップリハマっています。

また、Snow Monkeyと出会う前は、オリジナルこそ大事、価値がある！と今思えばクラシックエディターにしか対応しない自作テーマを作ることに変なプライドを持っていました。

以前出会った粗悪なテーマの印象が強かったのもあると思います。アニメーションの見栄えがすごかったり、別の製作者が作ったサイトより自分が作ったサイトの方が複雑だ！機能が豊富だ！品質が高い！のようなことを比較して心の拠り所？にしていたりもしました。

Snow Monkeyで制作するようになると、Snow Monkeyならではの制約？（自分の技術不足でもあります）もあって、いかに他と違うサイトであるかというよりは、Webサイトの制作を依頼されるお客様のサービスについての理解を深めたり、正しく伝えるにはどうしたらいいかということに気が向くようになりました。もともと自分がこだわっていたことは、お客様にとってはどうでもよいことばかりだったとも気づきました。

以前は、Webサイトを制作されている方をライバル、競合と考えていたこともあったんですが、現実にホームページを作りたい人達の需要を考えるとぜんぜん自分では手が回らないのでそのような気持ちも今では無くなりました。

制作の流れのまえに。頻出で使っているツールやプラグインについて

制作の流れで案内を端折る気満々なので、何をいっているんだ？とならないように使っているソフト、Webサービス、プラグインなどを雑多にご説明します。思い出した並びで書いていますので、順不同ですみません。

Google スプレッドシート

案件ごとに、作業や更新の記録をつけています。作業名、日付、開始時刻、終了時刻、差分(その作業にかかった時間)、全体の累計の時間程度を簡単に集計しています。

日付はcommand + ;　現在時刻はcommand + shift + ;のショートカットで入力できます。
差分のところは、セルに=◯-◯くらいの簡単な計算を入れています。command + Dで、上のセルをコピーするのもよくやります。

差分みたり累計時間を集計すると、意外と時間かかっていないなぁとか、時間がかかったのは休憩時間の方だったなとか振り返れます。案件を受託した金額が適正だったかなども振り返ったりします。

LocalbyFlywheel

案件や機能をテストしたりなど気軽にローカル環境を作れるツールです。サイトの最新じゃない状態を再現するためや、リニューアル前の状態を再現するために作ることもあるので、現在60個くらい並んでいます。

All-in-One WP Migration

WordPressプラグイン。クラシックエディタを使っての自作テーマの時はGitやGitHubなどでバージョン管理をしたりしていのですが、Snow Monkeyを利用するようになってからはカスタマイズ以外ではそもそもコードを書かないのでこのプラグインを使うことが増えました。一度行った作業を2度行うのは絶対に嫌なので、ゲームで保存くらいの感覚で、作業単位でエクスポートしたりもしています。ローカル環境で作業を行う前には、本番環境から必ずエクスポートしてローカル環境にインポートするようにしています（本番の環境では記事が追加されていたり、本番環境だけで修正を行っていたり、ローカル環境のサイトはそもそも参照した際にコードを追加してしまって壊してしまうことがあるため）。エクスポートしたデータと別に、エクスポート時にバックアップデータが都度そのサーバーに増えますので、頻繁に削除するように心がけています。
買い切りのunlimited extension、dropbox extensionも利用しています。

Dropbox Plus

月1650円などで容量2TBで契約していますが、自分には必須のサービスです。ファイルが破損したり誤って上書きしても違うバージョンに戻せること、ダウンロードやアップロードが早いこと、スマートシンクという機能を使ってDropboxのオンラインのサーバー上にだけデータを残して、パソコンのストレージを節約できるところが気にいっています。

いつパソコンが壊れても良いように、すべてのデータをDropboxに入れています。特に、案件に関するすべてのデータは、Dropbox内の案件ごとのフォルダに全部入れます。スマホやカメラ内の案件に関するデータや、メール、LINE、チャットワーク等でもらったデータもできるだけ早めにいれます。数日おきにダウンロードやデスクトップにファイルがひとつも残らないように（使っていないデータが散らかっていると自分の場合は作業スピードが落ちます）、すべてそれぞれのフォルダにいれていきます。スマートシンクがあるのでAll-in-One WP Migrationでエクスポートしたデータも特に消すことなくどんどんDropboxにいれます。保守を請け負っているサイトは、All-in-One WP MigrationのDropbox Extensionを使って一定期間ごとに自動でこのDropbox内にバックアップする設定にしています。

Clipy for Mac

コピー＆ペーストを便利にしてくれるツール。連続してコピーできる機能も便利なんですが、案件ごとにスニペットというものを登録して、案件に関する単語を登録します。毎回手入力だと誤字が発生する可能性があり確認作業が無駄に発生するためです。簡単に思えるものでも入力はせずに、スニペットから呼び出すようにしています。

Google日本語入力辞書ツール

アルファベットの大文字小文字の使い分けや入力が苦手なので、Photoshopは、ふぉとで呼び出せるようにという低い次元でたくさん登録しています。All-in-One WP Migrationは、おーるで登録しています。よくメールで書くような、先方の人物名の登録もあったりします。

テキスト比較ツール difff

先方に文章をファイルでもらって、コピー＆ペーストで貼り付けた場合などの、最後のチェック時に利用しています。確認作業がだいぶ減りますので、その分実際に読み込んだり、意図しない場所に改行が入っていないかなどのチェックくらいで済みます。改行は気づきにくいので、デベロッパーツールで幅を変えて意図しない場所に入っていないか確認します。

LINE

印刷物からの文字起こしに使っています。パソコンでLINEにログインし自分だけのグループを作って、スキャンした画像や写メをアップします。アップした画像をクリックして、Tボタンをクリック→で文字認識、文字起こしができるので、誤った認識の部分を訂正したり、改行を整えたらそのまま貼り付けることができたりします。段落がある場合などはあらかじめトリミングした画像を使ったほうが手間が減ったりします。

1Password

WordPressのパスワードは案件ごとに記録していますが、そこからコピペで持ってくるのは大変なので利用しています。WordPressで自動生成される強力なパスワードをかならず利用するようにしています。

Transmit

FTPのソフトとして利用しています。.htaccessのファイルを触るときや、All-in-One WP Migrationを多用するにしても、CSSのファイル程度なら、FTPで上書きした方が早い場合もあります。

Visual Studio Code

複数の同じ単語を一瞬で書き換えていく様子を最初に動画でみたときはびっくりしました。コードはこんなに手早く入力されていくのか！と。できるだけショートカットを使うようにしてます。

拡張機能は頻出でみなさんが利用されているもの以外では

・Bookmarks　ブックマークをつけたところにジャンプできる
・Better Comments　強調したいコメントを赤く表示したりできる
・Live Sass Compiler　SCSSを保存する際に、自動でCSSを生成させる為に
などは気に入って使っています

また、Visual Studio Codeを使っている理由の一つに、新しいウィンドウをいくらでも開けることがあります。目的の機能やCSS等の表現を実現した過去のサイトを開いて、参照したりをよくやっています。

Spectacle

開いているソフトやブラウザを右寄せ、左寄せしたりするのに使っています。

Alfred

ランチャーアプリです。ショートカットで呼び出して、ソフトの頭の数文字をアルファベットで検索してからの起動が便利で、カーソルでタスクバーから起動するより早いです。

Google Chromeデベロッパーツール

以前は、CSSを当てずっぽうで書いて、ブラウザをリロード（command + shift + R)とすることが多かったんですが、デベロッパーツール上で細かい調整まで終わらせて、その複数行単位をSCSSのファイルに書くという流れになりました。

TDK Meta Checker

Chromeの拡張機能で、そのページのタイトル・description・OGPが1クリックで確認できます。ソースをみることもなく設定のミスにも気付けるのと、競合のサイトがどのように設定しているかを気軽にみることもできます。

Image Size Info

Chromeの拡張機能で、サイトの画像を右クリックして、表示している画像のサイズや重さをみるのに使っています。

背景画像を表示

Chromeの拡張機能で、背景に設定されている画像を別タブで開きます。

EWWW Image Optimizer

WordPressのプラグイン。様々な機能があるようですが、アップロードした画像の幅や高さを制限してリサイズさせることにだけ使っています。納品後に、クライアントが画像を重たいサイズのままアップロードしないようにしています。ただし、製作時は、自分が大きいサイズであげたい画像もリサイズされてしまうので、時々で幅や高さを制限したり、解除したりを臨機応変にする必要があると思います。

Photoshop

バナーを制作する以外でも、使う画像をトリミングしたり、影がきつい場合に減らしたり、Web用に保存して見栄えと重さのバランスを画像ごとに調整したりによく使います。画像をPhotoshopで調整せずにあげることはないので、Photoshopのいつも使う内容だけはショートカットを多用するようにしています。

写真や素材に文字を配置するスペースが空いていないときには、カンバスサイズを広げてから、コンテンツに応じて拡大縮小でそのスペースを作るという機能も便利に使わせてもらっています。

意識していること

※全般的に自分のマイルールです。

Webサイトが万能ではないことをお伝えする

お客様の課題解決がWebサイトのみでかなわないかもしれないことをあらかじめ伝えています。SEOにしろ、集客にしろ予算か手間のどちらかを投じてもらわなければWebサイトを作っただけですべて解決ではないことを伝えています。

WordPressを利用するのであれば保守前提でお伝えする

よほどパソコンが好きというお客様や体制が整っている企業でない限り、WordPressのサイトを保守していくことはお客様側では難しい、または負担になると考えています。制作費は捻出できても保守の予算や人をあてるのは難しいので放置する予定、というようなお客様については、自分ではお力になれないとあらかじめ距離を置いています。

保守で費用を頂く内容について

昔の感覚であれば、サーバー代がそこに入っているというイメージでしたが、サーバー代はささいな部分だと思いますので、アップデートの対応費用、更新費用、レクチャーなどの実作業の費用として保守の代金をいただくようにしています。原則として、ドメイン、サーバーの名義・お支払いはお客様側にもってもらうようにしています。

ECや予約の機能をWordPressとして持たせない

文章や画像の変更などは、バックアップをとってから本番のサーバーで直接修正を行ってもほとんど問題がないんですが、時にはかなり長大なLPの追加（費用は多少いただきます）や、複数箇所の改修などを依頼される場合もあります。その際にブロックエディタを用いてページを追加すると、ローカル環境での制作→テストサーバーで確認していただく→完成したデータを本番のサーバーにインポートのほうが好ましい場合が多々あります。記事の追加や修正であれば、その間手を止めてもらえばいいんですが、商品の注文データや予約のデータが日々WordPressの中に蓄積される状態だとAll-in-One WP Migrationでインポートして反映するのが難しくなります。ローカルで作ったページの中身をコピー＆ペーストや、制作したCSSをFTPで上書きで対処できる場合には良いんですが、修正箇所が複数になると正確に反映するのが難しく感じられます。できればAll-in-One WP Migrationでお客様にも確認してもらったテストサーバーのデータを読み込ませたいと考えています。また、ECや予約の機能にバグが発生した場合のサポートや復旧を考えると外部サービスの利用、連携をお客様に推奨しています。

パーマリンクの設定

お知らせや記事を更新される方の性格等を考慮して、パーマリンクを数字とすることもあります。この記事も数字です。

All-in-One WP Migrationでインポートした後

かならずではないんですが、All-in-One WP Migrationでインポートした後にパーマリンクの設定が変わって投稿した記事へのリンクが切れることがなんどかありました。インポートした後に、トップページ以外も問題なく見れることを確認するようにしています。

CSSにタイムスタンプをつける

頻繁に変更するCSSファイルにタイムスタンプをつけると、制作時の確認でブラウザを再読み込みしてくれたら変わりますのような無駄なコミュニケーションが減らせます。

画像を入れ替える際は、画像のファイル名を変える

上と同じ理由で、画像が変わっていないと言われるのが面倒に思うためです。

コピー＆ペーストの際は書式なしでのペーストも意識する

そのままペーストして都合がいい場合と、command + shift + Vで貼り付けた方が都合がいい場合があります。

ブロックエディタでは適切な位置でショートカットを使う

エディタの左下、たとえば、文書→セクション→段落と書かれた場所を常に意識して、今どこを選択しているかを踏まえてショートカットを使うと便利です。

選択した部分を option + control + Zで削除したり、

選択した部分をcommand + shift + Dで複製したり。項目ブロックの中身を自由ブロクで作り込んで、自由ブロックを選んだ状態で複製して、項目ブロックの中身を増やしてから画像や文字を変更するなどは良く使います。

選択している部分の前にブロックを追加 command + option + Tや
選択している部分の後にブロックを追加 command + option + Yについても、ショートカットを使わなかったら、操作がかなり面倒になると思います。

ブロックエディタのグループ化を使う

画像やブロックを複数作って、その複数を選択してグループ化。デベロッパーツールを見るとwp-block-group__inner-containerなどが選択した親要素に。さらにwp-block-groupがその親要素になっているので、グループを選択した状態で追加CSSクラスを追加。

仮にtestとグループの追加CSSを設定すると

.test .wp-block-group__inner-container {

}

と書けるようになるので、display:flexなどの指定をしたり、border、margin、paddingなどを指定することでかなり自由なレイアウトができると思います。

クライアントにその書き方をすすめることはできませんが、自分だけでゴリゴリ配置したり作っていく分には早いと思います。

My Snow Monkeyの名前を変える

My Snow Monkeyのプラグインの名前をたとえば、このサイト用であれば、custom-mishima-hirugataのように最初の段階で変えています。理由は、過去のファイルを参照することも多いのでVisual Studio CodeでMy Snow Monkeyを開くときに見分けがつくようにと、Macのファインダーのサイドバーに案件のフォルダと上下にならべて登録するマイルールを作っているからです。
1日に、複数の案件を触ることも多く、ファインダーのサイドバーで、目的の素材や情報、またVisual Studio Codeで、目的の名前を変えたMy Snow Monkeyをすぐに開けるようにしています。
※プラグインを有効にしたまま名前を変更すると不具合につながることが自分は多かったので、一度無効にしてから変更しています。

SCSSでは@mixinでメディアクエリを呼び出す

この運用、仕切り方があっているか正直わからないところでもあるんですが、SCSSの最初に下記の記載をしています。

@charset "UTF-8";

$se: 360px; 
$tab: 40em; 
$pc: 64em;
$pc3: 1300px;
$pc5: 1500px;
@mixin maxse {
	@media (max-width: ($se)) {
		@content;
	}
}
@mixin tab {
	@media (min-width: ($tab)) {
		@content;
	}
}
@mixin pc {
	@media (min-width: ($pc)) {
		@content;
	}
}
@mixin pc3 {
	@media (min-width: ($pc3)) {
		@content;
	}
}
@mixin pc5 {
	@media (min-width: ($pc5)) {
		@content;
	}
}

SCSSはモバイルファーストで書いているんですがデバイスサイズごとの記述をする場所には、必要な分だけ都度都度下記のように呼び出して細かく調整するようにしています。
Snow Monkeyでサイトを作る際には、確認するデバイスサイズとして、幅広・普通・狭いスマホ、タブレットサイズ、一般的なノートPCの1300px〜、1920pxのサイズ、外付けモニターで制限無しに表示した広さで確認するようにしています。
デザインありきで、画面いっぱいに広がるデザインの場合などはブレイクポイントがもっと細かくなったりします。

font-size: 18px;
@include tab {
     font-size: 20px;
}
@include pc {
     font-size: 30px;
}

CSSは限定的に効くようにする

完全にマイルールなんですが、Snow Monkeyは、ページごとにレイアウトを変えたりできるのでページごとにCSSを効かせたいと考えています。

.home .◯◯ {

}

のように、トップページのCSSは、bodyにhomeが振られることを利用して、トップページに限定的に効くようにしています。見出しのデザインなどトップページに限らないものはその限りではありません。LPのページがあれば、LPのページの子要素してCSSが効くようにします。限定するのと同時に、LPのページのためのものであることを明示的にしています

CSSは、一目見てどのページのどこに効いているのかわかるようにクラスを記述する

色だけ変えるなどをのぞいてマルチクラスではなく、シングルクラスで記載するのと、多少冗長でも後からそのCSSを変更するときに見た目で影響範囲がわかるように命名しています。

CSSのファイルは分割せずにMy Snow Monkeyで1つだけ読み込む

もともとSnow MonkeyのテーマやプラグインでほとんどのCSSがあらかじめ設定されているので記述が少ないのと、検索や目視で探しやすいように1つのファイルにまとめて記載しています。

Snow Monkeyを用いた受託制作の流れ

Webサイト、WordPressのサイトをお客様の後々の手間も含めて低コストで持っていただきたいこと、作って終わりではなく保守や更新でたずさわりたいことなどを伝えて、納得いただいた場合にSnow Monkeyを利用してのWebサイト制作の契約を交わしています。お客様は本業に専念していただき、社内のWeb担当を外部の私が担当するというイメージでの契約になることが多いです。

※Snow Monkey以外にも目を向けるべきかもしれませんが、いくつかのテーマを使い分けると、こちらのアップデート対応のコストや更新時のコスト等が増して、お客様のサポートが難しくなっていくのではないかと危惧して絞っています。

また制作のフローについてもあらかじめお伝えします。ワイヤーフレームを制作→デザインを提示→コーディングの流れではなく、Snow Monkeyをもちいて作ったテストサイトをワイヤーフレームとデザイン提示のかわりとすることをお伝えしています。実際にPCやスマホで見てもらいながらデザインの変更や内容の追加など修正していきますという流れです。公開後も修正を続けることができて、業態の変化に合わせて育てるホームページにしたいことを伝えています。

Webサイトで実現されたいことを聞き取って契約に至ったら、半金いれていただいてから実際の作業に入っていきます。

具体的な納品までの流れ

どのようなWebサイトにするかの打ち合わせは長めにとっています。お客様の嗜好や目的を取り違えると後工程の手戻りが多くなるためです。また、決済者や権限の有る方と打ち合わせを進めていけないと思われる場合は、最初の見積もりや契約時にそれを考慮してお互いに折り合わない場合もあります。

打ち合わせが終わって実際の作業では、まず何も考えずに作業できる部分でテストサーバーを準備します。（何度もやっているので、反映待ちを除くと実作業10分程度になっています）
テストサーバー用に取得しているドメイン（Xサーバー割り当て済み）のサブドメインをXサーバーで設定します。反映したら、FTPで.htaccessなどを用いてベーシック認証をかけます。WordPressをインストールします。All-in-One WP Migrationを入れて、インポートできる状態にします。）

ローカル環境を作って（ツールは前述）、あらかじめ作ってエクスポートしているデータをAll-in-One WP Migrationでインポートします（Snow Monkeyやよく使うプラグインなどを有効化、WordPressの設定なども一通りしているデータです）。

インポートが終わったら、パスワードなどを新たに自動生成のもので変更して、テーマやプラグインをアップデートします。サイト名などをざっくりと変更します。

お客様からヒアリングした内容をもとに、固定ページ、カスタム投稿、ウィジェット、カスタマイザによる調整、メニュー等の設定を行っていきます。最初にブロックエディタに文章を羅列してから装飾していったり、ページを分けていく場合もあります。考えられるすべての作業、必要な機能の設定を行っていきます。画像も仮の場合をのぞけばPhotoshopで調整してから入れていきます。My Snow Monkeyを用いて、CSSの調整、JavaScriptの調整なども行います。以前制作したサイトのMy Snow Monkeyを参照したり、Snow Monkeyのフォーラムで情報を探したり、フォーラムで質問する場合もあります。
素材サイトやPhotoshop、参考サイト、もらったデータなどの行き来が激しくなります。
この部分はワイヤーフレームの制作のようで、一発OKになる場合もあるので、徹底的に作業します。この作業を早ければ数時間〜十数時間で一旦サイトが完成します。（後出しでデザインデータを提出されたものにたいしてピクセルパーフェクトで再現した案件があったのですが、それはブロックの組み立てや一部テーマの上書きが発生したり、CSSの調整にかなり時間がかかりました、、、）

お客様に共有できる状態になったらローカルからAll-in-One WP Migrationでエクスポートして、テストサーバーのWordPressにインポートして、お客様に見ていただきます。

一発OKの場合もあれば、かなり修正が続く場合もありますが、ワイヤーフレームの提示、デザインの提示、コーディングのときよりは手戻りも工数も少ないです。

文章やデザイン、画像の変更等が終わると、SEOの面だけではなく検索結果としての見た目を考慮してタイトルやdescriptionを設定したり、サイトアイコン、サイトマップなどあまりお客様が意識されていない部分をプラグイン等を利用して設定していきます。

本番のサーバーにインポート後はメールフォームの送受信チェックをしたり、Google Search Consoleからインデックスを促したりサイトマップを登録、Google Analyticsの設定、実店舗の方にはGoogleマイビジネス(Google ビジネス プロフィール）の案内や登録を代行したり、公式LINEなど付随して利用されたいサービスのサポートをしたりとひととおりのことを終えて納品となります。

最後に

このサイトに関しては、受託して制作するサイトのような配慮は行っていません。この記載は間違っているよ。危険だよ！というのがあれば、訂正しますのでお知らせください。21時から4時間〜、ここで力尽きましたので簡素なままで公開してしまったことを重ねてお詫びします。