【日本語WordPressテーマ】HAKU（TCD080）

ブランディングサイトの構築にスポットを当てたTCD80番目のWordpressテーマがHAKUです。

HAKUの方向性

元々はウェブサイトを通して伝統文化のブランド価値を世界中に広めたいとの考えから開発されたHAKUですが、結果として（特定の）”商品のブランドイメージを上げたい”、”商品の魅力をアピールしたい”サイトに最適なワードプレス・テーマに仕上がってます。

商品価値を上げることで購買意欲を掻き立て、独自のブランドを構築する、これがHAKUを使う最大のメリットです。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

HAKUって名称は「箔ハクが付く（値打ちや評価が高くなる・貫禄かんろくがつく）」からネーミングされたんだって。

[/bln_left]

[themeoption]

サイトデザイン

ファーストビュー

HAKUのファーストビューエリアはローディング画面から始まるヘッダーコンテンツ機能が搭載されており、ローディング終了後に表示される各コンテンツ類（動画・静止画）を流れるように見せられる仕様になってます。

（ローディング機能を使わない設定も可）

特にHAKUではロゴコンテンツ（ロゴ＋キャッチフレーズ＋背景画像）の表示にけっこうこだわってます。

というのも通常の企業サイトと異なって、ブランディングサイトにおいてはロゴがとても重要な要素と考えているからです。

このロゴをHAKUではフル画面の背景画像に重ねて表示できる仕様になっていて、デモサイトではロゴが浮かび上がる感じでじんわりと表示されます。

ロゴの下に表示されるキャッチフレーズ（テキスト）も下から上へふんわり浮かぶようなアニメーションで、これらのシンプルな動きは利用者へ安心感を与える効果があると同時に品位ある印象も与えられますね。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

テキストの心地よい動きのフェードインアニメーションはトップページに限らずサイト全体で有効なんだ。

商品ページや会社案内ページなどでもテキストがふんわりと表示されるからチェックしてみて。

[/bln_left]

ファーストビューの構成としては、ローディングからそのままオープニング画面→複数の（背景）動画＋テキストという組み合わせもあればローディング～オープニング画面→（背景）静止画スライダーといったような組み合わせも可能です。

また背景には静止画像・MP4・YouTube動画などをランダムにセットすることもできますよ。

たとえば1枚目は動画にして2枚目は静止画にするとかでも問題なし。

設定もカンタンで、基本的には用意されている設定箇所にテキストや画像をセットしていくだけ。

HTMLやCSSといった専門知識は不要でフォントサイズやカラーなども直感的に変更できます。

トップページのコンテンツ群

HAKUのトップページ全体を形成するコンテンツ群は以下の通り。

フルサイズコンテンツ

（フル幅）画像＋（配置調整可能な）テキスト。

（※デモサイトのファーストビュー直下に置かれたエリア）

3点バナーコンテンツ

（PC画面では）3分割された画像とテキストによるバナー構成。

マウスホバーでキャプションが表示されます。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

スマホでは1枚ずつ縦に3枚表示に変わります。

[/bln_left]

レイヤー画像コンテンツ

（背景）画像の上にさらに別の（商品）画像などをフェードインで表示可能なコンテンツ。

（商品）画像下のキャプションだけでなく（PC上なら）マウスホバー時に別のテキスト（商品名など）を表示させる機能もあります。

2ブロックコンテンツ

「ブログ」「お知らせ」「商品」から選んで表示可能なカルーセルスライダー。

記事の並び順は日付順でもランダム表示でもOK。

フリースペース

HTMLでの記述が可能な文字通り自由に設定できるコンテンツエリア。

PCとモバイルで別コンテンツ

PC画面でのコンテンツ内容をそのままスマホ（モバイル）で表示しちゃうと情報量が多すぎてかえってわかりにくくなる場合があります。

そのためトップページに関してはPCとスマホで別々のコンテンツを設定することができます。

（PCと同じ設定ももちろん可）

レイアウトは自動調整に任せてもいいし、上下の余白等をカスタムで調整することも可能です。

基本的にはトップページコンテンツのすべてをPCとモバイルで完全に分けて設定することができるため、コンテンツ内容を変えたりレイアウトを変えることでスマホでのアピール効果が高まる期待が持てます。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

美しくわかりやすい見え方を追求するならぜひともこの機能は使いこなしたいところですね。

[/bln_left]

[pcsptoppage]

オリジナル機能

商品アーカイブページ

HAKUの商品一覧（アーカイブ）ページは1ページ内に全部の商品が表示される仕様。

それゆえ多くの商品を紹介するのには向いておらず、厳選された商品だけをフィーチャーさせるようなサイトに向いてます。

本家サイトやECサイトとは別のまさに特別な商品だけの特設サイト用テーマと言えますね。

もっともある程度のカテゴリー分けは可能で、ページ上部に表示されるカテゴリーボタンをクリックするとそのカテゴリーに属する商品の先頭にスクロール移動する仕様になってます。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

いずれにしても大量の商品を紹介するサイトには向いてないですね。

厳選商品をじっくり見て”味わって”もらうという意味合いが強いページ構成だね。

[/bln_left]

商品詳細ページ

商品の詳細情報ページに関しては、専用のテンプレートを使ってコンテンツビルダー形式で商品画像や説明文をあてはめていくだけでデモサイトのような商品ページが完成します。

画像の左右を入れ替えたり商品ブロックを複数追加することもできます。

フリースペースと組み合わせてオリジナルコンテンツを差し込むこともできます。（HTML入力可）

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

ここが魅力的だと、商品詳細ページからオンラインショップ等への強力な導線にもなりえるよね。

[/bln_left]

固定ページテンプレート

HAKUの固定ページテンプレートには3種類のタイプが存在します。

デザインページ1

3種類の中では一番シンプルかつ落ち着いた雰囲気のページ作りに向いてるテンプレートです。

テキストの方向やフォントサイズなどは（HTMLやCSSの知識不要の）コンテンツビルダーを利用して直感的な操作でラクに設定できます。

用意するのは幅いっぱいの画像を数枚とテキストのみ。

デザインページ2

こちらはデザインページ1に若干デザインに変化をもたせたバージョンで、幅いっぱいの画像と2段まで表示可能な画像の組み合わせでページを作成できます。

このページももちろんコンテンツビルダーを活用しての作成が可能です。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

どちらもサービスの内容や企業の取り組み姿勢等を詳しく紹介するページなんかに向いてますね
。

[/bln_left]

各ブロックの並び替えや追加・削除も自由自在。

”デザインページ”と称してますが、フリースペースを追加してランディングページとしての利用も可能です。

ランディングページ

こちらはコンバージョンにつなげるための着地点でもあるランディングページ作成用テンプレート。

ランディングページの作成にちょうどいい感じのレイアウト構成になっています。

コンテンツ（内容紹介）ブロックでは、テキストや画像を設定するだけでキャッチコピーや画像などがきれいに配置される仕様。

アクセスマップを表示可能なブロックもあらかじめ用意されてるので、Googleマップによる地図情報も載せられます。

（テーマオプションでAPIキーさえ設定しておけば簡単にマップを表示可）

レイアウト済みの一覧表も表示できる仕様で、Googleマップと併せてたとえばイベント会場へのご案内などを作って活用することもできます。

レイアウト済み一覧表は直感的操作で各項目の並び替えや追加が行えます。

ランディングページ用テンプレートということもあって、ヘッダーメニューやグローバルメニューやフッターメニューなどを表示させない設定も搭載しています。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

メニューを非表示にして他のページへ移動する選択肢を絞った純粋なランディングページならば、コンバージョンを高める効果が期待できます。

[/bln_left]

多言語設定

自社の特設サイトを海外にも広めたい・海外向けに多言語化したい、そんなケースにもHAKUは応えてくれます。

HAKUは日本語でも英語でも美しく表示されるよう開発されており、別途作成したバイリンガルサイトにすぐにアクセスできるようヘッダー右上に言語切替ボタンを表示できます。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

といってもHAKU自体に多言語化翻訳機能はないので、別途翻訳版サイトを作る必要はあります。

[/bln_left]

フッターエリア

フッターまでスクロールした利用者はそこに何もなければそのまま離脱してしまう可能性が高いものです。

その離脱を少しでも防ぎ他のページへの興味をさらに持たせる役割を担うのがフッターエリア。

HAKUのフッターエリアは他のテーマに較べて割と広めに設計してあり、ブランディングサイトとしての荘厳さをより高めるべく全体的に余白が多く設けられています。

フッターでは上部と下部の二段でセット可能なフッターナビメニューや、外部リンクを設置できるボタンも表示できます。

（デモサイトでのボタンはオンラインショップへの導線として機能）

またPCよりも画面が狭くなるモバイル用の背景画像は別で設定可能など、おまけ的なフッターとは一味も二味も違います。

（背景には動画もセット可能）

その他の主な機能

• （イメージ画像付き）メガメニュー対応のグローバルメニュー
• 時短モードでテーマ着せ替え可能な[themeoption_kanri]
• トップページヘッダー（静止画・MP4・Youtube）
• [headerbar]（PC/スマホ）
• [footerbar_sp]
• 直感的操作の[page_builder]
• [retina]（ヘッダー・フッター）
• [newquicktag]（Gutenberg対応）
• [customcss]
• [customscript]
• [sns_open]（Twitter・Facebook・Youtube・Instagram）
• [ogps]
• [hover_effect]（ズーム・スライド・フェード）
• 詳細ページのレイアウトタイプ（2カラム左・右、1カラム）
• ブログ作成機能
• microdata形式の構造化マークアップ適用済みパンくずリスト
• [notfound]
• ウィジェット「広告（ランダム表示機能）」
• ウィジェット「Googleカスタム検索」
• 関連記事、プロフィール情報表示機能
• 日付・カテゴリ・タグ・投稿者名・コメント・SNSボタン等表示選択機能

どんな方におススメ？

• 特定商品をクローズアップしてブランドイメージを高めたい

HAKUは商品のイメージアップが第一目的のサイトなどには特におススメのワードプレス・テーマです。

また商品点数が少なめの限定商品で勝負をかけるベンチャー系企業のコーポレートサイトなどでも十分利用できます。