【サンプルあり】THE THOR(ザ・トール)で士業系のホームページを作ってみた感想レビュー

テーマ切り替えに関するFAQ
初心者

WordPressテーマの「THE THOR」ってどう?
士業系のコーポレートサイト作れるの?
どんなデザインになるかサンプルを見てみたい…

そんな悩みを解決します。

WordPressテーマ「THE THOR(ザ・トール)」を購入して、士業系のホームページサンプルを作ってみました。THE THORの公式サイトを見るとブログ系のサンプルばかり。「会社のホームページっぽいデザインって作れるの?」って疑問があったので、じっさいに試してみました。

かんた

士業系のホームページをTHE THORで作ってみたいと思う人向けです!

公式 THE THOR(ザ・トール)をダウンロードする

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

【サンプル】THE THORで作った士業系のホームページデザイン

【サンプル】THE THORで作った士業系のホームページデザイン

WordPressテーマ「THE THOR」で作った士業系のサイトデザインを紹介します。

サンプルサイトはクリックすると開きます。

かんた

プラグインの追加、CSSコードの追加などを含めて制作には3~5時間ほどかかりました。

メインビジュアルは3つのパターンがある

メインビジュアルはトップページに表示されるサイトの「」です。
THE THORのメインビジュアルは以下の3つのオプションがあります。

オプション

  1. 静止画
  2. スライドショー(画像×5枚)
  3. 動画

サンプルの士業サイトでは動画を使っています。

動画って、やっぱり目立ちますよね。

コンテンツエリア

THE THORはクラシックエディターで使うことを前提としているテーマです。WordPressの無料プラグイン「Classic Editor」を有効化するとTHE THOR固有の装飾機能が使えるようになります。

サンプルサイトではClassis Editorプラグインを使わずWordPress標準のブロックエディターでコンテンツを作りました。エディターは好きなほうを選べば良いので、クラシックエディターに慣れている人はクラシックエディターを使いましょう。

サンプルサイトのコンテンツ作成では、ブロックエディターの機能である以下の機能をメインに使っています。

使ったブロック構成

  1. カバーブロック
  2. カラムブロック

カバーブロックは背景に画像を入れる機能です。白い背景が続くと単調な印象を与えてしまいます。区切り的な要素として画像を入れてみたり、アクセントとして使えます。

ちなみにカバーブロックは画像だけでなく、動画もサポートしています。

サンプルサイトでもカバーブロックに動画を使っています。カバーブロックの動画は背景として利用できるのがポイント。動画のうえにテキストやボタンを載せるといったデザインも、コードを編集しなくても実現できます。

カラムブロックは、画像などを横並びに配置するレイアウト機能です(下記図参照↓)。

THE THORでカラムブロックを使ったレイアウト
カラムブロックを使ったレイアウト

士業サイトだと「サービス一覧」「事務所の特徴」なんかを掲載するときに使えるます。

カラムブロックはレイアウト用の枠組みを作る機能。カラムブロックの中に画像やテキストを入れるといったアレンジができます。

かんた

どちらの機能もWordPress標準の機能なので、プログラムコードの知識がなくても扱えます。

複数サイトで使いまわしできるライセンス

THE THORのライセンスについてです。THE THORは1つテーマを購入すると、追加料金無しで複数のサイトに使えます。

WordPressテーマの中には「1つテーマは1つのサイトだけ」というタイプがあります。例えば、人気テーマのSTORK19がこのパターンです。

複数サイトを作る場合の費用

スクロールできます
THE THORSTORK19
1つ目のサイト16,280円(税込み価格)11,000円(税込み価格)
2つ目のサイト追加料金無し11,000円(税込み価格)
3つ目のサイト 追加料金無し 11,000円(税込み価格)
複数サイトを作る場合の費用

自社サイトの制作に関しては制限がありませんが、「知り合いのサイトを作る」といった第三者のサイトを制作代行する場合は特別ライセンスが必要になります。

かんた

THE THORの特別ライセンスについては次の記事で紹介しています。

THE THORで作ったサンプルサイトの構成

THE THORで作ったサンプルサイトの構成

今回紹介したTHE THORのサンプルサイトで使った画像などの素材やレンタルサーバーについてです。

構成

  1. 最新バージョンのTHE THOR
  2. レンタルサーバー
  3. 素材
  4. 独自カスタマイズ
かんた

それぞれ解説します。

最新バージョンのTHE THOR

サンプルサイトは最新バージョンのTHE THORを使っています。

この記事執筆時に利用可能な最新バージョン:2.3.5

WordPressの有料テーマは、不正に転売されているケースがあります。

不正に転売されているテーマは公式サイトよりも安いことがありますが、以下のデメリットがあります。

デメリット

  1. テーマのアップデートができない
  2. サポートフォーラムに参加できない

テーマのアップデートができないと、WordPress最新版でTHE THORが使えなくなるといった不具合が発生することがあります。

かんた

テーマの購入は公式サイトにしましょう。

公式 THE THOR(ザ・トール)をダウンロードする

レンタルサーバー

サンプルサイトはエックスサーバーの「スタンダードプラン」上に作成しています。

THE THORはWordPress用のデザインテンプレートです。WordPressなら何でもOKというわけではなく、動作環境が決まっています。

THE THORの動作環境

要件
WordPressバージョン4.9~
PHPバージョン5.6~
THE THORの動作環境

動作環境を満たしていないと、正常に動作しない場合があります。

一般的に動作環境を満たしていない状態で使っている場合、サポートに問い合わせをしても「必要な動作環境を満たしてください」と返答されます。

レンタルサーバーがTHE THORの動作環境を用意するのは必須の条件です

かんた

エックスサーバーのスタンダードプランはTHE THORの動作環境を満たしています。

エックスサーバー公式サイト

士業系サイトに使える無料素材

サンプルサイトの画像は無料で使える素材サイト「写真AC」と「イラストAC」のものです。

士業系のサイトって、どうしてもテキストが多くなりがち。バランスよく画像を配置してキレイに仕上げててみました。

無料素材 サイト

独自カスタマイズ

THE THORのデザイン機能ではなく、自分でカスタマイズした点についてです。サンプルの士業サイトでは会社のホームページ感を出すために以下のカスタマイズをしています。

独自カスタマイズ

  1. メガメニューを付ける
  2. ヘッダーにサブメニューを付ける
  3. メインビジュアル上にヘッダーを透過させる
  4. ヘッダーに問い合わせボタン
  5. 横幅いっぱいにコンテンツを広げる
かんた

それぞれを解説します。

【独自カスタマイズ】メガメニューを付ける

THE THORのメガメニュー
THE THORのメガメニュー

サンプルサイトのグロナビにカーソルを載せると広がって表示されるのがメガメニューです。

オシャレですよね。クライントにメガメニューを作って見せると大喜びします!

かんた

メガメニューの追加方法は次の記事で紹介しています。

【独自カスタマイズ】ヘッダーにサブメニューを付ける

THE THORのヘッダーにサブメニューを付ける
サブメニュー

ヘッダーの右上にサブメニューを付けました。企業サイトなんかだと、グロナビに入れるほど優先順位が高くないコンテンツへの導線を設置するメニューです。サンプルサイトではプライバシーポリシーページなどへのリンクを配置しています。

かんた

詳しいカスタマイズ方法は次の記事で紹介しています。

【独自カスタマイズ】メインビジュアル上にヘッダーを透過させる

ファーストビューにインパクトを!

そんな考えてトップページのヘッダー部分を透過させ、メインビジュアルの動画に重ねてみました。個人的にかなり気に入っています。サンプルサイトは動画ですが、静止画像やスライドショーでも同じ用にヘッダーを透過させることができます。

かんた

詳しいカスタマイズ方法は次の記事で紹介しています。

【独自カスタマイズ】ヘッダーに問い合わせボタンを付ける

THE THORのヘッダーに問い合わせボタンと電話番号を付ける
ヘッダーに問い合わせボタン

企業サイトデザインだとよくある、ヘッダー部分に問い合わせボタン。THE THORの基本機能では設置ができないので、独自カスタマイズしました。

ヘッダー部分に追加した要素

  1. 電話番号
  2. 営業時間
  3. 問い合わせボタン
かんた

詳しいカスタマイズ方法は次の記事で紹介しています。

【独自カスタマイズ】横幅いっぱいにコンテンツを広げる

サンプルサイトのコンテンツ部分をフルワイド化しています。「フルワイド」とは横幅いっぱいに広げるデザインのことです。

THE THORにはこのフルワイドデザイン機能がないのでサンプルサイトでは独自カスタマイズしました。

かんた

詳しいカスタマイズ方法は次の記事で紹介しています。

まとめ

WordPressテーマ「THE THOR」で作成した士業系のホームページを紹介しました。

ぜひ士業系サイト制作にチャレンジしてみてください。

公式 THE THOR(ザ・トール)をダウンロードする

よかったらシェアしてね!
  • URLをコピーしました!
もくじ
先頭へ
目次
閉じる