テーマ・デザインの選択とサイト計画

Category: 初心者向け WordPress講座 Tags: テーマ・テンプレート

ここでは、サイトの基盤となるテーマ・テンプレートの選択とサイト計画について説明しています。

WordPressの場合、デフォルトのサイト・デザインは次のようになっています。

※WP3.0より「Twenty Ten」に変わっています。

これを好きなデザインに変える場合は、「wp-content」→「theme」にテンプレート・ファイルをフォルダごとアップロード。

「外観」→「テーマ」で、利用可能なテーマからデザインを選択してクリックします。

テストサイトは、『sunshine』に決定されました。

このテンプレートは、私が気に入っている一つです。
お洒落でセンスが良い上、ナビゲーションや関連記事、コメントとトラックバックの別表示など、欲しい機能がすっきりとデザインに溶け込んでいるからです。
しかも、中国語の作者によるので、日本語との相性も抜群。
海外のテーマ・テンプレートは、アルファベットを基調としているため、Demoでは英字新聞のように格好よく見えても、いざ日本語に置き換えてみると、もさっとした雰囲気になることが多いんですね。
その点、この『sunshine』や、同じ作者による『poetry』は、日本語が自然に馴染んで、色遣いやヘッダー画像もきれいです。
女性向けのコンテンツにはおすすめですよね。

恐らく、これからWordPressを導入しようという方の多くは、無料で公開されているテーマ・テンプレートの中から選ばれると思います。

そこで、私の考えるデザイン選びのコツをピックアップしました。

WordPressにはちょっとした落とし穴があって、先にも述べたように、多くの海外テーマはアルファベットを基調にしているため、フォントの型やサイズ、サイドバーのヘッド表示や横幅など、日本語とは合わないケースが結構あります。

見た目の格好よさももちろん大事ですが、日本語サイトは、日本人訪問者が読みにくければ意味がないので、その点、しっかり考えて、デザインを選んで下さいね。

§ デザイン選びのコツ

(1)　テキストが読みやすい

テーマ・テンプレートの中には、「見た目重視」で、文字が非常に読みにくいものがあります。

フォントを大きくしても、メインコラムの横幅が異様に狭いとか、画面左端に寄りすぎとか、根本的なレイアウトに問題があると、それだけで訪問者は去ってしまいます。

また、画面全体が暗かったり、ゴテゴテした装飾が多かったり、ナビゲーションがあちこちに散らばっているのも、訪問者がコンテンツに集中できない原因になります。

フォントの色や大きさは、スタイルシートでいくらでも調整できますが、全体のレイアウトを変更するのは容易ではありません。

ぱっと見て、「テキストが読みにくい」ものは避けた方が無難です。

面白いけど、実用的ではないですね・・

§ (2)　デザイン変更が容易である

画像が多用されたグラフィカルなデザインは、見た目にお洒落で、インパクトがありますが、カスタマイズしにくいという難点があります。

フォントの色や大きさを変えるのは簡単ですが、サイドバーの横幅を変えたり、ヘッダー画像を変えたり、背景画像をシンプルなカラーに置き換えようとしても、全てのレイアウトが画像でガチガチに固定されているため、変更のしようがないからです。

提供されているデザインをそのまま使うのであれば差し支えありませんが、カテゴリーごとにヘッダー画像を変えたり、サイドバーに自前のアイテムを表示したり、細かなカスタマイズを必要とするのであれば、平凡でも可変性のあるデザインを選んだ方が無難です。

見た目はすごく格好いいんですけどね・・。
　　　　

使いやすく感じる例をあげましょう。

たとえば、私が以前使っていたWyntonMagazineは、一見、がちっと固定されているように見えますが、画像を使っているのはロゴとアイコンくらい、他は全てスタイルシートで構成されていました。

トップページも、上の見出しを丸ごと削除して、単純な記事リストに置き換えることができますし、Welcomeメッセージを置くことも可能です。
背景に壁紙を使用したり、ヘッダーにオリジナルのロゴを置くことも出きます。
もちろん、本文やサイドバーの横幅、全体の色合いも、簡単に変えられます。
非常に使い勝手の良いデザインの1つです。

こちらは今流行の『minimalism』。余計な装飾を一切排し、コンテンツのみに集中させる、ストイックなデザインの1つです。
一見、面白みがありませんが、要所要所にカラーや画像といったアイテムを配せば、鮮烈な印象を与えますので、いじりがいのあるデザインです。

もちろん、画像を多用したテーマでも、比較的、使いやすいものもあります。

たとえば、『oriental』のように、画像でガッチリ組まれていても、ファイル構成がシンプルで、コードの記述も平易なものは、初心者にもカスタマイズしやすいです。

そのテーマ・テンプレートがカスタマイズしやすいかどうかは、ファイルの基本構成を見れば参考になります。

テーマ「default」のファイル構成とほとんど同じで（多くのテーマ・テンプレートが共通している）、何層にも入り組んでいないものが扱いやすいです。

次に「image」フォルダを開いて、どんな種類の画像が使われているか、チェックしてみましょう。

背景や各コラムが、すべて画像で構成され、1つでも動かすと、全体のレイアウトが崩れてしまうようなタイプほど自由度が下がります。
（例：サイドバーの無いページが作れない、ヘッダー画像を好きなものに変えられない）

逆に言えば、簡単に他の画像に置き換えたり、画像を排除しても、レイアウトに何ら問題をきたさないものほど自由度が高いということです。

§ (3)　マニュアル編集が可能である

テーマ・テンプレートの中には、非常に高度な自動編集機能をもったものがあります。

たとえば、スタイリッシュなマガジンスタイルで定評のある、『Theme hybrid』。日本人ユーザーも多く、日本語化されたファイルも公開されています。
これは『Hybrid theme framework』という独特の編集ツールをインストールし、その上で、多種多様なチャイルドテーマをアダプトする仕組みなのですが、その分、ファイル構成も独特で、初心者やプログラムに疎い人が手動で編集できるレベルではないです。
提供されたものをそっくり使うにはOKですが、自分で細かなカスタマイズをしたい人には、かえって使いにくいデザインの一例です。

デザインはスタイリッシュ。しかし手動での細かなカスタマイズは制限される
　

こちらも複雑系の代表です。
やはりframeworkを使って、「誰でも簡単にカスタマイズ」できるようになっています。

しかし、このテーマ・テンプレートもまた独自のファイル構成を持っており、全体の機能を理解するのは大変です。
これも「あなたまかせ」で使うにはOKですが、慣れてくるとかえって使いにくいデザインの一例です。

サイドバーやアーカイブなど、主要機能のいくつかがfuncitonやoptionフォルダに振り分けられているので、素人には難易度C。

§ サイト計画を立てる

デザインに目星が付いたら、サイト計画を立てます。

WordPressの記事には2種類あり、

●　シングル記事・・カテゴリーおよび時系列に分類される。

●　固定ページ・・カテゴリーや時系列に属さない。

「シングル記事」は、いわゆるブログに相当するものです。
カテゴリーに分類され、記事は時系列に表示されます。

「固定ページ」は、カテゴリーや投稿時間に関係なく表示され、親ページ、子ページと、階層を作ることができます。

たとえば、親ページ「サイト案内」の下に、子ページの「サイトポリシー」「サイト内記事一覧」「メールフォーム」などを作成すると、メニューに次のように表示されます。

テーマ・テンプレートのデザインによりますが、多くの場合、「固定ページ」は、ヘッダー部のメニューとして表示され、サイトに関する情報をいつでも取り出せるよう配置されています。

固定ページには、「プロフィール」「サイトポリシー」「メールフォーム」など、訪問者がサイトの概要を把握する為にに必要な情報を記載するのが一般的です。

まずは、「固定ページ」に表示したい情報をリストアップし、階層を考えましょう。

次に、シングル記事の構成、すなわち『カテゴリー』を設定します。

たとえば、『育児』に関するサイトなら、どの分野を重点的に取り扱うのか。

「離乳食・幼児食」「トイレ・トレーニング」「知育グッズ」など、カテゴリー構成をノートに書き出してみましょう。

たとえば、当サイトの場合、『映画・音楽・書籍に関するコンテンツ』は次のように分類しています。

WordPressの場合、カテゴリーの数に制限はありません。

3階層でも、4階層でも、好きなだけ階層を増やすことができます。

しかし、あまりにも深い階層は訪問者を混乱させ、レイアウトを崩す原因にもなります。
（カテゴリーに関するテンプレート・タグを編集して、階層表示をなくすこともできますが）

テンプレート『sunshine』は美しく表示できますが・・

デフォルトのデザインだと、もっさりしてしまいます。

他にも、

・カテゴリースラッグがhttp://sanmarie.enf.pl/category/○○/○○/○○/○○のように長くなってしまう。（検索エンジンに不利と言われています）

・下層ページからアクセスした訪問者が、自分の居場所を把握しにくい

といった弊害があります。

一般のノウハウでは、「２階層まで」が理想とされています。

もちろん、デザインにもよりますので、訪問者の立場でいろいろ検討してみるといいと思います。

§ サイトに表示したい情報を整理する

訪問者に何をどうアピールするか。これも非常に重要な課題です。

あれもこれも見て欲しいからと、記事リストや、カレンダーや、おすすめ記事や、広告や、何でもかんでも表示させればいい・・というものでもありません。

一般に、情報の与えすぎは、かえって訪問者に負担をかけるものです。

サイトをぱっと開いた瞬間、わっと情報の洪水で、あっちにバナーがチカチカ、こっちにカレンダーがど～ん、あそこにもここにも「オススメ記事」では、せっかく良い文章が書かれていても、読む気をなくしてしまいますよね。

私もそうですが、サイト運営者というのは、どうしても欲張りになって、1つの画面にあれもこれも詰め込んでしまいがちです。

しかし、訪問者が今読みたいのは、「自分の探している情報」であって、「おすすめ記事」や「広告」ではありません。

メインの情報にフォーカスし、自分が本当に伝えたいことをアピールするのがベストだと思います。

コンテンツが面白ければ、他の関連記事にもきっと目を通してくれるでしょう。

あるいは、サイトの名前やドメインを覚えていて、また後日、検索結果で見かけた時に、「そういえば、あのサイトは面白かったな」と再訪問してもらえるかもしれません。

ほとんどのテーマ・テンプレートでは、「新着記事」「カテゴリーリスト」「タグクラウド」「カレンダー」などの位置の入れ替えや、追加・削除が簡単にできます。

おおまかなイメージが出来上がったら、いよいよテンプレート・ファイルのカスタマイズに進みます。

§ カテゴリーを設定する

まず、管理画面の左サイドのメニューから「投稿」→「カテゴリー」を選びます。

編集画面から、カテゴリー名、スラッグ、親カテゴリーを指定します

WordPressでは、カテゴリー順位を決定する大きな要素である『カテゴリーID』を後から変更することはできません。

カテゴリーIDを変更すれば、そこに属する記事が迷子になってしまうからです。

またカテゴリーの並び替えは、デフォルトの状態では「名前順」「ID順」「記事数順」と限られているので、『サイト計画』の段階で、分かりやすいカテゴリー構造になるよう、きちんと計画しておきましょう。

どうしても並べ替えたい場合は、プラグインを導入することで、かなり自由に設定することができます。

参考記事：
・My Category Order　『WordPress公式サイト　プラグイン置き場』
・My Category Orderでカテゴリを並べ替える

Ads