ホーム

WordPressテーマの開発︎

デザイン / WordPress


デザインで解決したかった課題

デモサイトはこちらになります。


テーマの特徴

主に以下かと思います。

  • 圧倒的に早い表示速度
    • 「PageSpeed」計測済み(80~90は安定的に出る)
  • 見やすいデザイン
    • 「Material Design」を踏襲
  • スマホに最適化させたデザイン
    • PCに特化したパーツを省き再構築する

になります。
順番に解説いたします。

圧倒的に早い表示速度

PageSpeed計測済みです。
実際の最高値が以下になります。

肌感覚ですが、かなり速い方だと思います。
ご存知の方もいるかもしれませんが、Googleは明確にページ速度を「モバイル検索のランキング要素に使用します」と公言しております。

情報としては少し古いかもしれませんが、これ以外にページ速度を検索結果のランキングに使用するという記事もないので、今も同じだと思います。

Googleが掲げている10の事実にも「3. 遅いより速いほうがいい」と書かれています。
つまり「ページ速度を上げる事そのものが、SEO最適化に繋がる」のです。

しかし多くの場合、WordPressのサイトは「ページ速度が遅い事が多い」です。
理由は単純で、WordPressの初版が世に出たのは「2003年5月27日」と、約17年前です。

WordPressは日々アップデートされていますが、しかしながら「ページ速度」という観点においては、まだ対応は未着手という印象を受けます。
つまり「検索結果がSEOに影響が無かった時代に作られたもの」だから今でも表示速度が遅いのだと、私は分析しています。

繰り返しになりますが、上記はあくまで「私個人の分析」です。
表示速度が遅くなりがちなのは事実ですが、全てのサイトがそうであるわけではありません。

私が作成したテーマは、考えうる必要最小限のみの要素だけ残して、徹底的に軽量化を意識しました。
だからスコアでも、高い表示速度が出るのです。

見やすいデザイン

私自身がデザイナーなので「見やすさ」にはかなりこだわりました。
そもそも自分でテーマを作ったのが「Material Designを踏襲した見やすいテーマがなかったから」なのも理由の一つです。

そこで「Material Design」を踏襲してテーマを作成しました。
現実に存在する紙とインクの法則を適用することにより、誰でも見やすいデザインを作る事が可能となります。

「Material Design」のIntroductionには、以下のように書かれております。

Material is the metaphor
Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.
Bold, graphic, intentional
Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience.
Motion provides meaning
Motion focuses attention and maintains continuity through subtle feedback and coherent transitions. As elements appear on screen, they transform and reorganize the environment with interactions generating new transformations.

これは要約すると以下のようになります。

  1. 現実の紙とインクの法則を適用させる
  2. 文字の強弱ははっきりとさせる
  3. アニメーションを使うなら意味を持たせる

になります。
Googleが公式に出している「Material Design」の法則性に照らし合わせれば、大抵の場合「見やすいデザイン」に仕上がります。

ちなみにMaterial Designを踏襲した事にちなんで、テーマ名は「MdTheme」としました。

ブログで大事なのは「見やすさ」です。
表面的なかっこよさや、読者が望んでいない権威性ではありません。

これは僕自身が、ブログを約1年間続け、190記事近く書いて、最高で月間5万PV・2万UUまで伸ばしたので分かります。
そもそも「ブログに適したテーマが少ない」印象を持ちます。

自分の中の仮説ですが、Material Designを踏襲していないので「読者が望んでいない無駄なもの」が多いのが原因ではないかと考えています。
例えば、ソーシャルメディアのボタンが多すぎたり、無意味なアニメーションがあったりとかですね。

スマホに最適化させたデザイン

つまりこれは要約すると「PCに特化したパーツを最適化させたデザイン」という事です。
これは言葉で説明するのが、少し難しいですね。

ブログのテーマの制作者というのは、基本的にPCで作業します。
なので自ずと、作るテーマは「PCに最適化されたデザイン」になりがちな印象を持ちます。

一方現代では、ほとんどの読者が「スマホで」インターネットを見ます(私のブログの読者の場合は8.5割がスマホ利用者です)。
そこに私は、デザインの上で読者と制作者のニーズが合っていないと考えました。

であれば、自分自身がスマホに最適化させたデザインで、テーマを作ろうと思いました。
主に徹底したものは以下になります。

  1. 「サイドバー」をフッターに移動
  2. ブログページ、固定ページはPCでも横幅を小さく
  3. アイキャッチ画像は小さくても問題なくレイアウトに

という感じです。
「無駄と思うものを徹底的に最適化」して、スマホで見てもPCで見ても形崩れしない、かつ表示速度も上げられるデザインに仕立て上げました。


その他の特徴

副次的なものですが、以下も私が作成したテーマの特徴だと思います。
  1. ブログ運営で培ったデータを応用する
  2. 管理画面からも無駄な要素を排除
  3. 無料アップデートを随時継続する

1. ブログ運営で培ったデータを応用する

これは主に「検索機能」ですね。
私のブログはヘッダーに検索機能があり、誰もが目にする場所に配置しました。

ですが、ほとんどの方が検索機能を利用していませんでした。
これは研究でも明らかになっていて、読者はブログ内検索をほぼ使いません。

参考までに、私のブログで現在(2021/05/11)から数えて直近3ヶ月、どれぐらいのユーザーが検索を使っているのか載せておきます。
記事を執筆して、タイトルを押されたらイベントが発火する設計にしました。


ユニークユーザー数

ユニークユーザーとは文字通り「Webサイトを訪れた人」です。
なので何回ブログ記事を読まれても、ユニークユーザーは基本的に1人しか表示されません。

ユニークユーザー数は「8,307人」ですね。
3ヶ月でそれだけの方に、私のブログを見ていただけた事になります。

検索数

それに対して検索を利用していただけた方は、なんと僅か「16人」です。
という事は、全体のユーザー数に対して検索数は「0.19%」という事になります。

1,000人いたら2人ぐらいは検索を使ってくれるという感じですね。
殆どのユーザーはサイト内では「リンククリック検索」を使うそうです。

In Navigation is more important, Gerry McGovern discusses that they “did some extensive task testing with a technical audience. 70 percent started the task by clicking on a link, 30 percent used search.” He argues that it’s faster and more natural to use the navigation links instead of typing in search queries.
出典:Myth #16: Search will solve a website’s navigation problems

なのでテーマを作り始めた当初から、サイト内検索は削除するか、フッターに配置しようと考えていました。
残したのは、あって困るものではないという、ただそれだけの理由です。

ちなみに「リンククリック検索」もデータを見る限りほとんど使われてなさそうです。
「8,307人」に対して「181人」しか、リンククリック検索を使っていませんでした😅

割合で言うと「2.18%」ですね。
おそらくほとんどの人が、検索エンジンからページへ来て、そのまま離脱かサイトを流し見してるのだと思います。

2. 管理画面からも無駄な要素を削除

テーマを買っていただいた方には「ブログ執筆にだけ注力させたい」と考えていました。
なので、管理画面からブログ執筆にいらない機能は排除しました。

排除したのは以下の機能になります。

  • コメント
  • カスタマイズ
  • ヘッダー
  • 背景
  • タグ

排除した背景もお伝えいたします。


「コメント」削除

昨今主にSNSを中心に、誹謗中傷によって亡くなられる方が増えている気がします。
実にいたたまれないと個人的に思っています。

そもそも、ブログにコメントが必要とされたのは「SEO対策になる」と信じられていたからです。
たくさんコメントがある方が、盛り上がっているブログになると信じられていました。

しかしGoogleは、明確に「文字数とSEOは関係ない」と断言しています。
読者からの声は「お問い合わせ」を通せば聞く事ができます。

コメントの承認制も、誹謗中傷に近いコメントが来たら、見た人はいい気持ちはしないでしょう。
精神衛生上の観点から言っても、昨今「コメントは不要」と断言できるので削除致しました。


「カスタマイズ」削除

これは上記でも解説した「スマホに最適化させた設計が崩されてしまうから」ですね。


「ヘッダー」削除

これは上記でも解説した「スマホに最適化させた設計が崩されてしまうから」ですね。


「背景」削除

ブログの執筆には必要ないものなので、削除しました。


「背景」削除

そもそも「タグ」と「カテゴリー」の違いはなんでしょうか?
この両者の違いが曖昧だと、記事を書く人に少しずつ混乱が生じます。

「タグ」でできる事は「カテゴリー」でも出来るので、不要と判断し削除しました。

3. 無料アップデートを随時継続する

これはその名の通りです。
そもそも私が開発したテーマは、は完成がないテーマだと思っております。

つまり「お客様の声を聴き続けて随時アップデートしていく」ということになります。
アップデートに伴い、料金を再度取るなどは行いません。

徹底的にブログ執筆に特化した設計にする

上記を意識して作りました。
なので以下のような方は私が開発したテーマには、以下の向いていないかもしれません。

  • 「コーポレートサイト」で使いたい型
  • 「既に運用中のブログ」がある型

お洒落さを追求したデザインではないので、コーポレートサイトとは相性が悪いと思っています。