【日本語Wordpressテーマ】HAKU（TCD080）
も・く・じ
ブランディングサイトの構築にスポットを当てたTCD80番目のWordpressテーマがHAKUです。
HAKUの方向性
元々はウェブサイトを通して伝統文化のブランド価値を世界中に広めたいとの考えから開発されたHAKUですが、結果として（特定の）”商品のブランドイメージを上げたい”、”商品の魅力をアピールしたい”サイトに最適なワードプレス・テーマに仕上がってます。
商品価値を上げることで購買意欲を掻き立て、独自のブランドを構築する、これがHAKUを使う最大のメリットです。
HAKUって名称は「箔が付く（値打ちや評価が高くなる・貫禄がつく）」からネーミングされたんだって。
”初心者”のための用語解説
※当サイトで紹介しているテーマ内に出てくる独自（専門）用語の意味がイマイチわからないという方のために用語の解説ページを作っておきました。
以下の用語について簡単に解説してます。【五十音順】
【ABテスト・AMP・CSS非同期読み込み・CTA・ECサイト・gzip・OGP＆ツイッターカード・PWA・Welcart（ウェルカート）・WooCommerce（ウーコマース）・アップセル＆クロスセル・ウィジェット・ウィッシュリスト・オンラインサロン・カスタム投稿タイプ・コーポレートサイト・サイトアフィリエイト・サイト回遊率・ショートコード・スクロール追尾・スプリット仕様・ドロップシッピング・ニュースティッカー・バイラルメディア・パララックス（デザイン）・ハンバーガーメニュー・ヒーローヘッダー・ファーストビュー・ファビコン・プラットフォーム・ブランディング・フルードグリッド・ブログアフィリエイト・ポータルサイト・ポートフォリオサイト・マイクロコピー・メガメニュー・モーダルウィンドウ・ランディングページ・リッチスニペット＆構造化マークアップ（JSON-LD）・レスポンシブデザイン・子テーマ】
TCDテーマの管理画面には「テーマオプション」というカスタマイズ項目が出てきます。
サイト全体のカラーを変えたりロゴを設定したり、ファビコンの設定や文章・見出しのフォント（書体）設定、フッター情報の登録、SNSボタンの設定といった通常ならとても面倒な設定が、この「テーマオプション」操作画面上で手順通りに進めるだけで完結します。
サイトデザイン
ブランディングサイト構築用テーマの名に恥じぬよう、あらゆるページで製品（商品）のイメージアップにつながるべく、もしくは高品質な印象を効果的にアピールすべくデザインされてるのがHAKUの魅力です。
ファーストビュー
HAKUのファーストビューエリアはローディング画面から始まるヘッダーコンテンツ機能が搭載されており、ローディング終了後に表示される各コンテンツ類（動画・静止画）を流れるように見せられる仕様になってます。
（ローディング機能を使わない設定も可）
特にHAKUではロゴコンテンツ（ロゴ＋キャッチフレーズ＋背景画像）の表示にけっこうこだわってます。
というのも通常の企業サイトと異なって、ブランディングサイトにおいてはロゴがとても重要な要素と考えているからです。
このロゴをHAKUではフル画面の背景画像に重ねて表示できる仕様になっていて、デモサイトではロゴが浮かび上がる感じでじんわりと表示されます。
ロゴの下に表示されるキャッチフレーズ（テキスト）も下から上へふんわり浮かぶようなアニメーションで、これらのシンプルな動きは利用者へ安心感を与える効果があると同時に品位ある印象も与えられますね。
※ロゴコンテンツ（画像とテキスト）は横書きにもワンタッチで切り替え可能。
※表示までの秒数なども個々に指定可。
テキストの心地よい動きのフェードインアニメーションはトップページに限らずサイト全体で有効なんだ。
商品ページや会社案内ページなどでもテキストがふんわりと表示されるからチェックしてみて。
ファーストビューの構成としては、ローディングからそのままオープニング画面→複数の（背景）動画＋テキストという組み合わせもあればローディング～オープニング画面→（背景）静止画スライダーといったような組み合わせも可能です。
また背景には静止画像・MP4・YouTube動画などをランダムにセットすることもできますよ。
たとえば1枚目は動画にして2枚目は静止画にするとかでも問題なし。
設定もカンタンで、基本的には用意されている設定箇所にテキストや画像をセットしていくだけ。
HTMLやCSSといった専門知識は不要でフォントサイズやカラーなども直感的に変更できます。
トップページのコンテンツ群
HAKUのトップページ全体を形成するコンテンツ群は以下の通り。
フルサイズコンテンツ
（フル幅）画像＋（配置調整可能な）テキスト。
（※デモサイトのファーストビュー直下に置かれたエリア）
3点バナーコンテンツ
（PC画面では）3分割された画像とテキストによるバナー構成。
マウスホバーでキャプションが表示されます。
スマホでは1枚ずつ縦に3枚表示に変わります。
レイヤー画像コンテンツ
（背景）画像の上にさらに別の（商品）画像などをフェードインで表示可能なコンテンツ。
（商品）画像下のキャプションだけでなく（PC上なら）マウスホバー時に別のテキスト（商品名など）を表示させる機能もあります。
2ブロックコンテンツ
「ブログ」「お知らせ」「商品」から選んで表示可能なカルーセルスライダー。
記事の並び順は日付順でもランダム表示でもOK。
フリースペース
HTMLでの記述が可能な文字通り自由に設定できるコンテンツエリア。
各コンテンツ類の追加や並び替えはコンテンツビルダーを使用して自由に設定可能です。
基本的にはテキストと画像をセットするだけ。
PCとモバイルで別コンテンツ
PC画面でのコンテンツ内容をそのままスマホ（モバイル）で表示しちゃうと情報量が多すぎてかえってわかりにくくなる場合があります。
そのためトップページに関してはPCとスマホで別々のコンテンツを設定することができます。
（PCと同じ設定ももちろん可）
レイアウトは自動調整に任せてもいいし、上下の余白等をカスタムで調整することも可能です。
基本的にはトップページコンテンツのすべてをPCとモバイルで完全に分けて設定することができるため、コンテンツ内容を変えたりレイアウトを変えることでスマホでのアピール効果が高まる期待が持てます。
美しくわかりやすい見え方を追求するならぜひともこの機能は使いこなしたいところですね。
下層ページでPCとモバイルの別コンテンツ設定がない理由
下層ページは運営期間が長くなればなるほどページが増えていくものです。
そのページごとにPCとモバイル用にコンテンツを分けていたら単純に作業量が2倍になって想像以上の労力が必要になってきます。
そのためPCとモバイルのコンテンツ振り分けはサイトの顔とも言えるトップページのみにしてるんだそうです。
TCDのテーマは下層ページもモバイル機器で美しく表示されるよう調整が加えられてるのであまり気にする必要はないでしょう。
オリジナル機能
特に商品のイメージアップに直結する商品の見せ方に関してこだわりの機能が搭載されてます。
商品アーカイブページ
HAKUの商品一覧（アーカイブ）ページは1ページ内に全部の商品が表示される仕様。
それゆえ多くの商品を紹介するのには向いておらず、厳選された商品だけをフィーチャーさせるようなサイトに向いてます。
本家サイトやECサイトとは別のまさに特別な商品だけの特設サイト用テーマと言えますね。
もっともある程度のカテゴリー分けは可能で、ページ上部に表示されるカテゴリーボタンをクリックするとそのカテゴリーに属する商品の先頭にスクロール移動する仕様になってます。
いずれにしても大量の商品を紹介するサイトには向いてないですね。
厳選商品をじっくり見て”味わって”もらうという意味合いが強いページ構成だね。
商品詳細ページ
商品の詳細情報ページに関しては、専用のテンプレートを使ってコンテンツビルダー形式で商品画像や説明文をあてはめていくだけでデモサイトのような商品ページが完成します。
画像の左右を入れ替えたり商品ブロックを複数追加することもできます。
フリースペースと組み合わせてオリジナルコンテンツを差し込むこともできます。（HTML入力可）
ここが魅力的だと、商品詳細ページからオンラインショップ等への強力な導線にもなりえるよね。
固定ページテンプレート
HAKUの固定ページテンプレートには3種類のタイプが存在します。
どの固定ページテンプレートにもHTML入力可能なフリースペースが用意されてるので、初心者の方からHTMLやCSSの知識がある方までうまく使い分けることができます。
デザインページ1
3種類の中では一番シンプルかつ落ち着いた雰囲気のページ作りに向いてるテンプレートです。
テキストの方向やフォントサイズなどは（HTMLやCSSの知識不要の）コンテンツビルダーを利用して直感的な操作でラクに設定できます。
用意するのは幅いっぱいの画像を数枚とテキストのみ。
デザインページ2
こちらはデザインページ1に若干デザインに変化をもたせたバージョンで、幅いっぱいの画像と2段まで表示可能な画像の組み合わせでページを作成できます。
このページももちろんコンテンツビルダーを活用しての作成が可能です。
どちらもサービスの内容や企業の取り組み姿勢等を詳しく紹介するページなんかに向いてますね
。
各ブロックの並び替えや追加・削除も自由自在。
”デザインページ”と称してますが、フリースペースを追加してランディングページとしての利用も可能です。
ランディングページ
こちらはコンバージョンにつなげるための着地点でもあるランディングページ作成用テンプレート。
ランディングページの作成にちょうどいい感じのレイアウト構成になっています。
コンテンツ（内容紹介）ブロックでは、テキストや画像を設定するだけでキャッチコピーや画像などがきれいに配置される仕様。
アクセスマップを表示可能なブロックもあらかじめ用意されてるので、Googleマップによる地図情報も載せられます。
（テーマオプションでAPIキーさえ設定しておけば簡単にマップを表示可）
レイアウト済みの一覧表も表示できる仕様で、Googleマップと併せてたとえばイベント会場へのご案内などを作って活用することもできます。
レイアウト済み一覧表は直感的操作で各項目の並び替えや追加が行えます。
ランディングページ用テンプレートということもあって、ヘッダーメニューやグローバルメニューやフッターメニューなどを表示させない設定も搭載しています。
メニューを非表示にして他のページへ移動する選択肢を絞った純粋なランディングページならば、コンバージョンを高める効果が期待できます。
多言語設定
自社の特設サイトを海外にも広めたい・海外向けに多言語化したい、そんなケースにもHAKUは応えてくれます。
HAKUは日本語でも英語でも美しく表示されるよう開発されており、別途作成したバイリンガルサイトにすぐにアクセスできるようヘッダー右上に言語切替ボタンを表示できます。
といってもHAKU自体に多言語化翻訳機能はないので、別途翻訳版サイトを作る必要はあります。
フッターエリア
フッターまでスクロールした利用者はそこに何もなければそのまま離脱してしまう可能性が高いものです。
その離脱を少しでも防ぎ他のページへの興味をさらに持たせる役割を担うのがフッターエリア。
HAKUのフッターエリアは他のテーマに較べて割と広めに設計してあり、ブランディングサイトとしての荘厳さをより高めるべく全体的に余白が多く設けられています。
フッターでは上部と下部の二段でセット可能なフッターナビメニューや、外部リンクを設置できるボタンも表示できます。
（デモサイトでのボタンはオンラインショップへの導線として機能）
またPCよりも画面が狭くなるモバイル用の背景画像は別で設定可能など、おまけ的なフッターとは一味も二味も違います。
（背景には動画もセット可能）
その他の主な機能
- （イメージ画像付き）メガメニュー対応のグローバルメニュー
- 時短モードでテーマ着せ替え可能なテーマオプション管理機能
- トップページヘッダー（静止画・MP4・Youtube）
- グローバルメニュー固定表示機能（PC/スマホ）
- スマホ専用フッターバー
- 直感的操作のページビルダー
- レティナディスプレイ対応ロゴアップロード機能（ヘッダー・フッター）
- 新クイックタグ（Gutenberg対応）
- カスタムCSS
- カスタムスクリプト
- オリジナルSNSボタン（Twitter・Facebook・Youtube・Instagram）
- OGP・ツイッターカード機能
- サムネイル画像のホバーエフェクト設定（ズーム・スライド・フェード）
- 詳細ページのレイアウトタイプ（2カラム左・右、1カラム）
- ブログ作成機能
- microdata形式の構造化マークアップ適用済みパンくずリスト
- カスタマイズ機能付き404ページ作成機能
- ウィジェット「広告（ランダム表示機能）」
- ウィジェット「Googleカスタム検索」
- 関連記事、プロフィール情報表示機能
- 日付・カテゴリ・タグ・投稿者名・コメント・SNSボタン等表示選択機能
どんな方におススメ？
- 特定商品をクローズアップしてブランドイメージを高めたい
HAKUは商品のイメージアップが第一目的のサイトなどには特におススメのワードプレス・テーマです。
また商品点数が少なめの限定商品で勝負をかけるベンチャー系企業のコーポレートサイトなどでも十分利用できます。
記事はお役にたてましたか?
記事にご興味をもっていただけましたら下のソーシャルボタンで共有していただけると嬉しいです^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓