【THE THOR】９種類のデモサイト、デザインの特徴とそれぞれの使い勝手を紹介します。

いよいよ【THE THOR（ザ・トール）】を使ってブログ、サイトを作っていきますよ～！！

と、サーバー契約などを扱った際に建物で例えましたが、そこから考えると今回は…

「扉はどうする？」「お風呂は？」「キッチンは？」「ライトは？？」

「それじゃ全体のイメージと合わないじゃ～ん」

といった感じで自分好みにカスタマイズしていく段階です。

ちなみに「やり方」ではトールなどのツールを活用した作り方をご紹介していますが、どのようなテーマを使うにしても大切なのは目的やコンセプトといった「このブログ＆サイトをどうするか」といったあり方です。

そういった記事は「あり方」にてご紹介していくのでそちらもご覧ください（準備中）。

この記事でご紹介しているのは、

【THE THOR（ザ・トール）】のデモサイトについてご紹介しています。

トールには9種類ものデモサイトが用意されており、どれもお洒落で格好よく機能面もしっかりしているので、とにかく「まず、やってみる」からデザインを決めてもいいです（勢い大事なんで）。ただ、急がば回れという意味でまず機能を理解することをお勧めしています。

※時短の意味では、デモサイトのデザインをカスタマイズして記事に力を注いだ方がいいかもしれません。

※このブログは【DEMO 04】をベースにしています（敢えてあまり変えず使用していますよ）。

※私がはじめチンプンカンプンだった「ブログの基本構造」につては先にこちらの記事を読んでくださいね。

【DEMO 機能一覧】

各デモサイトの特徴は後述しますが、まず９種類のサイトがどういった作りになっているかを一覧にしました。

追従サイドバーにカテゴリランキングが入っているような場合もあるのでご注意ください。

※２カラム横の（左）（右）の表示はサイドバーの位置です。〇は有り、✖は無しです。

なお、デモサイト０８と０９については「ランキングサイト」用といっても過言でないのでブログでの運用には不向きと考えコチラでは扱っていません。そういったページを作る際に参考にしてくださいね。

それぞれのデモは「あんなことができる」「こんなことできる」という確認ができる感じなので、時間にゆとりがある方は一通り触ってみてもいいかもしれません。

ちなみに、それぞれにある機能は自分でも付けられるものばかりです。

カルーセルスライダーやランキング、カテゴリ最新などはダッシュボードから３クリックで「表示・非表示」の管理に行きつきますから、慣れればサッサと変更できるので慌てることはありません。

またプロが厳選している写真や画像は素晴らしいので、そのイメージに引っ張られてサイトを作っていくとあとでガックリする可能性があります（写真に自信があるかたは大丈夫ですね）。あまりデザインに気負わず、一つのデモサイトに絞ってそれぞれの機能のいじりながら見え方を体験するのもお勧めです

機能が多く、派手にみえるのはデモ01やデモ06、記事がまだ少ないならデモ03なんかがお勧めですね。

それでは個別にデモサイトを見ていきましょう。

※各DEMO画像をクリックするとサンプルページへ移動します。

【DEMO 01】ほぼ全部乗せ、機能を理解するならこれ！

DEMO 01はトールの持てる機能をすべて使ったようなサイトです。トールの基本機能の見本のようなサイトなので一度チャレンジしてもいいかもしれません。ただ、記事が少ない状態では同じ画面ばかりになるので最低でも８記事は用意したいところです。それまでは訓練も兼ねてそれぞれの機能を「非表示」にしておくといいでしょう。

このデモではトップに動画が使われ、その下ではカルーセルスライダーがグリグリ動き記事の注目を誘います。また、ピックアップでお勧め記事をビジュアル的にも推せるのがいいですね。記事一覧の下にはランキングまで記載されています。

まさに寸分の隙も無いサイトといえます。

ただ、人によっては若干ごちゃごちゃ感を感じる方もいるでしょう。また先にも伝えましたが記事が少ないうちはどれかの機能に絞った方が賢明でしょうね。

そしてサイト作りとの問題とは違いますが、動作が重くなる可能性は否めません。

これはサーバーや用意した画像などにもよりますが、私はかなり削りました。

【DEMO 02】記事を魅せたい人向け、唯一の「1カラム」で勝負！

DEMO 02は先のDEMO 01とは対極にあるサイトの作りになっています。デモサイトは唯一のトップページも投稿ページも「１カラム」で勝負しているこのサイトは、シンプルだからこそ魅せる写真や文書力が必要でしょう。シンプルだから目立つのではなく、いい写真や魅力的な文章が用意できる人はこのシンプルなデモ02が際立たせてくれるでしょう。

DEMO 02は「シンプルで格好いい」と感じる人も多いと思いますが、これはデモに用意されている写真のインパクトやコピペの文章の問題です。一つの答えだ感じるのはデモサイトに使用されている「伏見桃山の城地…」からなるコピペ文でしょう。

これは読ませる文章を魅せるサイトだと感じています。

というのも1カラムのページはサイドバーがないため、記事の文章を集中して見るという効果があるからです。

ですから集中して記事を読んでもらいたいと考えている方は、このDEMO 02を参考にしてみましょう。

【DEMO 03】シンプルながらも推しの場所はしっかり確保してます

こちらはDEMO 02に似たシンプルな構造ですが、トップページも投稿ページもしっかりとサイドバーがあります。これにより広告や新着記事など自分が必要と思ったお勧めを訪問者にみせることができます。投稿ページの写真が大きく目立つつくりになっていますが、左側に配置されたカルーセルスライダーとのバランスが絶妙ですね。

このデモから背景画像も変更されており自由度が高いように見えますが、これも後から変更できる項目ですからこのまま使う人はいいですが、イメージと違う場合は自分で再度用意しないといけません。

このまま使うのであれば、デモに使われている写真のようにウエディング系やエステなどで使うのがいいかもしれませんね。

個人的には記事ページの左側の再度バーに違和感がありますが、写真とのバランスがいいので狙いがあるんでしょうね。

【DEMO 04】このブログは04使用、トップページの画像の大きさが魅力

投稿ページのページタイトルデザイン「バイラル風」が使われているのはデモ01とこのデモ04です。これも自分で変更可能な分野ですが個人的に好みなのでこのデモを使用しました。また、このデモでは写真が正方形になるんですが、この魅せ方が現在では少なく、今後のスマホユーザー向けに面白いと思い選びました。人によっては「癖が強い」デモだそうです。

実はこのデモに行きつくまでいくつか寄り道をしていたので、このデモ04を選んだのはハッキリいって時短として好きなものを選択しただけでした。要するに慣れれば自分でどんどん変更できるということです。

ただ、慣れない間はこのシンプルな02や03、盛りだくさんの01を使った方がいいかもしれません。

※私の寄り道は01と05、06と放浪しました。

【DEMO 05】トップページの記事の見せ方が素敵、スピードUPの効果も？

このデモ05はトップページが1カラムのサイトです。トップの動画は印象的でその下の記事の３つの並びが整列されて綺麗に仕上がっています。下部にあるお知らせコーナーも自分でできることですが、これをみて使い方も広がるというものです。なにか告知などの情報掲載が必要な方は最初からこちらを選んでもいいかもしれませんね。

デモ05は私が２番目に選んだデモサイトでした。

綺麗に整列され色味により引き締まったデザインに引き込まれるものがありますよね。ちなみに将来的に広告を掲載したい方はトップページだけ広告をなくす方がサイトのスピードアップに繋がることがあるので、こちらのデモ05はいいかもしれません。

【DEMO 06】とにかく綺麗な画像をたくさん使いたい人向け！

デモ06は綺麗な画像を準備できる人に向いています。デモ01のような派手さもありますが、なによりトップページの記事画像が大きいです。これをうまく活用できる人は全体のイメージを顧慮しながら記事それぞれの画像も選べるセンスの光る人でしょうね。無料画像が準備しやすいですが、これを自分の写真などで完成できる人はかなり上級者といえるでしょう。

このデモを活用できる人は写真が趣味の人やデザイン構成に長けた人ではないでしょうか。

全体のイメージを崩さないようにするのはセンスか、もしくはしっかりブランディングができているということですね。

センスは生きてきた環境にもよるので、後者のブランディングをしっかり策定できれば使いこなすことは出来ると思います。

【DEMO 07】画像は控えめ、記事の文章力で勝負する人向け！

こちらのデモ07はデモ06と対局です。画像をほぼ使っていないので文章で魅せるサイトといえるでしょう。ですが、デモサイトを見ていただくと分かりますが、画像を多用していないのでトップページの動画がとても印象的に感じます。「あ～こういう魅せ方もあるよなぁ」と思わず唸る作りです。しかし、同じことをするなら動画の完成度なども探究しないといけませんね。

このデモ07もなかなか上級者向けといえると考えます。

トップページの動画のように印象的な素材を用意できるかによりますし、それぞれの記事を画像なしで進めるのはなかなか大変です。中途半端に画像をいれると魅せ方の意図を外す可能性もあるので悩ましいですね。

とにかくトップの印象を大事にしながら、記事の文章力とキャッチとしてタイトルをどこまで工夫できるかが鍵のサイトといったところでしょうか。

【DEMO 08と09】ランキングサイト（ページ）を作るならこれらを活用！

デモ08はザ・ランキングサイトといったイメージです。ブログには適さない作りですが、「トールはこんなこともできますよ」というサンプルとなります。そういった意味では、トールの機能を体験するために一つくらいランキングサイトを作るのもありかもしれません。

デモ08と同じくランキングサイトです。08との違いはイメージと左右のサイドバーの配置くらいでしょう。女性の美容系はニーズがある分野なので、女性の美容系に詳しい方は、このサイトを使って商品のお勧めをしてもいいかもしれませんね。

まとめ

【THE THOR（ザ・トール）】デモサイトはいかがでしたでしょうか。

それぞれ個性はありますが、基本的にはすべて自分好みに変更ができます。

ただ、改造するには多少なり時間がか必要ですから、時短のためには自分の意図するサイトに近いものを選びたいですね。

好みによりますが、派手なイメージならデモ01か06を、シンプルにするならば02か03をお勧めします。

楽しいところですが、全体的なイメージと記事がより重要です。

デザインはまずサンプル活用を強くお勧めします！！