前へ 次へ

haikの見本ページ

2年前に始めて登場したhaikテーマは、Simpleシリーズと言います。
そして一年後の2015年9月に公開されたhaikテーマは、Palleteシリーズと言います。どちらにしてもhaikテーマは、無料のhaik_seedを含めて、高々、下記の21種類です。

その21種類のhaikテーマを使いこなすには、テーマの特徴なりイメージなりを把握した上で、自分のサイトに合ったテーマを選ぶ必要があります。
このテーマを選択するのに各テーマを比較して選択するのが一番だと思います。

今回、筆者が作成した自前のhaikサイト、haikテーマの見本として作成したサイト、QHM100選に寄せられたQHMユーザーのhaikサイト、メーカーのデモサイト等々、様々なhaikサイトを一堂に集めて、比較検討できるようなページを作成してみました。

これから、haikテーマの導入を検討しているQHMユーザーの参考ページなれば
良いかなと思います。

下表のテーマ名称欄にあるリンクボタンをクリックして、実際のページがご覧
戴けるようになっております。



Simple シリーズの見本10種です

下表の欄に、がついたサイトは、藤心QHMクラブまたは当塾長が作成した見本サイトです。

テーマ名称特 徴
一句http://fujigopc.com/hparts/ロゴ~ナビ~アイキャッチ~コンテンツ本体~フッターとオーソドックスな並びと洗練された印象で「ランディングページ」に最適なテーマです。
二句画像の説明唯一、ベースカラーが設定できるデザインが他のテーマにない特徴です。タイトルとサブタイトルがトップページの上部中央に白枠内で配置されます。
三句http://fujigopc.com/web819/タイトル・サブタイトルがアイキャッチの左側に四角の枠内で配置され、その分、アイキャッチが小さくなります。
当サイト自身が三句で作成された見本サイトです。
四句http://fujigopc.com/pallete/index.php唯一、ナビメニューがアイキャッチとコンテンツ本体の間に表示されます。アイキャッチに白枠が入り、お店の名前などを記入するとロゴのように見せることができます。
五句http://fujigopc.com/blngl/index.php三句と同様に、タイトル及びサブタイトルがアイキャッチの左側に表示されます。線の太さの違いがあるものの三句と殆ど同じデザインです。
六句画像の説明唯一3カラムページが実装できるテーマです。見本のサイトはその3カラムページになっています。下層ページは、デフォルトでサイドナビのみの形式となっていますが、メニュー編集で右サイドメニューが実装できています。
七句http://hinaninngyou.com/六句までのテーマにあったサイドメニューがない分、よりスマフォを意識したテーマとなっています。(実際には横に展開したメニューがサイドメニューの変形として存在しています)
八句画像の説明トップページを始めに全てのページで、ナビが左サイドに固定で縦に並んで表示されるテーマです。
九句画像の説明アイキャッチとナビが重ならない点を除いて七句と同じデザインです。
十句画像の説明最上部に、ロゴがナビより上に表示されるデザインです。
最近、見本として掲載された最新ページです。



Pallete シリーズの見本11種です

下記の11種のサイトの全ては、藤心QHMクラブまたは当塾長が作成した見本サイトです。

テーマサムネイル特 徴
1flat画像の説明ナビ、見出し(大)、フッターの各背景色が全て同一のテーマカラーで統一され、そう言った意味では「可もなく不可もなく」のhaikの代表的なテーマになっています。
2moi画像の説明テーマカラーの選択で影響する箇所は、中見出しの頭に同色の+記号、小見出しの文字色、フッターの見出し文字色ぐらいで、殆ど、影響度合が少なく目立たない存在です。
3bio画像の説明テーマカラーの設定箇所はナビの背景色とアイキャッチの文字色です。コンテンツ部分の見出しには、テーマカラーの設定結果は反映されていません。
4pop画像の説明テーマカラーを変えるとページの何処に反映されるのか、いろいろ試してみました。要するにテーマカラーの存在が極めて薄いテーマです。
5kinaco画像の説明メーカーのキャッチコピー「背景に和風のテクスチャ」と記載されていますが、コレこそ「眉唾物」で、どこに「背景に和風のテクスチャ」があるのか不明です。
6cool画像の説明メーカー曰く「ナビやメニューが控えめでコンテンツに注目を集めることができます」との弁、確かにテーマカラーをいろいろ変えてみても大した変化は期待できません。地味で目立たないテーマです。
7farbic画像の説明唯一、HPの背景にテクスチャ(画像)を指定できるテーマです。
8tent画像の説明太めのテーマカラーでサイトを縁取りするページとなります。
9drawing画像の説明メーカー曰く「アイキャッチが波打つとても魅力的なテーマ」との弁ですが、波打つと言ってもアイキャッチ画像の下辺が直線でなくて波形の曲線になっただけのイメージです。
10doc画像の説明左サイドメニューが固定されておりコンテンツ部分をスクロールしても上下に動きません。これが唯一の特徴です。
11seed画像の説明Ver6.0での無料haikテーマ「seed」です。



その他、特別仕様の見本7種です

下記の6種のサイトの全ては、前記の見本サイトに分類されない特殊なサイトです。

テーマサムネイル特 徴
1六句画像の説明「六句」で実装した3カラム・ページの見本です。
3カラムとは、サイドメニューが左右両サイドに
あるサイトです。
2三句画像の説明「三句」で実装したオールブラックサイトの見本です。
本文は勿論のことナビ、メニュー、フッター全てが
黒の背景色になっています。
3十句画像の説明「十句」で実装した1カラム・ページの見本です。
1カラムとは、サイドメニューが無いLP風のページ
です。
4pophttp://fujigopc.com/blngl2/index.php「pop」で実装した多言語対応の見本ページです。
5五句http://fujigopc.com/blngl/index.php「五句」で実装した多言語対応の見本ページです。
6二句https://haikworld.fujigopc.com/ベースカラー(背景色)にネイビー色を使った例です。


haik化対応制作代行 haikテーマいろいろ


上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 4  
    役に立たなかった 0  


ご意見ご感想等はコチラでお願いします