b to b 企業サイトリニューアルのポイント html5 cms - web … · 2018-10-23 ·...

Confidential

http://www.x-yz.co.jp/

Copyright © xyz Corporation. All Rights Reserved.

2013.04. 19

B to B 企業サイトリニューアルのポイント＋ HTML5 CMS - Web Meister


株式会社サイズについて

2

国内最大手Web制作会社よりスピンアウト

HTML5 CMS – Web Meister によるマルチデバ

イス化した Web サイトを制作する Webインテ

グレーターです。

レスポンシブ Web デザインやHTML5などを活

用したWebサイト制作に積極的に取り組んでお

ります。

商号

所在地

事業内容

設立

資本金

経営陣

所属団体

株式会社サイズ / xyz corporation

東京都渋谷区上原1-1-8 代々木公園セントウエストテラス3F

2008年7月1日

3000万円

代表取締役糟谷博陸(元IMJ事業本部長) 取締役山本聰(元IMJチーフDir.) 顧問石川幸夫(元博報堂アイ・スタジオ代表取締役社長)

Webコンサルティング Webサイト企画・制作・運用ソフトウェア開発・販売

コンピュータソフトウェア協会(CSAJ) 日本アドバタイザーズ協会 Web広告研究会 KIEP（慶應SFCイノベーション&アントレプレナーシップ・プラットフォーム研究コンソーシアム）


経歴

3

1994年、セガ入社。主に電波メディアを担当。 2000年、Web制作を行うIMJに入社。 Webアナリストとして金融・ECサイトなどの調査・分析スカイパーフェクTV!、ユニクロなどIMJを代表する案件の組織マネジメント、プロデュースを事業本部長として行う。 2005年、CMS - Web Meisterを完成。 2007年、世界40ヵ国を旅する。 2008年株式会社サイズ設立。 IMJよりWeb Meister事業を譲受。PC・携帯・スマートフォンへワンソースマルチデバイス化したWebサイト+CMSを提供するWebインテグレーションを事業とする。 2004～6年、慶大SFC外部講師

Copyright © xyz Corporation. All Rights Reserved. 4

経歴：セガ


公開 2004年4月～2008年12月

作業範囲

コンサルティング情報整理・設計インターフェイス設計・制作 XML、XSLT、XHTML作成 CMS導入ガイドライン策定

XMLで全てのコンテンツを管理するCMS（Web Meister）を構築スタイルシートでデザインパターンを3つに分けて制作。デザインスイッチで切り替えることが可能で、ユーザーの好みに合わせたクリエィティブを表現。

慶應義塾大学湘南藤沢キャンパスはMIT、ERCIMと共にW3Cのホスト機関として、

世界のWebサイトをリードしていく立場にあるキャンパス。

＝

経歴：IMJ

World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）は、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体。略称はW3C（ダブリュースリーシー）。

5

http://www.sfc.keio.ac.jp/index.html?style=simple

http://www.sfc.keio.ac.jp/index.html?style=cool

http://www.sfc.keio.ac.jp/index.html?style=hot


経歴：IMJ

6

Web Designing 2011年6月号毎日コミュニケーションズ特集1：Webクリエイティブの10年−記憶に刻むべき21世紀最初のディケード− 誌面を彩ったサイトで振り返る10年「あらためて振り返る、“新しさ”を作りだしたサイト」弊社、糟谷・山本が2004年に制作した慶應義塾大学湘南藤沢キャンパスが掲載「CSSを実装し、スイッチでデザインを切り替えられる仕組みを採用して話題となった。CSSレイアウトの利点を目で見える形で示した日本で最初の試みだと言ってもいい。」

KIEP（慶應SFC イノベーション & アントレプレナーシップ・プラットフォーム研究コンソーシアム）「SFCの知の活用と実践の加速」、「Innovationと Entrepreneurship のプラットフォーム形成」を目的としたSFC研究コンソーシアムに加盟


経歴：世界一周

7

2007年、アジア、ヨーロッパ、中東、アフリカ、アメリカ大陸の世界40ヵ国を旅する。世界遺産検定2級


経歴：xyz corporation

8


会社概要：スタッフプロフィール

9

[Web担当者Forum]人気ランキング総合5位

http://web-tan.forum.impressrd.jp/e/2012/05/23/12714

http://www.x-yz.co.jp/slippy/src/index.php?file=webtan.html

[Web担当者Forum]人気ランキング総合3位

http://web-tan.forum.impressrd.jp/e/2012/11/07/13898


10

弊社も B to B 企業です。


B to B Webマーケティングファネルモデル

メルマガ SEO対策ソーシャルメディア広告

TOPページ／ランディングページ

商品／カテゴリTOP

商品／事例ページ

申込／購入

認知

情報収集比較検討

リード顧客

多

少

近遠

SEO対策だけではありません。接触レベルが近いメディアから対応するべき

営業 CRM

アクセス解析


メルマガ

既に獲得したリードを顧客に転化もっとも費用対効果が高い。メルマガを作成。２週間か1ヶ月に１回程度配信

＜目的＞展示会やWebで収集した見込み客をメルマガで啓蒙し、有望な見込み客へと育成。購入意識を育てて、その検討度合いを把握し、しかるべきタイミングでセールス活動につなげる

メルマガ社内メールメールシグネチャー


ソーシャルメディア

Webサイトと連携。情報を即時配信


14

SEO対策

○

○

○ 1

4

2

重要度内容対策

3 ○

sitemap.xmlを自動生成 <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url><loc>http://www.web-meister.jp/NEWS/press/20081001.html</loc> <lastmod>2009-06-04T17:45:28+09:00</lastmod></url><url>・・・繰り返し・・・</url></urlset>

RSS各種規格に対応。ニュースを自動的に配信 RSS 1.0 RDF Site Summary RSS 2.0 Really Simple Syndication Atom

共通部分をXMLで一括管理。1か所変更すれば全ページに反映 <variable value="：XML CMS(コンテンツ管理システム)-Web Meister(ウェブマイスター)" name="site_label" /> <variable value="W3C の理想を体現するXML CMS「Web Meister」は、コンテンツの再利用ができるWeb CMS(コンテンツ管理システム)です。" name="site_description" /> <variable value="Web CMS,XML CMS,CMS 制作,CMS 導入,コンテンツ管理システム,ウェブマイスター,Web Meister,株式会社サイズ" name="site_keywords" />

URL正規化タグ「rel="canonical"」を正規バージョンと複製バージョンに自動生成 googleやYahoo!、MSNなど検索エンジン各社も、 URL正規化タグをサポートすることを発表

SEOにおいて重要とされる施策を自動生成


リニューアルのポイント

15

CMS

重要なのはそれぞれバランス良くボトルネックをつくらないこと。 B to B 企業の場合、コンテンツが専門的になりすぎて情報設計に問題が多い。

CMSの導入『Web Meister』は、「マニュアルを必要としない使いやすさ」を目指して開発。オフィスが扱えればどなたでも利用可能

コンテンツ・問題点の解決方法の提示・ユーザ導入事例・問い合わせ強化など

デザイン「他社と差別化を行うことができる御社ならではの新鮮味のある洗練されたデザインデザインテンプレートマルチデバイス対応・ソーシャルメディア連携・SEO対策を考慮

情報設計・ニュース・イベントの分類と更新性の確保・情報の再整理（カテゴリ、機能別、目的別など）・今後の独自コンテンツの追加を想定した設計・リッチクライアントや多言語対応を考慮


リニューアルのポイント

16

重要なのはそれぞれバランス良くボトルネックをつくらないこと。 B to B 企業の場合、コンテンツが専門的になりすぎて情報設計に問題が多い。

CMSの導入『Web Meister』は、「マニュアルを必要としない使いやすさ」を目指して開発。オフィスが扱えればどなたでも利用可能

コンテンツ ○問題点の解決方法の提示 ○ユーザ導入事例 ✕問い合わせ強化など

デザイン ✕１度もリニューアルされておらず古臭いデザインテンプレート ✕マルチデバイス対応されていない ○ソーシャルメディア連携・SEO対策を考慮

情報設計 ✕ニュース・イベントの分類と更新性の確保 ✕情報の再整理（カテゴリ、機能別、目的別など） ○今後の独自コンテンツの追加を想定した設計 ○リッチクライアントや多言語対応を考慮


インバウンドマーケティング

17

「Inbound Marketing（インバウンドマーケティング）」とは、アメリカの会社 HubSpot,Inc.の創業者、Brian Halligan氏とDharmesh Shar氏によって2005年に提唱されたマーケティングコンセプト。潜在的な顧客に対し、有益なコンテンツをインターネット上で提供することで、検索やソーシャルメディアで自分たちのサービスやプロダクトを見つけてもらいやすいものにし、自社のサイトへ来てもらいやすくする、というもの。従来のマーケティングを考えたとき、例えて言うなら獲物を狙うハンター（狩猟）型のマーケティングだった。これからのマーケティングはハーベスター（農耕）型、コンテンツを生成することで種をまき、それが成長していくことで、時間をかけて収穫していくマーケティング手法といえる。このコンテンツをつくり発信していくハーベスター型のマーケティング手法で最も重要なことは、「Autentic」、嘘をつかないこと。正当で、本当のことを正直に伝えること。そして、それこそが「Be Inboundy」インバウンド的であることだと高広氏は語った。 http://jp.startup-dating.com/2013/02/keynote-speech-im2013tokyo


インバウンドマーケティングかアウトバウンドマーケティングか（釣り）

18

どうすれば、「インバウンドか、アウトバウンドか」の議論の人達に「両方必要」で、「二者択一の思考をしているうちは、成果がでないのか」をわかってもらえるのだろうかと考えました。３０を超えて、ようやくわかってきた（気がする）今だから言えるのですが、この議論って「恋愛」と同じなんですよね。どうすれば、夢のようにモテるのか。アウトバウンドだけ、インバウンドだけ、では「望む」ような「モテ」方、恋愛は「成立」はしません。両方必要なんです。で、多くの企業は今まで「アウトバウンド」一辺倒だったので、「インバウンド」の発想が必要だよね、そういうフェーズにきているんだと思います。 http://b2bmarketing.jp/post/46473075185


『心を動かすオウンドメディアのつくり方』

19

http://www.infobahn.co.jp/news/2313


20

弊社ストーリー事例と最新制作手法


主なターゲットユーザーの情報探索プロセス

21

ターゲットユーザー流入経由コミュニケーション目的ゴール

A

B

C

D

Web担当者・格安ではなくてもよい・良いものをつくりたい・結果をだしたい

Webクリエイター

弊社社員

メール・メルマガ Web記事 SNS SEO

Web記事 SNS SEO

クリエイティブ力・技術力を見てもらってより信頼をえたい。相談してほしい

クリエイティブ力・技術力を見てもらってより良いパートナーに新規パートナーに

クリエイティブ力・技術力を見てもらって良い採用をしたい認知を拡げたい

会社へのロイヤリティの向上会社の活性化

既存顧客の信頼度アップ新規顧客の質量のアップ

既存パートナーの信頼度アップ新規パートナーの質量のアップ

良い人の申込知らない人がいないようになる

広告代理店 Web制作会社

メール・メルマガ Web記事 SNS SEO


ホームページに求められるもの

22

情報ポータルとしての機能

（ユーザーの目的に合わせた情報提供）

xyz corporation らしさ（理念、

アイデンティティ、オリジナリティ）

競合との差別化、過去を振り返ってストーリー化

デザインスイッチで切り替えることが可能で、ユーザーの好みに合わせたクリエィティブを表現。 CSSレイアウトの利点を目で見える形で示した日本で最初の試み

過去

http://www.sfc.keio.ac.jp/index.html?style=simple

http://www.sfc.keio.ac.jp/index.html?style=cool

http://www.sfc.keio.ac.jp/index.html?style=hot


xyz corporation らしさとは？

23

縦横スイッチで切り替えることが可能で、和文の扱いに新しい価値を提供。 HTML5の利点を目で見える形で示した日本で最初ではないがそれなりの試み

現在

未来のWebサイトへの期待感


HTML5事例

・ページ単位ではなくHTML5 <section>単位で管理・ロゴ・アイコンはSVGで作成。Retinaディスプレイ対応・「レスポンシブWebデザイン」を採用し、 PC、タブレット、スマートフォンの画面サイズに最適化された表示を実現。さらにcanvas + File APIによるドローツール、縦書変換スイッチを実装。


HTML5の現状

W3Cは2012年12月17日、HTML5とCanvas 2Dに関する仕様策定完了を発表。これら2つの仕様は勧告候補となり、実質的には仕様策定が完了しています。つまり、もう使っても問題ありません。 HTMLは文書構造、CSSは体裁、JavaScriptは挙動を担当つまり、HTML5になってもこれまでと変わりません。


HTML5事例

・ページ単位ではなくHTML5 <section>単位で管理・ロゴ・アイコンはSVGで作成。Retinaディスプレイ対応


HTML5セマンティックス対応



Web Meister はページ単位ではなくHTML5 <section>単位で管理


現在のWeb環境（マルチデバイス対応）

マルチデバイス対応の本質： Webサイトは専用と汎用しか存在しない


汎用： 1つのWebサイトで全てのデバイスに対応レスポンシブWebデザイン、Appleのサイトなど（1つで済むので低コスト、デバイスごとのユーザ中心設計は不可能）コストファースト

専用：デバイス毎にWebサイトを用意 PC＋携帯＋スマートフォンなどこれまでの制作手法（バラバラなので高コスト、デバイスごとのユーザ中心設計は可能）ユーザファースト

専用サイトと汎用サイト


Webサイトの閲覧パターン

33

認知してもらう

興味・関心を持ってもらう

理解を深めてもらう

問い合わせをしてもらう

資料請求してもらう

Webサイトで可能な

範囲

誰が

営業時間に

社内・店内で

なにの為にいつ・どこで

タイプ A

タイプ B

タイプ C

商品・サービスの購入

事業提携

営業・サポートの効率化 B to B 事業内容としてはPCの重要度が高く、スマトーフォン対応はそれほど重要ではない。

営業時間・営業時間外に

社外で

なにで

✘


マルチデバイス対応（レスポンシブWebデザイン）

34



35



36


マルチデバイス対応トピックス

ハイエンドにはより高解像度の画像がローエンドにはより軽量な画像（テキスト）の対応が必要に


Retinaディスプレイ／レスポンシブWebデザイン対応

android3.0以降も対応しているため、 PC・スマートフォンで安定的に使用できる

Webブラウザ対応するバージョン

Internet Explorer 9以上

Firefox 3.0以上

Chrome 4.0以上

Mac OS X Safari 3.2以上

Opera 9.0以上

iOS Safari 3.2以上

Androidブラウザ 3.0以上

ロゴ・アイコン＝SVG

SVG（Scalable Vector Graphics）とは、HTMLやXMLなどと同じくマークアップ言語の一種で、ベクター形式と呼ばれるグラフィックを扱うための言語です。


ロゴ・アイコンはSVG（ベクターデータ）で作成しているため、どんなに拡大しても画像が粗くなりません。

マルチデバイス対応（SVG：事例）


現在のWeb環境（多言語対応）

現在のWeb担当者はやらなければいけないことがいっぱいです。「Web Meister」が全て解決します。


多言語対応のポイント

決定しなければならないこと ■言語構造

地域？（日本、アメリカ、中国、韓国など）言語？（日本語、英語、スペイン語、簡体、繁体、ハングル）

■Webサイト構造

ドメインディレクトリー構造

■検索結果の表示は？

rel="alternate" hreflang="x“ sitemap.xml

■更新は？

日本で現地で（多言語の管理画面、ユーザ時間管理）

Webサイト構造が同一で多言語展開する場合、次の手法が使えます。


多言語サイトの制作方法

42

公式ホームページ日本語版

公式ホームページ中国語版

公式ホームページ日本語版（複製）

↓ 中国語版

XML

①CMS上で日本語サイトの複製を作成環境・テンプレートを複製

②コンテンツ（テキスト）を XML形式で抜き出し翻訳日本語⇒中国語に翻訳

③翻訳したXMLを CMSに取り込む

XML（中国語）をインポート

④中国語化されていない画像などの微調整

日本語の画像・PDFなどの修正

⑤完成！

※前提条件：中国語版の情報設計およびデザインは、日本語版に準ずる

日本語版を元に環境を構築、翻訳したテキストを取り込むことで完成デザイントーンの統一、制作時間の短縮が可能


多言語対応事例

43

ウシオ電機 THK 東芝機械


多言語対応事例

44

国立音楽大学明治大学法政大学


HTML5 CMS – Web Meister

現在のWeb担当者はやらなければいけないことがいっぱいです。「Web Meister」が全て解決します。

？


静的CMSと動的CMSの違い

46 用途に応じて使いわける、もしくは、組み合わせるべき

ページ表示速度（同じ内容のHTMLで）絶対的に速い（プログラムを介さないため）絶対的に遅い

SEO対策（同じ内容のHTMLで）絶対的に強い（実体が存在するため）絶対的に弱い

セキュリティ

絶対的に強い（日時指定デプロイ型の場合）リスクが存在する

会員管理・マイページ不可能可能

静的動的


セキュリティ

47 決算公表前に情報漏洩が顕在化

セキュリティ絶対的に強い（日時指定デプロイ型の場合）リスクが存在する

静的動的


セキュリティ

48 高いセキュリティレベルが求められるコンテンツは

静的CMS：日時指定デプロイ型を選択するべき


静的動的

この記事ではCMSの時限公開には4つのパターンがあるとしています。・リンク自動掲載型・ページアクセス制御型・全アセットアクセス制御型・日時指定デプロイ型このうち、・リンク自動掲載型・ページアクセス制御型は新聞の記事の問題に該当し、非常に危険です。 Web Meister は日時指定デプロイ型です。


セキュリティ

49

Movable Type はページアクセス制御型対応しても全アセットアクセス制御型まで


静的動的

Movable TypeをCMSとして使用した場合の情報漏洩リスクについて先日の上場企業の情報漏洩の事件は上場企業の広報様を始め多くの関係者が驚いたかと思います。実際に使用されたCMSや、情報（PDF？）を取得した方法については不明ですがMovable Type(以下MT)でも同じ問題が発生する可能性があります。対策ですが、主に上場企業様への対応としてAssetPublicityとSafePreviewというプラグインを提供しています。


ページ表示速度

50

ECパッケージを開発しているプロのBlog 静的なHTMLよりも絶対的に遅い上に、

永遠にページの増加と速度の低下と戦う必要がある


静的動的

これまでにも何度かチューニングをやっては WordPress を壊した来経験がある。結局どのサイトでも「WP Super Cache」を勧めてくる。動きが怪しい・・・ WordPress 最悪のホワイトアウト。しかし、ここはもう慣れたもの。ブラウザバックボタンで回避。今回はブラウザバックボタンで回避出来るた。奇跡的である。「wordpress apache チューニング」


ページ表示速度

51

Web Meister は管理画面で編集者が体感速度で問題を感じやすい編集画面の表示・保存について徹底的に対応

ページ数が数千ページでも速度はかわりません。


静的動的

アクション Movable Type Web Meister

作成画面を表示

6.92 5

プレビューを表示

7.35 2～10

編集画面を表示

6.66 2～4

保存

6.92 0～1


製品コンセプト

W3C の理想を体現する HTML5 CMS - Web Meister

『Web Meister』は、W3Cのホスト機関である慶應義塾大学湘南藤沢キャンパスに導入するために開発され

ました。W3Cが提唱するXMLに基づくアーキテクチャーで開発を行い、ユーザインターフェースとコンテン

ツの分離、コンテンツの構造化を実現しています。

そのため、HTML5対応の条件となるHTML5リッチインタフェース対応、HTML5セマンティクス対応が可能

です。

『Web Meister』は、高度な知識がなくても、今後のWeb環境の変化にも柔軟に対応できるCMSです。


マニュアルを必要としない操作性

『Web Meister』のインターフェースは、「マニュアルを必要としない使いやすさ」を目指して開発されています。メールソフトと同じ3ペイン構造から成り、コンテンツの編集や変更は簡単に行なうことができます。

また、公開されているページデザイン上でコンテンツの編集が行える

WYSIWYG エディタ（見たままのものが反映される）や、リッチテキス

トエディタによって HTML の知識がなくてもオフィスが扱えればどなた

でも利用可能

3ペイン構造の基本画面

ページデザイン上で編集できる

WYSIWYGエディター

画像配置パターン選択画面

XMLモジュール

リッチテキストエディタ Webコンテンツ編集に必要な機能に絞ることで「Web制作のプロがつくったサイト・クオリティを維持・管理」

Web Meister のユーザインターフェース


Web CMS選択術-2012 まとめ

54

■マルチデバイス対応汎用＋専用どのように汎用化するのか？何を専用化するのか？

■プログレッシブ・エンハンスメント

IE6～8に関して情報が正しく伝われば良いのか？デザイン・インタラクションまでモダンブラウザと同じにするか？

■リッチクライアントのCMS化

HTML5、FlashやAjaxなどの外部XMLを管理できるCMSを選択すること ■CMSでできるソーシャルメディア連携

コミュニケーション設計、組織体制・オペレーションルール実はCMSより圧倒的に重要です。但し、自社サイト内でできるソーシャルメディア連携が可能かどうかはしっかり確認しましょう。

■CMSでできるSEO対策

SEO対策の内容が公開されているCMSを選ぶこと CMS独自の秘密の対応策は存在しません。SEO対策の実施内容は確認することができます。ブラックなことをしていないか、ホワイト高品質のものでCMSが行うべきものが抜けていないか確認しましょう。

■多言語対応のポイント

たくさんあるのでご相談ください。


B to B 企業サイトリニューアルのポイント

55

専門的なコンテンツを活かすために ■最新の設計手法による回遊性の強化 ■御社ならではのオリジナルストーリー・コンテンツ ■それを継続的に更新できる HTML5 CMS – Web Meister の導入


株式会社サイズ xyz corporation 代表取締役糟谷博陸

e-mail：[email protected] twitter：kasukasu_xyz blog：http://blog.x-yz.co.jp/kasukasu/ web：http://www.x-yz.co.jp/ http://www.web-meister.jp/ 〒151-0064：東京都渋谷区上原1-1-8 代々木公園セントウエストテラス3F Tel ： 03-6407-0481 Fax ： 03-6407-0482

b to b 企業サイトリニューアルのポイント html5 cms - web … · 2018-10-23 ·...

Documents