脱サラ攻略ブログ

WordPressテーマ自作のメリット・デメリット。【デザインが自由】

2021.10.2

当サイトは、WordPressの自作テーマで運営しています。いろいろなテーマがあるのにどうして自作したの?って疑問に思う人もいるかと思います。

そこでこの記事では、WordPressテーマ自作のメリット・デメリットについてお伝えしていきます。

テーマ自作を考えている人には参考になるはず!

筆者のスキルは、HTML・CSS・JS(Jquery)・PHPを多少触れる程度です。それでもテーマ作成はできます!

テーマ作成のメリット

  • サイトに愛着が持てる
  • 自分の好きなデザインにできる
  • パフォーマンスを改善できる
  • Web制作の一通りのスキルが身につく

サイトに愛着がもてる

例えるならゲームでキャラを育成していくような感じ。多少デザインが崩れていても可愛いものです。自分のスキルの習熟に伴って成長していくサイトは無料・有料テーマとは別次元の愛着が湧きます

自分の好きなデザインにできる

無料テーマ・有料テーマどれもしっくりこない…そう思った人は、自作するかプロのデザイナーに頼むしかありません。自作するならお金もかからないですし、自分の好きなデザインにすることができます。

パフォーマンスを改善できる

有名なWordPressテーマは、いろいろな人が使いやすいように機能もレイアウトもてんこ盛りです。それによって、CSSやJSの量が多くなって通信するときのデータ量が多くなります。これがパフォーマンスを落とす1つの要因です。

自作する場合は、自分が使う分だけのCSSやJSを記述すればいいですし、プラグインで提供されている機能も調べれば簡単に実装できるものがあります。

リソース量を最小におさえたテーマが出来上がるのでパフォーマンスが大幅に改善されます。

Web制作の一通りのスキルが身につく

HTML、CSS、JS、PHP一通り使うことになるので、Web制作のスキルがたっぷり身につきます。1度経験してしまえば、知人に頼まれても作ることができますし、Web制作の副業案件を獲得することもできるようになりますよ!

テーマ作成のデメリット

  • 実装に時間がかかる
  • 他のサイトより見劣りする可能性がある

実装に時間がかかる

とにかく実装に時間がかかります。ざっくり制作手順を紹介すると次の通り。

  • デザインのワイヤーを引く
  • 静的サイトを作る
  • WordPressに組み込む
  • 細かい機能を組みこむ

デザインのワイヤーを引く

まずはデザインのワイヤーを引きます。ワイヤーとは、簡単に言えばサイトの設計図。つまり、各画面のレイアウトですね。

「2カラム構成か3カラム構成か」「サイドバーにどういう情報を表示するか」などあらかじめワイヤーフレームに落とし込みます。

用意するのは次の3ページでOKです。

  • TOPページ
  • 記事一覧ページ
  • 記事詳細ページ

実際には、他ページ(アーカイブページ、カテゴリーページ、検索結果ページなど)もありますが、記事一覧ページのデザインを流用できるので不要です。

ワイヤーフレーム制作で私が普段使っているのはAdobe XDです。Adobeのアカウントを作成すれば無料で使うことができるので、まだ使ったことがない方はお試しください。

ちなみにAdobe XDでは簡単なバナー制作もできます!

ツール使うのがめんどくさい人は、紙に手書きでもOKです。とにかく簡単でもレイアウトの方針を決めることでその後の作業をスムーズに進められます。

ちなみにこのテーマの作成時は時短したかったので、ワイヤーは作らず、気になるサイトをいくつかピックアップして制作しました。

静的サイトを作る

ワイヤーをベースにコーディングをしていきます。ここで使うのは、HTMLとCSS(動きをつけたかったらJSも)。

WordPressの組み込み経験がある人は、このフェーズをカットしても大丈夫です。私は組み込み経験があるので今回はカットしました。

WordPressに組み込む

静的サイトをWordPressに組み込んでいきます。組み込むといってもそんな大したことではありません。WordPressであらかじめ用意されている関数をちょろっと組み込むのと、共通部分(ヘッダーやフッター)をパーツ化する程度です。

最初はちょっと苦労するかもしれませんが、一度手順を覚えればあとは簡単な作業です。

細かい機能を組み込む

必要だと思うものを組み込んでいきます。少なくとも下記は用意したいですね。

  • パンくず
  • 目次
  • ブログカード
  • SNSシェアボタン
  • ページネーション

プラグインでまかなえるものもありますし、幸い先人たちがネットにサンプルをたくさん載せているので、それを組み込むでも良いです。

この機能追加の作業をしていて1番感じたのは、既存の配布されているWordPressテーマは無料有料問わずすごいということです。どれだけ開発に時間をかけたのか。テーマ開発者たちを本当に尊敬しています。

他のサイトより見劣りする可能性がある

そもそもWordPressテーマを自作する人はかなり少数で、多くの人は既に誰かが作った機能も豊富でレイアウトも崩れないテーマを利用します。そのため、どのサイトもデザインに差異はあっても一定の品質であることは間違いありません。

それに対して、テーマの自作は文字通り自分で制作するもの。つまり、テーマのクオリティは個人のスキルに依存します

デザインは良い。でも、機能が少ない。

機能は豊富。でも、レイアウトが崩れている。

どちらかに特化すると必ず他サイトより見劣りします。自作するならデザインも機能も両方高クオリティを目指しましょう。

自作テーマを作った理由

このテーマを作った理由は、次の2つです。

  • サイトの表示速度を改善したい
  • 好みのデザインにしたい

 

表示速度を改善したい

以前運営していたブログでは無料テーマの「Cocoon」を使用していました。おそらくWordPressでブログを始めた人は1度は聞いたことがあるのではないでしょうか。超有名な無料テーマです。

「Cocoon」は無料なのに有料級の機能とカスタマイズ性を備えています。更に、有志の方が作ったデザインテンプレートが数十パターンあるのでデザインに困りません。また、利用者が多いためネット上にドキュメントも豊富でカスタマイズもしやすい。

正直Cocoonは非の打ち所がないテーマなんですよね。無料で提供しているのがおかしいレベル。

ただ、サイトの表示速度だけがずっと気になっていました。Page Speed Insightsでモバイルのスコアが30〜40をずっとウロウロ。テーマ内蔵のリソース圧縮機能を使っても特に変わらず。

実際読み込んでみるとストレスを感じるほどの表示速度ではないので、そのまま使い続けることも考えましたが30〜40ってスコアにずっとモヤモヤしていました。

好みのデザインにしたい

Webサーフィンをしていると、このサイトかっこいいな・見やすいなと思った経験ありませんか?

私の場合は、Web系企業のメディアサイトでそう思うものが多くて、自作を決意しました(Web系企業メディアは多くが自作テーマです)

以上2つの理由から、「表示が早くて好みのデザインのWordPressテーマ」を作ることに決めました。

自作テーマの制作をオススメしたい人

次の2つです。

  • テーマ販売を考えている人
  • Web制作の副業をしたい人

共通点は、「収益のために作る」ということです。それ以外の理由なら止めたほうが良いです。

なぜなら車輪の再発明をしている感が半端ないですし、トータルの制作時間で記事10本〜15本は余裕で書けるからです。無駄ではないですが、時間が勿体ない。

ブロガーで自作テーマに挑戦してみたい人は、ブログが収益化できてから着手することをオススメします。それまではコツコツ記事を書きましょう。

収益化してからやるべき理由

「膨大な時間がかかる」ことに加えて、「中毒性」があるからです。ブログテーマをカスタマイズしたことがある人なら分かると思いますが、デザインをいじってるときってめっちゃ楽しいんですよね。自作テーマ制作もまさに同じで、あれもしたいこれもしたいが次々と湧いてきます。

ハマってしまうと記事書くのそっちのけでテーマ制作に時間を使うことになるので、「収益化してから」か「ブログを始める前」に挑戦することをオススメします。

このテーマのパフォーマンス

Page Speed Insightsで計測した結果です。

PCのスコア

SPのスコア

キャッシュプラグインの導入やCSSやJS未圧縮でこの結果なので、高速化の対策を更に施したらSPも90以上はいけると思います。

結果的に、自作したテーマでパフォーマンスは大幅に改善しました。ただ機能的にはまだまだ不足しているところもありますし、デザインも納得していないのでこれからもブログ執筆と並行して改良していくつもりです。

 

まとめ

WordPressテーマ自作のメリット・デメリットについてまとめました。

ハマってしまうとかなりの中毒性があるので、収益化を目指す人以外は、既存の無料テーマ・有料テーマの使用をオススメします!