Twenty Seventeen(WordPressテーマ)でビジネスサイトにフォーカス
Twenty Seventeenとは
WordPressテーマ「Twenty Seventeen」は、2017年にWordPressのデフォルトテーマとしてリリースされたテーマです。ビジネスサイトでの利用を意識して設計されており、以下のような特徴があります。
主な特徴:
- ビデオヘッダーのサポート: サイトのヘッダー部分に動画を表示させることができます。YouTubeのURLをリンクするか、mp4ファイルをアップロードして利用できます。
- フロントページのセクション: 複数の固定ページの内容を組み合わせて、魅力的なフロントページレイアウトを作成できます。各ページのアイキャッチ画像がフルスクリーンで表示され、視覚的なインパクトを与えます。
- カスタムカラーオプション: 明るいカラースキーム(デフォルト)、暗いカラースキーム、そしてスライダーで自由に色合いを調整できるカスタムカラースキームが用意されています。サイトロゴやソーシャルメニュー、ウィジェットなど、細部にわたってカスタマイズが可能です。
- 非対称なグリッドレイアウト: 独特の非対称なグリッドデザインが特徴で、コンテンツを際立たせます。
- レスポンシブデザイン: どのようなデバイスでも適切に表示されるように設計されており、モバイルフレンドリーです。
- 投稿フォーマットのサポート: 記事のタイプ(画像、動画、ギャラリー、引用など)に応じて、ブログ記事ページでの表示方法が変わる投稿フォーマットをサポートしています。
- アクセシビリティ対応: アクセシビリティに配慮した設計がされています。
- 多言語対応: 多くの言語において最適なフォントスタイルが含まれており、多言語サイトにも対応しています。
その他:
- シンプルながらもビジネスサイトに求められる機能を多く備えており、カスタマイズ性も比較的高いテーマです。
- デフォルトテーマであるため、WordPressのインストール時に自動的に含まれています。
※最新の情報を公式ページで確認ください
Twenty Seventeenの使い方
WordPress のデフォルトテーマである「Twenty Seventeen」は、ビジネスサイトに焦点を当てて設計されており、没入感のあるアイキャッチ画像と繊細なアニメーションが特徴です。特に、フロントページに複数のセクションを設定できる点が大きな特徴です。
ここでは、Twenty Seventeen の主な使い方とカスタマイズ方法について説明します。
Twenty Seventeen の主な機能と特徴
- ヘッダーメディア: ヘッダー画像とヘッダー動画の両方をサポートしており、サイトの「カスタマイズ」>「ヘッダーメディア」から変更できます。推奨サイズは幅 2000px、高さ 1200px です。
- フロントページセクション: 固定ページを組み合わせて、トップページに複数のセクションを表示できます。各セクションにはアイキャッチ画像を割り当てることができ、パララックス効果(スクロール時に画像がゆっくりと動く効果)も利用できます。
- レイアウト: 2カラムレイアウトと1カラムレイアウトを選択できます。
- カスタムカラー: デフォルトの明るいカラースキーム、暗いカラースキーム、そしてスライダーで色調を調整できるカスタムカラースキームが用意されています。
- ウィジェット: サイドバーとフッターにウィジェットエリアがあり、情報を表示できます。
- ソーシャルメニュー: ソーシャルメディアへのリンクを表示するメニューを設定できます。
- ロゴ: サイトロゴを設定できます。
Twenty Seventeen の使い方とカスタマイズ方法
Twenty Seventeen のほとんどのカスタマイズは、WordPress の管理画面の「外観」>「カスタマイズ」から行います。
1. ヘッダーメディアの変更
- 「外観」>「カスタマイズ」を開きます。
- 「ヘッダーメディア」を選択します。
- 画像や動画をアップロードして、トップページに表示されるヘッダーを変更します。YouTube の動画も設定できます。
2. トップページの作成とセクションの設定
Twenty Seventeen の特徴的な機能であるトップページの複数セクション表示を設定します。
- 固定ページの作成: トップページに表示したい内容ごとに固定ページを作成します。「会社概要」「サービス」「お問い合わせ」など、表示したいセクションの数だけページを作成し、それぞれに内容とアイキャッチ画像を設定します。アイキャッチ画像は各セクションの背景として表示されます。
- フロントページの設定:
- 「設定」>「表示設定」を開きます。
- 「表示設定」で「固定ページ」を選択し、「フロントページ」にはトップページとして表示したい固定ページ(例:作成した「ホーム」や「トップページ」)を選択します。
- 「投稿ページ」には、ブログ記事一覧を表示したいページを選択します。
- セクションの割り当て:
- 「外観」>「カスタマイズ」を開きます。
- 「テーマオプション」を選択します。
- 「フロントページ第1セクションのコンテンツ」「フロントページ第2セクションのコンテンツ」…と表示されている箇所で、先ほど作成した固定ページをそれぞれ選択します。
- 各セクションには、そのセクションに設定した固定ページのアイキャッチ画像と内容が表示されます。
3. メニューの作成
サイトのナビゲーションメニューを作成します。
- 「外観」>「メニュー」を開きます。
- 「新しいメニューを作成」をクリックし、メニュー名を付けます。
- メニューに表示したい固定ページや投稿、カスタムリンクなどを追加します。
- 「メニュー設定」の「メニューの表示場所」で「トップメニュー」にチェックを入れて保存します。
4. サイドバーとフッターのウィジェット設定
サイドバーやフッターに、検索ボックス、最近の投稿、カレンダーなどのウィジェットを追加できます。
- 「外観」>「ウィジェット」を開きます。
- 利用できるウィジェットの中から、表示したいウィジェットを「ブログサイドバー」「フッター1」「フッター2」のいずれかのエリアにドラッグ&ドロップします。
5. 色のカスタマイズ
- 「外観」>「カスタマイズ」を開きます。
- 「色」を選択し、カラースキームやヘッダーテキストの色などを変更できます。
6. その他のカスタマイズ
- サイト基本情報: サイトのタイトル、キャッチフレーズ、サイトアイコン(ファビコン)を設定できます。
- 追加 CSS: 詳細なデザイン調整をしたい場合は、カスタム CSS を追加できます。
子テーマの利用
Twenty Seventeen のカスタマイズを行う際は、子テーマを作成して行うことを強く推奨します。親テーマ(Twenty Seventeen本体)を直接編集すると、テーマのアップデート時にカスタマイズ内容が上書きされて消えてしまうためです。
子テーマの作成方法は以下の通りです。
wp-content/themes
ディレクトリ内にtwentyseventeen-child
のような任意の名前のフォルダを作成します。- そのフォルダ内に
style.css
ファイルとfunctions.php
ファイルを作成します。 style.css
に以下の内容を記述します。 CSS/* Theme Name: Twenty Seventeen Child Template: twentyseventeen */
functions.php
に以下の内容を記述します。
PHP<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
?>
- WordPress 管理画面の「外観」>「テーマ」で「Twenty Seventeen Child」を有効化します。
これにより、子テーマでカスタマイズした内容が親テーマのアップデートに影響されずに済みます。
Twenty Seventeen は、シンプルながらもビジネスサイトに適した機能が揃っており、これらの手順を参考にカスタマイズすることで、独自のウェブサイトを構築できます。
Twenty Seventeenのデメリット
- カスタマイズ性の限界: Twenty Seventeenは、ブログやビジネスサイト向けのシンプルなデザインで、デフォルトの状態ではあまり多くのカスタマイズオプションがありません。特に、レイアウトやセクションの追加・削除など、より複雑な変更を行いたい場合には、CSSの知識が必要になったり、子テーマを作成してカスタマイズしたりする必要があります。他の多機能なテーマと比較すると、手軽なカスタマイズの自由度は低いと言えます。
- 機能の少なさ: 多くのサードパーティ製テーマに標準で備わっているような、例えば高度なギャラリー機能、ページビルダーとの連携、豊富なウィジェットエリア、独自の投稿タイプなどの機能は、Twenty Seventeenにはありません。これらの機能が必要な場合は、別途プラグインを導入するか、テーマのカスタマイズで対応する必要があります。
- 単一目的のデザイン: Twenty Seventeenは、主にブログや情報提供を目的としたサイトに適したデザインです。ポートフォリオサイト、ECサイト、コミュニティサイトなど、特定の目的を持ったサイトを作成しようとすると、そのデザインが足かせになる可能性があります。他の用途に転用するには、かなりの手間がかかることがあります。
- 最新のWebトレンドへの対応: Twenty Seventeenは、WordPressのデフォルトテーマとして長く使われていますが、最新のWebデザイントレンドやユーザーエクスペリエンス(UX)の観点から見ると、やや古さを感じる部分があるかもしれません。例えば、より洗練されたアニメーション効果や、インタラクティブな要素などは、デフォルトではほとんどありません。
- サポートの終了: WordPressのデフォルトテーマは、新しいバージョンがリリースされるとサポートが終了します。Twenty Seventeenは古いテーマであり、新しいブロックエディターであるGutenbergへの対応なども、最新のテーマに比べると限定的です。セキュリティアップデートや機能改善は提供され続ける可能性はありますが、活発な開発は行われていません。
これらのデメリットは、どのようなサイトを作成したいか、どのような機能を重視するかによって感じ方は異なります。シンプルなブログや企業サイトを素早く立ち上げたい場合には、Twenty Seventeenは良い選択肢となることもあります。しかし、より高度な機能やデザインの自由度を求める場合には、他のテーマも検討することをお勧めします。
ビジネスサイトにおすすめできるテーマのポイント
ビジネスサイト向けWordPressテーマを選ぶ際のポイント
- レスポンシブデザイン: PC、タブレット、スマートフォンなど、どのデバイスで見ても最適に表示されることが必須です。
- カスタマイズ性: コーディング知識がなくても、視覚的に簡単にデザインやレイアウトを調整できる機能(ドラッグ&ドロップビルダーなど)があると便利です。
- 速度とSEO最適化: 表示速度が速く、検索エンジンにインデックスされやすい構造になっていることが重要です。
- 必要な機能の有無: お問い合わせフォーム、ポートフォリオ、ブログ機能、EC機能など、ビジネスに必要な機能が標準で搭載されているか、あるいはプラグインで簡単に連携できるか。
- 信頼性とサポート: 定期的なアップデートがあり、問題発生時のサポート体制がしっかりしているか。
- デモサイトの豊富さ: 業界や目的に合わせたデモサイトが豊富に用意されていると、イメージが湧きやすく、導入もスムーズです。
おすすめのWordPressビジネスサイトテーマ(有料テーマが多いですが、機能とサポートを考えるとおすすめです)
- Divi (Elegant Themes)
- 特徴: 圧倒的なカスタマイズ性を誇るビジュアルビルダー「Divi Builder」が最大の魅力です。ドラッグ&ドロップで直感的にサイトを構築できます。豊富なプリメイドレイアウト(完成されたデザインテンプレート)も用意されており、業種を問わず様々なビジネスサイトに対応できます。年間の利用料がかかりますが、複数のサイトで利用でき、非常にコストパフォーマンスが高いです。
- こんな方におすすめ: デザインの自由度を最大限に高めたい方、ノーコードでプロレベルのサイトを作りたい方。
- THE THOR (FIT)
- 特徴: 日本語テーマの中でも特にSEOに強く、表示速度も高速です。デザインの柔軟性も高く、ビジネスサイトに必要な機能が豊富に搭載されています。内部SEO対策が充実しているため、集客を重視するビジネスサイトにおすすめです。
- こんな方におすすめ: SEOで上位表示を狙いたい方、日本製のテーマで手厚いサポートを受けたい方。
- SWELL
- 特徴: ブロックエディタ(Gutenberg)に完全対応しており、直感的な操作でデザインが可能です。表示速度も速く、ブログ機能も充実しているため、コンテンツマーケティングに力を入れたいビジネスサイトにも向いています。シンプルながらも洗練されたデザインが特徴です。
- こんな方におすすめ: ブロックエディタを積極的に活用したい方、シンプルでモダンなデザインを好む方。
- Astra
- 特徴: 非常に軽量で高速な無料テーマですが、有料版にアップグレードすることでさらに多くの機能とデモサイトが利用できます。ElementorやBeaver Builderなどのページビルダーとの連携がスムーズで、高いカスタマイズ性を実現できます。
- こんな方におすすめ: 高速表示を重視する方、Elementorなどのページビルダーをメインで使いたい方。
- GeneratePress
- 特徴: Astraと同様に軽量で高速なテーマです。こちらも無料版でも十分使えますが、有料版の「Premium」にすることでより多くの機能が解放されます。Gutenbergエディタとの親和性も高く、開発者にも人気が高いです。
- こんな方におすすめ: 高速表示を重視する方、ミニマルなデザインからスタートしてカスタマイズしていきたい方。
テーマ選定の具体的な進め方
- 目的とターゲットの明確化: どのようなビジネスを展開し、誰に情報を届けたいのかを明確にします。
- 必要な機能の洗い出し: お問い合わせフォーム、予約システム、オンラインショップ、ポートフォリオなど、サイトに実装したい機能をリストアップします。
- デザインイメージの具体化: 競合サイトや参考になるサイトを見て、どのようなデザインが好みか、自社のブランドイメージに合うかを確認します。
- デモサイトの確認: 気になるテーマがあれば、必ずデモサイトを確認し、デザイン、操作性、表示速度などをチェックします。
- レビューや評判の確認: 他のユーザーのレビューや評価を参考にします。
- 価格とサポート体制の確認: 有料テーマの場合は、価格とサポート体制(日本語対応の有無など)も重要な要素です。