www.sitecore.net/japan© 2012 Sitecore

Sitecore CMS におけるマルチデバイス例：サイトコア株式会社

• ユーザーがアクセスしてきたデバイスに合わせて、ページを表示する。– http://www.sitecore.net/japan へ PC でアクセス（左）とスマートフォンでアク

セス（右）

www.sitecore.net/japan© 2012 Sitecore

Sitecore CMS におけるマルチデバイス変換ツールではない多くのメリット

• デバイスの特性に合った形で Web ページでの情報提供が可能– PC では広い画面を想定した、より使いやすいナビゲーションの提供– iPhone / Android / Windows Phone などのスマートフォンは縦スクロールを中心に– iPad や Android Tablet は少し広い画面での情報提供

• レイアウトを自由に定義することができる– 今後提供されるデバイス、デジタルサイネージなどブラウザが搭載されているデバイ

スに対しての情報提供を柔軟に実施することができる– 新しいレイアウトを定義することで、過去のコンテンツへの対応が容易に可能

ワンソース マルチユース

長期的なコスト削減

www.sitecore.net/japan© 2012 Sitecore

レイアウトの概念

Header

Footer

Place holder

1. レイアウトの Place Holder を設定する

www.sitecore.net/japan© 2012 Sitecore

レイアウトの概念

Header

Footer

Place holder

1. レイアウトの Place Holder を設定する

2. Header で利用しているメニューは、コンテンツの最上位の一覧を表示するようにする

www.sitecore.net/japan© 2012 Sitecore

レイアウトの概念

Header

Footer

1. レイアウトの Place Holder を設定する

2. Header で利用しているメニューは、コンテンツの最上位の一覧を表示するようにする

3. Place Holder にサブレイアウトを適用して、その中にコンポーネントを配置する

Sub Layout

www.sitecore.net/japan© 2012 Sitecore

レイアウトの概念

Header

Footer

1. レイアウトの Place Holder を設定する

2. Header で利用しているメニューは、コンテンツの最上位の一覧を表示するようにする

3. Place Holder にサブレイアウトを適用して、その中にコンポーネントを配置する

Sub Layout

レンダリング

レンダリング

レンダリング

レイアウトに Place Holder を設定し、そこにサブレイアウト、レンダリングを配置する

www.sitecore.net/japan© 2012 Sitecore

レイアウトの例（ PC ）

全体のレイアウトHTML

+Placeholder の設定

レンダリング（ヘッダー）

サブレイアウト サブレイアウト

レンダリング

レンダリング

レンダリング（フッター）

www.sitecore.net/japan© 2012 Sitecore

レイアウトの例（ PC ）

全体のレイアウトHTML

+Placeholder の設定

レンダリング（ヘッダー）

サブレイアウト サブレイアウト

レンダリング

レンダリング

レンダリング（フッター）

PC 向けには必ずヘッダ、フッタをつけて、サイトの統一感を提供

www.sitecore.net/japan© 2012 Sitecore

レイアウトの例（ PC ）

全体のレイアウトHTML

+Placeholder の設定

レンダリング（ヘッダー）

サブレイアウト

レンダリング

レンダリング

レンダリング（フッター）

左側にメニューを配置するサブレイアウトの展開

www.sitecore.net/japan© 2012 Sitecore

レイアウトの例（ PC ）

全体のレイアウトHTML

+Placeholder の設定

レンダリング（ヘッダー）

サブレイアウト

レンダリング（フッター）

製品の紹介

製品写真

メニ

ュー

製品の紹介をするための写真、製品の紹介を表示して、 PC 向けのページが完成。

www.sitecore.net/japan© 2012 Sitecore

スマートフォンのレイアウトHTML

+Placeholder の設定

レイアウトの例（スマートフォン）

レンダリング（ヘッダー）

サブレイアウト サブレイアウト

レンダリング

レンダリング

レンダリング（フッター）

www.sitecore.net/japan© 2012 Sitecore

スマートフォンのレイアウトHTML

+Placeholder の設定

レイアウトの例（スマートフォン）

サブレイアウト

レンダリング

レンダリング

レンダリング（フッター）

サブレイアウト

画面の狭いスマートフォンではヘッダを入れないレイアウトにする。

www.sitecore.net/japan© 2012 Sitecore

スマートフォンのレイアウトHTML

+Placeholder の設定

レイアウトの例（スマートフォン）

サブレイアウト

レンダリング（フッター）

製品写真

製品の紹介画面が狭くなる分、製品写真に関しても縮小版のサムネイルを作成して自動生成、製品の紹介だけとシンプルなページを作る

www.sitecore.net/japan© 2012 Sitecore

マルチデバイスサイトのメリット

• スマートフォンユーザーに対して、見やすいページの情報提供を実現

• 変換ツールの提供ではないため、自由にレイアウトの変更が可能• アプリ対応（デバイス連携）

– REST API や XML 連携などで、アプリに対してのコンテンツ配信を実現

• ユーザーのシナリオにあわせた情報提供（マツダ オーストラリア）– PC では車の紹介が項目としては一番重要な場所に、スマートフォンでアクセスを

すると、ディーラーを探すが一番上の項目になっており、デバイスを使うユーザーがどのようにページを活用するのかを想定したものとしている。