ウェブサイト改善Tips

WordPressをインストールすると、デフォルトのテーマ「twentyten」が表示されますが、
結局、トピックスパスや、グローバルナビゲーション、固定ページの階層表示やメニューなどのカスタマイズが必要になり、作業時間が費やされます。

そこで、日本のWEBでは必須となっているトピックパスや、投稿記事の一覧表示、スマートフォン用テンプレートなど、ある程度必要と思われる機能が既にそなわっているWordpressテンプレートをご紹介します。

・BizVektorテーマ

以下は、上記サイトの引用です。

従来のテーマで企業サイトを作ろうとした際にありがちな問題点

・WordPressテンプレートの種類が多すぎてどれが企業サイト構築に適したテンプレートなのかわからない & 探すのに時間がかかる。
・サイドバーが全ページ同じだったりパンくずリストがない。
・キレイなデザインのテーマがあったので使ってみたが、海外のテーマなので日本語のサイトに適用してもイマイチだった ＆ テンプレートファイル内の英語表記を日本語に修正するのが手間。
・WordPressデフォルトのTwenty Ten や TwentyEleven は汎用性を重視してるため、どのウィジェットにどんな情報を入れたら企業サイトとして適切なのか素人では判断しにくいし、情報をきれいに見せるにはある程度専門の知識が必要なので、結局イマイチなサイトになってしまう。
・テンプレートファイルを直接編集しないといけない。
テンプレートファイルをカスタマイズする為に専門の知識が必要。
ナビゲーションメニューやメイン画像など設定・修正の際にテンプレートを修正する必要がある。
・見栄えを優先する為にナビゲーションメニューボタンなどが画像
画像編集スキルが無いと初期制作すら出来ない。
・クライアントに「安く作りたいから」と頼まれたので、見た目で既存のテンプレート選んで貰って構築したが、クライアントから満足のいかない点を多々指摘され結局沢山修正しなくてはならなかった。

これらの問題を解決したテンプレートです。

2012/02/20には、faceboookページとしても利用できます。とリリースされています。

まだ、実運用はしていませんが、是非使ってみたいテンプレートです。

「サイト内検索」の検索窓を設置していますか？

設置しなくても、ナビゲーションで対応できるため、サイト内検索をあまり重要視していない方が多いと思いますが、実際にはかなり利用されています。

• 目的の情報になかなか、たどり着かない場合
• 商品やサービスの名称を明確に知っている場合
• 商品やサービスが多数ある場合
• リテラシーの高いユーザーははじめから利用

などなど、ユーザビリティーを確保するためにも設置することは大切です。
利用者のため以外にも設置をおススメする理由があります。

「利用者のニーズを知ることが出来る」

サイト内検索の入力キーワードを解析することで、自分のサイトで足りていないものが見えてきます。

サイト内検索での人気キーワードに対応したページの設置やそのキーワードでのSEO対策などを行えば、ユーザーのニーズにこたえられるサイトに改善されます。

「Google カスタム検索」の説明にそっていけば簡単に設置できますので、ぜひ活用してください。

参考：
Google カスタム検索- サイト検索をカスタマイズ
サイト内検索を設定する方法 – Analytics ヘルプ

今回は、画像を使わないシンプルな見出しのデザインをいくつかご紹介します。
ボーダーの色、ラインの幅など編集してお使いください。

■サンプル1

<h3 class="sample1">見出しテキストが入ります</h3>

.sample1 {  
     border-left: 5px solid #0084FF;  
     padding: 7px 5px 8px 5px;  
}

■サンプル2

<h3 class="sample2">見出しテキストが入ります</h3>

.sample2 {  
     border-left: 5px solid #0084FF;  
     border-bottom:1px solid #0084FF;
     padding: 7px 5px 7px 5px;  
}

■サンプル3

<h3 class="sample3">見出しテキストが入ります</h3>

.sample3 {  
     border-left: 5px solid #0084FF;  
     border-bottom:1px dashed #0084FF;
     padding: 7px 5px 7px 5px;  
}

■サンプル4

<h3 class="sample4">見出しテキストが入ります</h3>

.sample4 {  
     border-top: 1px solid #0084FF;
     border-right: 1px solid #0084FF;  
     border-left: 7px solid #0084FF;  
     border-bottom: 1px solid #0084FF;  
     padding: 7px 5px 7px 5px;  
}

■サンプル5

<div class="sample5a">  
     <h3 class="sample5b">見出しテキストが入ります</h3>
</div>

.sample5a {  
     border:#0084FF solid 1px;
     display:block;
     padding: 7px 5px 7px 5px;
}  
.sample5b {
     border-left:#0084FF solid 5px;  
     padding: 3px 0px 3px 5px;
}

■サンプル6

<h3 class="sample6a ">見出しテキストが入ります
<span class="sample6b ">説明などのテキストが入ります説明などのテキストが入ります。</span></h3>

.sample6a {
     border-left: 5px solid #0084FF;  
     padding: 5px 5px 10px 5px;
}
.sample6b {  
     display: block;  
     padding-top: 10px;  
     font-size: 12px;  
     color:#777777;
}

+1 ボタンとは

+1 ボタンは、言わば facebookの 「いいね！」ボタンのようなもので、そのGoogle版です。

Google 検索をした時に、フォローしているユーザーが +1 した情報が表示されたり、検索順位が変動したりする…

らしいのですが、現在のところ英語の Google 検索でしか使われていないようなので、
今は、ブックマーク（お気に入り）のような感じで使っています。

まぁ、Googleのことなので、そのうち日本でも何らかの威力を発揮してくれるのではないかというのを信じて、今のうちに +1 を稼いでおくのも良いのではないかと思います。

■Google+（検索結果におすすめ情報を付加、Google+ で共有）
↑詳しくは、Googleのページを参照してください。

設置方法はとっても簡単！

■+1 をウェブサイトに表示へアクセス

ソースコードを取得し、ホームページに記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<g:plusone></g:plusone>
 
<!-- この render 呼び出しを適切な位置に挿入してください -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};
 
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

自分のサイトとFacebookページを統合するというのは、自分のサイトの各ページがfacebookページの一部として機能するということなんですが、ざっくり言うと

• 「いいね！」や「シェア」ボタンをクリックしたときに、クリックしたユーザーとその「友達」のウォールに表示される情報をコントロールすることが出来る
• 自分のサイトのページで「いいね！」してくれたユーザー属性が把握できる

って事です。

ウォールに表示される情報をコントロールするって事ですが、何も設定していなかった場合、
「画像が表示されない」って事や「タイトルや概要がおかしい」といった現象が起こり、せっかく「いいね！」をクリックしてもらっても、その友達への訴求力が弱くなってしまいます。

これを解消するのがOGP（Open Graph protocol）です。まずは下記のように各ページに追加しましょう。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<<省略>>
<meta property="og:type" content="ページ種類" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページ概要" />
<meta property="og:url" content="URL" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:image" content="縮小画像URL" />

縮小画像はfacebookだけで使用する場合は90×90pxで作成してください。
これで、ウォールやタイムラインに好きなように表示することが出来ます。

次回は一歩進んで、「いいね!」のクリック数やそのユーザーの属性なんかを解析できるように、facebookのインサイトの設定方法を紹介します。
乞うご期待。。。。