Sitecore CMS におけるマルチデバイスの概念を紹介しているスライドになります。

1. www.sitecore.net/japan© 2012 Sitecore
Sitecore CMSにおけるマルチデバイス
例：サイトコア株式会社
• ユーザーがアクセスしてきたデバイスに合わせて、ページを表示す
る。
– http://www.sitecore.net/japan へ PC でアクセス（左）とスマートフォンでアクセス
（右）

2. www.sitecore.net/japan© 2012 Sitecore
Sitecore CMSにおけるマルチデバイス
変換ツールではない多くのメリット
• デバイスの特性に合った形で Web ページでの情報提供が可能
– PC では広い画面を想定した、より使いやすいナビゲーションの提供
– iPhone / Android / Windows Phone などのスマートフォンは縦スクロールを中心に
– iPad や Android Tablet は少し広い画面での情報提供
• レイアウトを自由に定義することができる
– 今後提供されるデバイス、デジタルサイネージなどブラウザが搭載されているデバイ
スに対しての情報提供を柔軟に実施することができる
– 新しいレイアウトを定義することで、過去のコンテンツへの対応が容易に可能
ワンソース マルチ
ユース
長期的なコスト削減

3. www.sitecore.net/japan© 2012 Sitecore
レイアウトの概念
Header
Footer
Place holder
1. レイアウトの Place
Holder を設定する

4. www.sitecore.net/japan© 2012 Sitecore
レイアウトの概念
Header
Footer
Place holder
1. レイアウトの Place
Holder を設定する
2. Header で利用しているメ
ニューは、コンテンツの
最上位の一覧を表示する
ようにする

5. www.sitecore.net/japan© 2012 Sitecore
レイアウトの概念
Header
Footer
1. レイアウトの Place
Holder を設定する
2. Header で利用しているメ
ニューは、コンテンツの
最上位の一覧を表示する
ようにする
3. Place Holder にサブレイ
アウトを適用して、その
中にコンポーネントを配
置する
Sub Layout

6. www.sitecore.net/japan© 2012 Sitecore
レイアウトの概念
Header
Footer
1. レイアウトの Place
Holder を設定する
2. Header で利用しているメ
ニューは、コンテンツの
最上位の一覧を表示する
ようにする
3. Place Holder にサブレイ
アウトを適用して、その
中にコンポーネントを配
置する
Sub Layout
レンダリング
レンダリング
レンダリング
レイアウトに Place Holder
を設定し、そこにサブレイ
アウト、レンダリングを配
置する

7. www.sitecore.net/japan© 2012 Sitecore
レイアウトの例（PC）
全体のレイアウト
HTML
+
Placeholder の設定
レンダリング（ヘッダー）
サブレイアウト サブレイアウト
レンダリン
グ
レンダリング
レンダリング（フッター）

8. www.sitecore.net/japan© 2012 Sitecore
レイアウトの例（PC）
全体のレイアウト
HTML
+
Placeholder の設定
レンダリング（ヘッダー）
サブレイアウト サブレイアウト
レンダリン
グ
レンダリング
レンダリング（フッター）
PC 向けには必ずヘッダ、フッタ
をつけて、サイトの統一感を提供

9. www.sitecore.net/japan© 2012 Sitecore
レイアウトの例（PC）
全体のレイアウト
HTML
+
Placeholder の設定
レンダリング（ヘッダー）
サブレイアウト
レンダリン
グ
レンダリング
レンダリング（フッター）
左側にメニューを配置するサブレイアウ
トの展開

10. www.sitecore.net/japan© 2012 Sitecore
レイアウトの例（PC）
全体のレイアウト
HTML
+
Placeholder の設定
レンダリング（ヘッダー）
サブレイアウト
レンダリング（フッター）
製品の紹介
製品写真
メニュー
製品の紹介をするための写真、製品の紹
介を表示して、PC 向けのページが完成。

11. www.sitecore.net/japan© 2012 Sitecore
スマートフォンのレイアウト
HTML
+
Placeholder の設定
レイアウトの例（スマートフォン）
レンダリング（ヘッダー）
サブレイアウト サブレイアウト
レンダリン
グ
レンダリング
レンダリング（フッター）

12. www.sitecore.net/japan© 2012 Sitecore
スマートフォンのレイアウト
HTML
+
Placeholder の設定
レイアウトの例（スマートフォン）
サブレイアウト
レンダリン
グ
レンダリング
レンダリング（フッター）
サブレイアウト
画面の狭いスマートフォンではヘッダ
を入れないレイアウトにする。

13. www.sitecore.net/japan© 2012 Sitecore
スマートフォンのレイアウト
HTML
+
Placeholder の設定
レイアウトの例（スマートフォン）
サブレイアウト
レンダリング（フッター）
製品写真
製品の紹介
画面が狭くなる分、製品写真に関
しても縮小版のサムネイルを作成
して自動生成、製品の紹介だけと
シンプルなページを作る

14. www.sitecore.net/japan© 2012 Sitecore
マルチデバイスサイトのメリット
• スマートフォンユーザーに対して、見やすいページの情報提供を実
現
• 変換ツールの提供ではないため、自由にレイアウトの変更が可能
• アプリ対応（デバイス連携）
– REST API や XML 連携などで、アプリに対してのコンテンツ配信を実現
• ユーザーのシナリオにあわせた情報提供（マツダ オーストラリア）
– PC では車の紹介が項目としては一番重要な場所に、スマートフォンでアクセスをす
ると、ディーラーを探すが一番上の項目になっており、デバイスを使うユーザーがど
のようにページを活用するのかを想定したものとしている。