テーマ導入サイト例

avalon

TCDの「AVALON」を使ったWordPressサイト例。テーマ選びの参考に

TCDのWordPressテーマ「AVALON」を導入しているサイトを探してみました。
公式デモサイト以外で、AVALONがどう使われているかを見ておくのも参考になると思いますよ。

AVALONは、フル画面の画像が大きくスライドするのが特徴のテーマです。
商品を大きく表示したいサイトに向いています。AVALONはバーやレストランをイメージしていますが、それ以外のサイトでも数多く使用されています。

ただし、フルサイズの画像の上に文字を表示することになるので、画像と文字を上手く扱わないと見にくくなります。いろいろなサイトを見ると、画像で文字が読みにくいことがありました。工夫が必要ですね。

では、公式デモサイトと、一般の導入サイトを見ていきたいと思います。

★飲食・レストラン部門のおすすめ2位にさせていただきました↓
2019年、WordPressテーマのお勧めベスト3を部門別に発表!>>

★TCDのテーマはこちら↓
デザインの美しさは最上級!「TCD」のWordPressテーマを5段階評価してみた>>

AVALON(tcd040)の公式デモサイト

avalon
出典:TCD公式サイト「AVALON」

公式デモサイトでは、大人のバーをイメージしたサイトになっています。

暗い画像を使用して、その上の白い文字を浮かび上がらせています。その白文字も、フェードしたり、移動したりして印象的な現れ方をします。

WordPressテーマの中で、バーをイメージするテーマはなかなかありません。

AVALONは、黒背景に白文字を鮮やかに表示するのが美しいので、黒背景とバーのイメージがちょうど合ったんでしょうね。

このテーマは、フェードして現れる白文字の表示が美しいと思います。

Avalon公式の詳細はこちら>>

AVALON使用サイト

AVALONといえば、トップページのフルサイズ画像です。その画像の上の文字の表示の仕方が2通りあります。

一つ目は、画像を少し暗くして白文字を浮かび上がらせる方法。二つめは、画像の明るさはそのままで黒文字を表示する方法です。

公式デモサイトは、少し暗めの画像に、さらに黒の透明を重ねているかもしれませんね。それで白文字を印象づけています。

1 フラワーショップ

AVALON使用サイト1

出典:花たま

花たま様のサイトはこちらです。

花屋さんのサイトです。花は大きな画像で表示したいですよね。

画像を半透明の黒で暗くして、その上に白文字を浮かび上がらせています。これはデモサイトと同じ使い方ですね。

花は半透明の黒によって彩度が落ちますが、その分、文字が美しく表示されています。

花は彩度は落ちたとは言え、美しさは充分に伝わってきますので、こういう使い方もいいと思います。クリックすれば、色鮮やかな記事に移動しますしね。

2 レストラン

AVALON使用サイト2

出典:憩家

憩家様のサイトはこちらです。

本格鉄板焼きステーキのサイトです。料理も大きな画像で表示すると美味しそうですね!

デモサイトと同様に、半透明の黒で暗くしています。AVALONは、バーがテーマに合うのは分かっていましたが、レストランも合いますね。

やっぱり、「少し暗くしておいて、白文字を浮かび上がらせる」という手法が、料理の高級感を出していると思います。

3 ヘアサロン

AVALON使用サイト3

出典:Hair Salon Milial

Hair Salon Milial様のサイトはこちらです。

ヘアーサロンのサイトです。画像を暗くせずに使用しています。

こうした使い方の場合、人物と文字が重なると見にくくなってしまいます。こちらのサイト様は、人物を左に配置して右側に余白を作り、そこに文字を配置しています。

こういう使い方をすれば、画像を明るいまま、文字も見やすいトップページにすることができます。

ヘアーサロンやネイルサロンでこのテーマを考えている方は、こういう使い方も良いのではないでしょうか。

また、ほとんどのサイトでは、フルサイズ画像を何枚か使用していましたが、こちらのサイト様のように「コンセプト」や「ブログ」のようなコンテンツを配置するのもいいですね。

4 病院

AVALON使用サイト4

出典:重清内科外科

重清内科外科様のサイトはこちらです。

病院のサイトです。画像を暗くせずに使用しています。

こちらのサイト様のように、背景が白衣のようにシンプルなら、白文字に影を付けることによって見やすくさせる方法もあります。

色がたくさんあったり、ごちゃごちゃしている背景だと、影をつけても文字は見にくくなります。

そういえば、クリックするボタンだけ色を変えられるんですね。

AVALONのイメージは湧きましたか?

AVALONは工夫すれば、いろいろなサイトに使用することができます。迫力のフルサイズ画像を使用したサイトを作りたい方にお勧めです。

注意が必要なのは、トップ画面の文字が見にくいサイトになってしまわないか、という点ですね。

いろいろなサイトを見た感じからすると、少し暗くして文字を目立たせる方がこのテーマには合っていると感じました。

また、暗くするのは半透明の黒だけでなく、他の色も使うことができます。半透明の緑色や青色を使っているサイトもありました。

自分のサイトに合うカラーを使うのもいいと思います。

AVALONはこちらから↓
Avalonの詳細はこちら>>

関連記事

  1. TCDのBeauty

    TCDの「Beauty」を使ったWordPressサイト例。テーマ選び…

  2. TCDテーマ「SKIN」

    TCDの「SKIN」を使ったWordPressサイト例。テーマ選びの参…

  3. colors

    DigiPressの「COLORS」を使ったWordPressサイト例…

  4. agent

    TCDの「AGENT」を使ったWordPressサイト例。テーマ選びの…

  5. story

    TCDの「STORY」を使ったWordPressサイト例。テーマ選びの…

  6. tcd-angel

    TCDの「ANGEL」を使ったWordPressサイト例。テーマ選びの…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

ブログの作り方

Bloomでブログを作る手順1。記事スライダーとウィジェットを設置

Bloomでブログを作る

ブログの作り方

TCDの「ONE」でブログを作る手順。トップ画面と記事の設定をします

ONEでブログを作る

ブログの作り方

Diverのヘッダー部分を設定。ピックアップスライダーを拡大表示しよう

Diverでヘッダースライダー作成

ブログの作り方

「SANGO」のテーマでメニューボックスを設置してみよう

SANGOメニューボックス

ブログの作り方

スワローでブログを作る手順1。基本設定と人気記事を作成

スワローでブログ作成1

ブログの作り方

TCDの「Switch」で企業サイトを作る手順1。設定の仕方を説明

TCDのSwitchでサイト作成