初心者WordPressテーマの「THE THOR」ってどう？
士業系のコーポレートサイト作れるの？
どんなデザインになるかサンプルを見てみたい…
そんな悩みを解決します。
WordPressテーマ「THE THOR（ザ・トール）」を購入して、士業系のホームページサンプルを作ってみました。THE THORの公式サイトを見るとブログ系のサンプルばかり。「会社のホームページっぽいデザインって作れるの？」って疑問があったので、じっさいに試してみました。
かんた士業系のホームページをTHE THORで作ってみたいと思う人向けです！
【サンプル】THE THORで作った士業系のホームページデザイン
WordPressテーマ「THE THOR」で作った士業系のサイトデザインを紹介します。
かんたプラグインの追加、CSSコードの追加などを含めて制作には3～5時間ほどかかりました。
メインビジュアルは3つのパターンがある
メインビジュアルはトップページに表示されるサイトの「顔」です。
THE THORのメインビジュアルは以下の3つのオプションがあります。
オプション
- 静止画
- スライドショー（画像×5枚）
- 動画
サンプルの士業サイトでは動画を使っています。
動画って、やっぱり目立ちますよね。
コンテンツエリア
THE THORはクラシックエディターで使うことを前提としているテーマです。WordPressの無料プラグイン「Classic Editor」を有効化するとTHE THOR固有の装飾機能が使えるようになります。
サンプルサイトではClassis Editorプラグインを使わずWordPress標準のブロックエディターでコンテンツを作りました。エディターは好きなほうを選べば良いので、クラシックエディターに慣れている人はクラシックエディターを使いましょう。
サンプルサイトのコンテンツ作成では、ブロックエディターの機能である以下の機能をメインに使っています。
使ったブロック構成
- カバーブロック
- カラムブロック
カバーブロックは背景に画像を入れる機能です。白い背景が続くと単調な印象を与えてしまいます。区切り的な要素として画像を入れてみたり、アクセントとして使えます。
ちなみにカバーブロックは画像だけでなく、動画もサポートしています。
サンプルサイトでもカバーブロックに動画を使っています。カバーブロックの動画は背景として利用できるのがポイント。動画のうえにテキストやボタンを載せるといったデザインも、コードを編集しなくても実現できます。
カラムブロックは、画像などを横並びに配置するレイアウト機能です（下記図参照↓）。
士業サイトだと「サービス一覧」「事務所の特徴」なんかを掲載するときに使えるます。
カラムブロックはレイアウト用の枠組みを作る機能。カラムブロックの中に画像やテキストを入れるといったアレンジができます。
かんたどちらの機能もWordPress標準の機能なので、プログラムコードの知識がなくても扱えます。
複数サイトで使いまわしできるライセンス
THE THORのライセンスについてです。THE THORは1つテーマを購入すると、追加料金無しで複数のサイトに使えます。
WordPressテーマの中には「1つテーマは1つのサイトだけ」というタイプがあります。例えば、人気テーマのSTORK19がこのパターンです。
複数サイトを作る場合の費用
| THE THOR | STORK19 | |
|---|---|---|
| 1つ目のサイト | 16,280円（税込み価格） | 11,000円（税込み価格） |
| 2つ目のサイト | 追加料金無し | 11,000円（税込み価格） |
| 3つ目のサイト | 追加料金無し | 11,000円（税込み価格） |
自社サイトの制作に関しては制限がありませんが、「知り合いのサイトを作る」といった第三者のサイトを制作代行する場合は特別ライセンスが必要になります。
かんたTHE THORの特別ライセンスについては次の記事で紹介しています。
THE THORで作ったサンプルサイトの構成
今回紹介したTHE THORのサンプルサイトで使った画像などの素材やレンタルサーバーについてです。
構成
- 最新バージョンのTHE THOR
- レンタルサーバー
- 素材
- 独自カスタマイズ
かんたそれぞれ解説します。
最新バージョンのTHE THOR
サンプルサイトは最新バージョンのTHE THORを使っています。
WordPressの有料テーマは、不正に転売されているケースがあります。
不正に転売されているテーマは公式サイトよりも安いことがありますが、以下のデメリットがあります。
デメリット
- テーマのアップデートができない
- サポートフォーラムに参加できない
テーマのアップデートができないと、WordPress最新版でTHE THORが使えなくなるといった不具合が発生することがあります。
かんたテーマの購入は公式サイトにしましょう。
レンタルサーバー
サンプルサイトはエックスサーバーの「スタンダードプラン」上に作成しています。
THE THORはWordPress用のデザインテンプレートです。WordPressなら何でもOKというわけではなく、動作環境が決まっています。
THE THORの動作環境
| 要件 | |
|---|---|
| WordPress | バージョン4.9～ |
| PHP | バージョン5.6～ |
動作環境を満たしていないと、正常に動作しない場合があります。
一般的に動作環境を満たしていない状態で使っている場合、サポートに問い合わせをしても「必要な動作環境を満たしてください」と返答されます。
レンタルサーバーがTHE THORの動作環境を用意するのは必須の条件です
かんたエックスサーバーのスタンダードプランはTHE THORの動作環境を満たしています。
士業系サイトに使える無料素材
サンプルサイトの画像は無料で使える素材サイト「写真AC」と「イラストAC」のものです。
士業系のサイトって、どうしてもテキストが多くなりがち。バランスよく画像を配置してキレイに仕上げててみました。
独自カスタマイズ
THE THORのデザイン機能ではなく、自分でカスタマイズした点についてです。サンプルの士業サイトでは会社のホームページ感を出すために以下のカスタマイズをしています。
独自カスタマイズ
- メガメニューを付ける
- ヘッダーにサブメニューを付ける
- メインビジュアル上にヘッダーを透過させる
- ヘッダーに問い合わせボタン
- 横幅いっぱいにコンテンツを広げる
かんたそれぞれを解説します。
【独自カスタマイズ】メガメニューを付ける
サンプルサイトのグロナビにカーソルを載せると広がって表示されるのがメガメニューです。
オシャレですよね。クライントにメガメニューを作って見せると大喜びします！
かんたメガメニューの追加方法は次の記事で紹介しています。
【独自カスタマイズ】ヘッダーにサブメニューを付ける
ヘッダーの右上にサブメニューを付けました。企業サイトなんかだと、グロナビに入れるほど優先順位が高くないコンテンツへの導線を設置するメニューです。サンプルサイトではプライバシーポリシーページなどへのリンクを配置しています。
かんた詳しいカスタマイズ方法は次の記事で紹介しています。
【独自カスタマイズ】メインビジュアル上にヘッダーを透過させる
ファーストビューにインパクトを！
そんな考えてトップページのヘッダー部分を透過させ、メインビジュアルの動画に重ねてみました。個人的にかなり気に入っています。サンプルサイトは動画ですが、静止画像やスライドショーでも同じ用にヘッダーを透過させることができます。
かんた詳しいカスタマイズ方法は次の記事で紹介しています。
【独自カスタマイズ】ヘッダーに問い合わせボタンを付ける
企業サイトデザインだとよくある、ヘッダー部分に問い合わせボタン。THE THORの基本機能では設置ができないので、独自カスタマイズしました。
ヘッダー部分に追加した要素
- 電話番号
- 営業時間
- 問い合わせボタン
かんた詳しいカスタマイズ方法は次の記事で紹介しています。
【独自カスタマイズ】横幅いっぱいにコンテンツを広げる
サンプルサイトのコンテンツ部分をフルワイド化しています。「フルワイド」とは横幅いっぱいに広げるデザインのことです。
THE THORにはこのフルワイドデザイン機能がないのでサンプルサイトでは独自カスタマイズしました。
かんた詳しいカスタマイズ方法は次の記事で紹介しています。
まとめ
WordPressテーマ「THE THOR」で作成した士業系のホームページを紹介しました。
ぜひ士業系サイト制作にチャレンジしてみてください。
