Contenu connexe
Similaire à Seminer20110119
Similaire à Seminer20110119 (20)
Seminer20110119
- 2. 版
度
１ １年
２０
HPの効果的な見せ方、
作り方講座 101
ホームページ制作に関する根源的な知
識を、ホームページの管理運営に従事
している担当者の皆さまへ
XOOPS Cube .Info事務局
有限会社ブルームーン
代表取締役 酒井 能克
- 3. • 有限会社ブルームーン 代表取締役 酒井 能克（さかい よしかつ）
１９９３年設立 C, VB, dbaseIII,MS-Access,Excelのアプリケーション開発を行う
２００４年 オープンソース事業開始 XOOPS モジュール開発を含め計３０アプリケーション
程
２００９年 オープンソースとインターネットについて講演活動開始
• メッセージ
２００８年のリーマンショックでは、私も含め中小企業は極端に仕事が減り、色々な意味で生き
て行くのが難しいサバイバルの時代になりました。そんな中で私がたどり着いた考えは、どれ
だけ自分の仕事に愛情を向けられるかで、その仕事の価値が決まるという事です。どんなに
割に合わないと思えても、そこに取り組むべき価値を見いだせれば情熱を注げます。そこを起
点として広がる未来を想像します。将来どうなるか確証は持てませんが、自分の過去を振り返
えれば今の自分がいる「点」は過去の自分の「点」とつながって「線」になっていると納得でき
ます。ですから「点と点はどこかで必ずつながる」そう信じて進むことが大切です。自分を信じ
今取り組んでいる「点」に情熱を向ける事で、それが将来のどこかへ通じる「点」になると確信
しましょう。信じる事で不安や恐れを振り払い己の心の赴くままに理想を追求できます。自分
を信じる事、それが未来を切り開く為のキーワードです。人生色々と迷う事が多いと思います
が、そんな時こんな考え方もあると思いだして頂き一助になれば幸いです。
自己紹介
- 4. Change The World
I could change the world,
I would be the sunlight in your universe.
You would think my love was really something good,
- 5. 変化を求めて
テクノロジーや経済が発展しても
世界も人生も不安定で幸福感は向上しない。
人々は心のつながりを求めて
行動する様になった。
インターネットで世界は１つに。
- 8. 電気と電波で素早く遠くへ
• 相互に
– モールス通信、電話、携帯電話
• より遠くへ世界へ
– ラジオ、テレビ、短波ラジオ、衛星放送
– 世界同時中継(1967)
• インターネット始動
– ARPANET(１９８０)
– Sendmail(1982)
– www(1990)
- 10. メディアの分類
• マスメディア
– 1点を発信源とし多数の点を到達点とする構造。テレビ、新聞、
雑誌、ラジオ、本、レコード、CD、映画、WEB 1.0
• ネットワークメディア
– 複数の送り手から複数の送り手へ情報が行き交う構造。電子掲
示板や電子メール、ブログ、SNS等、WEB 2.0
• パーソナルメディア
– 主に使い手が情報を発信したり、記録、編集したりするために用
いられる。カメラ、家庭用ビデオカメラ、テープレコーダー、携
帯電話、アマチュア無線、電子メール等。
• 双方向メディア
– 送り手と受け手の両者の間で双方向の伝達がある構造。両者の
立場は必ずしもイコールではない。
• 同期型・非同期型メディア
– 受け手と送り手が同時にコミュニケーションに関わるかの分類。
同期型メディアは、チャットやインスタントメッセンジャー、電
話。非同期型メディアは、掲示板、電子メール、手紙、書籍等
。
• マルチメディア
– メディアによって、伝達可能な情報の種類が制限されることがあ
る。例えばラジオや電話では通常文字や映像は送れない。
書籍では動画や音は送れない。文字、音声、映像、動画など
を送るのに用いることができるメディアを指して、「マルチメ
ディア」と言うことがある。
- 11. さらなるメディアの進化
• ソーシャルメディアで全分類
が同居
– マスメディア・・・ファンページ、
フォロー
– ネットワークメディア・・・ニュー
スフィード・タイムライン
– パーソナルメディア・・・
DM、YouTube
– 双方向メディア・・・いいね！、コ
メント
– 同期メディア・・・チャッ
ト、Twitter、twitcas,USTR
EAM保存すれば非同期メ
ディア
– マルチメディア・・・YouTube、
USTREAM、twitcas
- 13. ソーシャルメディアの効果
• WEBサイトへのアクセスの流
れが、従来の検索エンジン
主体からソーシャルメディ
ア（TwitterやFaceBook
等）ソーシャルメディアへ。
• ソーシャルメディアでの広報は
、昔ながらの口コミマーケ
ティング。
• インフルエンサー（ネット上で
発言力のあるユーザやサイ
ト）に紹介されると自然と
注目度があがります。
• その為には、興味を持ってもら
う話題やメリットを提供し好
意を持ってもらう。キーワー
ドや著名サイトの紹介等を
コツコツと。
- 14. ソーシャル/オウンド・メディアと検索
• ホームページ
– 自己決定権がある
– ソーシャル活動の最
終着地点
• ソーシャルメディア
– 見る、聞く、対話する
– コミュニケーションの
接点
• 検索エンジン
– キーワード検索SEO
– リンク率による順位
付
– 直帰率・離脱率の検
証（LPO）
- 16. WEB戦略
• 5Wで、目的（When/何時、Where/何処で、What/何を、Why/何で）、ターゲット（Who/誰に）
• 1Hで、コンセプト（How/どの様に）
• SOA Governance （service-oriented architecture）
構成単位に合わせて構築・整理されたプロセスを公開し、相互に連携させながらシステムを構築・統
治しようという概念（下図）。マーケティング理論とも重なる
• 効果測定
実行結果を数値的に判断し次の目的・目標へ
- 17. もっとも成功したWEB戦略 / 1
Designing Obama / Scott
Thomas
• ムーヴメントをデザインする
• my.bo / SNSサイト構築
• ソーシャルネットワーク
• ムーブメントを撮影
• オンラインアド
• キーワード「We, Hope」
青＝民主党
＋W.H.の大理石調の加工
で最終目的地を演出
何が必要かを視覚化
- 18. もっとも成功したWEB戦略 / 2
• IA（Information Architects / 情報設
計）
– ボックスの面積の大きいほど、プライオリ
ティをおき「流れ」「情報構造」を作る
– Presuade（説得する）
– Raise（お金を集める）
– Activate（活発化する）
– Localize（ローカルの問題と捉えてもら
う）
– Represent（代表する）
– Educate（教育する）
– Introduce（紹介する）
– Connect（繋げる）
最初はGill Sansっていうヨーロッパのフォントを使っていたけれど、Gothamという
ニューヨークのタイポグラファーがデザインしたものに変えた。Helveticaのように読みや
すく、新しい感じとしっかりした感じが両立している。
- 19. 効果測定 / 基礎用語
• PV(ページビュー)
ユーザがブラウザ上でウエブサイトのページを表示した回数。
• ヒット数について
ウエブサーバーに対するリクエスト数の合計。画像に対するリクエスト数も含まれるので
参考程度。
• 訪問者数
1端末からの閲覧のカウント数。クッキーを使う場合もあります。
• ユニークユーザ数
ある期間内（1日、1週間、月間）でのユーザ数をユニークにカウントした数です。 ユニーク
ブラウザ数と呼ぶ場合もあります。
• 訪問回数
セッション（同一ユーザがウエブサイトを訪問してから退出するまで）の回数。 一般的に
はユーザが訪問した後、30分間リクエストがないとセッションの終了と見なす測定ツー
ルが多いようです。
• 参照元
ユーザが自社のサイトに来る前にどのサイトを閲覧していたかを示し“リファラー”を参照
して解析レポート等を作成します。
• コンバージョン率
コンバージョン率 = (コンバージョン数 ÷ 流入数) * 100 (％)
コンバージョン数は、成果ページ（購入完了・会員登録・資料請求完了・予約完了等）に
到達した数
- 20. 効果測定 / 解析
• 無料解析ソフトウェア
– Google Analytics
– Clicky Web Analytics
– Piwik Open Source Analytics
– Woopra Website Tracking
– AWStats
– Yahoo!アクセス解析
- 21. SEO最適化 / 1
• 目的キーワードの分析
– 検索エンジン最適化の出発点は、対象としたいウェブ利用者がどういったキーワードで必要とする情報を探してい
るかを理解することである。例えば、製 品やサービスを比較しながら探す場合、検索ボックスには製品の固有
名詞ではなく一般名称が、特定製品の機能名ではなく一般的な機能名が打ち込まれる傾向に ある。この語句
の集合は目的キーワード群または目的語句と呼ばれる。目的キーワードを設定することで、ページデザインなど
他の最適化項目に進むことができ る。
• キーワードに沿ったページの構成
– ある検索キーワードによる検索結果で上位にくるには、ページは検索キーワードに合致もしくは関連するキーワード
群を含んでいなければならない。
– あるページが、あるキーワードにどの程度関連しているかは、検索エンジン・スパイダーのアルゴリズムに基づいて
決定される。そのアルゴリズムはウェブページの順位を決定する公式を計算する。検索エンジンは、ウェブサイト
が閲覧されるときに閲覧者が読もうとするテキストをHTMLの文書構造などに基づいて整理し、そのページは
何を記しているページで、あるキーワードに対する関連性がどの程度かを判断する。
無料SEOツールでチェック
http://seocheki.net
- 22. SEO最適化 / 2
• リンクの作成
– 多くの検索エンジンでは、ページの価値を判断する基準に、そのページがどれだけ他のページから
リンクされているかという観点を採用している。した がって、ウェブ上の他の関係あるサイトに自
分のコンテンツについて通知し、リンクを求めたり、自己が運営する既存のサイトから適切なリ
ンクをはったりする ことが対策として行われる。
– また、スパイダーはコンテンツのハイパーリンクを 辿って巡回を行うので、検索エンジンに登録して
もらいたい場合、そのページへのリンクを作成しておくことが必要になる。「サイトマップ」を作成
することは その手法の一つで、推奨されていることでもある。サイトマップは、トップページやサイ
ト上のすべてのページからリンクされているのが好ましい。このような ページがあると、ひとたび
スパイダーがサイトを見つけた時に、そのサイト全体が索引化される確率が高まる。
• HTMLによる最適化
– 検索エンジンは、HTMLのtitle、meta、strong、hnの各要素などを重視すると考えられているため、
重要なキーワードをこのタグで 囲って、重要であることを示すこともされる。例えば、見出しとし
て強調したい語句を font 要素で赤く大きな文字で表示するようにマークアップすると、それは
単に「赤くて大きな文字」というようにしか解釈されないが、h1 要素（とスタイルシートによる装
飾）を使えば、検索エンジンにとっても、それが見出しであると解釈され、検索にヒットしやすくな
るという具合である。これは、基礎的なセマンティック・ウェブ（利便性向上）と言うことも出来る。
– なお、この手法は、文書の論理構造を無視して過度に行うと検索エンジンスパムとみなされる可能
性があり、注意が必要である。1ページにh1は１つとする。
- 24. LPO
• 検索から訪れたWebページを有益かどうか判
断するために用いる時間は、8秒程度「直帰
率」「離脱率」で判断します。
• サイト内の滞在時間を伸ばしたり、最終的なコ
ンバージョン（成果）を高める方法として注
目されているのが「LPO（Landing Page
Optimization）」。検索エンジンなどの外部
サイトから訪れる人が最初に開く“着地専門
ページ”を作ります。イメージとしては折り込
みチラシで、1枚で全て説明し問い合わせ
フォームを埋め込みます。本サイトとは別ドメ
インに設置する事もあります。
- 27. マーケティング手法の導入
• 売る側（運営者）視点
– 製品（Product）
– 価格（Price）
– 流通（Place）
– プロモーション（Promotion）
– People/ピープル：人的サービス
の質、従業員のクオリティ
– Process/プロセス：商品の提供フ
ロー 、提供方法
– Physical Evidence/物的証拠：
（サービス空間、光、香り、デザ
イン、ユニフォーム等）
• 買う側（閲覧者）視点
– 顧客にとっての価値（Customer
Value）
– 顧客にとってのコスト（Cost to
the Customer）
– 買いやすさ（Convenience）
– コミュニケーション
（Communication）
- 28. 情報とサービスの合流
• 情報（新聞・雑誌、テレビ、ラジ
オ）
• 通信（電話、 ファックス、無線有
線）
• 金融（銀行、クレジット・ファイナ
ンス）
• 経済（株取引、 先物、投信）
• 企業（報告、連絡、相談、 マー
ケティング、広報、営業、顧客
対応、業務全般）
• 生活（不動産から日用品まで
の買物、旅行、趣味、社交）
• 行政（広報・サービス）
•
http://www.housingmaps.com/
- 31. BRANDING
共感
• ブランドは、商品・サービスの価
値を象徴するもの。ブランディ
ングとは、提供する商品・サー
ビスに顧客（受益者）が満足
し、再び提供する商品・サービ
スを利用するサイクルを作る
事。
• Webにおけるブランディングは、
ホームページの提供するサー
ビスについて満足感を作りリ
ピーターを増やし、ファンと
なってもらうという流れを生み
出す事。
•
- 32. 2011年のトレンド
• その1：新聞や雑誌はタブレットデバイスに移行する・・・アメリカでは日刊新
聞が1週間の購読料は0.99ドルでiPadへ移行
• その2：オンライン上でデビューする才能の増加・・・YouTubeからの収入で
年間10万ドル以上を叩き出した、タレントでもなければ歌手でもなくどこにも
所属していない独立したユーザーが10人も存在
• その3：より安く、より便利、よりお得なお買い物・・・格安クーポンやネットオー
クション等さらに進展
• その4：モバイルメディアのさらなる普及・・・各個人の趣味嗜好に最適化した
コンテンツを提供
• その5：ソーシャルネットワークが適切な情報を流し始める・・・アクティブ
ユーザー5億人を抱えるSNSのトップ「Facebook」twitter等で企業が広報を
展開。テレビや新聞、雑誌、広告代理店がローカルな顧客にリーチするために
これらのソーシャルネットワークを駆使
• その6：人々のチカラ・・・Twitter、SNS、ブログ等人々の意見の集合体が企業等
の組織にフィードバック
• その7：ターゲットを特定するチカラ・・・住んでいる場所・人口統計・心理学な
どによってターゲットの精度はますます上昇し、ますます価値は上がります。
ユーザーの正確なトラッキングとデータベース化により効率的に情報を流す
- 41. One Point Memo
• 全体的に３カラム構成が多い・・・カレンダー等
• ヘッダに電話番号・・・大阪市
• ようこそ市長室へ・・・親しみをUPする演出
• 姉妹都市SEWARDは、カラースキームで白を使用し
ていない唯一のページ。また、姉妹都市は海外との
接点＝マーケティングでは最初の海外顧客。リピー
ター化、ファン化への試金石
- 42. 構成を考える
• エンドユーザーの「わかりやすさ」が大前提
• １０ページから１５ページ程度までのホームページであれば、２階層にとど
める
• ページ数が多い場合は、カテゴリーごとに分けて３階層で考えます。
「お問合わせ」や「予約フォーム」など、重要なページは必ずトップペー
ジから直接ページにたどり着くように２階層目に配置します。
- 43. KEYWOARDS
• 例えば「北海道」をキーワード検索すると
– jr北海道 北海道大学 じゃらん北海道
北海道中央バス 北海道開発局 北海道教育委員会
北海道マラソン 北海道 居酒屋 北海道 ツアー
北海道 お土産
– HOKKAIDOミルク村 hokkaido-np マイケル ケンナ
hokkaido tour dehokkaido HOKKAIDOイベントガイド
• 「帯広」では
– 帯広 グルメ 帯広信金 帯広図書館 帯広動物園
帯広協会病院
• 「十勝」では
– 十勝屋 十勝千年の森 十勝ベーグル 十勝毎日 十勝ワイン
- 45. Page Priority
• 各ページでどのページが最も重要なのかをイ
メージしてください。
最も見せたい内容、自分がエンドユーザーだっ
た場合に最も見たいページはどのページか、
逆に考えると、ほとんど見ないようなページは
どのページかを考えます。
このページに優劣に１０段階評価（１０が最大）
を記入します。後でトップページレイアウトやナ
ビゲーションボタンの配置などに使います。
•
- 46. Top Page Layout
• まずは手書きで
– 何を入れなくてはいけないか
– 何を目立たせるのか
• トップページに必要な要素
– ロゴ・サイト名
– 各ページへのリンクボタン（ナビ
ゲーションボタンと呼びます）
– メインイメージ画像
– 主要コンテンツのアピール
– ニュース・トピックス
– キャンペーン・イベントバナー領域
– コピーライト表記
http://www.freelayouts.com/
- 47. Ground Navigation/ page1
• レイアウトの基本となるのが、「どこにナビゲーションを配置するか」です。
基本的なナビゲーションボタンの配置は、ホームページの構成から決
まってきます。よくあるレイアウトのパターンと利用方法を下記に紹介し
ます。
– 代表的な上部ナビゲーション・・・ボタン領域が上部にまとまっているので
、コンテンツ領域の幅を大きく取ることができる。常に上部にボタンが
あるので、各ページを移動しやすい。
- 48. Ground Navigation/ page2
• 左側ナビゲーション・・・特にページ数が次第に増えていくような
ホームページには、ボタンを下に追加するだけでよいので左側ナ
ビゲーションを考えます。
•ページ数は多いが、上部ナビゲーションにまとめたい場
合に、ページ内容に優劣をつけ、さっぱりと多段にわけ
て配置します。現在最も多いと思われるナビゲーション
形式。
- 49. Page width and Column width
• まずは全体のページ幅を決定します。ページの幅が決まり、各領域を四角で区切っ
て大体の領域分けを行います。デザインは無視して「各領域の幅」と「各領域の
隙間」を正確に決定します。
– 一般的に幅８００ピクセル×高さ６００ピクセル以内に収まるようにトップページを制
作すると、ノートパソコンや、小さいモニターでもすべてが表示されるので、推奨
されています。
• 推奨するページ幅（高さはページ内容によって上下するので無視します）
– 760px 印刷した際にA4に収まるサイズ。
– 780～840px ページの内容が豊富な場合やネットショップ等でバナーなどを
四方に散りばめるような情報サイトなど、ごみごみして、活気を出したい場合は、
少し大きめにページ幅をとります。
– 900px～1024px 迫力のあるトップページ、グローバルなサイトイメージを与
えるサイズ。横３列（３段組み）のレイアウトでは900ピクセル程度の幅が必要と
なります。小さなモニターで見ると右側がはみ出す、印刷すると切れてしまうな
どのデメリットがありますが、ディスプレイの大型化やワイド化でトレンド。
– まとめ 左、右にカラムを伴うので、メインブロックを760px～840pxのページ幅
に収め、印刷に対応する。iPhoneや携帯はテンプレートを別建てにする事を考
える。
- 58. その他の作業
• テンプレートを探す
• オリジナルデザインを入れる
• グランドメニュー
• フォント,HTML+CSSを調整
• サンプルコンテンツ
• レビュー
