WordPressでウェブサイトを運営している人にとって、こんなアルアルは日常茶飯事だと思う。

テーマ購入したのに、あとで見たこっちの方が良かった…

この記事は、こんな感情をなるべく排除するために筆者が行っていることを紹介していく。何となく良さそうと感じても、自分のコンテンツやサイトとマッチするとは限らない。

若干フレームワーク化しているような箇所があるので初心者向けではないが、少し慣れた人以上は十分に使えるはず。

では見ていこう。

テーマ選びの準備に必要なチェックリスト

テーマを選ぶに当たり最も重要なのは、自分は『何をしよう』としていて『何が必要』なのか全て書き出すことだ。これは、サイトの個性はデザインで決定しやすいからである。

相当に個性の強い文章や画像などを入れることが可能なら問題ないが、多くの人と同じテーマや色で、同じような事を書いている場合、差別化されることは非常に難しい。

筆者が日本製テーマを使用しない理由はここにある。自作は効率が悪いので、気に入ったテーマを海外サイト(Themeforest)から購入することにしている。

では、テーマを選ぶ際に筆者が使用している項目を見ていこう。

  1. 概要
  2. 対象者
  3. 必要な要素
  4. 候補
  5. 評価
  6. レイアウト確認
  7. ドキュメントを読む

上記の順序となっている。

概要

ウェブサイトの概要を文字として書き起こす。頭で考えているだけの状態と、少なくても良いので文字にした場合は、解像度が変わると思う。

対象者

ウェブサイトは誰を対象としているかを記載する。

必要な要素

必要な要素やポイントを書き連ねる。わかりやすくするため、例を紹介したい。

  • オシャレ
  • シンプルで無駄が無いこと
  • ページ読み込み速度が早い
  • Lighthouseで診断し脆弱性を多く含まないこと
  • GTmetrixでデモサイトが70点以上出していること
  • 高速化のためのチューニングが可能であること
  • 依存するプラグインが少ないこと

このように、使用するテーマに求めている要素を上げていくと、必然的に絞れていく。

候補

必要な要素を満たしたテーマを、候補として上げていく。

ここでも、わかりやすくするために例を紹介したい。テーマ名、パフォーマンス測定、簡単な評価などを記載していく。

  • hoghehoge1
    • GTMetrix:90
    • 評価:主従も列理事を著作でき目的なで上、著作作られ文が許諾権独自の出所対象でするられてはするます、対象の例外は、執筆しフリーに著作従っこととして引用可能ませですてなりである。
  • hoghehoge2
    • GTMetrix:70
    • 評価:主従も列理事を著作でき目的なで上、著作作られ文が許諾権独自の出所対象でするられてはするます、対象の例外は、執筆しフリーに著作従っこととして引用可能ませですてなりである。
  • hoghehoge3
    • GTMetrix:62
    • 評価:主従も列理事を著作でき目的なで上、著作作られ文が許諾権独自の出所対象でするられてはするます、対象の例外は、執筆しフリーに著作従っこととして引用可能ませですてなりである。
  • hoghehoge4
    • GTMetrix:92
    • 評価:主従も列理事を著作でき目的なで上、著作作られ文が許諾権独自の出所対象でするられてはするます、対象の例外は、執筆しフリーに著作従っこととして引用可能ませですてなりである。
  • hoghehoge5
    • GTMetrix:86
    • 評価:主従も列理事を著作でき目的なで上、著作作られ文が許諾権独自の出所対象でするられてはするます、対象の例外は、執筆しフリーに著作従っこととして引用可能ませですてなりである。

このような感じでパフォーマンスを測定して点数を記録することや、改善できそうな箇所を含めて簡単な評価を書いていく。

評価

あげた候補の評価を、記号で記していく。

例えば、

など4タイプほどで評価できると思う。

  • hoghehoge1:△
  • hoghehoge2:◎
  • hoghehoge3:◯
  • hoghehoge4:✕
  • hoghehoge5:◯

ここで、✕や△で評価されたテーマはボツにし、◯以上のものでレイアウト確認とドキュメントチェックを行っていく。

レイアウト確認

3つ以内に候補を絞れたら、PCとスマートフォンでのレイアウトを確認する作業を行う。

ChromeやFirefoxのDevToolsで確認してもよいが、大抵公開されているデモサイトを自分のスマートフォンで確認すると良いだろう。

DevTooslでレイアウトチェックを簡易的に行う

PCで確認しているサイトをスマートフォンで見るにはQRコードを使用すると楽。QRコードを一瞬で生成するのは、DuckDuckGoで『qr https://hoge.com』などを検索するのはオススメだ。

ドキュメントを読む

候補となるテーマのドキュメントに目を通しておこう。

ドキュメントで確認しておくと良い箇所は、

  • インストールの方法
  • アップデートの方法
  • カスタマイズ
  • 依存プラグインがある場合、その数と特性

などなど。

補足

できたら、パフォーマンス測定の際に、GTmetrixだけでなくLighthouseでの診断もかけたほうが良い。

方法は2つある。

  1. Chromeの拡張機能を入れる
  2. DevToolsから行う

筆者のオススメは②である。

理由は、ブラウザの拡張機能を増やすのは1)セキュリティ上、2)使用メモリの増大といった問題が起こるから。

DevToolsで行う場合は、以下の通りにするだけで良いので非常に簡単だ。

DevToolsの右上をクリックし、『Audits』を選択する。

各項目をチェックし、『Run audits』をクリックする。

5秒ほど、診断結果を待つ。

これだけだ!

まとめ

一度購入しアクティブになったテーマは、その後なかなか変更しづらい。

諦めてしまえば良いのだが、サイトを運営するのであれば満足したいもの。少し面倒だが、余分な出費と後悔を防ぐためフレームワーク化した準備を行うことは大切だと思う。

最初にブログを始めたときは無料テーマで運営し、扱いに慣れて人が集まったら有料テーマに移行するのがセオリー。この記事は、この有料テーマ購入におけるプロセスを体系化し、後悔を減らすもの。

筆者が依頼されたときや自分で作るときに使用している簡易的な方法を紹介したが、誰でも使えるものだと思うので、参考になれば幸いだ。

You May Also Like
続きを読む

月$3.5〜のAWS Amazon Lightsailで独自ドメイン&SSL化されたWordPressを構築してみた、中規模なコーポレートサイトやブログにオススメ

ロリポップで契約していたウェブサイトの動作が遅すぎたので、サーバーを移行しようと考えていた。小規模なウェブサイトであったし、VPSや新規にレンタルサーバーを契約するほどでもない。 そんな時、月$3.5から利用できるAWS…