アイキャッチ画像
HOME > テーマ一覧 > TCD > 【日本語WordPressテーマ】FALCON(TCD089)

【日本語Wordpressテーマ】FALCON(TCD089)

オンライン上のショールームのような使い方を想定して開発されたWordPressテーマがTCD89番目のFALCONです。

FALCONの方向性

FALCONはどちらかというとギャラリーサイトに近い使い方になりますが、同時に商品(or サービス )のブランディング化(ブランドイメージの確立)も可能な機能が豊富に搭載されてます。

具体的にはオンライン上でゆっくりじっくりと商品を閲覧し、そのままオンラインストアや実店舗店へ向かわせる導線としての活用がメインの使い方になるでしょうか。

購入ボタン画像

”初心者”のための用語解説

※当サイトで紹介しているテーマ内に出てくる独自(専門)用語の意味がイマイチわからないという方のために用語の解説ページを作っておきました。

以下の用語について簡単に解説してます。【五十音順】

【ABテスト・AMP・CSS非同期読み込み・CTA・ECサイト・gzip・OGP&ツイッターカード・PWA・Welcart(ウェルカート)・WooCommerce(ウーコマース)・アップセル&クロスセル・ウィジェット・ウィッシュリスト・オンラインサロン・カスタム投稿タイプ・コーポレートサイト・サイトアフィリエイト・サイト回遊率・ショートコード・スクロール追尾・スプリット仕様・ドロップシッピング・ニュースティッカー・バイラルメディア・パララックス(デザイン)・ハンバーガーメニュー・ヒーローヘッダー・ファーストビュー・ファビコン・プラットフォーム・ブランディング・フルードグリッド・ブログアフィリエイト・ポータルサイト・ポートフォリオサイト・マイクロコピー・メガメニュー・モーダルウィンドウ・ランディングページ・リッチスニペット&構造化マークアップ(JSON-LD)・レスポンシブデザイン・子テーマ】

TCDテーマの管理画面には「テーマオプション」というカスタマイズ項目が出てきます。

サイト全体のカラーを変えたりロゴを設定したり、ファビコンの設定や文章・見出しのフォント(書体)設定、フッター情報の登録、SNSボタンの設定といった通常ならとても面倒な設定が、この「テーマオプション」操作画面上で手順通りに進めるだけで完結します。

サイトデザイン

ファーストビュー

FALCONのファーストビュー(ヘッダー)は全画面表示可能なヒーローヘッダー

(動画の他にも静止画やYouTube動画も設定可)

テキストが読みやすいよう画像のオーバーレイ機能も利用できるほか、FALCONではテキストエリアの背景だけにカラーを設定して可読性を上げることも可能。

(背景カラーは変更可)

キャプチャ画像

アニメーションのON・OFF機能も搭載。

ページが開いた瞬間にロゴやキャッチフレーズなど素早く情報を見せたいならアニメーションはOFFにしておくといいでしょう。

キャプチャ画像

トップページコンテンツ

トップページヘッダーのヘッダーから下のコンテンツは以下の5種類のブロックで構成されてます。

(※デモサイトでの表示順)

  1. (ミニ)ショーケース
  2. フリースペース
  3. ギャラリー
  4. バナーコンテンツ
  5. ショールーム一覧
  6. ブログ一覧

1.(ミニ)ショーケース

トップページのヘッダー下には、(このあとご紹介する)カスタム投稿タイプ「ショールーム」で作成したコンテンツを(小さな)ショーケース形式で表示可能なカルーセルスライダーが設置できます。

キャプチャ画像

商品の形状に合わせて表示サイズは「大・小」から選択可。

デモサイトは横長の小サイズですが、インテリアや小物類といった横長とは限らないモノに関しては高さのある大サイズなどにするなどですね。

キャプチャ画像

表示する記事数や表示順は調整可。

キャプチャ画像

2.フリースペース

何ものにもとらわれずTCDのクイックタグやHTMLを使って自由に制作可能なエリアがフリースペース

キャプチャ画像

FALCON独自の、画像とテキストをうまく組み合わせたレイアウトが特長のギャラリー

(※ギャラリーの詳細は後述)

キャプチャ画像

4.バナーコンテンツ

画面フルサイズでの画像背景にテキストやボタンなどを重ねて表示可能なバナーコンテンツ

画像はパララックス(視差)効果も付けられます。

(デモサイトで動きが確認できます)

キャプチャ画像

5.ショールーム一覧

(このあとご紹介する)カスタム投稿タイプ「ショールーム」で作成したコンテンツを任意の数だけ表示できます。

デモサイト・トップページではクラシックカーがブランド別にカテゴリー分けされて表示されてます。

キャプチャ画像

6.ブログ一覧

ブログ記事を任意の数だけ表示できます。

(日付順 or ランダムから選択)

キャプチャ画像

上記(ミニ)ショーケースを除いた「フリースペース」から下のコンテンツブロックはコンテンツビルダーを使うことで並び替え・追加・非表示などが自由自在。

キャプチャ画像

オリジナル機能

ショールーム

FALCONの目玉機能とも言えるのがカスタム投稿タイプの「ショールーム」

商品を美しいショーケースのように見せることで商品の良さをアピールできます。

ショールーム一覧ページでは取り扱う商品が増えてきても乱雑化しないよう、表示件数を指定してページャーで区切っての表示もできます。

キャプチャ画像

ショールーム詳細ページでは、ヘッダー部分にスムーズにアニメーションするスライダーがセット可能。

デモサイトのように様々な視点での画像を複数枚セットしておけば利用者は商品画像をもれなく閲覧でき、制作側は確実に商品をアピールすることができます。

キャプチャ画像

あとは本文を記述してコンテンツを作成するだけ。

デモサイトのようなスペック表(デザイン済みのテーブルコンテンツ)も専用のクイックタグ(データリスト)を使えば簡単に作成できます。

キャプチャ画像

ページ下部には別のギャラリースライダーも表示可能。

各画像左下にはアニメーションするキャプションも設定可能なので、簡単な説明を入れておくとアピール力も高まりますね。

キャプチャ画像

ギャラリー機能

商品の魅力を最大限に見せる機能のひとつがFALCONのギャラリー機能。

トップページと(このあとご紹介する)固定ページテンプレート「ランディングページ」で使えます。

キャプチャ画像

下のような編集画面で見出しとテキスト(説明文)・画像を設定。

1段ごとのレイアウト設定になっており、上のデモサイトの赤枠部分(1段目)はレイアウトでタイプ2が選択されてます。

(左のブロックにテキスト、右のブロックに画像を設定)

キャプチャ画像

各ブロックごとに画像もしくはテキストを登録でき、これらを複数段組み合わせることでさまざまなバリエーションでコンテンツを表示することができます。

(選択したレイアウトによってブロックのサイズは自動調整)

2タイプのランディングページ(LP)作成機能

FALCONには2種類の固定ページ作成機能(いずれもランディングページとして使える仕様)が搭載されてます。

テンプレート「デフォルト」

ひとつは通常の固定ページテンプレート「デフォルト」

(デモサイトの『SERVICE』→『デモLP1(通常ヘッダー)』or『デモLP2(全画面ヘッダー)』がサンプルページ)

基本設定ではランディングページ用に不要な項目の表示・非表示がチェックのみで行えます。

(もちろんLP以外に利用しても問題なし)

キャプチャ画像

ヘッダーも通常のヘッダーサイズ(デザインに合わせたサイズ) or 全画面サイズ(ヒーローヘッダー)の2タイプから選べたり、画像に重ねるキャッチフレーズやオーバーレイの色なんかも調整可能。

テキストのアニメーションも選択できます。

キャプチャ画像

あとは自由に本文を埋めていくだけ。

(クイックタグももちろん使える)

テンプレート「ランディングページ」

もうひとつがよりLP向けにデザインされた固定ページテンプレート「ランディングページ」

(デモサイトの『SERVICE』がサンプルページ)

テンプレート「ランディングページ」ではデザイン済みのブロックを組み合わせてページを作る仕様なので、クールなランディングページがスムーズに作成できます。

用意されてる専用コンテンツは下記の通り。

フローコンテンツ

サービスや事業内容をステップごとに紹介したりポイント別にアピールしたりするのに適したデザインコンテンツ。

レイアウト済みなので、用意したキャッチフレーズや説明文を入力するだけでデモサイトのようなレイアウトで表示されます。

キャプチャ画像

ベネフィットコンテンツ

サービスや商品の要点を画像とテキストを横並びで表示してわかりやすくアピールできるデザインコンテンツ。

追加・編集・並び替えも簡単ですよ。

キャプチャ画像

ギャラリー

(※前項でご紹介済み)

フリースペース

キャッチフレーズと説明文の入力欄+本文の作成エリア(HTMLやクイックタグ使用可)で構成される完全自由な入力欄です。

キャプチャ画像

なおここまでご紹介した各コンテンツは、トップページと同じコンテンツビルダー仕様なので、入れ替えや表示・非表示も思いのまま。

キャプチャ画像

サイドボタン

FALCONでは常に視界の一部に存在し呼び込みたいページへ一発で移動可能なサイドボタンを全ページで固定表示できます。

(表示・非表示は選択可)

デモサイトでは問い合わせ先やオンラインショップやアクセス情報などのリンクがセットされてます。

特に需要の多いページやLPへのリンクを設置しておくといいんじゃないでしょうか。

キャプチャ画像

フッター

フッターにはバナーコンテンツを3つまで設置可能。

(2つだけの表示でも幅は自動調整)

デモサイトでは在庫車リスト、サービス概要、お問い合わせへのリンクがバナーとして設定されてます。

タイトル(or サブタイトル)と画像を設定しておいて、表示・非表示はチェックひとつで変更可。

キャプチャ画像

お知らせ

FALCONの「お知らせ」一覧ページは、横長のカード型で表示されるレイアウトデザイン。

キャプチャ画像

また「お知らせ」の詳細ページ自体は基本的には通常の投稿と同じデザインですが、通常なら記事本文下に表示される関連記事のエリアには『新着のお知らせ記事のタイトル』が表示される仕様になっています。

キーカラー

テーマオプションの基本設定でサイトのキーカラー用に2種類が設定可。

サイトイメージのバランスが崩れないよう、ベースカラーの統一は重要事項の一つとも言えます。

デモサイトはキーカラー1にブラックを、キーカラー2にネイビーが設定されてます。

(それぞれ変更するとサイト全体の各所が一括で反映される仕様)

キャプチャ画像

シェアボタンやコピーボタン一括設定

コメントやトラックバック、SNSのシェアボタン、”この記事のタイトルとURLをコピーする”ボタンなどの表示・非表示はテーマオプションのチェックのON・OFFで一括設定可。

フォント一括設定

フォントタイプやフォントサイズは見出しと本文の2カ所を設定するだけで(デザインを統一させるべく)サイト全体に反映されます。

(一部のフォントだけの変更はカスタムCSSに記述)

キャプチャ画像

ブログ記事追加コンテンツ機能

ブログ記事の本文の上もしくは下にはオリジナルのコンテンツが設置可。

HTMLを使って自由にかけるのでオリジナルバナーを貼ったりSNSのタイムラインなどを設置することもできます。

キャプチャ画像

スマホ・ドロワーメニューに追加コンテンツエリア

スマホ表示時に右サイドから表示されるドロワーメニュー、デフォルトでは検索フォームの有無が設定できるようになってますが、HTMLを使って任意でコンテンツを追加することもできます。

GoogleカレンダーやSNSのタイムラインなどを埋め込んだりオリジナルのバナーなどを設置したりと使い道はいろいろ。

キャプチャ画像

スマホ用固定式フッターボタン

スマホのフッターにはいろいろなリンクが付けられるボタンを表示できます。

(アイコンあり・なしの2タイプから選択可)

アイコン有りのボタンはおよそ30種類のアイコンから選択可能。

キャプチャ画像

その他の主な機能

どんな方におススメ?

  • さまざまな角度から商品を見せることで手早くブランドイメージを植え付けたい
  • ギャラリーサイトのような魅了する商品ページを構築したい

購入ボタン画像

記事はお役にたてましたか?

記事にご興味をもっていただけましたら下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓


コメントはお気軽にどうぞ

メールアドレスは公開されません。
また、* が付いている欄は必須項目ですので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)