初心者THE THORでコーポレートサイトって作れるの？
どんなデザイになるの？
外注しないで自作できる？
そんな疑問に答えます。
WordPressテーマ「THE THOR（ザ・トール）」を買って、企業系のデモサイトを作ってみました。
THE THORで企業サイトをオシャレに仕上げる制作テクニックも合わせてシェアします！
【概要】THE THORってどんなテーマ？
まずはTHE THORの基本情報です。
| THE THORの概要 | |
|---|---|
| 販売事業者 | フィット株式会社 |
| テーマ料金 | 16,280円（税込み価格） |
| 発売日 | 2018年10月 |
| 公式サイト | THE THOR（ザ・トール）公式サイト |
THE THORはWordPress専用の有料テーマです。
有料テーマだけあってデザインがとってもオシャレ。絞り込み検索機能やオリジナルの装飾機能などを搭載している高機能なテーマです。
【サンプル】THE THORで作ったコーポレート系サイト
WordPressテーマTHE THORで作成した企業サイトデザインを紹介します。デモサイトはクリックすると別ウィンドウで表示されます。
THE THORのデモサイト制作にかかった時間は、1サイトあたり約5時間です。
かんたオシャレに仕上がるようにプラグインを追加し、CSSやJSなどでデザインを調整しています!
THE THORで企業サイトデザイン向けの便利な機能
THE THORで企業サイトを作るさいに使ったデザインについて紹介します。
- メインビジュアル
- カラムブロック
- メディアとテキスト
- カバーブロック
かんたそれぞれの機能を紹介します。
メインビジュアル
メインビジュアルは、トップページに表示されるパーツです。
サイトの印象を決める大事なデザイン。
THE THORのメインビジュアルは、次の3つのオプションが用意されています。
オプション
- 静止画像
- スライドショー（最大5枚）
- YouTube動画
個人的には迫力のある動画が一押し。
動画は基本機能ではYouTube動画限定です。WordPressの基本機能にあるカバーブロックを使うと、Youtubeを経由せず動画ファイルをメインビジュアルに指定できます。
かんたデモサイトではカバーブロックを使っています。
THE THORを使った企業サイトの作り方
企業サイト制作に必須な以下2を事前に用意しましょう。
事前準備の必要なもの
- レンタルサーバー
- テーマ
【事前準備①】THE THORが動作するレンタルサーバー
THE THORはWordPress用のデザインテンプレートです。会社のホームページを公開するためにはWordPressが動作するレンタルサーバーが必要です。
レンタルサーバーであれば、何でも良いわけではありません。
WordPresssのテーマは、それぞれ動作環境が違います。「WordPress5.2で動くけど、4.9だと動作しない」なんてことがよくあります。
レンタルサーバー契約後に、THE THORが使えないといったことがないよう注意しましょう。テーマの動作環境はTHE THORの公式サイトに掲載されています。
かんたちなみにTHE THORの動作環境は次の通りです。
| 動作環境 | |
|---|---|
| WordPress | 4.9以上 |
| PHP | 5.6以上 |
レンタルサーバーを契約するさいは、THE THOR公式サイトにある動作環境を満たすものを選びましょう。
THE THORはクラッシクエディター環境推奨テーマですがWordPress標準のブロックエディターを利用したい人もいるかと思います。ブロックエディターでTHE THORの運用をする場合は、レンタルサーバーのWAFの仕様が問題になることがあります。
ブロックエディターの機能によってはWAFが誤検知することがあります。
誤検知のたびにWAFを無効化するのは本当に面倒です。だからといってもWAFを無効化したままサイトを運営するのはセキュリティー上問題があります。
僕が利用した中でWAFの誤検知がないレンタルサーバーはエックスサーバーです。THE THORでサイトを作るさいに、レンタルサーバーの選定に迷うようならエックスサーバーを選びましょう。
デモサイトはエックスサーバーのスタンダードプラン（旧X10プラン）を使っています。
かんた月額ざっくり千円のレンタルサーバーです。
【事前準備②】テーマ
THE THORは有料テーマです。無料ではありません。
WordPressの一部有料テーマは不正に転売されていることがあります。不正なテーマは公式サイトより安く販売されているケースがありますが、リスクがあるので公式サイトからしっかり購入しましょう。
かんた以下が公式サイト以外からTHE THORを購入するリスクとデメリットの一例です。
リスク・デメリット
- 本物のTHE THORでない
- ウィルスが仕込まれている
- 最新バージョンのTHE THORではない
- テーマのバージョンアップができない
- 公式サポートを受けることができない
サイト型デザインの企業サイトの作り方
THE THORで企業サイトを作る場合の基本設定について紹介します。
設定手順
- パーマリンクの設定
- トップページを指定
- 下層ページを作る
- ヘッダーの設定
かんた各手順を紹介します。
パーマリンクの設定
パーマリンクはWordPress用語です。各ページのURLの構造を意味しています。初期設定のままだと各ページのURLを指定することができません。まずは、パーマリンクで自由にURLを指定できる設定をします。
「設定」→「パーマリンク」をクリック。
「カスタム構造」を選択し、/%postname%/と入力。
トップページを指定
標準の設定だとブログ投稿が表示されるブログっぽいデザインになります。
サイト型デザインに変更するためには固定ページを作成し、トップページに指定するのが第一ステップです。以後、トップページの中身を編集画面から自由に変更できるようになります。
かんた具体的な手順を紹介します。
「固定ページ」→「新規作成」をクリック。
タイトルに「トップページ」と入力。
「公開」をクリック。
サイドバーの無い1カラムデザインにする場合は、右側に表示される「カラム設定」で「1カラムにする」を選択。
「設定」→「表示設定」をクリック。
ホームページの表示で「固定ページ（以下で選択）」にチェックを入れる。
先程作成した「トップページ」をホームページに指定。
「変更を保存」し設定を保存。
かんた作成した固定ページ上からトップページを編集できるようになりました。
下層ページを作る
「下層ページ」はトップページ以外のページのことです。コーポレート系サイトの場合、以下のようなページが下層ページになります。
企業サイトの下層ページの一例
- 会社紹介
- スタッフ紹介
- サービス一覧
- 料金表
- お問い合わせ
- 会社へのアクセス
- プライバシーポリシー
下層ページはWordPressの「固定ページ」機能を使って作成します。
「固定ページ」→「新規追加」をクリック。
タイトルを入力し、ページに表示死体内容をコンテンツエリアに入力します。
「公開ボタン」をクリックします。
タイトル下のパーマリンクにある「編集」をクリック。
ページにあったパーマリンクに変更。
例えば、お問い合わせページであれば「contact」といった感じです。
「OK」をクリックし、公開を押して設定を完了しましょう。
パーマリンは検索エンジンに伝わりやすくなるよう、英文字を使うのがおすすめです。
URLの構造についてはグーグルが公式情報を公開しています。SEO的に重要なパーマリンクの付け方については、以下公式ガイドをぜひチェックしてみてください。
ヘッダーの設定
ロゴやグロナビなどを表示するパーツがヘッダーです。THE THORのヘッダーはカスタマイザーから設定できます。
| 設定対象 | オプション |
|---|---|
| ロゴ形式 | 画像をサポート 画像がなければサイト名が表示されます |
| ロゴの位置 | 左端、真ん中 |
| グロナビ | PCで非表示 スマホで非表示 PC＆スマホで表示 PC＆スマホで非表示 |
| 検索アイコン | PCで非表示 スマホで非表示 PC＆スマホで表示 PC＆スマホで非表示 |
| ハンバーガーメニュー | PCで非表示 スマホで非表示 PC＆スマホで表示 PC＆スマホで非表示 |
| 背景色 | カラーパレットから指定可能 |
エディターを選ぶ
エディターはページを編集する機能のことです。2種類あるので、好きな方を選びましょう。
エディターは2種類
- ブロックエディター
- クラシックエディター
ブロックエディターとは？
ブロックエディターはWordPress5.0から導入された新型エディターです。「標準エディター」「グーテンベルグ」とも呼ばれています。
WordPressをインストールし、THE THORを有効化した状態だとブロックエディターが初期エディターになっています。
有料テーマの中にはテーマ開発会社がブロックエディター専用プラグインを提供しているものもありますが、THE THORにはありません。
かんた特別な設定は不要です。
クラッシクエディターとは？
クラシックエディターはWordPress4.9以前に標準だったエディーターです。WordPress公式プラグインディレクトリーに公開されているClassic Editorプラグインを有効化するとクラシックエディターを利用できます。
かんたエディターは自分の運用にあったものを選びましょう。
問い合わせフォームの設置
問い合わせページに表示するお問い合わせフォームの設置についてです。THE THORはテーマ内に機能を生成する機能が搭載されているので、プラグインをインストールする必要はありません。
問い合わせフォームを設置する固定ページを作成し、パーマリンクをcontactにするだけで問い合わせフォームが表示されます。
かんたユーザーへの自動返信メールは以下より設定できます。
「外観」→「カスタマイズ」→「基本設定」→「お問い合わせページ」の「自動返信メールの冒頭を入力」を編集。
「公開」をクリックし設定を保存。
THE THORの問い合わせフォームには以下の入力オプションが表示されています。
入力オプション
- お名前
- メールアドレス
- URL
- お問い合わせ内容
「URL」についてはカスタマイザーから表記を変更することができますが、その他の要素の編集や入力オプションの追加はできません。
かんたどうしも入力フォームを追加したい場合は、Contact Form7などの問い合わせフォームプラグインを使いましょう。
Classic Widgetsプラグインを有効化
Classic Widgetsプラグインは、ウィジェットの設定画面をWordPress5.8以前の状態に戻すプラグイン。エディターをブロックエディターからクラシック環境に戻すClassic Editorプラグインのウィジェットバージョン的な存在です。
TEH THORはもともとクラッシクエディター環境時代に開発されたテーマです。ネット上にある情報はクラシックエディター環境のものが多く、マニュアルや参考記事を見ると画面が一致せず混乱します。
ウィジェットブロックエディターに慣れていない人は Classic Widgetsプラグインを有効化するのがオススメです。
Classic WidgetsプラグインはWordPress公式ディレクトリーに公開されているので無料で使えます。ダッシュボード上からインストールし有効化しましょう。
かんた有効化するだけで設定する作業はありません。
テーマのアップデートをできるようにする
THE THORは不具合修正や新機能の追加といったアップデートが不定期にされています。テーマをWordPress上で有効化しているだけではアップデートの通知は表示されません。
THE THORで最新バージョンを入手するには以下の作業が必要になります。
ザックリした流れ
- 更新用ユーザーIDの申請
- サイトを登録する
- ユーザーIDをWordPresサイトに入力する
更新用ユーザーIDの申請
申請ページからIDを申請します。
ユーザーIDは申請から1～3営業日で発行してもらえます。
サイトを登録する
会員ページにログインします。
「会員情報」をクリックし、「契約者のサイトURL」に登録するサイトのURLを入力しましょう。
ユーザーIDをWordPressサイトに入力する
この作業は自分のWordPressサイト上で行います。
カスタマイザーの「基本設定」→「ユーザーID設定」にユーザーIDを入力しましょう。
入力後は「公開」をクリックし、設定を保存させれば作業終了です。
かんたTHE THORがバージョンされるとダッシュボード上に通知が表示されるようになります。
複数サイトで使えるTHE THORのライセンス
THE THORは複数サイトで使えるライセンス形態のテーマです。
WordPressの中には、1サイト限定というテーマもあります。THE THORは1つ購入するだけで、複数サイトに利用できるのは嬉しいポイントです。
こんな使い方ができます
- 自分の会社のHPを作る
- 特定サービス用の特設サイトを作る
- オウンドメディアを作る
- ビジネスブロクを作る
THE THORのライセンスについては1点注意点があります。それは第三者のサイトを代行で制作する場合は特別ライセンスが必要になるという点です。
「有料テーマあるし、知り合いのサイトも作ってあげようかな！」
↑これNGです。
ちなみに特別ライセンスは33,000円です。証明書発行日より3年間の有効期限付き。この特別ライセンスは不正にテーマをバラまかれないようにする抑止的な意味かなーと思っています。
かんた自分のサイトなら、数量に制限なくサイト作れます。
サイト制作代行しない限り気にする必要はありません。
コーポレート型デザインに仕上げる独自カスタマイズ
THE THORテーマをコーポレートデザインに仕上げる独自カスタマイズについてです。
今回紹介したTHE THORのデモサイトでは以下の独自カスタマイズをしています。
独自カスタマイズの一例
- トップページのヘッダーを透過させる
- ヘッダーに電話番号と問い合わせボタンをつける
- グロナビにメガメニューを付ける
- ヘッダーにサブメニューを付ける
- コンテンツの横幅を画面いっぱいに広げる
かんた独自カスタマイズの内容を紹介します。
トップページのヘッダーを透過させる
最近Web業界で流行りのレイアウトです。
トップページのヘッダー部分を透過させて、フルワイドのメインビジュアルに重ねて表示させています。従来型だとヘッダーとメインビジュアルは別要素でしたが、サンプルの企業サイトではメインビジュアル上で一体化しています。
THE THORのメインビジュアルは動画もスライドショーも使えるので、インパクトのあるファーストビューが作れるのが嬉しいポイントです。
かんたこのカスタマイズの詳細は次の記事で解説しています。
ヘッダーに電話番号と問い合わせボタンをつける
ヘッダー部分に電話番号や問い合わせボタンを設置するレイアウト構成。企業サイトだとよく見かけますよね？
Web制作の仕事をしていると、クライアントから毎度依頼される定番のヘッダー構成です。
CTAを考えたら目立つ場所に問い合わせ方法への動線を設置するのは合理的。そんなわけで今回のデモサイトでもヘッダー部分に問い合わせ系の要素を設置しました。
かんたこのカスタマイズの詳細は次の記事で解説しています。
グロナビにメガメニューを付ける
グロナビにカーソルをのせると展開されるメガメニューを実装しました。
やっぱりオシャレ度が格段にアップしますよね！僕自身もこのメガメニューが大好きでよく使うテクニックです。なんと言ってもクライアント受けが良い！
かんたこのカスタマイズの詳細は次の記事で解説しています。
ヘッダーにサブメニューを付ける
メガメニューなんかと比較するとかなり地味な要素。それでも企業サイトだとよく見かける構成ですよね？
グロナビに入れるほどの優先度が高くないコンテンツを設置。「会社へのアクセス」「プリバシーポリシー」などを配置するのにピッタリ。
かんたこのカスタマイズの詳細は次の記事で解説しています。
コンテンツの横幅を画面いっぱいに広げる
コンテンツ内でアクセント的に横幅いっぱいに要素を配置しました。
1カラムのコーポレートサイトだと定番のテクニックです。ブロックエディターのカバーブロック機能を使うと、デモサイトのようにフルワイドの動画を設置することができます。
かんたこのカスタマイズの詳細は次の記事で解説しています。
まとめ
WordPressテーマTHE THORで作ったコーポレートデザインを紹介しました。
ぜひTHE THORでのコーポレートサイト制作にチャレンジしてみてください！
