日本古来から受け継がれてきた伝統文化はそれだけで美しいものです。みなさんにも馴染みのある日本酒や着物、陶芸などは海外の人から見ても美しいわけですね。そして、それをどうにかWebを使って伝統文化のブランド価値を世界中に広めたいと考えて作られたのがWordPressテーマ「HAKU」です。
このWordPressテーマは「商品」が主役の構成になっています。目的は売ることでも集客でもありません。商品のブランド価値を上げることだけにスポットを当てています。大手アパレルブランドでもイメージを上げるためだけに作られた特設サイトのようなものが運営されているケースがありますが、まさにその役割を果たすのが「HAKU」なのです。
売上を上げるのはそこからです。
それでは当記事でテンプレートの機能解説をしていきます。
和の伝統や格式を訴求するサイトに最適な「HAKU」
デモサイトには英語版サイトが表示されます（右上のバイリンガルボタンから日本語版へ移動可能）。日本語版では縦書きになっている箇所が多数ありますが、すべて横書きへ変更可能です。
なぜ英語版のデモを用意しているかというと、ブランドを海外展開させるためのサポートを「HAKU」がフォローさせて頂きたいからです。漢字・カタカナ・ひらがなだけでなく、アルファベットでも美しく表示されることを確認してもらいたいです。もちろん、その他ドイツ語やフランス語など欧文全般で相性が良いデザインとなっているので、その点は安心です。
細かいところで言えば、TCDテーマオプションから各要素のフォントやフォントサイズを細かく調整できるので、言語によって差異が出てきやすい文字サイズの調整も可能になっています。
ローディング後に始まるオープニング。
アニメーションで人の感覚に訴えかけます。
デモでは、ローディング→オープニング→ムービーと、ファーストビューでコンテンツを流れるように見せることが可能な仕様となっています。設定を変えれば、ローディング→オープニング→静止画スライダーといった組み合わせも可能で、そのあたりの自由度は高いです。
ローディング
ローディング中に表示するロゴ・キャッチフレーズ・秒数を設定できます。ロード画面を使わない設定も可能です。ローディングは期待感を持たせて、ユーザーを離脱させない効果があるので、できれば設定しておきたいところです。
ヘッダーコンテンツ
オープニングでは、フル画面の中で「ロゴ」をメインに押し出します。最初のたった数秒の出来事ですが、シンプルにロゴを消費者に訴求するために必要な瞬間です。
ロゴの下に表示するテキストはフェードで現れます。アニメーションは和の雰囲気にピンポイントに合わせています。横書きの場合はまた違ったアニメーションになっているので、英語版デモもチェックしてみてください。
ムービー
最後はムービーが流れるようになっています。動画（YouTube/MP4動画）の上にも管理画面からテキストを表示できますので、撮影した生のデータをアップロードしてもいいかもしれません。MP4の場合、ファイルサイズに気をつけてください。あまりサイズが大きすぎると表示速度に影響します。
動画ではなく、静止画スライダーにしたい方も問題なく対応可能です。シンプルに3枚の画像をスライドさせつつ、縦書き文字をフェードさせるのも美しいと思います。
テキストアニメーションについてはトップページ以外でも頻繁に使用されています。そして、2種類から選べます（固定ページや、アーカイブページをチェックしてみてください）。
設定方法は項目を入力するのみ
HAKUはすべての設定が専門知識がなくてもできるようになっています。HTMLやCSSを使わなくてもデモサイトと同じサイトを作成することが可能です。
基本的には用意されている設定箇所にテキストや画像をアップロードしていくだけです。あとは各要素ごとに色やフォントのサイズなどの変更箇所が用意されているので、それらを設定すればサイトが完成します。難しいことをせずとも、このようなサイトが作れてしまうんですね。
別々のコンテンツを設定できるトップページで
デバイスごとにバランスを考える。
HAKUのトップページは、モバイルとPCで別々のコンテンツを設定できます。なぜかというと、PCとスマホでは表示できる情報量があまりにも異なり、見え方も変わってしまうからです。それぞれのデバイスに適した「美しい見え方」を追求する内にトップページは別々のコンテンツを設定できるようにしたわけです。
ちなみに、時々下層ページもスマホは別のコンテンツを表示したいという要望を頂くことがありますが、おすすめしません。下層ページは運営期間が長くなるほど増えていくので、単純に作業量が2倍となり、大変だからです。けれども、HAKUでは下層ページもスマホで美しく表示されるように調整を加えておりますので、その点はご安心ください。
以下はモバイル環境で、縦書きと横書きが並んで表示される箇所です。トップページとデザインページ1で制作したページ（HAKUの起源）ですね。
それぞれの箇所では、モバイル表示時での高さを調整できる仕様になっていますので、テキスト量やテキストの向きによって上下に余分な隙間が空くことを防ぐことができます。全てを英字で入力した際など、上下の余白が広すぎる場合などに調整いただくことが可能です。
変更した高さによって推奨画像サイズも連動して変更されますので、セットする画像のサイズとテキスト量を調整することで理想のバランスで表示していただけます。細かいことを言いましたが、テンプレートなので様々な状況で利用されることを想定して、どんな状況でも美しく見せるためにこのような自動調整が加わる仕様にしているわけです。
他のコンテンツも自在に追加したり、並び替えすることが可能ですので、オリジナルのトップページをスマートに制作いただけます。中でも特徴的なコンテンツは、以下でご紹介いたします。
レイヤー画像コンテンツ
一つ目はこちらですね。一見すると画像とテキストブロックから成るコンテンツですが、画像をセットするブロックには、背景画像と別の画像を重ねて表示させることができます。
重ねた画像はスクロールに合わせて背景画像とは異なるタイミングで表示される仕様です。ユーザーがトップページスクロールした際、商品画像などを表示させてアピールするような使い方が可能になります。
また、商品下に表示させているキャプションの他に商品名などを登録してホバー時にアニメーションさせて表示させる機能もございます。キャプションで注意を惹き、商品名を表示することで、スムーズなクリックを誘発できるでしょう。デモサイトでは、ホバー時に銘柄名表示させる設定で、そのまま商品ページへと遷移できる仕様になっています。
2ブロックコンテンツ
デモサイトでは、フッターの手前にセットしてある2ブロックコンテンツ。
ここにはお知らせ記事と、ブログ記事をカルーセルスライダーにてセットしていますが、次項で紹介するカスタム投稿タイプ「商品」をセットすることもできます。カルーセルに表示される記事の並び順は、日付順やランダムから選択できるので、訴求したい情報が古い記事にもある場合はランダムを選択するといいでしょう。
また、左右のカルーセルは切り替わるスピードをそれぞれで設定できます。同じ速度で切り替わると見栄えがあまり良くないので、左右で差をつけて設定するほうがベターですね。細かい部分にはなりますが、目に残る印象は結構変わります。
この特徴的な二つのブロックを含むすべてのトップページコンテンツを、モバイルとPCで完全に分けて設定することができるので、デバイスごとに全くことなる導線を配備することも可能です。
美しいスムーススクロールとレイアウトで
魅せるカスタム投稿タイプ「商品」
HAKUではブランディングサイトを想定しているテーマですので、搭載しているカスタム投稿タイプ「商品」は、多くの商品を陳列するような仕様にはなっていません。これはあえての仕様です。
デモサイトでもわかるように、すべての商品が1ページ内に表示されるので、多くの商品を登録することには向いていないわけです。ECサイトとは別の特設サイトをHAKUで制作するようなイメージになります。
ブランディングサイトの構築を想定しているHAKUでは、限られた商品のみをフィーチャーさせるような作りになっているということです。
アーカイブページでは商品のカテゴリーボタンがページ上部に表示され、それぞれの箇所に滑らかに遷移できる仕様になっています。スムーススクロールで心地よく移動できるフロント面のメリットだけでなく、制作サイドの汎用性も高いです。
概要を説明いたしますと下記箇所の「詳細ページに表示する説明文」、「アーカイブページに表示する説明文」などを基本設定として、それ以外は自由に商品ページ用のコンテンツビルダーで制作していただくことができる仕様です。
各種説明文のみが固定のテンプレートとなっているので、商品画像やタイトルを入力して、残りは通常の記事のように自由に制作いただけます（HTML入力可能）。
もちろんデモサイトのようにつくる場合は、下記のレイアウトされたデザインにあてはめるのみで完成するので、ページの制作がスムーズです。
画像の左右を入れ替えて、ブロックを複数追加することもできますし、ご自身で制作できるフリースペースと組み合わせることもできます。商品の詳細を美しいレイアウトで訴求して、魅力を存分にアピールしましょう。
商品の魅力が十分に伝われば、商品詳細ページからECサイトなどへと誘導できる強力な導線となるはずです。
HAKU仕様の特別なメガメニュー
1ページにすべてのアイテムを表示させる商品アーカイブページの仕様が故に、HAKUでは特別仕様のメガメニューを採用しております。従来のテーマですとメガメニューのカテゴリーをクリックするとカテゴリーアーカイブページに遷移していましたが、商品カテゴリー用のメガメニューでは、該当のカテゴリーの箇所へアンカーリンクして遷移する仕様です。
他のページを開いている状態でも、メガメニューから該当のカテゴリーをクリックすると、自動でスムーススクロールされて表示されます。視覚的に心地よく感じるだけでなく、一度の動作で目的のカテゴリーの商品へとジャンプできる仕様になっているということです。
あらゆるページをスマートに作成するための
固定ページテンプレート群
HAKUに搭載されている固定ページは、全部で3種類あります。
- 画像数枚でほぼ完成する「デザインページ1」
- ご自身で制作するには手間のかかる「デザインページ2」
- 特設ページなどを制作し、コンバージョンを高める「ランディングページ」
上記のすべてのテンプレートタイプに加えて、デフォルトの固定ページでも、ロゴ、グローバルメニュー、フッターの表示の有無を簡単に変更可能です。
WordPressで通常の固定ページを作成する要領で様々なバリエーションのページが作成できます。
デザインページ1
デモサイトのABOUTページ（HAKUの起源）のようなページを制作する場合は、デザインページ1を活用すればスムーズに作成できます。あなたが用意するのは、画面サイズフル幅で表示させる画像数枚と、少しのテキストのみです。あとはテンプレートに搭載されているコンテンツビルダーを操作すれば完成します。
画像に重ねる色の設定に加え、テキストの向きやフォント、サイズ等すべて直感的な操作のみで完了です。モバイルでのフォントサイズなども同時に設定できます。また、前述のトップページコンテンツと同様にモバイル表示時に縦書きと横書きが混在する箇所の高さを調整することもできますので、テキスト量に合わせて美しいレイアウトで表示可能です。
デザインページ2
デモサイトの酒づくりのようなページの場合は、デザインページ2を利用すると便利です。画像とテキストを絶妙な位置にレイアウトしたページをスムーズに制作できます。モバイル表示でも綺麗にレスポンシブされ、フェードイン表示のアニメーションも美しいです。
背景画像にテキストを重ねるブロックと、上記のブロックを任意の数だけ組み合わせることができ、ご自身で自由に制作できるフリースペースと組み合わせることも可能です。テンプレートのレイアウト済みのデザインと、フリースペースを用いて設置できるボタンなどを組み合わせるとランディングページとして利用できるページをスムーズに作成できます。
サイト内の下層ページとしても、ランディングページとしてもお使いいただける固定ページテンプレートです。
ランディングページ
こちらのテンプレートは、その名の通り、ランディングページの制作にフィットするようなレイアウトになっています。サイトの雰囲気と統一されている黒枠で囲まれた見出しや、キャッチコピーと画像などを美しく配置できるブロックを搭載しているページテンプレートです。
その他にもGoogleマップや、レイアウト済みの一覧表も表示できる仕様ですので、イベント会場へのご案内、あるいはリクルートページなどを作成してそれらをランディングページとして活用いただくことができます。レイアウト済みの一覧表は、各項目の並び替え・追加が直感的に行えるので表の管理がスムーズです。
デモサイトでは、下記2種類のページを同様のテンプレートを用いて作成しています。
ウェブサイトの下層ページとして使用する場合は、メニューやフッターを表示しサイト内回遊率をあげ、ランディングページとして使用する場合は、他のページへ遷移する選択肢を少なくするために非表示にするのも効果的かと思います。
前述の通り、すべてのテンプレートでロゴやメニューなどの表示・非表示を選択できますので、ご自身の目的に合わせて自在にランディングページを作成いただけることもHAKUの魅力のひとつです。
- スマートに手早く制作したい人は、テンプレート通りに当てはめて、並び替えやブロックの追加を行う。
- 通常のエディターで自分で制作できる方は、HTMLで入力可能なフリースペースとカスタムCSSなどを活用して作成する。
このように初心者の方から、HTMLやCSSの知識がある方まで使い分けていただくことができます。スムーズに制作できるランディングページテンプレートで、商品やサービスの認知度を高めたり、集客やコンバージョンを増やす施策を練ってみてはいかがでしょうか？
日本のおくゆかしさを世界へ訴求する
WordPressテーマ「HAKU」
- 縦書きアニメーション醸し出す神秘的な高級感や、ロゴの配置によるブランドイメージの訴求。
- すべてのページで適用されているページスクロールに合わせた美しいフェードインアニメーション。
- 英文でも美しい欧文フォントと、テキストの向きによって生じるマージンの余白を調整可能なレイアウト。
- 流通している商品とは一線を画するプレミアムなアイテムを紹介するページの優れた導線設計。
- あらゆるランディングページページを制作でき、自在にカスタマイズできる豊富なテンプレート。
このような特徴を持つHAKUを活用して、店舗や商品のブランディングを行う他に、バイリンガルサイトへの導線を活かし、日本文化を世界に広める架け橋としてもご活用いただけますと幸いです。
