【保存版】WordPress初心者でも簡単!TCDテーマを美しく使うための5つのポイント

2017

3.13

TCDテーマのユーザー様と話していると「なかなかデモサイトのような美しいサイトに完成しない」「自分にはデザインの技術やセンスがないので・・」といったことを聞くことがあります。

そのような話を聞くたび”TCDテーマを美しく使うのに余計なステップを踏むことで難しくしている“と、感じることがあるのですが、実はTCDテーマを使って美しいサイトを作るのはとても簡単です。それが実現できるように計算されて作られています。

そのため、ここでは公式サイトや販売ページにも書いてこなかったWordPress初心者がTCDテーマを美しく使うための5つのポイントを解説します。

写真は加工せずにそのまま放り込むだけでほぼ完成する

まず、こちらのTCDテーマのトップページをご覧ください。ヘッダーに採用している写真には加工が施されていないのにお気づきでしょうか。

UNIQUE | AMORE | STORY

もちろん必要に応じてリサイズやトリミングは行っていますし、写真の選定には気を遣っていますが、基本的には写真をそのまま放り込んでいるだけなのです。ヘッダー写真には文字入れしたり、複数の写真を組み合わせたりといった特殊加工は一切施していません

具体的には、テーマオプションの初期設定画面から写真をアップロードしていく作業のみ。

写真の上に表示されているテキストはテーマオプションから文言を設定できるようになっていますし、フォントのタイプやサイズ、ドロップシャドウ(影)の色や強弱もテーマオプションで調整可能です。

ようするに、最近のTCDテーマラインナップに共通していることは、写真は加工せずそのまま使ったほうが簡単に美しいサイトに完成するということです

写真を選定する際のポイントを押さえておく

「写真の選定にはセンスがいるのではないか?」と思うかもしれませんがそれも必要ありません。まったくセンスがなくても構わないとは言いませんが、ちょっとしたポイントを押さえておくだけで美しいサイトを作ることが出来ます。そのコツとは、ずばり「統一感」です。

有料素材サイトをフル活用する

一番簡単、かつ時間をかけずに統一感のある写真を探す方法は有料素材を使うことです。有料素材の良いところはこちらの2点です。

品質が高いものばかりが揃っているので、センスが不要
素材数が膨大なので、似たようなテイストの写真を探しやすい

料金プラン 料金プラン

例えば、世界最大の素材販売サイトのShutterStockで「リゾート」で検索してみてください。また、WEBデザイナーやクリエイターご用達のADOBE STOCKで「風景」と検索すれば、ハイクオリティな素材がズラッっと出てきます。

これをTCDテーマに入れ込めば、文字通り「あっ!」という間にデモサイトのような美しいサイトに仕上がりますね。

ちなみに、弊社ではShuttestockの毎月750点まで素材をダウンロードできるプランを利用していますが、一般の企業ならそこまで必要ないでしょう。

アイキャッチ画像に採用する素材を1点ずつ購入してもいいですし、短期で使い放題プランに加入してもいいと思います。どちらにしても、トップページに使う画像をすべて有料で揃えるのに、それほど多くの費用はかかりません

同じ写真家やクリエイターの画像を採用する

ポイントとしては、なるべく同じ写真家やクリエイターの画像を使うことです。素材を検索していて「これは良いっ!」と感じたら、その素材を提供している著作者名をクリックしてみましょう。

すると、その著作者が提供している写真や作品が一覧に表示されます(気に入ったらこのページをブックマークしておきましょう)。写真家が同じなら当然作品のテイストが似ているので、自然とサイトに統一感が出ます。

もちろんあなたが写真家やクリエイターであれば、自身の作品をそのまま選定すれば統一感のある美しいサイトに仕上がるでしょう。

無料素材サイトを活用してじっくり画像を選ぶ

個人ブロガーであまり費用をかけたくない場合には、無料素材で揃えることもできます。国内だけでなく海外も含めれば膨大な素材サイトがあり、有料クラスなのに無料で使えるケースもあります。

ただ、無料素材サイトの特徴は品質がまばらなので、統一感の出るような写真を探すのに時間がかかるのがデメリットですね。個人的にはイメージしたものがすぐ見つかる有料素材をおすすめしますが、時間がかかっても構わないというなら無料サイトでじっくり探すのもありです。

コンテンツ画像もテーマオプションから設定するだけ

例えば、AMOREトップページの中間見出しにある「SEASONAL FOOD」という文言もテーマオプションから設定できます。これは画像ではなく”テキスト“なのです。

左からフワッと出てくるエフェクトを採用しているので、画像内に文字を入れてデザインするよりも見栄えが良くなります。

また、VENUSのヘッダー下にある「COSMETICS 美を追求するすべての女性へ」「CONCEPT わたしたちの目指す姿勢」といったキャッチコピーも、画像としてデザインする必要がなく、テーマオプションから設定することでテキストで表示することが可能です

文章はレイアウトに合わせて分量を調整する

広告の世界では、紙面サイズやデザインのテイストに合わせてコピーの長さを調整するのが基本です

トップページに表示するヘッドラインであったり、見出しの分量もレイアウトのサイズ感や他のコンテンツとのボリュームバランスを考慮して作ったほうがカチッとまとまりやすくなります。

例えば、こちらのSTORYトップページのヘッダー下にある「CONCEPT」「WEDDING」「FACILITY」の下の文章「結婚式はお二人が新たな人生を歩む大事なスタート地点です・・・」のところを確認いただくと、3つとも文章は縦5行(パソコン表示の場合)で揃えてあります。

また、「大切なひとに自分の言葉で、ていねいに感謝を伝える日。」「美しい海の見える挙式チャペルであなたの華やかなセレモニーを演出」も、画像のサイズに合わせて文章の分量が調整されているのがわかると思います

広告コピーの世界ではデザイナーとコピーライターは一心同体です。デザイナーが作った制限のある領域の中に、コピーライターは秀逸なコピーで表現することで、デザイン的な完成度と洗練された言葉によってコンバージョンを高めていくということです

簡単にまとめると「分量は調整して入れてね」ということです。文章の分量も適切に調整し、統一感をもたせることで、見違えるように変わります。

ロゴはプロに任せる or デザインしすぎない

企業ロゴであれば将来的なことも考えてコストをかけてプロにデザインしてもらう方をおすすめします

ただ、ロゴデザインも依頼するデザイナーによって3万円~数十万とピンキリなので、個人ブログのロゴであれば自分で作ってみたり、ロゴマルシェから無料ロゴをカスタマイズして使ってもいいでしょう。

ただ、この時にデザインし過ぎないように注意しましょう。

ロゴマークはブログの顔となる重要な部分なので”凝りたい”ところではありますが、ロゴの色をカラフルにしたり、影をつけたり、立体的にしてしまったりすると、↓のように見栄えが悪くなり、サイト全体の統一感を壊してしまうことがあります

色合いとサイズ感を意識すればテキストだけでもハマる

ロゴマークを自作する場合は、シンプルに文字だけというパターンもありです。TCDテーマのラインナップ一覧を見ていただければ分かると思いますが、実はテキストだけのロゴも多く、かなりシンプルなものが多いことに驚くでしょう。

このように、ロゴマークはサイト全体に調和した色合いと、大きすぎず小さすぎずの適切なサイズで作れば、テキストオンリーでも十分に綺麗なロゴに仕上がるのです。

TCDテーマを美しく使うための5つのポイントのまとめ

おかげさまでTCDテーマは「国内で最もデザインクオリティが高い」といった評判を頂くことが多いですが、それはもともとデザイン経験があったり、センスの良い人しか活用しきれないということではありません。むしろ・・

WordPress初心者の方やデザイン経験の浅い方、「自分にはセンスがない」と思っている方でも、簡単に美しいサイトに完成させることができることを目指し、それを実現しているのがTCDテーマであることが理解いただけたと思います

・写真は加工せずにそのまま放り込むだけでほぼ完成する
・写真の選定も3つのポイントを押さえるだけ
・コンテンツ画像もテーマオプションから設定するだけ
・文章はレイアウトに合わせて分量を調整する
・ロゴはプロに任せる or デザインしすぎない

ぜひ、この5つのポイントを押さえてTCDテーマを活用いただき、美しいサイトを構築してください。

関連記事

デザインプラス採用サイト
Wordpress使い方大全集

過去アーカイブ