WordPressをデザインする！テーマ・カスタマイズを解説

WordPressでホームページやブログをデザインする際に活用したいのはテーマやカスタマイズです。 今回はWordPressのデザインに役立つテーマを選ぶポイントや、テーマの導入、カスタマイズ方法をご紹介します。

WordPressのデザインについて

WordPressでサイトを構築する際、サイトデザインにはテーマや、テーマのカスタマイズが用いられます。
テーマを変えるだけでWebサイトのデザインをがらっと変えることができるのも、WordPressの魅力です。

テーマをカスタマイズすれば、テンプレートに＋αし独自のデザインを作成できます。
一からすべてのサイトを設計するよりも効率的にデザインの構築ができます。

WordPressのテーマとは

WordPressは「CMS（Content Management Systems）」の一種ですが、WordPressのテーマとはCMSで「デザインテンプレート」や「テンプレート」と呼ばれるツールです。
テーマを導入すると、WordPressでデザインや、テーマ特有の機能が使えるようになります。

テーマを導入すれば、かんたんな操作で魅力的なデザインのサイトが作成できるため、ユーザーの満足度や訴求力もアップします。

WordPressテーマを利用するメリット

WordPressのテーマを利用すると、Webサイトの運営やデザイン面で以下のメリットがあります。

読者への訴求力が増す

WordPressのテーマを使いおしゃれなデザインのWebサイトを設計できると、読者への訴求力が増します。

おしゃれで、見ていて心地よいデザインや、情報を収集しやすい設計ができると、ユーザーエクスペリエンスが向上します。
その結果として、ユーザーのコンテンツへの滞在時間も長くなります。

かんたんにデザインを一新できる

WordPressでは、テーマを入れ替えるだけでデザインが一新できます。

サイトの印象をがらっと変えたいときには、新しいサイトのコンセプトに合ったテーマを選んで入れ替えることでデザインが一掃できる手軽さが魅力です。

テーマごとの機能を利用可能

テーマにはデザインだけではなく、それぞれのテーマ独自の機能が付随しています。

例えば、プラグインを導入しなくても吹き出しが作れる機能や、見出し付きのボックス、自分のサイトで使う見出しやボックス・リストのデザインを保存できたり、商品ランキングや目次の機能がついているテーマもあります。

デザイン性と合わせて、機能面もテーマを選ぶ先にはチェックしておきたいポイントです。

WordPressテーマを選ぶポイント

たくさんあるWordPressテーマの中から、自社サイトに最適なものを選びたいですよね。
ここではWordPressテーマを選ぶ際のポイントをご紹介します。

サイトの目的やコンセプトに合っているか

WordPressのテーマにはたくさんの種類がありますが、それぞれのテーマごとに適しているWebサイトのタイプが違います。

例えば、ブログ運営に好まれるテーマと、ビジネスサイトやポートフォリオ運営に向いているテーマは違います。

レスポンシブ対応

レスポンシブ対応とは、Webブラウザでサイトを表示する際にはブラウザに適した表示形式で、スマートフォンで表示する際にはスマートフォンの表示サイズに応じて画面が表示されるというように、機器に応じてサイトの表示を最適化してくれる機能のことです。

WordPressテーマの中には、レスポンシブ対応がすでに施されているものがあります。
レスポンシブ対応が適切になされていると、ユーザーが情報を探しやすくなるため閲覧の満足度がアップします。

特にスマホでサイトを閲覧する方が多いので、スマホチェックは必ず行いましょう。

初心者でもカスタマイズしやすいか

カスタマイズのしやすさも、WordPressのテーマを選ぶ際のポイントになります。

初心者にとって使いやすいテーマもあれば、コーディングや顧客分析を駆使できる上級者に好まれるテーマもあります。

SEOに強いか

テーマの中には導入するだけで最低限のSEO対策を施すことができるものもあります。

SEOは、サイトの上位表示や収益に関わる重要なポイントです。

サイトの表示スピード

サイトの表示スピードは、ユーザーの満足度に関わる重要なポイントになります。サイトの表示スピードが遅いと、ユーザーが離脱する原因となってしまいます。

表示スピード向上のためにシンプルな構造になっているテーマもあります。

料金

WordPressのテーマの中には無料で提供されているものと、有料のものがあります。

無料でもスタイリッシュなデザインのテーマもありますが、有料のテーマを使うとよりカスタマイズ性が高まったり、SEO対策が施されていたりと利便性もあります。

WordPressのアップグレードへの対応

WordPressは、脆弱性の修正や、よりよいサービスの提供のためにアップグレードされます。

WordPressのソフトウェアがアップデートされたときに、テーマも速やかにアップグレードに対応してくれると、SEOやセキュリティ面でも有利になります。

有料・無料テーマの選び方

WordPressのテーマには無料で利用できるものと、有料のものがあります。

有料のテーマの価格はおおよそ、5,000円〜25,000円ほどです。
同じテーマでも、価格でサポートや使える機能が違う商品もあります。

無料のテーマでもスタイリッシュなWebサイトを作成できますが、有料のテーマを使うとユーザーサポートが受けられたり、無料テーマよりも更に機能が充実している場合が多いです。
費用面に余裕があるのであれば、有料テーマの利用も検討してみてください。

無料・有料のおすすめテーマは記事の後半で紹介します。

テーマの導入方法

WordPressテーマの導入をしたいする際には、以下2つの導入方法があります。

すでに準備されているテーマをインストールする場合

WordPressの管理画面の中にはすでに準備されているテーマがあります。
ここでは、WordPress内にすでに準備されているテーマのインストール方法をご紹介します。

メニューから「外観」＞「テーマ」をクリックします。

すでにWordPress内にインストールされているテーマが表示されるので、利用したいテーマを選択します。
今回は、例としてテーマ「Twenty Twenty-Two」のインストールを行います。

利用したいテーマの上にマウスを移動すると表示される「有効化」のボタンをクリックすると、テーマが反映されます。

「新規追加」をクリックすると、WordPressのデータベース内にあるテーマが表示されます。

インストールしたいテーマの上に、カーソルをあわせると「インストール」のボタンが表示されるので、クリックすればインストールが開始します。

外部からインストールする場合

外部から入手したテーマをインストールしたい場合には、導入したいテーマファイル（zip形式）は事前にダウンロードしておきましょう。

WordPress管理画面の左側のメニューから「外観」＞「テーマ」をクリックします。

表示された「テーマ」画面上部の「新規追加」をクリックします。

画面上部の「テーマのアップロード」をクリックします。

「テーマのアップロード」ボタンの下に表示される「ファイルを選択」ボタンをクリックします。
事前にダウンロードしたテーマファイル（zip形式）を選択します。

テーマファイルを選択すると、「今すぐインストール」ボタンが有効になり、クリックするとインストールが開始します。

「有効化」をクリックし、テーマが有効化されたらインストール完了です。

テーマをカスタマイズしてみよう！

インストールしたテーマはカスタマイズも可能です。

テーマをカスタマイズすると、同じテーマを導入しているサイトとの差別化がしやすいです。
独自性のある自社サイトを作成できれば、企業のブランディングにも役立ちます。

テーマの導入ができ、よりデザイン性に優れ、個性的なWebサイトを運営したい場合にはカスタマイズにも挑戦してみてください！

テーマをカスタマイズする際に気をつけたいポイント

テーマをカスタマイズする際に、気をつけておきたいポイントは以下の2つです。

カスタマイズしやすいテーマを選んでおく

カスタマイズがしやすいテーマを選んでおくと、見慣れないHTMLやCSS、PHPといったコードを触らなくてもカスタマイズできる幅が広がります。

すでにテーマを導入してしまっている場合には、テーマを変更すればデザインも変わります。

テーマを変更できない場合はCSSかPHPで

テーマを変更できない場合にはHTMLやCSS、PHPを編集してカスタマイズを行います。

HTMLやCSS、PHPを利用する場合には、コーディングの知識が必要です。テーマの入れ替えや、管理画面からのカスタマイズよりは難易度が高まりますので、必要な場合にはWeb制作の専門家に相談してみましょう。

テーマをカスタマイズする2つの方法

テーマをカスタマイズする方法には、以下の2つがあります。

管理画面からカスタマイズ

WordPressの管理画面には、テーマをカスタマイズできる機能（テーマカスタマイザー）が備わっています。

この機能を使えば、Webサイト全体のデザインやレイアウトを確認しながらカスタマイズができます。カスタマイズと同時にプレビューも確認できるため、かんたんに作業ができます。

テーマカスタマイザーから設定できる項目は、それぞれのテーマによって異なります。有料のテーマのほうがカスタマイザーから設定できる項目が多くなる傾向があります。

自作のカスタマイズをする

自作のカスタマイズをする際には、CSSを編集します。

CSSは、プログラミング言語の一種で、Webサイトのデザインを作成・編集できる言語です。

HTMLで、文章の構成や骨組みをつくり、CSSで装飾を加えます。HTMLとCSSが使用できれば、独自のデザインを自作できるため便利です。また、PHPの知識があればデータベース側の構成を編集でき、Webサイトに機能を追加することができます。

テーマをカスタマイズする手順

ここでは、テーマをカスタマイズする際の具体的な手順をご紹介します。

管理画面からカスタマイズする手順・方法

管理画面からカスタマイズを行うにはテーマカスタマイザーを開き、項目の選択をします。

テーマカスタマイザーは、「外観」＞「カスタマイズ」から編集できます。

「カスタマイズ」をクリックすると、カスタマイザーのメニューが開くので項目を選んで編集ができます。今回は後述するテーマ「SANGO」のカスタマイザー画面を表示しています。

自作のカスタマイズをする方法

CSSを編集して自作のカスタマイズを行うには、以下の3つの方法があります。

テーマカスタマイザーの追加CSSで編集する

テーマカスタマイザーの項目にある「追加CSS」にカスタマイズしたい編集をCSSで記述すれば、テーマへ反映されます。今回は後述するテーマ「SANGO」のカスタマイザー画面を表示していますが、操作は他のテーマでも同様です。

記事作成時の右メニューにあるカスタムCSSに追記する

新規の記事を執筆する際に右に表示されるメニューへCSSを追記もできます。

右メニューに「カスタムCSS」の表示があるので、そこにCSSを追記します。

記事投稿のブロックごとに反映されるCSSとなるので、注意してください。

テーマファイルエディターから編集する

テーマファイルエディターを開き、「style.css」にCSSを追記ができます。

ただし、テーマファイルエディターからはWebサイトの構成を作っているPHPのファイル等も編集することもできます。

編集を間違うとバグが発生してしまったり、バグがあるせいでSEO的に不利になってしまうといった可能性もありますので、注意しましょう。

デザインにおすすめのWordPressテーマ

WordPressでのWeb制作では、どのテーマを使うかがデザイン性に大きく関わってきます。

記事の最後として、デザインにおすすめなWordPressテーマをご紹介します。ぜひ参考にしてみてください。

無料のテーマ

無料で使えるテーマにはたくさんの種類がありますが、その中から8つのテーマをご紹介します。

Cocoon

無料テーマの「Coccon」は、吹き出しや、カルーセル（ヘッダー下に記事をスライダー表示できる機能）、スキン変更によりかんたんにデザインを変更できるという特徴があります。

無料にもかかわらずデザインがかんたんに変更できたり、カスタマイズがしやすいため、人気のテーマとなっています。

Lightning

「Lightning（ライトニング）」は、無料のWordPress公式テーマです。

拡張性が高いため、自社サイトを自由にカスタマイズしたい方におすすめです。

Xeory Extension

「Xeory Extension（セオリー・エクステンション）」は、無料のテーマでありながらSEOにも対応しているテーマです。

Webマーケティングの企業として知られるバズ部が制作しており、会社情報紹介のページも設置ができます。企業サイトの作成にも使いやすいテーマです。

LION BLOG

「LION BLOG（ライオン・ブログ）」は、プラグインを極力使わないように機能を充実させているテーマです。

お問い合わせフォームや、人気記事のランキングもプラグインの導入なしで設置できます。

Fukasawa

「Fukusawa（フクサワ）」はポートフォリオサイトとしておすすめな、シンプルなデザインのテーマです。

自社のポートフォリオサイト制作を考えている方は、Fukusawaの使用を検討してみてください。

Luxeritas

「Luxeritas（ルクセリタス）」は、ページの表示速度が速いことで人気のテーマです。

手軽にカスタマイズができる設計も人気となっています。

Sydney

「Sydney（シドニー）」は、トップページに表示させた画像の上にボタンが設置でき、タイトルや説明文もスライドで挿入できます。

無料にもかかわらず、有料版のテンプレートで施されている設定ができるのが魅力のテーマです。

Habakiri

「Habakiri」は、シンプルで使いやすい無料のWordPressテーマです。

Bootstrapを利用するために開発されたテーマで、カスタマイズもしやすいと定評があります。

有料のテーマ

有料テーマは無料のテーマよりもデザイン性やカスタマイズに優れている傾向があります。SEOに強いとされるテーマやビジネスサイト向けのテーマもあるので、ぜひ参考にしてみてください。

THE THOR

「THE THOR（ザ・トール）」は、無料テーマの「LION BLOG」を作成している企業が開発している有料テーマです。

「LION BLOG」と同じように、プラグインを導入しなくても使える機能が多い設計です。

AFFINGER6

「AFFINGER6（アフィンガー6）」は、SEOに強いテーマとして人気であり、分析機能も豊富に搭載されています。

自分好みにカスタマイズもできるため、Web制作のプロにも人気のテーマです。

SWELL

「SWELL（スウェル）」は、カスタマイズ性が高いテーマとして定評があります。

HTMLやCSSの知識がなくても、直感的に操作ができます。

DIVER

「DIVER（ダイバー）」は、LP（ランディング・ページ）が制作できたり、CTA機能が充実している高機能なテーマです。

高機能でありながら、初心者でもかんたんに利用できる操作性も兼ね備えています。

JIN

「JIN（ジン）」は、有名ブロガーのひつじさんと赤石カズヤさんが開発した収益化に特化しているテーマです。

初心者でも操作しやすく上に、読者も読みやすい設計が追求されています。

Emanon Pro

「Emanon Pro（エマノン・プロ）」は、個人ブログよりもビジネスサイト設計向けに作成されています。

集客機能が充実していたり、記事が検索エンジンにインデックスされやすい構造です。

賢威

「賢威（けんい）」はSEOに強いテーマとして長く業界に存在し続けています。

2007年に発売され、アップデートを繰り返しながら利用され続けている根強い人気があるテーマです。

STORK19

「STORK19（ストーク19）」は、シンプルな内部構造でSEOにも有利です。

サイトの表示スピードも速く、レスポンスにこだわったサイト設計をしたい場合におすすめのテーマです。

SANGO

「SANGO（サンゴ）」は、サルワカという人気の高いサイトの運営者が制作したテーマです。

シンプルなデザインと構造で、初心者にも使いやすいテーマです。読者にとっても心地よいデザインやレスポンスを追求しています。

ハミングバード

「ハミングバード」は、モバイルファーストの設定をされており、初期の設定もしやすいテーマです。

ショートコードやカスタマイズ情報も充実しています。

WordPressサイトで高セキュリティな会員管理を行うならSPIRAL

当社のご提供する 「WordPressプラグイン 会員管理」は、WordPressで作られたWebサイトと会員管理システムSPIRALを連携するためのWordPressプラグインです。

多くの金融機関も採用するSPIRALで会員情報を安全に管理。プログラミング不要で会員認証やメール配信可能なサイトを構築できます。

会員登録・ログインフォーム作成、会員データ管理などの基本機能から、会員限定ページの作成、ウィジェット表示、メール配信、問い合わせ管理、決済システムや外部システムとの連携まで、会員管理・運営に必要な機能が充実。また、金融機関・官公庁でも採用されている高いセキュリティで会員の大切なデータを管理します。

SPIRALはファンクラブやユーザーサポートサイト、学会・協会サイト、申請受付サイト、キャンペーン受付サイト、イベント受付管理、入居者サイトなど様々な業界・用途・シーンで延べ12,000社以上のご利用実績がございます。

サービスの詳細については「WordPressプラグイン 会員管理」のページをご覧いただくか、サービス導入をご検討中の方はこちらからぜひお問い合わせください。

まとめ

WordPressでのWeb制作では、テーマを導入することでサイトのデザイン性を高めることができます。

管理画面からのカスタマイズや、HTMLとCSSを駆使した自作のカスタマイズをすることもできます。
デザイン性の高いWebサイトを準備することで、自社のブランディングにも役立つます。
おすすめのWordPressテーマもご紹介しましたので、自社サイト構築の際にはぜひ参考にしてみてください。