2024年に事業サイトを「X-T9」でリニューアル、その感想。

,

本記事は広告が含まれる場合があります。

こんにちは。浅川です。
いつもブログをご覧くださいまして、ありがとうございます。

この記事は「Vektor WordPress Solution Advent Calendar 2024」の12月3日の記事になります。

前回の記事、ベクトルスタッフの Kei Matsuda さんの「WordPressでワンストップ作成!アイキャッチ画像をブロックエディタだけで作ってみた」より、バトンを繋いでいます。

本日の記事は「2024年に事業サイトを「X-T9」でリニューアル、その感想。」としてご紹介します。よろしければお付き合いくださいませ。

2024年、やっと事業サイトをリニューアル

事業サイトというのは、今ブログを書いているこのサイトです。
こちらのサイトは、フリーランスエンジニアである私・浅川のビジネス用のサイトですが、まだ会社員だった7-8年前に「WordPress で技術ブログを書いてみよう!」と思って立ち上げた経緯があります。

ちなみに、最初の投稿は2行しか書いていません、笑。
その後にフリーランスとして独立することになりますが、来年(2025年)には開業7年目になります、本当にあっという間でした。

さて、そろそろ本題に移ります。
会社員時代にブログを書いていた時には、本当に一般的なブログサイトでしたので、トップページ(ホームページ)は「最新の投稿」を表示していただけでした。その後の独立のタイミングで、トップページやサービスページを付け加えて、現在に至っています。
この間、ブログを定期的に更新していますが、テーマの入れ替えを含むリニューアルは、今回が初めてでした。ずっと、やります、やります。と言っていたのに、ついつい自分のサイトは後回しになってしまっていて、今年にようやくできました。

リニューアルするにあったって

リニューアル前のサイトの状態ですが、見た目に関しては個人的にとても気に入っていたので、デザインを大きく変えることは考えませんでした。テーマを入れ替えるとするなら、ブロックテーマを使いたいと思ってしましたので、ベクトルさんの「X-T9」を選ばせてもらいました。

リニュアールの前後と比較すると、WordPress 環境をモダンにすることができるようになったと思います。

  • PHP8系統の最新版へ対応
  • テーマ入れ替えとPHPのバージョンアップに伴う速度改善
  • Classic Editor から Block Editor へ完全移行
  • (ブロックテーマができることが増えたので)以前より使用しているプラグインを5つほど減らせた
  • カスタマイズ部分は「追加CSS」のみで対応できた(以前は子テーマを作ってPHPでコード書いていた)
  • テーマの入れ替えは事前にローカルで少し試して「いけそう」と思って、週末に更新しました。

私の中ではブロックテーマにすることで、カスタマイズで PHPでコードを書く必要がなくなり、管理画面からのレイアウト設定と、追加CSSのみで対応できるようになったのは、WordPress の進化を感じました。

特にトップページなどのデザインの要素が多いページをノーコードで制作できる点は、ブロックテーマ / ブロックエディターを使うメリットが大きいと思います。
サイトを所有するビジネスオーナーさんやウェブ担当の方が外注しなくても、サイトをカスタマイズできることは、CMSである WordPress としてはとても良いことだと思います。

WordPress をお使いの方で、クラシックエディター時代からのサイトを利用されている方もまだ多くいらっしゃると思いますが、進化した今の WordPress を一度体感してほしいなぁ、と思ったりします。

Vektor Passport の使いどころ

ベクトルさんの製品をお使いの方はご存知の方も多いと思いますが、有償サブスプリクション「Vektor Passport」はサイト制作する時にとても重宝しています。個人的にとてもお値打ちだと思うのは、VK Pattern Library プレミアムパターン、VK Blocks Pro プラグインです。
どちらも、自身で HTMLコーディングから行うことを考えれば、コピペひとつ or クリックひとつで、高機能なパターンだったり、ブロックを追加することができるので、サイトの制作は捗ると思います。

枠線ボックス

VK Blocks はこんなブロックをクリックひとつで設定できます!

Vektor Passport(ライセンス期間1年)

おまけ:岐阜 WordPress Meetup で作者の石川さんのお話を聴けました

2024-11-16(土)、「岐阜 WordPress Meetup」に参加することができまして、石川さんの「プロっぽいページには理由がある ブロックパターン時代のページデザインのコツ」というセッションを聴くことができました。

おそらく、石川さんのセッションをきちんとお聞きするのは初めてだったんじゃないかと思います。
(石川さんはWordCamp などで度々登壇されていますが、Camp の時には私がスタッフしていることが多いので、セッション会場に居ません…)

感想を一言でいえば、ものすごい熱量を持って、テーマ・プラグインの開発をなさっているんだなぁ、とうことでした。

HAMWORKSの長谷川社長(ハムさん)の真後ろの席だったので、大きく後ろ姿が。ごめんなさい。

セッションの内容をすごく簡単に要約させてもらうとこんな感じです。

デザインする時の悩み

  • 自分で作るとイマイチになってしまう
  • パターンライブラリを作ると時のコツ

デザインする時のコツ

  1. 情報のグルーピングを徹底する
  2. 情報の重要度を徹底する

ウェブサイトにおけるデザインとは?

  • 情報をいかにストレスなく伝えるか
  • エンジニアでも(デザインを専門にしない人であっても)理論的なことを詰めていくと、プロっぱいデザインになっていく

デザインの考え方

情報の構造を意識して装飾する作業であり、デザイン = 見た目のマークアップ、するということ。

  • 伝えたい事・重要度を判断して要素の見た目を調整する
  • 余白を制するものはデザインを制す

WordPress の進化に伴う影響

クラシックエディター時代ブロックエディター時代
結果的に自然と収まっていた・スペーサーブロック
・各ブロックでのmarginなどの設定が可能に
・etc

ゆえに今のブロックエディター時代は、

  • 余白が自由すぎる
  • 余白のルールを更新担当者も理解しておくべき
  • 余白のガイドラインをつくっておく

VK block パターンでは、「余白のパターンガイド」を作成している。
パターンを改変しておかしくなっていく例としては、余白が意識されていないためで、要素を削除した時に、不要なスペーサーの領域を削除することが大切。

私がこれまで意識が向いていなかったことでしたので、とても勉強になりました。ありがとうございます。

まとめ

自分のサイトの環境もリニューアルされたことですし2025年は定期的に更新して、ブロックテーマ時代の WordPress 開発・制作に食らいついていきたいです。

明日(12/4)は、Yuko Toriyama さんによる「VK パターンライブラリのカスタマイズ事例を紹介」とのことです。お楽しみに!

お問い合わせはこちらから

南大阪を中心に活動しているシステムエンジニアです。これまでの経験から、ビジネス課題について一緒になって考え、課題解決のためにサポートさせていただきます。些細なご相談でも構いません。当方に期待することやご相談内容についてお聞かせください。初回のご相談はオンラインで無償対応いたします。

連絡先:050-5050-2860

PAGE TOP