CMS『Webnode』のデザインテンプレートをレビュー

2009年08月06日 02:00

49種類の(デザイン)テンプレート

が用意されています。Google Sitesはイラスト中心でしたが、Webnodeは写真が多く、全体的にデザイン性が高いです。ブログやWikiではなく、Webサイトを作るためのCMSだからでしょうか。

選択画面では、色や写真が異なるバリエーションごとにグルーピングされた縮小画像が表示されます。管理画面のUIもレベルが高いです。

図:WebnodeのTemplate:

図:WebnodeのTemplate:

【配色とフォント】

図:WebnodeのFont設定:

配色とフォントの設定はテンプレートごとに定義されていますが、カスタマイズも可能です。フォント設定では、サイト全体に適用されるフォントを定義します。日本語フォントは選択できず、選択肢を変更することもできないので、日本ではあまり使う機会は無いかもしれません。

配色に関しては、レイアウトは同じで配色と写真のみが異なるテンプレートが最初からいくつか提供されています。さらにカスタマイズしたい場合は、CSSをWeb上で編集することもできますが、ちょっと敷居が高いですね。

【テンプレートの自作・カスタマイズ】

既存テンプレートはカスタマイズや自作もできます。

テンプレート一式をZipでダウンロードし、編集して再圧縮したものをアップロードすればOKです。

ただし、テンプレートの仕様や作り方がドキュメント化されていないので、既存ファイルの内容を解読しながら理解する必要があり、難易度は高いです(Google Webmaster Toolsのサイト認証Metaタグを追加したいので、近いうちに挑戦します)。

【レイアウト】

ヘッダ、サイドバー、フッタのよくある3ペイン構成です。

ヘッダ:

サイト名、サイトロゴ(省略可)、スローガン(タグライン)、6つのサイトリンク(ホーム、サイトマップ、印刷用ページ、RSSフィード)が掲載されます。

サイドバー:

位置と幅はテンプレートによって定義され、変更できません。構成要素としては

  • ナビゲーション:必須
  • サイト内検索フォーム:独自の検索エンジン
  • 連絡先:不要な場合は非表示も可能

この下にさらに、AdSenseや投票、新着リンクなどのサイト内共通要素を追加することができます。

フッタ:

著作権表記をテキスト形式で指定できます。アクセス解析用のHTMLコードを入れることもできます。

ページレベルのレイアウト

【共通と固有の境目】

テンプレートはサイト全体に適用され、ページごとに変更はできません。

図:WebnodeのLayout:

そのかわり、テーマでは規定されない中央のコンテンツ部分は、レイアウト(カラム構成)をページごとに変更することができます。左のような4種類のレイアウトパターンが定義されています。

最初は左右等分のカラム構成にしておいたものの、その後の更新で左側のコンテンツが増えたために、右カラムがサイドバーになるレイアウトに変更する、ということも可能です。

【自由度が高いサイドバー】

なんと、サイドバー下部にページ固有のコンテンツを入れることができます。最低限のナビゲーションのみをサイト共通の要素としてサイドバー上部に設置し、各ページではページの内容に合わせてバナー広告、関連リンクなどを配置できるのです。サイドバーがサイト全体で完全に同じになってしまうと、スペースの無駄で、ユーザーにとっても優しくないですよね。SEO的にも不利です。機能としてはシンプルですが、サイトのIAやデザイン、運営を知らないと出てこない発想です。

Webnodeの公式サイト

https://www.webnode.com