テンプレート一覧

このページは、サイト内で使用するレイアウトのテンプレート一覧、およびそのコードの一覧ページです。
新規にページを作成する場合、あるいは既存のページに新規コンテンツを追加する場合などには、このページからコードをコピーし、そのコードの中でコンテンツを追加するようにしてください。

テンプレート共通のカスタマイズ方法について

背景色および文字色の変更

product-templateというクラス名がついているsectionタグに、使用したい色に応じて下記のクラスを追加してください。

white
背景色は白、文字色は黒
deep
背景色は濃いグレー、文字色は白
pale
背景色は薄いブルーグレー、文字色は黒

product-template-main

ページタイトルのテンプレートです。

#EnjoyHome
豊かなおうち時間

product-template1のコード

下のコードをコピーしてください。


<section class="product-template product-template-main">
	<div class="back"></div>
	<div class="inner">
		<div class="content">
			<h2>
			#EnjoyHome<br />豊かなおうち時間
			</h2>
		</div>
	</div>
</section>

product-template1

左にテキスト等のコンテンツ、右に写真を配置するレイアウトです。

Vol2. やまもとりえさん

ママが楽になり、子ども達も大喜び!子ども向けコンテンツが充実で、家族でも高い満足度。

product-template1のコード

下のコードをコピーしてください。


<section class="product-template product-template1 pale">
	<div class="box-wrapper">
		<div class="box box-img others">
			<img src="{{ 'xxx.jpg' | file_url }}"/>
		</div>
		<div class="box box-content">
			<div class="inner">
				<p class="title">
					Vol2. やまもとりえさん
				</p>
				<p class="text">
					ママが楽になり、子ども達も大喜び!子ども向けコンテンツが充実で、家族でも高い満足度。
				</p>
				<button class="btn btn-common" onclick="location.href='/pages/xxx'" type="button">
					事例を見る
				</button>
			</div>
		</div>
		<div class="box box-img pc">
			<img src="{{ 'xxx.jpg' | file_url }}"/>
		</div>
	</div>
</section>

product-template2

右に写真、左にテキスト等のコンテンツを配置するレイアウトです。

vol1. @ami95.roomさん

インテリア大好きで一目惚れ♪電源コードがないので、お部屋の雰囲気を大事にできます!ストリーミングし、新たな発見をする。

product-template2のコード

下のコードをコピーしてください。


<section class="product-template product-template2 pale">
	<div class="box-wrapper">
		<div class="box box-img">
			<img src="{{ 'xxx.jpg' | file_url }}"/>
		</div>
		<div class="box box-content">
			<div class="inner">
				<p class="title">
				vol1. @ami95.roomさん
				</p>
				<p class="text">
				インテリア大好きで一目惚れ♪電源コードがないので、お部屋の雰囲気を大事にできます!ストリーミングし、新たな発見をする。
				</p>
				<button class="btn btn-common" onclick="location.href='/pages/xxx'" type="button">
				事例を見る
				</button>
			</div>
		</div>
	</div>
</section>

product-template3

タイトル、サブタイトル、画像が中央に並ぶタイプのレイアウトです。

仕様1

どんなお部屋にも
大スクリーンを

画面サイズと設置距離について
画面サイズと設置距離について

product-template3のコード

下のコードをコピーしてください。


<section class="product-template product-template3">
	<div class="box box-content">
		<p class="spec">仕様1</p>
		<p class="title">
		どんなお部屋にも<br/>大スクリーンを
		</p>
		<p class="text">
		画面サイズと設置距離について<br/>
		画面サイズと設置距離について
		</p>
		<div class="btn"></div>
	</div>
	<div class="box box-img">
		<img src="{{ 'xxx.jpg' | file_url }}"/>
	</div>
</section>

product-template4

全幅の画像の上に、タイトル、サブタイトル、画像が中央揃えで並ぶタイプのレイアウトです。

仕様1

どんなお部屋にも
大スクリーンを

画面サイズと設置距離について
画面サイズと設置距離について

product-template4のコード

下のコードをコピーしてください。


<section class="product-template product-template4">
	<div class="box box-content">
		<p class="spec">仕様1</p>
		<p class="title">
		どんなお部屋にも<br/>大スクリーンを
		</p>
		<p class="text">
		画面サイズと設置距離について<br/>
		画面サイズと設置距離について
		</p>
		<div class="btn"></div>
	</div>
	<div class="box box-img">
	</div>
</section>

product-template5

全幅の画像の上に、タイトル、サブタイトル、画像が左揃えで並ぶタイプのレイアウトです。

仕様1

どんなお部屋にも
大スクリーンを

画面サイズと設置距離について
画面サイズと設置距離について

product-template5のコード

下のコードをコピーしてください。


<style>
body .product-template.product-template5 .box.box-img {
	background-image: url({{ 'xxx.jpg' | file_url }});
}
</style>
<section class="product-template product-template5">
	<div class="box box-content">
		<div class="inner">
		<p class="spec">仕様1</p>
		<p class="title">
		どんなお部屋にも<br/>大スクリーンを
		</p>
		<p class="text">
		画面サイズと設置距離について<br/>
		画面サイズと設置距離について
		</p>
		<div class="btn"></div>
		</div>
	</div>
	<div class="box box-img></div>
</section>

product-template6

全幅の画像の上に、タイトル、サブタイトル、画像が右揃えで並ぶタイプのレイアウトです。

仕様1

どんなお部屋にも
大スクリーンを

画面サイズと設置距離について
画面サイズと設置距離について

product-template6のコード

下のコードをコピーしてください。


<section class="product-template product-template6">
	<div class="box box-content">
		<div class="inner">
			<p class="spec">仕様1</p>
			<p class="title">
				どんなお部屋にも<br/>大スクリーンを
			</p>
			<p class="text">
			画面サイズと設置距離について<br/>
			画面サイズと設置距離について
			</p>
			<div class="btn"></div>
		</div>
	</div>
	<div class="box box-img">
	</div>
</section>

product-template7

左に画像、右に小見出しやテキストが並ぶレイアウトです。セクションのコンテンツとして使用します。

夏目漱石「私の個人主義」

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてス

product-template7のコード

下のコードをコピーしてください。


<section class="product-template product-template7">
	<div class="inner">
		<div class="box box-img pc">
			<img src="{{ 'xxx.jpg' | file_url }}"/>
		</div>
		<div class="box box-content">
			<p class="title">
			夏目漱石「私の個人主義」
			</p>
			<p class="text">
			吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてス
			</p>
		</div>
		<div class="box box-img others">
			<img src="{{ 'xxx.jpg' | file_url }}"/>
		</div>
	</div>
</section>

product-template8

左に小見出しやテキスト、右に画像が並ぶレイアウトです。セクションのコンテンツとして使用します。

夏目漱石「私の個人主義」

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてス

product-template8のコード

下のコードをコピーしてください。


<section class="product-template product-template8">
	<div class="inner">
		<div class="box box-content">
			<p class="title">
			夏目漱石「私の個人主義」
			</p>
			<p class="text">
			吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてス
			</p>
		</div>
		<div class="box box-img">
			<img src="{{ 'xxx.jpg' | file_url }}"/>
		</div>
	</div>
</section>

product-template9

上にタイトル、左にテキストと補足画像、右に画像が並ぶレイアウトです。セクションのコンテンツとして使用します。

投影位置シミュレーション

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。また、自分は子供の頃、絵本で地下鉄道というものを見て、これもやは

product-template9のコード

下のコードをコピーしてください。


<section class="product-template product-template9">
	<p class="title">
	投影位置シミュレーション
	</p>
	<div class="inner">
		<div class="box box-content">
			<p class="text">
			恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。また、自分は子供の頃、絵本で地下鉄道というものを見て、これもやは
			</p>
			<div class="img">
				<img src="{{ 'xxx.jpg' | file_url }}"/>
			</div>
		</div>
		<div class="box box-img">
			<img src="{{ 'xxx.jpg' | file_url }}"/>
		</div>
	</div>
</section>

product-template10

タイトル、リード文と続き、左にテキスト、右に画像が並ぶレイアウトです。セクションのコンテンツとして使用します。

投影位置シミュレーション

下のバーで引掛シーリングから壁面までの距離を設定すると、どの範囲で高さの調整ができるかがわかります。あなたのお部屋でのイメージを膨らませてください。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてス

product-template10のコード

下のコードをコピーしてください。


<section class="product-template product-template10">
	<p class="title">
		投影位置シミュレーション
	</p>
	<p class="text">
	下のバーで引掛シーリングから壁面までの距離を設定すると、どの範囲で高さの調整ができるかがわかります。あなたのお部屋でのイメージを膨らませてください。
	</p>
	<div class="img">
		<img src="{{ 'xxx.jpg' | file_url }}"/>
	</div>
	<div class="inner">
		<div class="box box-content">
			<p class="text">
			吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてス
			</p>
		</div>
		<div class="box box-img">
			<img src="{{ 'xxx.jpg' | file_url }}"/>
		</div>
	</div>
</section>

product-template11

aaa

特徴03

生活空間が豊かになる

06:48 壁時計

07:05 美風景

08:10 ニュース

10:30 フォトメモリーズ

15:00 なんでなの?

18:45 等身大動物図鑑

19:30 世界の絵本

20:00 動画サービス

22:00 快眠

いつでも手軽に迫力ある映画やドラマが楽しめるほか、部屋の朝昼晩の雰囲気を変えるインテリアコンテンツ、 毎日の親子のコミュニケーションに役立つコンテンツ、 また、暮らしを快適にするコンテンツなど、popIn Aladdinならではの生活空間体験がどんどん進化していきます。

product-template12

aaa

仕様01

子供でも簡単操作

product-template13

aaa

特徴

声で魔法の壁を
操ろう

popIn Aladdin 2専用のスマートスピーカー 声だけでpopIn Aladdin 2を操作することが可能になりました。ライトのオン・オフはもちろんのこと、コンテンツを楽しむときも、映画を流すときも、リモコンに触れず声だけでpopIn Aladdin 2を操ることができます。 シンプルでスタイリッシュなデザインだから、どこに置いても気になりません。popIn Aladdin 2と共に、あなたのベッドサイドに。

product-template14

aaa

事例01

間取り別設置事例

投影サイズは間取りによりますが、最も重要なのは、設置距離です。設置距離は、天井の引掛けシーリング(シーリングライトの中心部)から壁までの距離です。次に重要なのは、投影角度です。正面に、梁、ドア、クローゼットがあっても、空いているスペースに対して斜めに投影し、台形補正機能で投影面にフィットさせることができます。

下記は、様々な間取りの投影事例です。レビュー動画はこちらで、ご参考ください。

product-template15

aaa

いつでも手軽に映画やドラマが楽しめるほか、部屋の雰囲気を変えるインテリアコンテンツ、親子のコミュニケーションに役立つコンテンツ、暮らしを快適にするコンテンツなど、popIn Aladdinならではのコンテンツと生活空間体験がどんどん進化していきます。

product-template16

aaa

関連情報

カート

popIn Aladdin

¥0

販売価格は税込、送料込です。
販売価格は税込、送料込です。

カート

popIn Aladdin

¥0

送料

無料

合計

¥0

販売価格は税込、送料込です。
販売価格は税込、送料込です。