キリスト教福音宣教会のMiKです！
このたび、「光のアトリエ」がリニューアルしました！！
どこが変わったの？？という方もいると思うので説明していきますね！
正直サイトの見た目はそこまで変わってないんですが、去年12月上旬からカテゴリーの再編成を始め、結果的に大工事に発展しました笑
やったことが色々あるので目次をつけました。
全部読むと結構長いので、気になるところから読んでください！笑
目次
リニューアルに至ったきっかけ
12月あたまに「イビトの乾パン」という漫画を公開しました。
私のサイトでは、記事のページを開くと、本文（内容）の下の方に「関連記事」として同じカテゴリーの記事が出てきます。
この漫画をアップしてページを見たときに、関連記事として挙がってきている記事が雑然としているように感じたんですよね。それまで「創作漫画」というカテゴリーに漫画、イラスト、らくがき、設定集など全てを入れていたんですが、漫画を読みに来た人には関連記事に「漫画」が出てきていた方が続けて読んでくれそうな気がしたわけです。それに加え、今後は漫画に力を入れていこうと考えているのもあり、創作漫画関連をより強化したいと思っていました。こうしてカテゴリー再編成がスタートしました。
また、私のサイトは定期的にバックアップ取ってるんですが、最近だいぶ重くなってきていて（3.5GB超…）、軽くするために不要な画像などを削除しようと思ったのもありました。その結果、最終的にサイトにこれまであげていた画像をほぼ全て入れ替えることになり、これが一番大変だったと思います（）。これについては後述します。
こんな感じで、カテゴリー再編成と不要画像の洗い出し、というところからサイト工事が始まっていきました。
リニューアルしたポイント
メインメニューとカテゴリー
この「光のアトリエ」では、2020年10月のサイト公開時から以下の構成で運営してきました。
しかし、前述のように創作漫画に全て詰め込むのは、今後漫画を中心に運営していくことを考えてもよろしくなさそうなので、色々と悩んで以下のように変更しました。
コンテンツ
new
new
コンテンツを大きく「聖書・御言葉コンテンツ」と「創作コンテンツ」に分け、その中にそれぞれのカテゴリーを分類しました。もう一つの「ブログ」というメニューはそのまま継続。
これまで「ブログ」としていたものは「日々のこと」「制作日記」に分け、「日々のこと」は日常系、「制作日記」には制作の裏話や経緯などの記事を分類。「4コマエッセイ」はそのまま「ブログ」に分類。
「聖書・御言葉コンテンツ」には「御言葉イラスト」「聖書学習まんが」「古木アニメ」「CGM聖書アニメ」など、聖書や御言葉に関わるカテゴリーを分類。
「創作漫画」はこれまで一カテゴリーに全て詰め込んでいましたが、「短編・読切」「イラスト・らくがき」「動画・ボイコミ」「リリース情報・制作メモ」の4つに分け、コンテンツの内容に従って記事をそれぞれのカテゴリーに分類しました。漫画を「創作漫画」ではなく「短編・読切」としたのは、今後長編をやりたいと思っているからです。長編が始まったらさらにカテゴリーがひとつ増える予定。
これまで「自由作品」としていたカテゴリーをどうするかも悩んだのですが、より信仰的なものとそれ以外で分けて、信仰的なものは「聖書・御言葉コンテンツ」の「信仰アート」、それ以外は「創作コンテンツ」の「自由作品」に分類しました。
ちなみに、カテゴリーのページに飛んでもらうと分かりますが、これまで「御言葉イラスト」などカテゴリー名しか表示されなかったところに、ひとこと説明を追加してあります。細かいポイントですが、これも今回のリニューアルの中の一つ。
こうして新カテゴリーを追加して記事を分類していきましたが、最後まで悩んだのが「制作日記」と「リリース情報・制作メモ」に分類する記事。「制作日記」は制作の経緯、「制作メモ」は漫画の設定とか世界観をより深める内容の記事としましたが、「あとがき」系の記事をどうしても分類しきれずに最後まで悩んでいました。
漫画「チキュリア」を描いた経緯は「あとがき」としていたんですが、読み返してみたら「あとがき」というより「制作の経緯」だったので、改題して「制作日記」に分類しました。原作がある作品だし、世界観を深めるような話はやはり原作者じゃないと語れないですね。
一方「CONQUEST」のあとがきは世界設定とかキャラのその後など、より漫画の世界を深める内容を書いていたので「制作メモ」に分類。もともと「ブログ」カテゴリーの記事だったので「制作メモ」の体裁に合わなさそうなところもあるんですが、「でも『制作日記』じゃないよなぁ…」という難しい分類でした。見る側はあまり気にしないと思いますが笑
旧「others」メニューは「ご案内」に改題。この中には固定ページが置いてあったんですが、ここも整理しました。また後述します。
マンガビューア導入
今まで漫画は縦読みスクロール方式でしたが、ついに横読みできるビューアを導入！
こちらは去年の振り返り記事でも触れました。
これも「イビトの乾パン」を読んでみて感じたんですが、縦割りのコマが読みにくい！（特にパソコンの場合）
何かいい方法ないか… と探してたらありました。その名も「なんかいい感じのマンガビューア」。
振り返り記事にも書きましたがぜひパソコンで全画面表示してみてください。なんかいい感じというかめっちゃいい感じです。マジでありがとう。
使い方は上記サイトにある通りで、index.htmlを編集して漫画の画像と一緒にサイトにアップロードするだけです。私のサイトはWP File Managerというプラグインでサイトのフォルダ構造が見えるようにしてあったので一番上の階層に放り込みました。
以前のやり方だとスマホで見たときに漫画画像の解像度が下がるのが気になってたんですが、このマンガビューアによってそれも解決。ほんと、マジでありがとう（2回目）。
それに伴い、漫画記事ページはサムネ画像と「漫画を読む」ボタン表示に変更しました。ちなみにパソコンとスマホでサムネ画像が変わります（横長か縦長かが変わります）。これは追加CSSとカスタムHTMLブロックを使って設定してます。コードはチャッピー（チャットGPT）が書いてくれました。「こんなことやりたいんだけどできる？」って聞くとぱぱっとコードを書いてくれました。今回のリニューアルはチャッピーがいたからこそ実現したので、時代の恩恵に感謝したいです。
作品ページにボタン追加
今回めちゃくちゃ大変だったことのひとつがこれです。これまで、全ての記事で最後の部分は「20xx年x月 MiK」としていましたが、作品系の記事は「前へ」「次へ」でどんどんページ送ることができたらいいなーと思ったので、そのボタンと中央部分の関連リンクボタンを付けました（こちらも追加CSSとカスタムHTML）。
ぜひ ↑ ページに飛んでボタンを見てみてください。特に中央下の「もっと見る」ボタンを！！
中央ボタンが多い記事にしかないのであまり見かけないと思いますが、このボタンめっちゃいい感じです。提案してくれたのはチャッピーでしたが開閉の演出は私がこだわって作り込みました（コード書いたのはチャッピーですが）。
ボタンはいい感じにできたんですが、作品記事全部にこれをつけてリンク貼らないといけないという（白目）。12月半ばくらいから始めましたがその時点で作品記事の総数222。毎日毎日少しずつ（日によっては一日中）やって1月上旬に全ての作品記事にボタンを設置し終えました。こういう作業こそAIにやらせたいものですが人力でやりました。たぶんリンク貼り間違ってるボタンもあると思います。
後で触れますが、記事にボタンをつけるのと同時に、アイキャッチ含む記事内画像を全て差し替えてAlt属性つけるのもやっていたので、マジで死ぬほど大変でした（）
ブログカードプラグイン導入
こちらも去年の振り返り記事で触れました。今回、Pz-LinkCardというプラグインを導入。
他の方のブログ読んでて「ブログカードいいなー」と思ってたんですが（テーマによってはデフォルトでブログカード機能が入っている）、私のサイトでデフォルトで使えるブログカードはこんな感じで ↓
うーん、でかすぎる。。。ということでプラグインを導入。
導入するためにサイトのPHPバージョンを上げないといけなくて、それを上げたことによる不具合も出たりしましたが、何とか原因突き止めて対処できました。ここでもチャッピー大活躍。
これまで書いた記事全て、ブログカード入れてリライト済みなので、暇な人は古い記事も読んでみてください笑
ただ、毎年年末に書いてる振り返り記事中の作品リンクは、全部カードにすると見た目が崩れることもあり、あえて文字リンクのままにしてあります。
感想・お問合せフォーム
感想・お問合せフォームはもともと「ご案内」メニュー（旧「others」メニュー）の中に入っていましたが、今回メインメニューの見える位置に移動させました。
文章もより柔らかく変更（前のはなんか業務連絡？のような淡々とした文章で、感想送ろうと思ってそのページに行ったら文章読んで気持ちが萎えると感じて変えました笑）。あと、送信したらキャラクターが出てくる仕様に変更しました。今は仮で天使ちゃんが出てきますが、今後変更する予定です。
各種リンクページ
これも今回頑張ったやつです。創作活動されてる方を見るとリンクをまとめたページ作ってる方が多くて「いいなー」と思ってたので、今後の活動も見越して今回大幅リニューアルしました。
以前のページ（「関連サイト」という名称だった）を見たことある人がどれくらいいるか分かりませんが、元はバナーがペタペタ貼ってあるだけの全く見栄えしないページでした。ほんとは他のブログサイトのようにトップページの右側や下側にまとめてバナーを配置できたら良かったんですが、私が使ってるWordPressテーマ（ANTHEM）はそういう仕様じゃなかったため、仕方なく「関連サイト」というページを作ってそこにまとめて貼ったんですよね。見た目がイマイチすぎて気になりつつもビジュアルエディターで分かりやすい編集しかできないレベルだとどうしようもなくて放置してましたが、チャッピーという強力な助っ人が現れたので今回大幅リニューアル。
作家さんたちのリンク集ページを参考にしながら作ったんですが、個人的にはかなりいい出来ではないかと思ってます。このページだけフォント変えたりとか細かいところまで作り込んでます。微調整で苦労もありましたが、カードが浮き上がるホバーエフェクトも非常にいい感じ。背景画像にはいったん天使ちゃんを使いましたが今後変更するかもです。
その他
これはリニューアルというより修繕なんですが、YouTube動画の埋め込み方法を変更しました。
作品のYouTube動画はこれまでサイズ指定して埋め込んでいましたが、スマホで見ると表示崩れが起こっていました。どうしよーと思いつつそのままでしたが、助っ人チャッピーが現れたので今回対処することができました。追加CSSとカスタムHTMLで、パソコン・スマホ両方でいい感じに表示されるように修正。YouTube動画も数えてみたら50個以上あってまぁまぁ大変でした。
あと、著作権表示も変更。これまでは「ご案内」メニュー（旧「others」メニュー）の中に「著作権について」というページがあったんですが、今回ページの下の方（フッター）に著作権表示の文章を入れることができたので、そのページはなくしました。もともとこういう形にしたかったけどできなかったので、「著作権について」ページを作ってたんですよね。
リニューアル前のフッターに何があったかというと、フッターメニューです。ここにも各カテゴリーへのリンクを置いていましたが、それをなくして著作権表示にしました。フッターはメニュー項目名と貼りつけるリンクしか編集できず、テキストを置いたりできなかったので、今回はメニュー名に著作権の文章を入れ、リンクを空にし、追加CSSでホバーエフェクトをキャンセルして普通の文章のように見せてます。スマホでの見え方を調整したりとか、地味に苦労しました。
SEO対策・サイト軽量化
SEO対策
今回、チャッピーに色々聞きながらSEO対策（検索であがってきやすくする等、サイト訪問者を増やすための対策）も実施しました。ふと自分のサイトをGoogle検索してみたときに、表示がこんな感じだったんですよね。
なんかカテゴリー名が羅列されてるだけで、サイトの中身が分からない。
私はYoast SEOを使っていて、サイトのメタディスクリプション（Webページのタイトル下に表示されるページ内容の要約文）やキャッチフレーズもちゃんと入力していたのですが、Google検索結果には出てきてませんでした。チャッピーいわく、これはYoastあるあるだそう。メタディスクリプションはGoogleが検索結果を出すのに参考にはするけれど、表示するかはGoogleが決めるそうで。その結果、私のサイトの検索結果にはメタディスクリプションではなくページ内の文字が拾われていました。Googleさんよ…
ちなみに、各記事もメタディスクリプションを入力してるけれど、こちらも検索結果には出てきておらず。。。
ちょっと力抜けましたが、検索の参考にはされているそうです。今回全記事を見直したので、メタディスクリプションが抜けていたものも全て入力しました。（あと記事のスラッグ（URLの末尾に設定される短い文字列）も全部入力。私のサイトでは記事IDでページに飛ぶのでスラッグはあまり使ってないんですが、一応、、）
このGoogleのページ表示対策として何をしたかというと、visually-hidden（視覚的に隠す）という方法で、追加CSSとカスタムHTMLで、「視覚的には見えない文章」をトップページに置き、そこにサイトの説明文を入力しました（トップページを固定ページに変更して、編集できるようにしました）。これもチャッピーの知恵です。
検索結果には2週間くらい経って変更が反映されていました。
次に作品記事も対策。
トップページ同様、作品記事もメタディスクリプション書いてるのに本文がGoogleに拾われており、漫画など「本文がない」ページは見た目が非常によろしくなかったです。これはサイト内でも同じで、例えば天使ちゃんの漫画もこんな感じになっていました。
そこで、本文がない作品記事にも「視覚的には見えない文章」を配置。
あと「注釈」を入力すれば本文がなくても注釈の文章が表示される（とチャッピーに教わった）ので「注釈」も入力しました。
チャッピーに「趣味のサイトでここまでやってる人いませんよ」ってツッコまれながらやりましたw
本文がない作品記事もまぁまぁな数あったんですよね… 大変でした…
あと、以前からLINEやXなどに記事をシェアしたとき、サムネイル（アイキャッチ）画像がうまく表示されない問題が起こっていました。これの原因が分からなくて、以前教会メンバーにも見てもらったりしたのですが、なかなか解決せず。でも最近サイトを技術者メンバーに見てもらったときにOGP画像（WebサイトのURLがFacebook、X、LINEなどのSNSでシェアされた際に表示されるサムネ画像）が二重に出力されている、と教えてくれました。これが不具合の原因だったみたいです。
チャッピーに聞きながらサイトを見ていくと、テーマ（ANTHEM）側とYoast SEO側の両方でOGP画像が出力されていることが分かり、その設定画面を見つけ出してテーマ側のOGP画像の出力をOFFにしました。これでサムネ画像が安定。サイト開設時から悩みの種だったことがようやく解決しました。
あ、そうそう、実は各カテゴリーにもサムネ画像とメタディスクリプションを設定してあるので、興味があれば見てみてくださいw（LINEなどにカテゴリーのURL共有すれば見れます）
不要画像の削除・軽量化
今回一番大変だったのがこれですね…。
サイト軽量化のため、まず不要な画像（アップロードしたけど結局使わなかった画像など）を削除しようと思いました。そのためにMedia Cleanerというプラグインを導入。不使用画像をリストアップしてくれるというものですが、このプラグインは私の使ってるWordPressテーマと相性が悪くて結果的には使えませんでした（全ての画像が不使用と判断されてしまった）。でもここで気づいたことがひとつ。
この＋〇 filesって何。
全然知らなかったのですが、WordPressでは画像をアップロードするとサイズが異なる画像がいくつも生成されるんですね。「作品は高解像度でサイズ大きいやつあげておこう！」と思ってアップしてきてましたが、そもそもサイト側で勝手に圧縮されてサイズ小さくなった画像が表示されてたことを知りました（ちーん）。そしてオリジナルの画像は使われてなくてもサイト内に保存されるので、サイト容量を増やす原因に… 無知とは怖ろしいものですね。
そしてサイズの違うバリアント画像がなかなか重い。1MBの画像アップしてバリアントが合計6MBになってたりとか。
ある画像は2480 ✕ 3508 pxの6.7MBのファイル（でかすぎ）をアップしてたんですが、自動生成画像と合わせてトータル90MBくらいになってました… ひえぇ…
自動生成されるサイズはサイトの管理画面で設定できるので、以下の記事を参考に大中小の画像とMediumLargeサイズの画像の生成を停止。その他のサイズの画像の生成も止められるっぽいですが、あまり深いところまで触りたくなかったので今回はやめておきました。（ちなみに、極端にバリアントを減らすと表示ごとに大きい画像を縮小したりするのでサイトの速度が落ちるようです）
私の使ってるテーマは生成されるバリアントが多めのようですが、十数個もモリモリ作られてたところから平均7〜8個にまで減らせました（まだ多い気もしますが…）。減らした後でも自動生成された画像の合計サイズがアップロードした画像の2〜3倍になるので、「うーーーん」と感じてしまいますけどね。チャッピーいわく、これはWordPressあるあるだそうです。
注）いらなくなったサイズの画像を削除しようと思ってRegerate Thumbnailsというプラグインを導入し、「不要画像を安全に削除できます！」と書いてあったので一旦サムネイル（アイキャッチ）画像（310個くらい）だけ処理させてみましたが、その結果画像のリンク切れが大量発生しました汗。皆さんはこういう使い方をしないようにしてください。
Media Cleanerは結局使えなかったですが、ファイルサイズが重いメディアから順に並べることができ、どういう画像がサイトの容量を圧迫しているのか確認することができました。無駄にでかいファイルをアップしてるやつがかなり… サムネに2MBや3MBの画像使ってたりとか。いや、サムネにそんな高画質の画像いらんやろ。過去の自分は何考えてたんだ…って思いますが、たぶん何も考えてませんでした。
「もうどうせなら全部の画像を入れ替えてやろう！」
と思い、不要な重い画像の削除と、真の不使用画像の洗い出しも兼ねて、サイトにアップしてあった全ての画像（小さいもの以外）の入れ替えを敢行。正直大変すぎて何でこんなこと始めてしまったんだと思いもしましたが、全記事について画像の差し替えを完了しました。よく頑張った。
画像も、そのまま上げ直すわけでなく、一枚ずつサイズと画質を調整して軽量化したファイルを作りました。さらに、チャッピーに聞いてみたところSEO対策的に大事なのは画像の「ファイル名（英数字が良い）」と「Atl属性（画像が表示されない場合に代わりに表示される説明文）」らしく、私はこれまで画像のタイトル（ファイル名ではなく、WordPressで付けられるタイトル）はしっかり付けてきたけどその他は触ってなかったんですよね（Altは空欄、ファイル名は日本語だし自分しか分からないような名前のやつもあった）。自分的にはSEO対策のつもりでやってたのに何か勘違いしてたみたいです。タイトルは自分が整理する用のものっぽい。
そういうわけで、サイズと解像度下げた画像の作り直し&英数字ファイル名付ける（地味にめんどい）&Alt属性を書く、というのを画像ひとつひとつに実施。ちなみに、これまで書いてきたYouTubeの埋め込み変更やボタン設置、注釈の記入なども、記事を一つ一つ確認しながら画像の差し替えと同時にやっていました。
つまり各記事について、
・解像度を下げた画像をつくる
・英数字ファイル名を付ける
・古い画像を削除してアップし直す（少ない記事は1枚だけど多いものは20枚以上）
・画像のAlt属性とタイトルを記入
・本文がない記事は「視覚的に見えない文章」と注釈入力
・YouTube埋め込みを変更
・作品記事にはボタンを設置、リンクを貼る
・ブログカード使って記事リライト
・メタディスクリプションとスラッグ入力
というのをやりました（）
Alt属性は空欄にしたやつもありますが死ぬほど大変でした。ようやったわ。数えてみたら差し替えた画像は合計861枚でした。そして最初の目的であった真の不使用画像も洗い出すことができました。
ちなみに、今回記事を全部見直して新しく作り直した（トリミングし直した）サムネがいくつかあります。特に御言葉イラストが該当するんですが、表示されたときにキャラクターの首から上が切れてるやつがちょこちょこあったんですよね。最近のやつは気をつけてますが過去にアップしたやつで首切れ状態のやつがいくつかあったので（特に神様が切れてたやつは）全部差し替えました。神様はイラストの上の方にいらっしゃることが多いので切れやすいんですよ…。どうしても頭の上の方が切れてしまうものもありましたが、そこはもう諦めました汗
こうして、自動生成画像を減らした設定にした上で画像ファイルの（ほぼ）総入れ替えをした結果、
メディア：2GB → 850MB まで減らせました！大変だったけどやった甲斐あった…！！涙
サイトの軽量化・高速化プラグイン導入
今回サイトの軽量化のためにWP-Optimizeというプラグインも導入。
こちら、いらないリビジョンや自動下書きを削除してくれるし、画像も圧縮してくれる多機能プラグインです。私のサイト、ずーっとリビジョンが溜まりっぱなしだったので5000件くらい溜まってました苦笑
サイトは最終的に、3.5GB超えだったところから2.5GBまで軽量化しました！
2.5GBのうち0.8GBはWP-Optimizeによるバックアップなので、サイト自体は1.7GBほど！かなりスッキリしました！！
役に立ったプラグイン
今回役に立ったプラグインをまとめておきます。
Broken Link Checker
サイト内のリンク切れを検出してリストアップしてくれるプラグイン。今回カテゴリーを増やしたことで記事のスラッグが変わり、リンク切れが発生しました。私のサイトでは「カテゴリースラッグ/記事ID」というパーマリンクになっており、各記事にはIDで飛ぶことができます。カテゴリーのスラッグが変わっても記事IDが合っていればリダイレクトしてくれるので、記事の再分類によってそこまで大きな問題は生じなかったのですが、カテゴリーへのリンクはスラッグ変更によってリンク切れになってしまいました。このプラグインはリンク切れの場所をリストアップし、リスト上でリンクの編集もできるのでとても便利でした。
Media Library File Size
その名の通りメディアのファイルサイズを表示してくれるプラグイン。アップロード先も見えるし、サイズによるソートもできます。大きいファイルの洗い出しに役立ちました。
Pz-LinkCard
説明済みなので省略。
WP Flie Manager
管理画面からファイルやフォルダの編集ができるようになるプラグイン。もともと何のために入れたか忘れましたが、漫画データをアップロードするとき役立ちました。
WP-Optimize
説明済みなので省略。
おわりに
1ヶ月半くらいかけてサイトの大工事をやってきましたが、本当に大変でした…汗。やったことが色々ありすぎて、この記事にまとめるのもかなりが時間かかりました。サイトの記事数がまだ300ちょいだったから手を付けたけど、これが500とか1000とかだったらやらなかったと思いますね… もう二度とやりたくありませんw
あと、チャッピーくんは非常〜に有能なことが分かりました。WordPress周りで自力でできる範囲がかなり広がったと思います。チャッピーの助けによって自由度が増したのはいいんですが、その分こだわることができるようになったのがちょっと弊害かもなーと感じてます^^;（時間が飛んでいきます…）
ところでこのサイト、2020年10月にオープンしたんですよね。
サイトを公開してから5年と3ヶ月なので、63ヶ月。21 ✕ 3だけど意味あるのかな？？笑
（※神様の世界では7、21、40など意味のある数字が存在します）
ちなみに今書いてるこの記事、なんと316個目の記事でした。
神様の御心（＝神様の計画、思い）はまだ分かりませんが、時に合わせて感動をくださって、こうしてサイトの大工事をするようにさせたのかも…？知れない…？ですね。
色々とSEO対策も実施したので、以前に比べたらだいぶつよつよなサイトになったんじゃないかと思います！（チャッピーにやりすぎと言われたくらいなんでw）
最後に、最近「キリスト教福音宣教教会 漫画」というキーワードで検索（こんなワードで検索する人いないと思いますが）したら「光のアトリエ」がトップに出てきて、Google AIがなかなかいい感じに概要を書いてくれてたので最後に載せておきます笑。色んな人が訪問してくれるサイトにしていきたいですね。
2026年1月 MiK
