© あるような All rights reserved.
制作事例：ブログ「完璧やーめたっ！」リニューアル作業
今回はXやInstagramでいつもお世話になっているレイさん（@reimama100、@reimama100）の運営されているブログ「完璧やーめたっ！」の新テーマへの移行作業とデザインリニューアルのご依頼をいただきました。
「完璧やーめたっ！」は3児のお子様を育てながらフリーランスのWebライターとしてご活躍されているレイさんが効率的に家事を回すべく試行錯誤されながら辿り着いた知恵などが詰まっている素敵なブログです。
ホットクックのレシピはどれも簡単なのに美味しそうなのでみなさん必見です！
さて、WordPressのテーマは同じテーマを長く使うほど変更作業も大変です。
影響範囲がサイト全体に及ぶ上に設定や今まで書いた記事のデザインを再構成する必要もあるためです。
今回は思い切ってテーマ変更を選択されたレイさんの決断が良かったと思っていただけるよう全力でサポートさせていただきました。
目次
今回の主な作業
- WordPressテーマの移行作業支援
- ブログのロゴマークのリデザイン
- TOPページのリニューアルデザイン
新しいテーマへの移行と合わせてTOPページのリニューアルデザインもご依頼いただきました。
その際にロゴマークのリデザインを合わせてご提案したところご快諾いただいたので、ロゴマークのデザインも今回行います。
デザインの開始前にブログのコンセプトと依頼主のお好みをヒアリング。その内容をロゴデザインとTOPページに落とし込んでいきます。
TOPページのリニューアルデザイン
レイさんからのご要望と、こちらからの提案を擦り合わせた結果、リニューアルのテーマは「記事につながる導線の改善」としました。
たくさんある有用な記事に辿り着くまでの遷移数をなるべく減らし、TOPページから多くの記事にアクセスできるようコンテンツを構成します。
また、折角リニューアルするので見栄えのいいローディングアニメーション、スクロールアニメーションを取り入れることにしました。
メインビジュアルに検索窓を設置
レイさんの要望でメインビジュアル内に検索窓を設置しました。オープニングアニメーションの最後に検索窓が登場することで視線の誘導を狙っています。
ローディングアニメーション
ローディングアニメーションとしてロゴ画像のSVGアニメーションを作成しました。
読み込み後はそのままTOPページのメインビジュアルのアニメーションがはじまります。
カテゴリー用のイラストは自作です。
人気記事エリア
人気記事エリアはSWELLにあらかじめ組み込まれている機能（Swiper）を使ってスライダーにしました。
記事リストが自動で動いていくほかにナビゲーションを利用してページ送りができます。
SWELLの投稿リストブロックをカスタマイズして利用しているため記事の差し替えがブロックエディたーから簡単にできます。
オススメ記事エリア
おすすめ記事はSWELLのリンクリストブロックを使用しています。自由に記事を差し替えできるエリアとしてご用意しました。
自由な文言で好きな記事をリンクできます。
また、メインビジュアル用に描き起こしたイラストをそれぞれ利用しているのでフリー素材を利用するよりも統一感が出ています。
キーワードリスト
ご要望にあったタグのリストを、カテゴリーも含めてキーワードリストとして作成しました。
タグクラウドブロックを利用しています。少しカスタマイズして色味などを調整しています。
こちらのパーツはフッターに含めることで全ページに表示され、サイト内でのユーザーの回遊を促します。
ロゴマークのリデザイン
まずはヒアリングさせていただいた内容を元にロゴマークの初稿案を5案作成して提案しました。
ロゴデザインの制作テーマ
- 親しみやすいPOPな雰囲気
- 「完璧」と「やーめたっ！」の対比
- 「やーめたっ！」は力強い意志と勢いを出すため太めの字体
「ホットクック」のカテゴリーがブログの中心でもあるため、イラストを作成して押し出す案も提案させていただきました。
最終的には「E案」を選んで頂き、その後ブラッシュアップ。何度かやり取りをしてロゴデザインが決定しました。
また、今回作成したロゴデータはpng、svg形式などを含めたロゴセット一式として依頼者にご提供させていただきました。
ロゴデータは様々な形式や状態で求められることが多いので柔軟に対応できるロゴセットをご提供させていただいています。
WordPressテーマの移行作業支援
「Cocoon」から「SWELL」へのテーマ移行
今回ご依頼をいただいた「完璧やーめたっ！」ではWordPressというCMSと「Cocoon」というテーマの組み合わせでブログサイトが構築されていました。
今回はテーマを「Cocoon」から「SWELL」に乗り換えるということで、移行作業がスムーズに進められるよう諸々のお手伝いをさせていただきました。
テーマ移行を本番環境で行うことはリスキー
WordPressを使用していて、テーマを乗り換える場合、本番環境でそのまま移行作業を行うことはとてもリスキーです。
- テーマ移行中の不完全な状態のサイトを公開したまま作業することになる
- アクシデントがあった際にサイトが閲覧できなくなる可能性がある
- バックアップの取り方次第では壊れたサイトが修復できないこともある
などのトラブルがよくあるので収益化されているサイトの場合は特に慎重に考える必要があります。
下記のような工程でテーマの移行作業を行うと失敗が少なくなります。
- 本番環境と同内容のテスト環境を作成して新テーマに切り替え。サイト全体の手直しを行う
- 何かあっても復元可能なバックアップを作成しておく
- 作業後はテスト環境を確認してから本番環境に反映する
複雑な工程や、取り返しのつかない作業もあるので、経験や知見があるプロに頼むのが安全だと思います。
テーマ移行から公開までの主な流れ
STEP
テスト環境の作成
レンタルサーバーに適用されているドメインのサブドメインを取得。
（例：test.aruyouna.com）
用意したサブドメインに本番環境と同一内容のテスト環境を作成します。
テスト環境にはBASIC認証をかけます。
パスワードを入力しないと閲覧できないようにすることで、検索エンジンのクローラーがテストサイトに入ってしまうことや、第三者に修正中のページが見られてしまうことを防ぎます。
STEP
テスト環境のテーマを移行する新テーマに変更
テスト環境のテーマを新しいテーマ（今回は「SWELL」）に変更します。
変更したテーマが適用されたサイト内のページを一通り確認したら、WordPressのバージョン、テーマ、プラグイン等をアップデートします。
また、テーマの初期設定も行います。
「SWELL」の場合はカスタマイザー、SWELL設定から諸々設定できます。
ふきだしパーツの設定なども先に決めておくと記事のデザイン変更などがスムーズにできますね。
STEP
投稿、固定ページ内のブロック要素を新テーマのデザインに変更
「Cocoon」時に作られた記事を「SWELL」特有のデザインに変更します。
ひとつひとつの記事を開いて打ち込み直していく根気のいる作業です。
テスト環境を用意したので本番環境の記事とテスト環境の記事を横に並べて作業できて便利です。
今回記事のデザイン変更は依頼主に担当していただきましたが、弊社で記事のデザイン変更を行うことも可能です。
その際は変更する要素の一覧を用意して内容を相談・調整してから、各記事に反映します。
STEP
その他ページのデザインや設定などを確認・調整
サイト全体のページを確認してデザインが崩れていたり、意図しない要素が表示されていたら適宜調整していきます。
調整した箇所
- TOPページをサイト型に変更（デザインのリニューアルを含みます）
- ウィジェット周りの設定とデザイン
- カテゴリーTOPページのデザイン調整
- スマホ時に独自の設定が必要な箇所の調整
- OGP設定の見直しや画像の追加
など
設定する項目は意外に多いため見落とさないように注意です。
STEP
テスト環境のサイト全体を確認
手持ちのPC、スマートフォン、タブレットを使ってレイアウトの崩れがないか確認。適宜調整していきます。
本番公開まえに調整できる最後のタイミングになるので、依頼主にも確認していただきます。
STEP
テスト環境の内容を本番環境に反映して公開
テスト環境で構築した内容を本番環境に反映させます。
本番公開には事故がつきものですが、弊社がこれまでWordPressの移行、テーマの移行を数百回おこなってきた中で事故がおこりにくい手順をケースに合わせて選択します。
とはいえ本番公開時はいつもドキドキです
STEP
移行漏れや崩れがないか確認
公開後は移行漏れがないか、ツールと目視でサイトを一通り確認します。
調整が必要な箇所があれば適宜修正して移行作業の完了です。
まとめ
今回の制作で担当した作業
- テーマ移行の準備
- テスト環境の構築
- ロゴマークのリニューアル
- イラストの作成
- TOPページのリニューアル
- ローディングアニメーションの実装
- 設定の確認や調整
- 本番公開
その他
今回はWordPressテーマの移行作業支援とTOPページのリニューアル作業を担当させていただきました。
リニューアル後に依頼者のレイさんからも「思っていた以上のものが出来上がり感動しています」との声をいただき、ほっと胸を撫で下ろしています。
今回はご依頼いただき、ありがとうございました。
引き続きお力になれることがあれば、どんなことでも対応したいと思いますのでよろしくお願いいたします。
SWELLは高速化の下地や構造化データの機能が入っているなど、SEO対策としてみても魅力的なテーマです。
SWELLの持ち味を最大限に活かしつつ、個性的なサイトを作るためのカスタマイズや他のテーマからSWELLに移行するお手伝いなどもお任せください。
制作事務所 あるような
ではお客様のお困りごとに柔軟に対応しています。
Webサイトやブログの移行、リニューアル、新規立ち上げなど、様々なケースに合わせてしっかりヒアリングを行い、課題やお手伝いが必要なポイントを洗い出します。
まずは、どんなことでもお気軽にご相談ください。
