【ブログ改造計画】都会のエレキベアを一新!カテゴリ整理からデザイン修正までを振り返る【WordPress】

JavaScript
マイケル
マイケル
みなさんこんにちは!
マイケルです!
エレキベア
エレキベア
こんにちクマ〜〜〜
マイケル
マイケル
みなさんゴールデンウィークはいかがだったでしょうか?
自分はこの通り・・・
20220508 02↑修正前
07 完成↑修正後
マイケル
マイケル
都会のエレキベアのデザインを一新していました!!
エレキベア
エレキベア
おおーーー!
ダサいダサい言っていたクマがついに手を出したクマね
スタイリッシュになった気がするクマ
マイケル
マイケル
遊びに出掛けたりもしていたけど、半分くらいはこれに注いだ気がするよ・・・。
ざっくりとした修正は終わったから、今日はどんな修正をしたか振り返っていくよ!
エレキベア
エレキベア
それはおつかれさまだったクマね・・・
楽しみクマ〜〜〜〜
スポンサーリンク

カテゴリ整理と振り直し

マイケル
マイケル
デザインを修正する前に、まずはカテゴリの整理から行いました!
下記が修正前のカテゴリと記事数になるのですが、どこが問題か分かるでしょうか?
20220508 01
エレキベア
エレキベア
なんか偏りがある気がするクマね〜〜
マイケル
マイケル
その通り!
「ゲーム・アプリ開発」「ラーメン日記」の子カテゴリが肥大化してしまっているし、
親カテゴリもざっくりしすぎていて、見たい記事まで辿り着けない状態になっているんだ。
エレキベア
エレキベア
確かに最初は何書くかすら曖昧な状態から始めたからクマね〜〜
マイケル
マイケル
そのため、「PC創作」カテゴリを大きく「ゲーム開発」「IT関連」に分けて
その中で更に言語やジャンル単位で辿り着けるように分割してみました!
20220508 03↑カテゴリを検索しやすいように分割
エレキベア
エレキベア
多すぎる気もするクマが、これなら見たいジャンルの記事に辿り着けそうクマね
マイケル
マイケル
ゲーム開発以外にもいろいろやっていたから分けるのが大変でした・・・。
そしてこれを200近くの記事全てに振り分けました・・・。
エレキベア
エレキベア
おつかれさまクマ・・・。

デザインの修正

マイケル
マイケル
カテゴリ整理が完了したところで、デザイン修正に入っていきます!

全体のデザイン方針を決める

マイケル
マイケル
まずはざっくりとしたデザイン方針を決めました。
20220508 02↑修正前
20220508 04↑修正後のイメージ
マイケル
マイケル
このような感じで、
・色数を少なくはっきりとさせる
・なるべくシンプルにする
・記事アイテムをグリッド表示、ウィジェットを個々で表示する

といった方針で進めることにしました。
エレキベア
エレキベア
こうやって見比べると以前のはかなり濁っている感じがするクマね・・・。
マイケル
マイケル
メインカラーは黄色、濃いグレー、明るいグレー、白の4色!
デザインセンスにはあまり自信が無いので黄色以外はモノクロ系を使用していきます。

/** 都会のエレキベアカラー */
  --eleki-color-yellow: #fff500
  --eleki-color-dark-gray: #222222
  --eleki-color-light-gray: #3d3b39
  --eleki-color-white: #f2f2f2
エレキベア
エレキベア
堅実な判断クマ・・・。

記事アイテム一覧のデザイン修正

マイケル
マイケル
方針が決まったところでデザインを修正していきます。
全体の見た目変更が優先のため、記事アイテム一覧のグリッド表示から進めていきました。
マイケル
マイケル
開発環境構築については以前紹介した下記記事の内容で構築しています。
エレキベア
エレキベア
TypeScriptとStylus環境クマね
マイケル
マイケル
修正手順としては元々設定されていたクラスをいじる形で
・一覧の背景色を削除してflex指定
・記事アイテムの見た目を修正

といった手順で進めて、最終的には下記のようになりました!
20220508 05↑記事アイテムをグリッド表示に修正
エレキベア
エレキベア
なんかすっきりしたクマね
マイケル
マイケル
また表示時、ホバー時にはフェードや動きも少し付けています。
01 記事アイテム修正↑動きも少し付ける
エレキベア
エレキベア
これだけでもだいぶ古臭い感じは取れたクマね

サイドバーのデザイン修正

マイケル
マイケル
同じ要領でサイドバーのデザインも修正しました。
記事アイテムと同じ様に、
・背景色を削除
・ウィジェット全体の見た目を修正

といった形で進めています。
20220508 06↑サイドバー、ウィジェットの修正
エレキベア
エレキベア
案外さらっといけるものクマね

ヘッダアニメーション作成

マイケル
マイケル
ざっくりとした見た目を修正したところで、ヘッダのアニメーションを作成していきました。
完成形は下記のようになります!
04 タイトルアニメーション2↑ヘッダアニメーションの作成
エレキベア
エレキベア
カッコいいクマ〜〜〜〜
マイケル
マイケル
こちらは個人的にGWで一番楽しみにしていたところで、
p5jsを使用して動的にアニメーションさせています!
エレキベア
エレキベア
p5js懐かしいクマ〜〜〜
なんでまたこれを使ったクマ?
マイケル
マイケル
ビルの図形は丸や四角といった簡単な図形で描画できるし、
ランダムで高さや窓の形が変わったら面白いだろうなと思ったんだ!
エレキベア
エレキベア
ええ、これ毎回ランダムに生成していたクマね・・・
負荷がかからないかが心配クマ・・・
マイケル
マイケル
俺もそこは心配だったけど、重い端末でも動いていたから大丈夫なはず、、!
また問題が出たら、フレームレート測定して低かったらGIFアニメーションにしたりといった対応をしてみようと思うよ!
エレキベア
エレキベア
(そこまでランダム生成したかったクマか・・・)
マイケル
マイケル
p5jsでのアニメーションをwordpressに導入するのは面白いと思うから、
詳細はまた別の記事で紹介しようかと思います!
エレキベア
エレキベア
そっちも楽しみクマね〜〜〜

画面遷移の実装

マイケル
マイケル
そして次は画面遷移アニメーションの実装!
これはよくある感じの横から流れるアニメーションですね。
05 画面遷移2↑画面遷移の実装
エレキベア
エレキベア
画面遷移があるとやっぱりカッコいいクマ〜〜
マイケル
マイケル
アニメーションは基本的にCSSで実装していて、
JavaScript側で「eleki-page-in」「eleki-page-out」といったクラスを付与することで発火させています。
    // 読み込み完了時(画像やリソースも含む)
    window.addEventListener("load", function(e) {
        // ローディングをフェードアウトする
        $(".eleki-splash-loader").delay(100).fadeOut('fast');
        // 一定病後に処理を行う
        window.setTimeout(() => {
            // bodyにappearクラスを付与
            $('body').addClass('eleki-page-in');
            // ヘッダーを表示する
            window.setTimeout(() => {
                Header.showHeader();
            }, 500);
        }, 200);
    });

    // ページアウト検知処理
    $(function() {
        // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
        $('a:not([href^="#"]):not([target])').on('click', function (e) {
            // ナビゲートをキャンセル
            e.preventDefault();
            // 遷移先のURLを取得
            let url: any = $(this).attr('href');
            if (url !== '' && url !== undefined) {
                // bodyにページアウト用のクラスを付与
                $('body').addClass('eleki-page-out');
                // 一定時間後に取得したURLに遷移
                setTimeout(function(){
                    window.location = url;
                }, 700);
            }
            return false;
        });
    });
↑画面遷移のクラス付与
マイケル
マイケル
また、1つ問題としてiOS Safariでは戻るボタン押下時にキャッシュされて遷移がうまく動作しないといった事象が起きたため、
下記のように強制リロードすることで対処しています。

参考:
iphone iOS safariの「戻る」ボタンの問題

    // iOSの戻るボタンでキャッシュが効かないよう再読込
    // https://stray-light.info/wp/ios-safari-backbutton/#toc2
    window.onpageshow = function(event) {
        if (event.persisted) {
            window.location.reload();
        }
    };
↑iOSの強制リロード
エレキベア
エレキベア
OS依存は面倒くさいクマね〜〜〜

キャラクター画像の描き直し

マイケル
マイケル
そしてキャラクター画像の描き直しも行いました。
基本的なデザインは変えていませんが、線をはっきりとして綺麗に描き直しています!
(左:修正前 右:修正後)
Michael
新マイケル 1 2x
Elekibear
新エレキベア 1 2x

↑キャラクターの描き直し

エレキベア
エレキベア
(2年間もこんな適当な絵で進めていたクマか・・・。)

ウィジェット作成

マイケル
マイケル
デザイン修正はざっくりとこれで完了ですが、
ウィジェットも新たにいくつか作成しました。

登場人物紹介

マイケル
マイケル
1つ目は「登場人物」ウィジェット!
ヘッダーからキャラクターが消えた分、サイドバーに載せておこうという根端です。
20220508 07
エレキベア
エレキベア
サイドバーにあった方が分かりやすくていいと思うクマ
ゴロヤン
ゴロヤン
ゴロ〜〜〜〜〜

開発アプリ、アセット紹介記事の掲載

マイケル
マイケル
そして開発アプリ、アセット紹介記事についても
サイドバーに載せることにしました。
20220508 08
20220508 09
マイケル
マイケル
(これでみんなアプリダウンロードしてくれるはず・・・。)
エレキベア
エレキベア
心の声が漏れてるクマ・・・。

ラーメン占い

マイケル
マイケル
最後に遊びで「ラーメン占い」ウィジェットを作ってみました!
06 ラーメン占い
エレキベア
エレキベア
(なんだこれクマ・・・)
マイケル
マイケル
無駄に大量に書かれたラーメン記事を活用するため、ランダムで1つ表示しています。
これによりラーメン記事を見てくれる人が増えるはずだ!!
エレキベア
エレキベア
飯テロはやめてほしいクマ
マイケル
マイケル
処理内容としては、
・PHPで何件か取得してidを採番、非表示にしておく
・ボタンがクリックされたらランダムで表示する

といった処理にしています。
        <script>
            /**
             * ラーメンをランダム表示する
             */
            function OnRandomRamenClick() {
                // 全て非表示にする
                $('.js-random-ramen-item').hide();
                // hiddenパラメータからmax値を取得し、ランダムでラーメンを表示する
                let max = $('#random-ramen-max-count').val();
                let random = Math.floor(Math.random() * (max - 1));
                $('#ramen'+random.toString()).show();
            }
        </script>
↑ラーメンのランダム表示
エレキベア
エレキベア
案外面白いアイデアかもしれないクマね

おわりに

マイケル
マイケル
というわけで今回は都会のエレキベア大改修でした!
どうだったかな??
エレキベア
エレキベア
大変そうな感じはしたクマが、1つ1つやっていくと
案外簡単にカスタマイズできて楽しかったクマ
マイケル
マイケル
Webの勉強にもなったし楽しかったけど、
やっぱりWordPressやプラグインの更新で表示が崩れないかは心配だね・・・。
まあ仕組みは理解したから何かあった時にもすぐ対応できるでしょう!
エレキベア
エレキベア
あとは吹き出しや見出しあたりの
細かいデザインも修正していきたいクマね
マイケル
マイケル
その辺も今後少しずつ修正していく予定だよ!
それでは今日はこの辺で!!アデュー!!
エレキベア
エレキベア
クマ〜〜〜〜

【ブログ改造計画】都会のエレキベアを一新!カテゴリ整理からデザイン修正までを振り返る【WordPress】 〜完〜

コメント