コンテンツへ導く導線の設計

◼︎facebookページからwebサイトへの導線設計

webサイトではユーザーが最初に訪れた時に表示されるランディングページをどのように設計し、期待したアクションにつなげていくかが非常に重要です。サービスやプロダクトをリリースする時に、そのサービスやプロダクトに特化したランディングページを設置する場合もあります。企業サイトの場合は、基本的にトップページがランディングページにあたり、そこから各種のコンテンツに誘導するような流れを想定してサイトを構築していました。

しかし、検索エンジンがユーザー行動やコンテンツ内容の評価をして検索結果を最適化することで企業名やサービス名で検索した時にその企業サイトのトップページではなく、その下位層のコンテンツが優先的に表示されるようなこともあります。

さらに、ソーシャルメディアが普及するに連れて、企業名を検索した時に、企業のwebサイトよりも、facebookやTwitterなど、ソーシャルメディア上のアカウントの方が上位に表示されるということもあります。

こうした場合も踏まえてfacebookページから企業サイトや他の関連コンテンツにむけてどうやって誘導して相乗効果を上げていくかということも考慮する必要があります。

やみくもに導線を増やしてもユーザーが迷ってしまう場合もありますし、ユーザーの興味や関心を高めながらコンテンツに誘導していく方法を考えなければなりません。

webサイトに誘導した結果、「ユーザーにどういうアクションを起こして欲しいのか」ということも含め、誘導先を決める必要がありますし、facebookページで「いいね!」ボタンをクリックしたユーザーに対して将来的に顧客になってもらう方法も見据えて設計していく必要があります。

さらにfacebookページとwebサイトの情報の鮮度を合わせるなど、更新作業の運用についても気を付けましょう。最終的な目的となるアクション(ユーザー登録、お問い合わせ、見積もり依頼、購入など)をどこで行うのか、達成度合いはどうかなども合わせて検証して、webサイトとfacebookページが相乗効果を上げられるような最適な設計を目指しましょう。

◼︎facebookページを自社のweb戦略の中心に据えた導線設計をする

どのような業界、業種であれ、web戦略の中心にfacebookページを置く場合、既存のwebサイト資産をどううまく使いまわしていくか、それとも変更していくのか検討してください。

現状で考えられる選択肢としては次の3つがあると思います。

既存のサイト資産をそのまま有効活用する
既存のサイト資産をfacebookよりのソーシャルサイトにアップデートする
そもそもの自社サイトをfacebookページに置き換える

次で個別に見ていきましょう。

①既存のサイト資産をそのまま有効活用する

facebookページから既存の自社サイトのコンテンツにリンクすることでfacebookページに多くのコンテンツを持たせないで、運用することができます。Facebookページの運用方針としては、タウムラインで日々の運用をして、アプリで作成したページで会社概要や事業紹介、アクセスマップなどへのリンクを春方法です。この方法であれば、facebookページに最初に訪れた人にも企業やブランドの詳細な情報を得るための手がかりを与えることができますし、webサイトのじょうほうを更新したfacebook時でもページとしては特別な手間がかからないことがメリットです。その分、ウォールの投稿など、日常的な運用の部分で盛り上げていきましょう。

そしてもう一つの方法が、webサイトの内容をIFrameという方法で、facebookページに組み込む方法です。この方法であれば、webサイトの中身をそのままfacebookページで表示させることができます。

IFrameでページを実装する方法については、また解説しますが、独自でアプリを作成するという扱いになるため、HTMLの知識などが一部求められます。

②既存のサイト資産をfacebookよりのソーシャルサイトにアップデートする

既存の自社サイトにfacebookページにリンクするための「いいね!」ボックスを設定したり、facebookページ用バナーまたは「いいね!」バナーを設置することでfacebookページにリンクしやすくする方法です。「いいね!」ボタンやコメントボックスなどのソーサルプラグインを活用するのもいいでしょう。「いいね!」ボタンを設置すれば、webサイトのコンテンツを気に入ってくれたユーザーがfacebook上で簡単にシェアできますし、ユーザーがコメントをつけてくれれば、その情報はそのユーザーの友達ネットワークを使って広まっていきます。

「いいね!」ボックスや「いいね!」ボタンの設置方法については後ほど詳しく解説します。

③そもそもの自社サイトをfacebookページに置き換える

すでにある自社サイトを閉じ、facebookページだけで運用することもできます。facebookページはサーバー代などがかからないということを考えれば、運用費だけで済むために、費用削減のメリットがあります。

実際に「武雄市役所」はwebサイトを閉鎖して、web上の情報発信をfacebookページだけにするという行政としては初めての試みをしており、大いに話題になりました。

注意点はfacebookが一企業であることで、経営方針によっては、サービスを停止することもあり得るということです。もちろん、急に止めることはないと考えられますが、そうした事態も考慮しておきましょう。

◼︎スマートフォンやタブレットへの対応

facebookページは、現時点(2012年)の仕様ではスマートフォンのネイティブアプリでfacebookページにアクセスした時、投稿と基本データ、写真へのリンクはありますが、アプリで作成したページへのリンクが表示されません。この点は十分に注意してください。

ブラウザからアクセスした場合も同様ですが、リンク先を指定することでアクセスすることは可能ですが、アプリ側がモバイルでの表示に対応していない場合があります。

タブレットに於いても、ネイティブアプリの場合、facebookページにアクセスしても、アプリで作成したページへのリンクが表示されません。webブラウザでアクセスした場合は、pcと同じ表示になるので、アプリで作成したページにもアクセスできます。

懸賞やコンテストなどを行う場合、この点には十分に注意してください。QRコードなどを使ってもらいるからアクセスできるようにしているキャンペーンもあるのですが、実際にはアクセスできなかったという失敗事例もあります。

PCとスマホユーザー

大手ECサイトで手に入れたい商品を購入する際、以前であれば大半の人びとがPCを利用すると応えていたようですが、最近では多くの人びとがスマートフォンを利用してネットショッピングを楽しむケースが大きなシェアを獲得しているようなのです。

WEBサイト運営におきましてもPCを利用する顧客とスマートフォンを利用する顧客のサイト内での閲覧状況などをあらかじめ把握しておくことなどが、今後のサイト更新やメンテナンスにおおいに活用できるはずです。PCとスマートフォンの異なる点は、まずモニターの大きさと言えるでしょう。

さらにはスマートフォンがタッチパネル式である一方で、多くのPCユーザーたちはキーボードやマウスを使用しながらサイトを閲覧することなどもWEBサイトの構造を作る上で重要な要素となってくるはずです。

トップページはリンクを集める

Googleのウェブマスターツールの5つの指標の中に、HTMLの改善についての項目があります。この指標には、文法チェックについては触れられていません。しかし、doctype宣言に則って正しくマークアップされているかを確認する必要があると考えられます。

まず、目標ページで1位を狙いましょう。サイトで検索上位を狙うページは「目標ページ」となります。トップページではないのです。目標ページに一方通行のリンクを集めて、サブページと閉じられた空間を作りましょう。

たとえば、目標キーワードが「野球」「サッカー」「ゴルフ」と3つあったとして、この3つをトップページで上位表示させることは困難だと思います。

なので、それぞれに専門性の高い目標ページを作って、それぞれSEOを行うことにします。

トップページ、目標ページ、サブページのリンク構造と、それぞれのコンテンツを見ていくようにしましょう。

発注者から漏れる言葉にも注意

プロジェクトマネジメントという観点で発注者から漏れる言葉「もともとは」などという文言が出てきた場合は注意を要すると考えておきましょう。というのはその根底に提案依頼書や提案書で既に発注者側と制作者側で整合が取れていたはずなのに、話が違いという不信感に根差した言葉ともとれるからです。そんなときは、制作者側として内容を遡って精査し、明らかに自分たちのミスと判断されれば謝罪とともに早急な訂正が必要となります。逆に発注者側の勘違いと判明すれば追加を要するものであれば要件定義の修正と合わせ、それに伴う見積追加を打診し、了解のもと追加を、あるいは折り合いに至らず項目削除となる場合も起こり得るでしょう。いずれにしても、その対応には細心の注意を払って臨む必要があります。

HTMLでホームページ作成

ホームページを作成するには、HTMLというプログラム言語で、用意した文章や画像に配置やサイズ、色やリンクなどを設定して HTMLファイ ルを作成します。HTMLは、プロ グラム言語ですが、難しいものでは ありません 。

規則に基づいて記述していけば 、誰でもホームページを作成することができます。HTML ファイルを作成するには、Windows に付属 している「メモ帳」を利用します。HTMLはホームページを作成するための言語ですが、テキストや画像にタグと 呼ばれる命令文を追加するだけの簡単なものです。

基本をしっかり覚えておく と、簡単にマスターすることができます。HTMLは、 Hyper Text Markup Language の略で、ホ ームページ作成 に使われるプログラム言語です。

HTMLでは、ホ ームページに表示するテ キストや画像ファイル名にタグと 呼ばれる命令を追加して定義します。 タグの記述方法と必要なタグの種類 を覚えてしまえば、誰にでも簡単にホ ームページを作成することができま す。

メモ帳に記述した HTMLは、保存の際に拡張子を . htmlに変更する ことで、 HTML ファイルとして保存することができます。

WEBサイトの配色

WEBページの雰囲気やイメージに合わせた色の組み合わせ・色彩の選択は、WEBサイトを構成するなかで重要な要素となってくるでしょう。

組み合わせる色の組み合わせのバランスを考えるうえで、ご自身のサイト運営のなかで大切にしていきたいスタイルやテイストといったようなものを具体的にピックアップしておきましょう。

ご自身の好きな色を組み合わせることも良いですし、メインカラーを決めうえで配色などのバランスを整えていくことも良いでしょう。組み合わせる色のバランスによってサイトの印象が大きく変わってきますので、皆さんのオリジナルカラーが小気味よくみつかると良いですね。

皆さんも色の組み合わせだけで思い描くことのできる企業やメーカーブランドの商品がありませんか。色の持つメッセージ性をWEBサイトづくりに活かしてみましょう。

RFPについて

ホームページ制作会社と打ち合わせを行う前には、提案依頼者を作っておきましょう。これはRequest For Proposalとも言われ、頭文字を取ってRFPと呼ばれています。

具体的には、「どんな人をターゲットにしているのか」「アクセスした人にどんなアクションをしてもらいたのか」「ホームページにつけたい機能は何か」「情報発信をした自社のサービス(商品)は何か」「ホームページはいつ公開するのか」といった情報をまとめておきましょう。

ホームページ制作会社の方も、もらったRFPを元にして、どんな機能が効果的になるのか、どんなデザインが良いのかという部分を擦り合わせていきます。ホームページ作成の技術がないからといって、全てを丸投げにしても良い結果は得られません。

あくまで自分たちは「ホームページ作成のための指示を出す側」として、能動的に動けるようにしていきましょう。

グラフィックス

ウェブページに画像は欠かせないものであり、ウェブデザインではデジタル画像に関する知識が必要になる。ここではデジタル画像の成り立ち方、デジタル画像の種類、色のデジタル表現、デジタル画像の保存と圧縮など、デジタル画像の基礎知識について解説する。

1、デジタル画像の基礎

ウェブページで画像を扱うためにはデジタル画像の形式や色のデジタル表現などについて理解しておく必要がある。

デジタル画像の要素

デジタル画像は格子状に並んだ標本点で量子化された値を記録して表されている。デジタル画像のここの標本点のことを画素(ピクセル)と呼ぶ。

1ビットの量子化であれば、濃淡を2段階で表現することになり、これを2値画像という。

白から黒までの明暗だけで表現した画像をグレースケール画像と呼ぶ。例えば、8ビットの量子化であれば、256階調、16ビットの量子化であれば、65536階調のグレースケール画像となる。カラー画像では、RGBごとに量子化を行う。RGBそれぞれ8ビットで量子化すれば、合計24ビットになり、約1677万色を表現できる。

解像度と画像サイズ

デジタル画像の解像度は、標本化間隔で決められ、dpiという単位で表されr。dpiとは、1インチあたり南天の標本点を用いるかを表したものである。

例えば、150dpiと300dpiとでは、後者の方が2倍の解像度となる。5インチ×5インチの写真を入力した場合、150dpiでは画素数が750×750=562500となり、300dpiでは1500×1500=2250000になる。

これらの数字は本来画素数であるが、場合によって画素数が解像度として用いられることもある。画像全体のサイズが同じであれば、当然、画素数の多い方が加増度の高い画像となる。

画像サイズは 画素数に量子化ビット数をかけたものとなる。例えば、562500画素の画像が各色8ビットで入力されていれば、データ量は562500×24=13500000ビット=

1687500バイトとなる。(1バイト=8ビット)

デジタル画像の階調

デジタル画像は濃淡を出来るだけ多くの段階に分けるほど美しくなめらかな画像が得られる。前述のように、量子化レベルが8ビットで入力されていれば、グレースケールなら256階調、カラー画像ならRGBそれぞれ256階調で表現できる。

ラスタ形式とベクタ形式

画素の並びで表現するデジタル画像をラスタ形式と呼ぶ。これは画像や図形に対応する画素に色を描きこむ処理をラスタかというためである。ラスタ形式の画像では標本化された解像度を変更することはできないため、画像を拡大すればするほど粗さが目立ってくる。ラスタかした線分の例である。ラスタ化した斜めの線分は正確な直線にはならない。

一方、点や線、面の位置や長さなどの情報によって表現される画像をベクタ形式と呼ぶ。ベクタ形式の画像は点と点を結ぶ線、線に囲まれた麺という考え方で作成され、線を引く、面を塗りつぶす、トイった命令と数値の組み合わせで画像が構成される。このため、ベクタ形式とビクタ形式を使い分ける必要がある。

・ラスタ形式の特徴と用途

ラスタ形式は写真屋手書きの絵など複雑で微妙な形や色を表現するのに適している。また縁の周囲をにじませるような処理を行うこともできる。ただし、前述の斜線と同様に正確な円を描くことはできない。ラスタ形式の画像は解像度が高くなればなるほどデータサイズが大きくなっていく。

画像を扱うソフトのことをグラフィックソフトという。特にラスタ形式の画像を専門に扱うソフトのことをペイント系ソフトと呼ぶ。

・ベクタ形式は一つの画像の中にある複数の要素を一つ一つ個別に扱うことができ、それぞれのオブジェクトの形の変更、拡大、縮小、色の変更などを自由に行える。そのため、図面やイラストなどの作成に向いているまた、アウトラインフォントも代表的なベクタ形式の一つである。ベクタ形式の画像のデータサイズはラスタ形式に比べれば圧倒的に少ないことが多い。なおベクタ形式の画像を専門に扱うソフトのことをドロー系ソフトと呼ぶ。

色のデジタル表現

デジタルカメラで撮影した画像やイメージスキャナで取り込んだ画像、あるいはグラフィックソフトで製作した画像のほとんどはRGBによる加法混色で色が表現されている。また、それらの画像を表示するディスプレイモニタはは交代によって色を表現するが、これもRGBによって表現されている。

・フルカラーとハイカラー

RGBの各成分の値は量子化された値を用いており、量子化ビット数によって表現できる色数が決定される。8ビットの量子化であれば、256段階となり、RGBそれぞれに量子化が行われるため、

256×256=16777216色、つまり、24ビットの指揮数が得られることになる。24ビットは、一般に人間が識別できる色に対して十分な数と考えられている。このことから、24ビット以上で表される色はフルカラー、あるいはトゥルーカラーと言われている。

16ビットの場合、65536色を同時に表示できるが、これをハイカラーと呼ぶ。

・色空間

デジタル画像を入力出力するための機器では、色の表現可能な領域が決められており、これを色空間という。イメージスキャナ、デジタルカメラ、ディスプレイモニター、フィルムレコーダ、インクジェット方式などの一部のプリンタではRGBの色空間が用いられている。また、商業用印刷屋カラープリンタにおいてはCMYに黒を加えたCMYKの色空間が用いられている。

これらはデバイスに依存する色表現であるため、例えば同じ画像を異なるディスプレイモニタに表示した場合、同じ色が再現されない。これはディスプレイモニタは製品ごとに表示できる色が異なり、同じ型番お製品であっても個体差が存在するからである。

これに対してデバイスに依存しない色空間がCIEである。あるデバイスによる色表現をCIEの色空間位変換して、そのデータを次に渡すデバイスの色空間に変換することによって、異なるデバイス間でもできるだけ同じ色表現を行えるようにすることをカラーマネジメントシステムという。

この機能は一般的にはOSが装備している。WindowsにはICM、MacOSにはcolorsyncが搭載されている。また、アプリケーションソフトがカラーマネジメントシステムを持っている場合もある。

ディスプレイモニタによっては、一般のものより広範囲な色空間を表示できるものもある。

・インデックスカラー

RGBやCMYKなどのように絶対的な色を直接表現する以外にあらかじめ多数の色番号とそれに対応するRGB成分の値の対応表データを準備し、画素ごとに色番号を与える方法もある。この対応表データーをカラーパレット、カラールックアップテーブル、カラーマップなどと呼び、これによって表現される色をインデックスカラーと呼ぶ。例えば、カラーパレットを256個分用意すると、一つの画像に対して256色までの色表現が可能であり、各画素は8ビット、すなわち1バイトで表すことができる。これを8ビットカラーと呼び、色数の少ない画像には効果的な圧縮方法となる。インデックスカラーを用いた代表的なファイル形式にはGIFやPNGがある。圧縮についてはまた後ほど解説する。

デジタル画像の保存と圧縮

コンピュータで扱われるテキストや画像のデータはファイルという形で保存することができる。ファイルは一まとまりのデータの基本単位でもあり、ファイルと単位としてデータの保存、出力、授受などを行える。

・ファイル形式

ファイルの実態には、ある決まった規格に基づいてデータが格納される。その規格をファイル形式、あるいはファイルフォーマットとよぬ。ファイル形式にはヘッダとデータの部分に分かれており、ヘッダには、ファイル形式に応じて画像サイズや後述するデータの圧縮アルゴリズムなどの情報が格納っされる。代表的なファイルフォーマットとしては、画像データではBMP JPEG GIF PNGなどあり、ウェブよう画像としてはJPEG GIF PNGなどを利用する。映像データでは、MPRG AVIなど音声データではWAVE MP3などがある。

・圧縮方式

音声データや画像データはデータ量が大きくなりがちであるため、保存や通信お効率化のためにできる限りデータ量を小さくする手法が提案されており、これをデータ圧縮と呼ぶ。圧縮手法には圧縮しても元のデータに完全に復元できる可逆圧縮方式と、復元できない不可逆圧縮方式がある。JPEGは人間の目には検知しにくい高周波成分を除去することでデータ量を削減する方法を取っている。JPEGは不可逆圧縮方式であり、圧縮率が高い。自然がぞう向けには有効であるが、図版ではJPRGの特徴であるノイズ成分が目立つ。図版に対してはGIFやPNGを選択すべきである。データの内容や目的にあわせて圧縮方式を選択することが望ましい。

オウンドメディアのコンテンツ

オウンドメディアのコンテンツを作成するに当たり、気を付けるべきポイントが幾つかあります。ここではそれらの一部をご紹介することにします。オウンドメディアのコンテンツ作成を任された担当者は、どのように記事を書き始めればよいのか悩んでいることでしょう。確かに質の良い記事を原稿として提出できなければ、そのサイトの影響力は薄れてしまいます。しかし初めから焦る必要はありません。書き手は皆初心者の状態で始めます。慣れていなければ書き始めることすらできなくて当然なのです。初心者が最初に考えるべきことは、オウンドメディアにおける質の高さとは何を意味するのかという点です。それは必ずしも一般的な記事と同じだとは限りません。オウンドメディアならではの定義があるのです。実際、紙媒体で優れた記事を書くライターであっても、オウンドメディアのアクセス数を増やせないことがあります。彼らはこの「質の高さ」を自分の培ってきた能力でカバーできると考えているのですが、それは大きな間違いです。オウンドメディアの記事を作成する時は、まずグーグルを意識しなければなりません。グーグルを意識する以上、例えば「文章の美しさ」のような基準の優先順位は少し下がります。それよりもユーザーのアクセスを増やせる記事が望まれるのです。具体的にはグーグルで高く評価される記事がこれに当たります。というのも、グーグルに認められれば、検索結果の上位にランキングされる可能性が高まるからです。検索結果の上位というのは、オウンドメディア制作の最終目標でもあります。これが達成されることによって、ユーザーのアクセス数が増え、延いては顧客が増えるからです。