とってもわかりやすいTCDテーマオプションのUI

TCDが開発してきたテーマは、通算100作を超えています。

筆者もTCDテーマをいちユーザー（開発メンバーでもある）として使ってきて、「ここの設定、どこでやるんだっけ？」ということがあります。そういう煩わしさはゼロにしたいんですよね。

WordPressテーマによってはアクションが特殊なグローバルメニューが使われていたり、そうすると設定方法も他のテーマと少し変わってくる。「あれ？これどうやるんだっけ？」となってマニュアルを確認することも。それって問題だと思うんです。

解決のため、TCDテーマオプションのUIはリリースの度に改善を加えてきました。管理画面の中にキャプチャを入れたり、注釈（説明）を入れたり、プレースメントを入れたり。説明過多だとそれはそれで見にくいので、引き算してみたり。

TCDテーマでは、先進的なデザインやイメージを崩さない程度に、豊富なカスタマイズ機能を用意するというコンセプトでやってきました。ただ、機能のリッチさゆえに、ユーザーが手順で迷わないようにすることには苦慮しました。ワンクリックを減らす改善と、マニュアルを見なくても設定できること。そんなWordPressテーマを目指しての開発を行ってきたわけです。

2023年8月リリースの「GAIA（102作目）」で一定程度我々の満足の行く（マニュアル不要と言い切っていいほどには）テーマオプションになったのではないかと思っています（もちろん、これからもわかりやすくする）。ここで実装したテーマオプションUIは他のTCDテーマにも新しいものから実装していく予定です。

では、実際「GAIA」では、どんな管理画面になっているのか。それを紹介していきたいなと思います。

直感的操作ができるTCDテーマオプション

まずは執筆時点で最新のTCDテーマオプションである「GAIA」を例にご紹介いたします。

トップページ

GAIAのトップページのヘッダースライダーのテーマオプション（設定画面）は、このような感じです。

イメージ画像、ショルダーコピー、キャッチフレーズの入力欄が並列されています。

完成形がすぐイメージできるので、「ここはこの設定だな」というのがひと目でわかります。迷わないですね。

トップページのメインは、次のようなUIになっています。これもシンプルではありますが、何をどこに入れればいいのか、非表示にするにはどうすればいいかが、UIはデザインによって感覚でわかるようになっています。

表示順を入れ替えたり、非表示にしたりといったことも感覚的に可能。どうです？これでも迷いますか？

各ブロックはドラッグ&ドロップで並び替え可能。表示/非表示もスイッチで切り替え可能。

固定ページ

続いてGAIAのこのページ。ページ中央のこのカッコいいデザインをどうやって作成するのか。難しそうって思いますよね。

簡単、かつ感嘆です。

設定順に「番号」を振りました。これで難しいとは言わせません。

あとは生成されたショートコードを固定ページやブログの表示したいところに入れるだけです。

記事本文で [sc_design] と入れるだけ。

通常のエディタで作成したコンテンツと組み合わせることもできるので、中/上級者の方の「自由にゼロからエディターで作りたい」というご要望にもお応えできます。

ショートコードの前後にテキストを入れるもよし、画像や動画を入れてもいいです。

独自機能

テーマごとの独自機能も見やすいUIデザインで実装されています。GAIAでいうイベントカレンダーの設定箇所です。

カレンダー上に表示する項目が多いので、独自の設定項目をつくりました。

左側の画像と番号を見ながら設定できるUIで、どこの何が変更されるのかは一目瞭然です。マニュアル無しでもサクサク設定いただけます。

他のオプション

その他も小さなところで改善が入ってます。小さいのでPRするほどではないですが、この小さな違いを大切にしたい。

102作目のGAIAと101作目の「Cherie」を比べてみましょう。

わかりますか。ちょっとだけ変わってますよね。ちょっとだけ。細かいのでわからなくていいです。

でも、同じ設定のはずなのに、設定数が少し減ってるんです。自慢できるようなものではありません。

というように、1作前の作品と比べてもすこーしずつ改善されていってるということが言いたかったのです。

UIデザインの変化の過程

すでにTCDテーマオプションの使いやすさ、わかりやすさをご堪能頂けたかと思いますが、最後に過去作との比較をしてみましょう。比較に使用したWordPressテーマはこちら。

• WordPressテーマ「GAIA (TCD102)」
• WordPressテーマ「EGO. (TCD079)」
• WordPressテーマ「MONOLITH (TCD042)」

ヘッダースライダーの比較

「なるほど、こんな風になるんだ」
管理画面から完成後のイメージを想像できると、直感的な操作で進められます。ストレスなく設定できるのはいいですね。

トップページの比較

「どこをどう入力すればどうなるのか、設定してみないとわからない。」
そうしたお声を頂くこともなくなりました。マニュアルを見なくても、どこの設定をしているのかひと目でわかりますね。

イメージ画像が設置され、プレースメントも入っているので、何を入力（設定）するところなのかが迷うことなく進められます。

アップデートの基準

余談ではありますが、TCDテーマは過去作も積極的にアップデートしています。バグ修正、最新のWordPress,PHPバージョンへの対応も行っていますが、ただそれだけでは過去作の利用を続けておられるユーザーに申し訳ないです。

なので、直近や売れ筋のテーマは大幅はアップデート・機能追加（メジャーアップデート）も行っています。商品数が多いだけに即座に対応することはできないですが、マンパワーを調整しながら鋭意進めております。

TCDのアップデート情報

たとえば、Ver1.4→2.0や2.8→3.0といった一の位が上がっているのは「メジャーアップデート」の位置付けです。アップデート情報一覧を見ると、定期的に過去作もメジャーアップデートされていることがわかります。

上記は、84作目のテーマ「MASSIVE」のUIを刷新するアップデートを行なった例。細かいところで言えば、ドロップダウンからラジオボタンに変わっているんですが、これもわかりやすさを追求するのに大事な視点です（「展開」というワンクリックを減らせるから）。

このようにユーザー様のワンクリックを減らすための改善方法を日々勉強させて頂いております。いつもありがとうございます。もちろん、まだまだ至らない点は多々あるかと思いますが、それはプロとして責任を全うする所存です。

合わせて読みたいWordPressテーマ「GAIA」の関連記事

第1回 : WordPressテーマ「GAIA」に実装されたイベントカレンダーとは
第2回 : イベント会場・レジャー施設に最適なWordPressテーマ「GAIA」の機能概要
第3回 : とってもわかりやすいTCDテーマオプションのUI（当記事）