今回、アロハキッズクラブのマイナーチェンジに伴い、複数投稿者によるブログサイトを構築しました。
防備録として、やったことをまとめておきたいと思います。

  • オリジナルテーマ
  • Plug-in
    • Edit Author Slug
      任意のAuthor Slug表示
    • Edit Flow
      編集フロー、投稿内コメント、エディトリアルカレンダー
    • Social Metrics Tracker
      ソーシャルリンクの効果を一覧
    • WP-PostViews
      ページビュー数の表示
    • WP Social Bookmarking Light
      ソーシャルリンクの表示
    • WP User Avatar
      投稿者の写真設定
  • functions.php
    • イメージサイズの追加
    • ユーザープロフィールの不要な項目を非表示
    • ページネーション
    • 写真の自動回転とサイズ修正
    • 投稿者自身の投稿とメディアのみを表示

なんてところをやりました。

ウェブフォントは、ホームページを表示する際に、ユーザーのコンピューターに、その都度フォントをダウンロードして表示する技術です。

英語フォント

英語フォントの場合は、
Googleが提供しているGoogle Fonts
http://www.google.com/fonts
Adobeが提供しているType Kit
http://typekit.com
などのサービスにより、普及しだしています。

日本語フォント

一方日本語フォントは、英語フォントに較べ、文字数が多く、制作にコストがかります。また、データ量が増えるため、ダウンロードに時間がかかります。
無料やそれに近いサービスがほとんど無いので、なかなか普及に時間がかかるかもしれません。

JapanSans(無料)
M+ Outline Fonts(無料)
FONT PLUS(有料)

英語(アルファベット)表記の多いページでは、期待通りのフォントを使えます。
必要に応じて導入するのが良いでしょう。

Basic Fonts-01
今回はホームページのフォントについて解説します。

フォントの指定

通常のホームページでは、CSSで最初にフォントを指定します。

font-family: “Hiragino Kaku Gothic ProN W3”, “Meiryo, “Lucida Grande”, sans-serif;

と言ったような記述です。

前から順にコンピューター内にあるフォントを検索して、該当するフォントがあれば、そのフォントを使って画面を表示します。

上の例では、

  1. ヒラギノ角ゴシック ProN W3
  2. メイリオ
  3. ルチアグランデ
  4. その他サンセリフ(ゴシック体)

の順に表示していきます。

無いフォントでは表示出来ない

コンピューターにどの様なフォントがインストールされているかは、コンピューターによって全く異なります。

この為、自分のコンピューターでは、凝ったフォントを指定していたとしても、読者のコンピューターにそのフォントが無ければ、期待していた様には表示されません。

特殊なフォントの指定は避けた方が良いでしょう。

フォントの解像度

印刷物の解像度は300dpi(dot per inch = 1インチあたりに300ドット)です。対して、コンピューターモニターの解像度は一般的に72dpi、印刷物の約4分の1しかありません。
この為、コンピューター上では、フォントの細部はつぶれてしまい、読みづらくなってしまいます。
アルファベットに較べ、こみ入った漢字では特に読みづらくなります。

フォントの選択肢

読者の読みやすさを考えた場合、ディティールが細かい明朝体(セリフ体)より、解像度が低くても読み取り易いゴシッ(サンセリフ体)が、ホームページの基本フォントとして採用されるケースが多くなっています。

SEO(=検索エンジン最適化)を施す際には、基本的に以下の手順でキーワードを決めて行きます。

顧客の身になって、キーワードを決めて行きます。
実際にそのキーワードで検索されているかどうかはGoogle AdwordsのKeyword Plannerなどを使って検証していきます。
キーワードは、1サイト全体、2カテゴリー毎、3ページ毎の順に設定していきましょう。

サイト全体で狙う大キーワードを決める

サイト全体で狙う大キーワードを設定します。
大キーワードは提供する商品カテゴリやサービス+地域名にする事が多いです。
例)ハワイ+スパ

カテゴリー毎の中キーワードを決める

検索エンジンに適切に登録されると、サイト全体でなくカテゴリや個別の商品に直接顧客が来訪する様になります。
顧客が直接訪れるページをランディングページと呼びます。
カテゴリ毎に中キーワードを設定します。
例)ハワイ+レセプション

ページ毎の小キーワードを決める

個別の商品やサービスについて小キーワードを設定します。
例)ハワイ+サマースクール+プナホウ

Contents Marketing-01

コンテンツ マーケティングとは、有益なコンテンツを制作、配信することにより、見込み客を自社のホームページに引き寄せ、ファン化させるマーケティング手法です。

ハワイの広告メディアの問題

ハワイの広告メディアはいろいろと問題を抱えています。

  • 渡航前
    • 日本の雑誌
      広告費が高い、広告効果が不明
    • ポータルサイト
      広告費はそこそこ、広告効果の測定が可能
    • CPC広告
      広告費は低め、購入行動に至る率が低い。広告効果の測定が可能
  • 渡航後
    • テレビ・ラジオ広告
      広告費が高く、リーチ出来る層が非常に限られている
      現地在住日本人は2万人程度、広告効果が不明
    • フリーペーパー
      広告費はそこそこ、価格勝負の面がある。広告効果の測定が可能

満足のいく広告メディアが無い。

コンテンツマーケティングのメリット、デメリット

これに対して、コンテンツマーケティングは以下の様なメリットがあります。

  • 広告費はそこそこ。
  • 予めコンテンツに興味のある顧客予備群を集められる
  • コンテンツを通して、ロイヤリティのあるファンを獲得しやすい。
  • 顧客からのフィードバックを得やすい。
  • 広告効果の測定が可能。

逆にデメリットは以下のポイントです。

  • 効果が出るまで最短でも数ヶ月間かかる。
  • コンテンツ作成を長期間続ける必要がある。
  • コンテンツの質が問われる。

利用出来るコンテンツの種類

コンテンツマーケティングでは以下の様なコンテンツを用いて、自社のホームページに顧客を誘導します。

  • ブログ
  • ソーシャルメディア
  • ホワイトペーパー / 電子書籍
  • アプリ
  • ウェブセミナー
  • 動画、ポッドキャスト
  • インフォグラフィック
  • 調査レポート / プレスリリース

ビジネスモデル、商品やサービスとの相性を見て、順に導入していくのが良いでしょう。

想定される顧客のアプローチ

顧客は大きく2つの流れで、自社ホームページを訪れます。

1 検索結果で興味を持ち、コンテンツでファンになるケース
Search and Contents Driven = SaCD

2 実際に商品やサービスに出会い、興味を持ち、ホームページを訪れるケース
Product and service driven = PaSD

前者は渡航前、後者は渡航後の顧客からのアプローチです。コンテンツ マーケティングでは主に前者を対象としています。

検索エンジン最適化 SEO

自社ホームページに誘導する為に、ホームページ自体とコンテンツのそれぞれに検索エンジン最適化を施し、検索結果で上位表示されるようにします。

両方の顧客からのアプローチに対応する為には、それぞれのケースで想定されるキーワードを採用します。

SaCD 商品名、サービス名、関連キーワード
PaCD ビジネス名

例えば、イルカウォッチングツアーを催行するドルフィンツアーズの場合、
SaCDアプローチではイルカ、ドルフィン、ウォッチング、ヒーリング等のキーワード、PaCDアプローチではドルフィンツアーズで最適化していきます。

効果測定と対策

Google Analytics などで、ウェブマーケティングの効果をトラフィック、バウンスレート、コンバージョンレートなどの増減を測定します。

効果は時間をおかず測定出来るので、問題がある場合の対処も早くなるというメリットがあります。

顧客からのフィードバックをもとに、既存の商品の改良だけでなく、新商品、新サービスの開発も可能になるでしょう。

background color

コンテンツがどれほど良くても、読みづらいホームページ画面だと、結果に繋がりません。
読みやすいページ作りは非常に大切です。

今回はホームページのベースの色について、解説します。

コントラスト

コンテンツを読みやすくするためには、背景と文字のコントラストを大きく取る必要があります。白い背景には濃い文字、濃い背景には白い文字を配置するわけです。
それではどの様な色が適当でしょうか

やっぱり白

第1に考えるのは白い背景です。白い背景の場合、濃い色の文字はどんな色であっても、映えます。また、白い背景はニュートラルなので、複数のさし色をおいてもうまく画面の構成もまとめることが可能です。

次に候補に挙がるのが、黒い背景です。黒はそれ自体主張が強く、高級感を出しやすいです。黒い背景に白い文字は画面に緊張感が生まれます。
注意点としては、黒背景の場合、複数のさし色を採用しにくい所でしょうか?
黒背景、白文字にすると、さし色として採用するのは1色程度にとどめたいところです。

その他

白に近いベージュや、濃い茶色はそれぞれニュートラルなので、背景色としても採用しやすいです。
一般的に濃い色は、それぞれの主張が強く、商品やサービスとマッチングさせながら、しかも読みやすいものにするのはかなり難しくなってきます。

用紙のサイズ

アメリカと日本では、通常用いられる紙のサイズが異なります。
日本では通常A4(210 x 297mm)の用紙が用いられます。
これがアメリカではレターサイズ(8.5 x 11.0 インチ = 215.9 x 279mm)という用紙が使われます。
A4に較べるとヨコが長く、タテが短い用紙です。

2穴パンチ、3穴パンチ

2穴パンチの穴の間隔も日米では異なります。
日本は80mmが一般的ですが、アメリカは2.75インチ=約70mmとなります。

アメリカは3穴パンチも普及しています。
こちらは4.25インチ=約108mm間隔で、レターサイズの紙の上、中央、下に3つの穴を開けます。

名刺のサイズ

因みに名刺のサイズはどうでしょう?
日本は91x 55mmが標準です。対して、アメリカは3.5 x 2.0 インチ = 88.9 x 50.8 mmが標準で一回り小さくなっています。

アメリカの名刺入れや財布には、日本の名刺が入らない事があるので、ご注意ください。

それぞれの色は、それぞれ固有のイメージを持っています。
この為、それぞれの業界ごとに多く用いられている色が存在します。
また、ビジネスの持つキーワードから、適切な色を選び出す事も可能です。

イメージ よく使われる業界 具体例
生命 飲食 KFC,
活発、幸福 飲食 松屋,
自然、癒やし エコ関連 Clinique, Whole Foods
清潔、信頼 病院、公認会計士、弁護士 John Hopkins, Deloitte
高級、男性 高級ブランド、老舗 AXE, Dior, とらや

逆に、これら業界毎によく用いられている色をあえて外す事によって、
自社のホームページを他社と差別化する事も可能です。

人間が、目と頭だけで直感的に数えられるのは7つまでだそうです。8つ以上は、たくさんという認識になります。
日本の神々を示す八百万の神は、8 millionの神々ではなく、たくさんの神々を意味します。スサノウの尊が退治した八岐大蛇は、たくさんの頭を持つ大蛇という意味です。

このことを踏まえると、ホームページのメニュー構成を考える場合、大きく7つ以下に分類する事が望ましいです。

さらに、ユーザーの直感的な判断を支援するためには、メニューを5つ以下の分類にする事をお勧めします。


Site Structure-01

サイト全体のページとメニュー構成を考える場合、以下の様な手順を踏むのが良いでしょう。

  1. 全てのページを書き出す
  2. 書き出したページを5つ程度のグループに分ける。
  3. グループ分けしたページが5ページ以上になる場合、
    さらにそのグループを5つ以下のサブカテゴリーにグループ分けする

また、トップページから、2クリック以内で、目的のコンテンツに到達出来る事が望ましいとされています。
深くなりすぎない様、大カテゴリー、中カテゴリー、個別ページと3階層以下になる様に、グループ分けをしましょう。

モニターの解像度

コンピューターのモニターの標準的な解像度は72dpiです。
これは、ドットが1インチあたり、72個並んでいるという意味です。
対して、印刷媒体の解像度は350dpi程度あります。

コンピューターでは,極めて解像度が低いため、小さな文字や込み入ったディティールはつぶれてしまいます。

見やすい日本語

日本語のなかでも、特に漢字は、アルファベットに較べ、ディティールがこみ入っています。
日本語のなかで比較的視認性が良いのがゴシック体、次いで明朝体となっています。
サイトの印象作りの為に明朝体は外せないという事でなければ、ゴシック体を採用した方が、読みやすくなります。

フォントの持つ印象

セリフ体=明朝体はフォーマルな印象があります。
対して、サンセリフ体=ゴシック体はカジュアルな印象があります。
比較的大きな文字を使えるのであれば、サイトの印象にあわせたフォントを使う事により、サイトの印象を方向づける事が出来ます。

使えるフォントはコンピューター毎に異なる

ホームページで指定出来るフォントには限りがあります。
自分のコンピューターでは、期待通り表示されているページでも、同じフォントを持っていなければ、他の人のコンピューターでは全く違った印象になります。
日本語に限れば、誰の環境でも期待通り表示出来るフォントは、非常に限られています。
WindowsでMSゴシック、MS明朝、Macでヒラギノゴシック、ヒラギノ明朝程度となります。