WEB(ホームページ)制作会社better standars

Blog of Better Standard

Webサイト制作やデジタルマーケティングのブログ

企業のブランドプロミスとタグラインをチェックしてみました

better standard editorbetter standard editor

私たちは常にあらゆるメッセージを浴びて日々暮らしているわけですが、ブランドが発しているメッセージについても同じようになんらかのタイミングでそのメッセージを浴びています。一方でブランド側に立ってみると、適切なタイミングで消費者やユーザーに自らの存在やメッセージを伝えたいと考えるのではないでしょうか。ブランドが発しているメッセージは様々なものがありますが、消費者であり、ユーザーでもある私たちが一番よく見ているのが、ブランドや企業のロゴ。それに次いで文字で表現しているタグラインや、キャッチコピーがあります。ブランドポリシーと言われるものはその骨子となる、基になるものです。

ブランドプロミスとタグライン・キャッチコピー、企業理念の違い

ブランドプロミスは、マニュフェストのようなもので、キャッチコピー、スローガンやタグラインとは違い、少し踏み込んだ内容を表現しており、比較的文字数が多いものになっています。これは、ブランドの心意気や志、そして、約束できることを文字にして表現しているものになっているからです。逆にスローガンやタグラインは明解にさらっと言えるフレーズになっており、コミュニケーションの目的が異なるため表現が変わってきます。

一方で、企業理念は企業のミッションやビジョンになり、中長期の任務や展望を誓うもので、硬めの表現になりがちです。また、企業というその立ち位置からも従業員や株主、取引先などのステークホルダーに対して均質に表現する必要性も高まることや、現在では企業の下に多くのブランドがぶら下がっていることもあり、ユーザーとの関係にフォーカスしたタグラインやブランドプロミスなどとは異なる表現になる傾向があります。企業理念は従業員に向けてが、多い印象です。

ブランドプロミスをWEBサイトにあげることで得られるメリット

NIKEの”Just Do It!” やApple の “Think Diferrent”、Sonyの “make.belive” などグローバルで展開するブランドが掲げるラグラインについては、CMなどで見たことが多い方も多いのではないでしょうか。

日本語での展開をみてみると、国内企業も大企業だけでなく、中小零細企業や個人などのブランドもタグラインを使っているケースもあり、簡単なラグラインだと”寿司屋”の茂吉 などはどうでしょうか?寿司屋がタグラインの原始的な表現になるのではないでしょうか、屋号やブランド名とは別の表現をするといった意味では、「”寿司屋”の茂吉」はその屋号(茂吉)が提供するものを簡潔に伝えているという点においては、適切なものではないかと考えられます。”茂吉” だけでは何を提供するのかが分かりにくく、伝わらないですが、”寿司屋” とつくだけで、”茂吉” がお寿司屋さんであるというのが多くの方に伝わります。

とはいってもこれでは他のお寿司やさんとの差別化が難しくなってしまいますし、単純な文言で表現する事が難しいので、実際には多くのブランドでは、”寿司屋”というようなタグラインを使わずにもう少し抽象的だったり、複合的な表現をするのが一般的です。例えば、お寿司屋さんのスシローですが、”うまいすしを、腹一杯(うまいすしを、腹一杯。うまいすしで、心も一杯。)” とタグラインがロゴに添えられています。これは説明するのもアレですが、「手軽な価格でお腹いっぱいにしますよ」といったことを伝える事を目的としているのではと思います。

スシローの使命

企業や商品、サービスなどにおいては、ロゴをオリジナルで作成してPR等に利用することは多いですが、その際はロゴと一緒にタグラインやスローガンも作成してロゴと一緒にPRに利用することで、企業やサービスや、提供できること、目指すところなどをロゴの形とともに記憶に残してもらえる機会が増えることが期待されます。タグラインの発想自体はブランドプロミスからブレークダウンしてコピーを作成することが多いです。
また、年月を経る中で外部や内部の環境の変化に応じて不定期にこれらの言葉もアップデート、メンテナンス行いながら管理していくのが望ましいでしょう。

ブランドプロミス、企業理念を実際に見てみましょう

では、ブランドがどのようにブランドプロミスやタグライン、企業理念を活用しているかをチェックしてみました。

ソニー

ソニーについて

ユーザーの皆様に感動をもたらし、人々の好奇心を刺激する会社であり続ける。
これが私たちソニーのミッションです。

テクノロジー、コンテンツ、そしてサービスへの飽くなき情熱で、
世界に先駆けた商品や体験、そして新しい文化を生みだし
ソニーだからできる、新たな感動の開拓者となることをめざします。

すべては、あなたの心を動かすために。

BE MOVED

ソニーのミッション・ビジョン

ソニーのミッション/ビジョン

ミッション
ユーザーの皆様に感動をもたらし、人々の好奇心を刺激する会社であり続ける。

ビジョン
テクノロジー・コンテンツ・サービスへの飽くなき情熱で、ソニーだからできる新たな「感動」の開拓者になる。

エレクトロニクスエンタテインメント金融
人のやらないことをやる。

創業以来、受け継がれてきたこのスピリットのもと、
ソニーは、エレクトロニクスを基に事業ドメインの拡大を続け、
映画、音楽などのエンタテインメント事業、さらには、
金融事業も手掛ける、多様性を持った企業となりました。
そして、これらの多様な事業ドメインを、「SONY」という4文字のもと
共通の価値観をもって運営していくことが、ソニーの強みです。

また、このような多様性を活かし、AI×ロボティクス事業など、
新たな事業を加速させていきます。

すべては、人々をワクワクさせ、新たな感動を呼び起こすために。
ソニーは、これからもあくなき挑戦を続けていきます。

レクサス

BRAND -EXPERIENCE AMAZING

ラグジュアリーカーを見きわめる真の基準は、
クルマそのものの価値と、
クルマが生みだす心躍る体験にあると、
私たちは考えます。

レクサスは時代を先取りし、
新たな驚きを創造することを
クルマづくりの信念としています。

機能を感性に、
パフォーマンスを限りない情熱に、
技術を想像力に、
昇華する。

レクサスは人と社会の未来を描き、
世界に興奮と変化をもたらす
革新をデザインします

星野リゾート

各事業ブランド紹介

ほしのや

圧倒的な非日常感を演出する
日本発のラグジュアリーな和の滞在体験

「現代を休む日」をコンセプトに、その土地の文化を敷地内で色濃く表現しながら、お客様に圧倒的な非日常感ある滞在と日本のホスピタリティをベースにしたおもてなしを提供することを大切にしています。世界の多くの場所で日本車や日本食を体験することができますが、日本文化のホテルに泊まることはできません。星のやを通じて「今日は日本のホテルに泊まろう」という選択肢を世界に提案したいと考えております。

星野リゾート

地域の魅力を再発見
心地よい和にこだわった上質な温泉旅館

火山立国日本が育んだ温泉文化を現代的にアレンジした進化する日本旅館。
四季を映し、和の趣を大切にしながら創り出す快適な空間は、現代の生活にあった心地よさを持ちます。
和食のコースメニュー「日本旅会席」は、ご当地の旬の魅力に出会う瞬間です。

コカコーラ

使命、ビジョン、価値観

私たちの使命

「2020 Vision」のロードマップは、私たちの使命とは何かというところからスタートしています。企業としてのゴールを明確に示すとともに、何を重視して行動し、判断するかという基準を設定しています。

世界中にさわやかさをお届けすること
前向きでハッピーな気持ちを味わえるひとときをもたらすこと
価値を生み出し前向きな変化をもたらすこと

私たちのビジョン

ビジョンは、ロードマップの枠組みとなるものです。持続的で質の高い成長を続けるために達成すべきことを示し、ビジネスのあらゆる側面における指針となります。 業界をリードし続けるための企業文化
「業界をリードし続けるための企業文化」は、「2020 Vision」を実現するために必要な企業姿勢と振る舞いを示します。

Panasonic

ブランドプロミス

私たちPanasonicは、より良いくらしを創造し、
世界中の人々のしあわせと、社会の発展、そして
地球の未来に貢献しつづけることをお約束します。

better standard editorbetter standard editor

日本語WEBフォントとHelveticaやDINに似ているフォントをGoogle Fontsで探す

better standard editorbetter standard editor

WEBフォントを利用してWEBサイトやWEBページを制作するケースが多くなってきています。

欧文については、フリーで使える Google Fonts のおかげでアンチエイリアスがついていて綺麗な曲線が表現されているフォントをWEBページにも使えるので、フォントの選択肢が増えることでデザインの幅が広がると同時に、テキストデータですのでSEO的にみても効果があります。とくにモバイル環境から閲覧される場合においては、モバイル端末の画面がPCに比べるとほぼ倍と詳細微細になってきているために、そのままPC用に用意した画像で表現すると荒く見えることもあり、できるだけテキストでの表現を心がけた方がデータの軽さ的にも検索エンジンなどの機械的な読み上げなどの面からも望ましいです。画像もPC用に表示するファイルのほかに倍程度の画像を用意すれば、綺麗に表示することも可能ですが、ただでさえ通信帯域が細い環境に4倍ほどの情報を配信することが適当ではありません。(倍といっても縦横あるのでピクセル数は4倍になります)

Macでの閲覧環境においては、かなり以前よりブラウザでみるWEBページのフォントはスムースな表示となっていますが、Windowsデバイスでは、現在でもアンチエイリアスなしで表示するのがデフォルトとなっています。フォントをスムースにするCSSプロパティーやハックなどもありますが、一般的にWindowsのマシンではスムーズなフォントで表示されない現状があり、Windowsでもスムースなフォントで表示させたいということも多いですし、フォントを変えることで雰囲気が変わってきますので、ユーザーに与える印象も変わってきます。是非とも効果的に使いたいところですが、デメリットや使い方にはどのようなものがあるのでしょうか?

日本語こそWEBフォントを使いたい

現在のWEBフォントの利用環境が劇的に改善しているなかで、WEBページのほとんどを占める日本語にこそ、WEBフォントを使いたいと考えるのは自然な流れであるとおもいます。しかしながら、日本語フォントについては、文字数の多さ、画数の多さなどフォントデータ自体が重くなる傾向もあり、なかなか利用する機会がないのが現状です。利用するには、フォントファイルをサーバーにアップするか、Googleが提供している Google noto sans を代表とした早期アクセスの中から使うか、Adobe Typekitなどの有料のサービスを利用することになります。

日本語のWEBフォントサービス

WEBフォントのツールやサービスが増えており、それにともない使える日本語フォントも増えていますが、ファイルの重さもあり、全面的に実用できるケースは増えてはいないです。Adobe Typekitは Creative Cloud を利用していればWEB上の設定で、モリサワやフォントワークス、字游工房などの有名どころのフォントを使用することができます。500,000ページビュー/月までであれば、Creative Cloud に付随しているライセンスで使えますし、25,000ページビュー/月 までであれば無料で使用することが可能です。ただ、日本語のフォントデータが重いのか、フォントの読み込みに多少のタイムラグがあり表示が一瞬ずれてしまうように見えることもあります。体感的には Google Fonts の方が表示が早いような気がしますが、メニューや見出しやキャッチコピーなどのポイントに使用する程度にとどめておいた方が無難です。Fonts.comは、250,000 ページビューまで月9.99ドル。appleも使っている AXIS Font Japaneseを使うことができます。また、日本語のWEBフォントについては、ライセンスについても注意が必要です。使えるからといってサーバーにアップして使うことが許されていないフォントも多くありますので、フォントをサーバーにアップして使う場合にはライセンスを一度確認したほうがいいでしょう。

AXIS Font Japanese

AXIS Font Japanese @Fonts.com

レンタルサーバーのサービスにWEBフォントのライセンスが付いている場合がある

レンタルサーバーによっては、使用できるフォントに限りがある場合もありますが、これらの日本語WEBフォントをサービスとして無料で提供されているケースもあるので、フォントを気にしたいなどの場合は、サーバーを選ぶ際に注意してみてもいいでしょう。

モリサワフォントが使えるレンタルサーバー

実際に使用するには読み込みの設定を行う

使い方はCSSで読み込むフォントを指定、フォントを表示させたいところにフォントを指定すればフォントをWEBフォントで表示することができます。下記は、Google FontsのM+ 1pを読み込んで表示する方法です。

いまのところは欧文フォントだけでも使いたい

日本語フォントの現状については、使えるケースも限られますが、フォント自体が軽い欧文フォントでは見出しやメニュー、キャッチコピーなどでも使えることもありますし実際に使っていますので、ゴシック体の有名どころである、HelveticaやDINに似ているフォントをgoogle fontでピックアップしてみました。

HELVETICA(ヘルベチカ)

ヘルベチカは1957年にスイス人のマックス・ミーディンガー、エドゥアルト・ホフマン(Eduard Hoffmann)が発表した活字組版用の書体です。すっきりとしていてとても使いやすくいろんなところで使われています。視認性も良く是非、WEBサイトに使ってみたいとことろですが、WEBサイトでそのまま使う場合には画像にして利用するしかないのが現状です。Macには最初からインストールされていますが、Windowsでは入っていなく、Google Fontsには取り扱いはありませんので、形が似ているものをピックアップしたいとおもいます。

Google Fonts から

  • hi! helvetica alternatives
    (this is Open Sans)

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

  • hi! helvetica alternatives
    (this is Lato)

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

  • hi! helvetica alternatives
    (this is Noto Sans)

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

ヘルベチカを使ったロゴ

実は、ヘルベチカを元にして作成されたロゴもいくつかあります。




アメリカン航空とルフトハンザ航空は近年ロゴをリニューアルしていますが、微調整といったところです。

こちらに、ヘルベチカを使ったロゴの記事があります。パナソニックもヘルベチカベース?
20 famous logos made with Helvetica

DIN(ディン?)

「DIN」というのは「ドイツ工業規格(=Deutsches Institut für Normung)」の略称で、交通標識や行政などの書類や看板表示などの工業用に設計された、わかりやすく、見やすく、シンプルで飾り気のないフォントです。現在ではその見易さなどから商業用の看板などにも多くつかわれています。

Google Fonts から

  • hi! DIN alternatives
    (this is Ropa Sans)

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

  • hi! DIN alternatives
    (this is Abel)

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

better standard editorbetter standard editor

google analyticsでとりあえずチェックしておく指標3つ

better standard editorbetter standard editor

WEBサイトを管理・運用するのにはgoogle analyticsは欠かせないツールです。ただ、導入した当初はどこから見ていいのかわかりづらいとかいう方も多いので、まず抑えておきたいところをピックアップしてみます。誰が、どのくらい、どのように、どんな環境で見ているのかが分かるとそこから発想を膨らませて、目標に対する対策が見えてきます。多くのユーザーに訪問してもらうのは、多くのWEBサイトにとっても目的の一つになっていると思いますので、そこは外さないでチェックしてみます。

チェックしたい基本的なこと

  • どのくらい見られているのか?
  • どこから来ているのか?
  • どのような環境でみているのか?

どのくらい見られているのか?

ユーザーはどの程度、WEBサイトをみているのか?これは、セッション(訪問数)とページビュー(PV)、滞在時間などを見てみると確認することができます。

まずは、google analyticsにログインした上で、左側のメニューから

【ユーザー > 概要】

を開きます。ここに、セッション、ユーザー、ページビュー数、平均セッション時間などが表示されています。デフォルトでは7日間となっておりますが、右上の期間を設定することで、30日間や年間、好きな期間を設定することができたり、前年や前の同じ期間と比較できたりすることが可能です。そこで、まずはどのくらい見られているのかというところで一つづつ指標を見て見ましょう。

セッション

訪問数を指しています。最初に訪問してからサイトを離脱するまでの一連の動きを1セッションとしています。
セッションが切れるタイミングについては、下記のように定義されています。例えば、一度訪問してきたユーザーは3分かけてサイトを閲覧してサイトを離脱したとしましょう。これで1セッションとなります。また60分後に訪問した場合は、また新しいセッションとなります。離脱とはブラウザのウィンドウを閉じたり、サイトに来る前のページに戻ったか、もしくは下記のような条件で離脱と判定されます。

  • 時間による期限切れ
    操作が行われない状態で 30 分経過後。
  • 午前 0 時
  • キャンペーンの切り替わり
    キャンペーン経由でサイトにアクセスして離脱した後、別のキャンペーン経由でサイトに戻ってきた場合。

https://support.google.com/analytics/answer/2731565?hl=ja

ユーザー

訪問して来たユーザー数になります。cookieを使ってユーザーを判別しています。モバイルからもPCからも訪問して来た人がいるとしますが、その場合は2ユーザーとなります。同じ端末+ブラウザでcookieをリセットしていなければ、ユーザーは同一という判定されます。

ページビュー(PV)

ページビューはどのくらいページが見られているのかです。一度ページが見られると1ページビューになります。どのページが実際によく見られているのかは、行動 > サイトコンテンツ > すべてのページ から見ることができます。

平均セッション時間

セッションが終了するまでの時間の平均です。セッションが切れるタイミングが先ほどあげた条件なので、離脱した明確な時間を計測することができません。そのためセッション時間は最後に見たページまでの時間が採用されています。最後に見たページに10分滞在したとしても0分とみなされるということになっています。ですので、実際には平均セッション時間より長く滞在しているということになります。

ただ、直帰した(1ページだけ見てウィンドウを閉じた、元に戻った)場合も、このルールが適用されるので、すべて0秒になります。

どこから来ているのか?


左側のメニューから

【集客 > 概要】

を開きます。右側に円グラフなどが表示されます。Organic Search、Direct、Referral、Social、Paid Searchなどが表示されています。これはキャンペーンURLビルダーを使って個別のリンクを設定することができます。例えばaffiliate(アフィリエト)やemail(メールマガジン)などです。

Organic Search

自然検索をして訪問して来たセッション数です。検索エンジンとして登録されているのは、google、Yahoo、MSNなどが該当します。国内であれば、これに加えて、ドコモの検索エンジン、楽天、gooなどが含まれていますが、グローバルで見れば60個弱の検索エンジンが登録されています。この検索エンジンの設定を追加することで、特定のサイトをOrganic Searchに入れることが可能です。【管理 > トラッキング情報 > オーガニック検索ソース】 から設定することができます。どのページが実際に検索結果として集客してできているのかは、【行動 > サイトコンテンツ > ランディングページ】 から確認することができます。
既定の検索エンジンのリスト

Direct

直接窓にURLを打ち込んだか、ブックマークやメールから、もしくはアプリから来た場合にはこのDirectに該当されます。LINE@やメールマガジンからの訪問されたトラフィックを計測するには、キャンページURLビルダーを利用することで、設定することができます。Instagramについては、Directには該当せず、Socialに該当されています。

Referral

外部のサイトからリンクを辿って来たセッションについては、Referralに該当されます。訪問するまえのサイトのURLも確認することができます。

Social

facebook、twitter、instagram、ameba、Naver、FC2、Ameba、Google+、YouTube、goo blog、Hatena Bookmark、Hatena Diary、mixiなどのソーシャルメデイアから訪問があった場合に該当されます。

Paid Search

検索広告からきたセッションです。これにはYahooの検索広告ははいりません。

どのような環境でみているのか?


訪問してくるユーザーはモバイルなのか、PCでみているのか、またはタブレットなのかが確認することができます。また、ユーザ属性からは性別や年齢、地域なども確認することができます。

もう少し見てみるために

データが見えてくれば、仮説を立てた上でgoogle analyticsのデータを見ることができますので、その仮説が有益なのかどうかを実際に確かめることが可能となってきますし、WEBサイトをどんなユーザーが見ているのかが想像しやすくなれば、そのユーザー向けにコンテンツを制作したりすることもできます。

better standard editorbetter standard editor

レスポンシブルWEBデザインでパソコンからもスマートフォンからも同じデザインで閲覧してもらうメリットとデメリット

better standard editorbetter standard editor

レスポンシブルWEBデザインとは

Webサイトはスマートフォンの利用が多くなり、BtoBのサイトであっても、50%以上がスマートフォンからのアクセスというWebサイトも珍しくなくなっています。弊社が管理しているWebサイトでも90%以上がモバイル、タブレットからというWebサイトもあります。こうした利用するデバイスが変化してきている世の中の流れからスマートフォンへの対応を行わないのは不自然ですし、合理的な判断ではないでしょう。

レスポンシブルWEBデザインとはアクセスしてくるデバイスに応じて適切な画面表示を行うWEBデザインを指しています。アクセスしてくるデバイスは多岐にわたり、画面のサイズも様々です。大きく分けてPCとスマートフォン、タブレットがあります。
PCでも画面サイズは、代表的なサイズのFullHD (1920×1080)から4K (3840×2160)、5K(5120×2880)とサイズ展開も幅が広くなっています。スマートフォンについては、日本国内においてはiPhoneのシェアがかなり高く60%を超えているとのデータもあり、そのiPhoneのサイズ展開は、iPhoneSE(320×568)、iPhone7,8(375×667)、iPhone7Plus,8Plus(414×736)、iPhoneX(375×812)といったとものになっています。Androidの端末においては、Sony Xperiaが国内ではシェアが高く、画面のサイズは、SO-02J(360×640)などがある(360×640)を多くの端末で採用されています。タブレットについては、iPad(768×1024)などがありますし、他にもあります。さらに、スマートフォン、タブレットについては目の近くで見ることを想定しているのか、画面の詳細度がほぼ2倍にちかくなっていますので、綺麗に表示させるためにはこのサイズの倍の大きさの画像を用意する必要があります。こうしてみてみても微妙に違う画面サイズのデバイスが数多く存在しており、それぞれに最適なWEBサイトのコンテンツを提供することができるのがレスポンシブWEBデザインです。

参考データ

PC画面サイズ

  • FullHD (1920×1080)
  • WUXGA (1920×1200)
  • WQHD (2560×1440)
  • WQXGA (2560×1600)
  • 4K (3840×2160)
  • 5K(5120×2880)

スマートフォン・タブレット画面サイズ

  • iPhoneSE(320×568)
  • iPhone7,8(375×667)
  • iPhone7Plus,8Plus(414×736)
  • iPhoneX(375×812)
  • Android SO-02J(360×640)
  • iPad(768×1024)

レスポンシブルWEBデザインは、スマートフォン向けの画面をPCからアクセスした場合に表示するHTMLと同じHTMLが適用されますが、CSSでその表示を切り替え、複数の画面サイズでも同じような雰囲気でユーザーが閲覧できるようにするものです。また、レスポンシブルデザインでも画面横幅100%に応じて画像サイズなどが変化するリキッドレイアウトデザインというものも可能でデザインの表現の幅も広がっています。

レスポンシブルデザインのメリット

別々にHTMLを用意する必要がないので、HTML側のメンテナンス性が向上します(逆にCSSのメンテナンス性は若干落ちます)。スマートフォン向けのWEBサイトを用意する場合はURLが別々のものになってしまう場合もありますが、レスポンシブルデザインの場合は、URLが別々のものにならないため、SEO効果も期待できます。また、余計なリダイレクトがなくなるため、高速にページを表示させることができます。現在PC向けのWEBサイトがある場合も、レスポンシブルデザインを追加することが可能です。PCでみてもモバイルからみても同じようなデザインでサイトを閲覧することができるため、一般的には閲覧ユーザーもどのWEBサイトを見ているのかの認識が容易で、ブランド認知向上に効果があるといわれています。別々にファイルを用意するより初期の制作工数が軽くなる傾向があります。

レスポンシブルデザインのメリットまとめ

  • URL同一になるためSEO効果が期待できる
  • メンテナンスが軽くなる
  • 初期構築工数が減る
  • どのデバイスから見ても同じような印象を与えることができる

レスポンシブルデザインのデメリット

そもそもモバイルとPCでは利用するシーンが同じではなく、それぞれに最適なユーザー体験を提供するということを考えると一緒にしてしまうことに無理があるという考えもあります。モバイルサイト、PCサイト、モバイルのアプリなど多くの環境でも快適に利用できるようにするのがベストだとも言えます。また、PCでは表示しているが、モバイルの場合には表示しないというケースがレスポンシブルデザインでは発生することがあります。その場合、回線速度を気にしなければならないモバイル環境に対して必要のないデータを送ってしまうということが起き、結果的に必要ないデータをユーザーにダウンロードさせてしまいます。当然ですが、コスト面を見ても、PCサイトだけ、モバイルサイトだけのWEBサイト制作より工数が増えるためその分割高となってしまいます。

SEOを考えるとAMP(Accelerated Mobile Pages)への対応の方がいいのでは?

PC、スマートフォン別々にHTMLを用意する場合の方が最適なケースもあるでしょう。検索エンジンのgoogleはモバイル環境でも高速で快適なブラウジング環境を提供するWEBサイトを優先的に上位表示するアルゴリズムを採用しています。そのWEBサイトの仕様がAMP(Accelerated Mobile Pages)と言われるものになり、モバイルでWEBページをを閲覧するときに高速にコンテンツを表示できるフレームワークです。モバイルでの検索結果ページに対応しているWEBページの場合にはAMPとラベル表示がされています。
先ほどURLがモバイル、PCで統一となるためにSEO効果が高いという表現をしましたが、モバイルに限っていえばAMP対応した方がSEO効果は高い可能性もあります。ただ、その場合同じコンテンツに対してURLが複数存在るうような仕組みとなってしまうと、被リンクという概念では分散してしまいますので、それぞれSEO対策が必要となってしまいますので、悩ましいところではあります。ただAMP対応していないために検索順位を落とすということはないようです。
AMP プロジェクト

レスポンシブルデザインのデメリットまとめ

  • 初期工数が増える
  • 余計なデータをダウンロードさせてしまうためページが重くなる
  • AMP対応の方が高速、検索結果の表示にAMPラベルをつけることができる
  • ユーザー体験がアプリなどに比べると制約がある

SEOとレスポンシブルデザイン

URLが別々にならないので、googleもレスポンシブルデザインを推奨しています。下記のようにあげています。
https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=ja

  • URL が 1 つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。
  • 対応するパソコン用ページやモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、ページへのインデックス プロパティの割り当てが正確に行われます。
  • 同じコンテンツのページをいくつも維持管理する手間が省けます。
  • モバイルサイトでよくある誤りに陥る可能性を抑えることができます。
  • ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。ユーザー エージェントに基づくリダイレクトはエラーが発生しやすく、ユーザー エクスペリエンスを損なうおそれがあります(詳しくは、ユーザー エージェントを正しく検出するをご覧ください)。
  • Googlebot がサイトをクロールするために必要なリソースを節約できます。同じコンテンツのページが複数存在すると、別々の Googlebot ユーザー エージェントが複数回クロールしてすべてのバージョンを取得する必要があります。一方、レスポンシブ ウェブ デザインの場合は、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。Google によるクロールの効率が上がると、サイト内のより多くのコンテンツがインデックスに登録され、適切な間隔で更新されることにつながります。

先ほどAMPについて書きましたが、モバイルフレンドリーとAMPでは目指しているところが異なるようですが、それぞれに最適なコンテンツとユーザー体験を提供できればいいですが、費用対効果などを考えるとレスポンシブルWEBデザインを採用するのが現時点でメリットが大きいです。

better standard editorbetter standard editor

googleが提唱するSEO対策の基本(検索エンジン最適化スターターガイド)

better standard editorbetter standard editor

検索エンジンといえば日本国内においては、Yahooも採用していることからシェア90%以上だと思われるgoogleが検索エンジン最適化についてのガイドラインを公開しています。2010年に公開された情報で、とても基本的な内容になっていますが、Googleが考える ”検索エンジンとは?” という疑問に対しての理解も進みます。

検索エンジン最適化スターターガイド(PDF)

目次は下記ようになっています、基礎からサイト構造、ナビゲーション、クローラー対策、モバイル、プロモーションと分析となっており、個人的にはこれをまずやっておいて、コンテンツを更新していくだけでかなりの効果があるのではと考えています。(アフィリエイトサイトなど熾烈なキーワードについてはこれでは物足りないこともあるでしょう)

SEOの基礎

  • 適切なページタイトルを付けよう
  • descriptionメタタグを設定しよう

サイト構造の改善しよう

  • URLの構造を改善しよう
  • ナビゲーションをわかりやすくしよう

コンテンツの最適化

  • 質の高いコンテンツを提供しよう
  • 適切なアンカーテキストを書こう
  • 画像の利用を最適化しよう
  • 見出しタグを適切に使おう

クローラーへの対処

  • robot.txtにを効果的に設定しよう
  • リンクにnofollow属性を活用しよう

モバイルSEO

  • モバイルサイトをGoogleに知らせよう
  • 携帯ユーザーを適切に誘導しよう

プロモーションと分析

  • 正しい方法でサイトを宣伝しよう
  • 便利なツールを活用しよう

すべて重要で検索エンジンからの集客を少しでも考えているのであれば、これらの基本的な最適化は必要です。また、CMSとの組み合わせでコンテンツから自動でディスクリプションを作成できるカスタマイズやプラグインなどもありますので、これらを使って効率化することも可能です。

弊社では、これらGoogleが提唱するサイトの検索エンジン最適化を行ったコーディング、実装を行っています。
お気軽にお問い合わせください。

検索エンジン最適化スターターガイド(PDF)

better standard editorbetter standard editor

なぜWEBサイトは公開後の運用が大事なのか

better standard editorbetter standard editor

Webサイトと紙に印刷したパンフレットとの大きな違いは、デジタルであり、そしてインターネットにつながっているメディアだということです。そのため便利な面としては、常に最新情報を公開・アップデートできるので、当初は奥行きの浅かったコンテンツも少しずつ積み上げていくことも可能となり、その結果サイトの価値は高まり、Webサイトの目的達成に近づけることができます。逆にそうしたメディア特性があるからこそ、更新がされていない、メンテナンスがされていないWebサイトは時間の経過とともにその価値をみるみるうちに落としてしまう傾向があります。

ユーザーから見ると、更新されていないWebサイトからなにかサービスを購入しようとか、利用しようとする気持ちを減退させかねません。つねにアップデートを心がけることで、更新しないというデメリットが帳消しになる以上の効果をもたらせます。

セキュリティー面では、利用しているWordPressなどのWebアプリケーションの脆弱性への対応は必須です。知らず知らずにしてスパムの踏み台となっていることや、Webサイトを丸ごと乗っ取られたり、ウイルスの配布してしまったり、という状態を避けるためにも、アプリケーションのアップデートなどは必要です。

Webサイト公開後は、コンテンツの更新やメンテナンス、セキュリティーのチェック などを行うのが運用・保守というような流れになってきます。
成果を継続的に出すために必要なことは数多く存在していますが、予算が潤沢にあるようなプロジェクトでない限り、手持ちのリソースを有効に利用するためにも、ある程度優先順位をつけて取り組む必要があります。下記にあげるようなものが一般的なWebサイトの公開後の運用についての作業になります。また、適切な判断ができるようにできるだけ多くの情報を取得し、整理しておくことが大切です。

サイト公開後の運用で行うタスク

  • セキュリティー面でのアップデートとそれに伴う調整
  • コンテンツの作成・更新
  • 既存コンテンツのブラッシュアップや見直し
  • 運用状況の現状認識(アクセスレポート)
  • サイトデザインの見直し
  • SNS 運用
  • 集客施策(SEO)
  • 集客施策(広告)

セキュリティー面での保守の必要性

弊社でも利用することが多いCMSですが、だれでも簡単にWebサイトを更新することが可能な反面、CMSの脆弱性を放置しておくと、Webサイトのコンテンツが書き換えられたり、身に覚えのないファイルがサーバーに配置されていたりと攻撃の対象になってしまう可能性も固まります。

通常、CMSの提供元はオープンソースであれ、脆弱性が発見されれば、すぐにアップデートなどで対策されるケースがほとんどですが、複数のプラグインを導入していたり、コアシステムにカスタマイズを行っていることも多く、対策されたアップデートをかけることができず、脆弱性がそのまま放置されてしまうケースもあります。
そのまま放置されることで、Webサイトが改ざんされてしまい、CMSにマルウェア仕込まれてしまい、しらずにどこかのサイトを攻撃しているという状況になってしまう可能性もあります。

これらの脆弱性を防ぐためには迅速なアップデート対応が必須ですが、それ以外にもWAF(ウェブアプリケーションファイアウォール)の利用やパスワードのアタックを制限したり、国外からの機能面に直接アクセスを禁止したりとCMS自体のセキュリティーを高める方法などがあります。WAFはお使いのサーバーによってはオプションなどで利用できる場合もありますので、必要に応じて利用を検討するといいでしょう。

効率的にWebサイトを更新・運用していく

限りあるリソースのなかで、効果的・効率的に対応するためには、Webサイトの構造をテンプレート・コンポーネント化しておくとことです。一つのコンテンツを更新するごとにWebサイトの最適な場所に新しいコンテンツが掲載されます、各コンテンツを整理・分類してまとめておくことで、Webサイトを訪問するユーザーが求めている情報を最適なタイミングで提供することができます。

これらの情報設計を行った上でWebサイトが構築されていると統一感もったトーンにて、効率的にWebサイトが運用することが可能です。また、当初のコンテンツ計画になかったものが追加になるというようなことは日常茶飯事ですが、必要なタイミングで新しいコンテンツと既存コンテンツとの住み分けを行い、整理を行えるようにしておくことは非常に重要です。担当者や制作会社ごとに更新するコンテンツのデザインが変わってきてしまい、統一感をもったコンテンツを更新できない場合も想定されますが、Webサイトの品質をちながら運用するためには、ガイドラインを作成するかなどの工夫が必要になります。見た目の統一感はブランディングという意味合いにおいても非常に重要な点です。

運用体制の整理

制作会社や担当者によって、更新するコンテンツがバラバラにならないように運用体制を予め組んでおくことで、これらは避けられます。また、アクセスレポートやコンテンツの更新、追加、それらについてのフィードバック、ブラッシュアップについても、予めKPIを設定して注視することで、効率的に運営することが可能です。
また、SNSやメールマガジン、広告経由でのアクセスを判別できるようにデータとして残して、次の施策を検討する際にも、また運用担当者のモチベーション維持のためにもリンクの管理を行います。

better standard editorbetter standard editor

WEBサイトを公開したら次にチェックすること

better standard editorbetter standard editor

新規ローンチの場合

Webサイトを公開して一通りリンクのチェックや動作の確認(公開前にも時間をかけて確認するとはおもいますが)が終わったら、タグ周りの設定や集客などの連携についての施策についてチェックしていきます。(Webサイトのアクセスの規模が小さい場合です)
誰かに見てもらえるように、リリースを配信したり、どのような人が訪問してきているのかなどの現状分析ができるようなデータ取得ができているかの設定と検証を実施します。

データ取得系の設定の確認については、テスト環境ではURLが異なることもありますので、URLやドメイン変更にともなうこれらの設定がうまくいっているかを確認する必要があります。また現在では様々なタグを利用する機会も多くなってきていますので、タグマネージャーを利用すると追加時にコードを直接編集する必要がありませんので、こちらがいいでしょう。(コンバージョンなどの変数設定はコードを編集する必要があります)

google タグマネージャー
Yahoo タグマネージャー

チェックしておきたいこと(データ取得系)

  • サーチコンソール
  • google analyticsの設定
  • コンバージョンの設定
  • サイトマップの送信
  • facebookピクセルの設定
  • twitterピクセルの設定
  • その他google mapなどの外部サービスのAPIの動作について
  • SNSとの連携、OGPなどについての確認

google サーチコンソールはgoogleが提供しているサービスです。Webサイトのインデックスの状況などを視覚的に見ることができます。このサービスを利用してWebサイトのコンテンツの情報を送信し、googleのクロールを促すことができます。デッドリンクがないかなど確認が一通り終了したら、サーチコンソールにサイトのデータを送信します、更新したら定期的にクロールにきてもらえるように設定しておきます。

google analyticsについては、公開後にタグを埋め込んでも問題ないかとおもいますが、同時になにかしらのコンバージョンを設定できるようにした方がいいでしょう。問い合わせフォームなのか、ECであれば購入だとおもいますし、ブランディングであれば、滞在時間や再訪問の回数などでもいいでしょう。Webサイトの目的に合わせて設定します。
目標を作成、編集、共有する google analyticsヘルプ

SNSのタグも最初から導入しておいた方が何かを始める際にはすでにデータが取得できている状態ですので、現状分析もすぐに正確なものから見ることができますし、SNSへの広告出稿などを検討している場合は、関連ユーザーに対して広告を表示させることができますので、こちらも合わせて実施します。

SNS広告は低予算ながら、ターゲティングを細かに設定することができますので、コンテンツをうまく制作出来る場合には、適時利用することで投稿の効率を上げることができますが、ターゲィングの方法や予算規模によっては、見込み客に嫌われないようなコミュニケーション設計が必要な場合もありますので、その都度確認が必要です。

集客&外部リンク獲得について

  • 関連サイトからのリンク
  • リリースの配信
  • SNSへの投稿
  • メールマガジンの配信
  • 広告の出稿(必要に応じて)

リニューアルの場合

リニューアルの場合はすでに上記のような設定が旧サイト上で行われていたという前提にたち、変更がある場合はコンバージョンの設定の変更やテスト環境から本番環境に以降した際にAPIなどが動作しているかを確認します。
それ以外については、おもに集客に関連する施策について確認していきます。
ニュースのリリースやSNSでの投稿はリリース後ユーザーを受け入れる環境が整いましたら是非行いたいアクションですので、サイト公開に合わせて事前に計画をしておくとスムースに進められます。

  • その他google mapなどの外部サービスのAPIの動作について
  • コンバージョンURLなどが変更になっていれば設定を変更する
  • URL変更などに伴ってサーチコンソールに新規URLの送信
  • リリースの配信
  • リリースの配信
  • SNSへの投稿
  • メールマガジンの配信
  • 広告の出稿(必要に応じて)

better standard editorbetter standard editor

WordPressをCMSにおすすめする理由について

better standard editorbetter standard editor

Webサイトのコンテンツ管理を行うツールは、CMS(Content Management System)と言われています。キャンペーンサイトなどではCMSを使わないことも多いですが、現在のWebサイトでは、何かしらのCMSを導入するケースがほとんどです。このCMSをWebサイトに導入することによって得られるメリットは、リニューアル時にコンテンツの再利用ができたり、サイトのあらゆる箇所で一度登録したコンテンツを再利用できたり、公開日時を設定することができたり、公開までの承認フローを導入できたりと多くを挙げることができます。

CMSという視点で世の中にあるツールを見てみると、Drupal、MovableType、Xoops、WordPressや最近ではPhotoshopやIllustratorを販売するAdobeもCMSとデジタルマーケティングソリューションを販売していたりします。

CMS導入の主なメリット

  • 誰でもWebサイトを更新するができる(サイト価値の向上)
  • 記事公開日時設定ができる(サイト運営にメリット)
  • コンテンツの再利用ができる(サイト価値の向上)
  • コンテンツの表示をサイト内のあらゆる箇所で可能(サイトの回遊性が向上)
  • リニューアル時にコンテンツの再利用が可能(コンテンツが資産化する)
  • コンテンツ公開フローを設定できる(サイト運営にメリット)

企業やサイトの規模によっても最適なツールは異なってくるはずですが、そのなかでも多くのケースにフィットするのではと思われるWordPressを弊社ではオススメしている訳ですが、何故なのかを検証してみます。

WordPressは、オープンソースでプログラムのソースコード全てが公開されており、コード自体も改変することも可能です。世界で一番利用されているブログツールでもあります。理にかなったコード構成、セマンティック Web、コードやデザインの美しさ、Web 標準、ユーザビリティなどを意識して開発されており、無料でダウンロードして使うことができます。カカクコムのコーポレートサイト、クックパッドのコーポレートサイトもWordPressを使って構築されています。(2017年8月現在)

もともとブログのツールとして開発されているという面がありますが、カスタマイズすることで、高機能なCMSとして利用することも可能です。基本がブログのツールという一面からも、ブログやニュース記事など時系列に投稿を行なっていく、配信するという機能は長所となるところでもあります。SNSとの連携やSEOといったマーケティング的な視点でみてもWordPressは低コストにてこれらの機能的なものがカバーできるので、とても優秀なツールだと言えます。

WordPress導入のメリット

  • カスタマイズ性の自由度
  • オープン性(プログラムの改変などが可能)
  • プラグインの充実(最適な機能を実装するのが低コストで可能)

WordPressをCMSと使用するデメリット

セキュリティの問題

Webサイトのツールとして、世界で一番多く使われている、そしてオープンソースというこで、悪意のあるbotなどに攻撃、アタックされる可能性が無名なツールに比べて大きくなってきます。管理画面のログインURLを変更するとか2段階ログインを導入するとか対策は行えますが、利用されている数が非常に多い為にこのような攻撃対象になり得るということを認知しておく必要があります。
また、インターネットで販売や配布されているテーマをむやみに利用することで、サイトが乗っ取られたり、なにかの攻撃の踏み台にされてしまったりすることがありますので、テーマ選び、プラグイン選びは慎重に行う方がいいでしょう。

テーマとプラグインの選択の問題

テーマに限らずプラグインについても同様です。公式サイトにあるもの以外のテーマ、プラグインの利用は極力避けるべきです、
また、無料のツールだからと言ってまったく費用がかからないというわけでもありません、セキュリティーの抜け穴はすぐに修正され、アップデートされることが多いですが、アップデートすることでテーマやプラグインの機能を利用できなくなったり、エラーになり、サイトの運用に問題が発生することもありますので、適切な対応ができる人を雇用するか、外注する必要があります。

特に注意したいのが、テーマの選び方です。無料や安価なテーマは多く販売されておりますが、独自のカスタマイズのために、メンテナンス性が低いものやコンテンツが増えてきた際に動作が重くなるものがあります。また、情報設計の視点から見た場合には、Webサイトのあるべき情報構成と配布されているテーマの構成がフィットすればいいですが、なかなか適切なテーマを見つけるのも難しいのが現状です。

WordPress導入のデメリット

  • セキュリティー面での心配事

WordPressを採用するにあたって、メリットとデメリットについて書いてみましたが、総合的にみて使いやすいCMSであるということから弊社ではおすすめさせていただいております。

better standard editorbetter standard editor