2015.07.07

スライドコンテンツでリッチなデジタルブックを作成！

※2018/9/1
ブックの作成画面や、マイページからアクセスできる「コンテンツジェネレータ」をご利用いただく事で、ソースパッケージを編集することなく、画像ファイルを登録するだけで、簡単にスライドコンテンツが作成できるようになりました。

meclibは、今までのようにただめくるだけのデジタルブックではなく、HTMLや動画などを埋め込み、リッチなデジタルブックを作成することができます。
HTMLの埋め込みについては、アイデア次第でさまざまなコンテンツをデジタルブックに表示させることが可能ですが、その中でも比較的簡単に効果的な表現が可能な「スライドコンテンツ」の埋め込み方法をご紹介します。

『スライドコンテンツ』とは

製品カタログのように多くの商品を掲載するような紙媒体の場合、1つの商品に割り当てられる紙面スペースはわずかなものです。商品名、型番、仕様などをのせると、写真は1点程度しか掲載できないこともあります。今までは紙面レイアウト上、仕方のないことだと納得していましたが、もし、その1点分のスペースで複数の写真を掲載できるとしたらどうでしょう？

スライドコンテンツはWebサイト制作において頻繁に利用されている画像掲載方法です。
メインビジュアル画像が次々と違う画像に差し替わっていくWebサイトのトップページをご覧になったことがあるのではないでしょうか。
省スペースで複数枚の画像を効果的に掲載できる、それが「スライドコンテンツ」です。

まずはサンプルでスライドコンテンツを体験してみてください。
スライドコンテンツのサンプル
※「スライドショー」というフキダシのある画像を、マウスでスライドしてみてください。

『スライドコンテンツ』の簡単な作成方法

1.スライドさせたい画像を準備します

綺麗に埋め込むために、用意する画像には下記の制約があります。
・画像サイズは全て同サイズのものにする。
・画像比率をmeclibに設置する際の画像比率と同じものにする。

2.コンテンツの作成

次に、コンテンツの作成に移っていくわけですが、できるだけ簡単に作成いただけるように、弊社でスライドコンテンツ用のソースパッケージを準備しました。

※当ソースを利用して生じたいかなる損害に関しても、当社は責任を負いかねます。

解凍すると「slide_contents」というフォルダが表示されます。この中にスライドコンテンツで必要なソースが全て入っています。フォルダの内訳は以下のようになっています。

slide_contents
└assets　…準備した画像「image_a.jpg」「image_b.jpg」「image_c.jpg」を入れます。
└index.html　…編集が必要なhtmlファイル
└jquery.easing.1.3.min.js　…以下ファイルはスライドコンテンツを動作させるスクリプト
└jquery.MeclibSlide.js
└jquery.min.js
└MeclibSlide.css
・まず「assets」フォルダにさきほど準備した画像データ「image_a.jpg」「image_b.jpg」「image_c.jpg」を入れます。
・次に「index.html」ファイルをテキストエディタソフトで開き、赤字箇所を編集して上書き保存します。

<html>
<head>
<script src="jquery.min.js"></script>
<script src="jquery.easing.1.3.min.js"></script>
<script src="jquery.MeclibSlide.js"></script>
<script type="text/javascript">
$(window).load(function(){
setTimeout(function(){
$("#slide").MeclibSlide([
"assets/image_a.jpg",　←赤字部分を「assets」に入れた画像ファイル名に差し替えます
"assets/image_b.jpg",
"assets/image_c.jpg",
]);
},100);
});
</script>
<link rel="stylesheet" type="text/css" href="MeclibSlide.css">
</head>
<body>

<div id="slide"></div>

</body>
</html>

3.フォルダをZIP形式に圧縮

「slide_contents」フォルダを圧縮ソフトでZIP形式に圧縮し「slide_contents.zip」ファイルを作成します。
これでmeclibに登録するコンテンツデータは完成です。
※ZIPファイル名は変更してもかまいません。

4.コンテンツを埋め込む

meclibブック作成画面のコンテンツ設定にて、作成したZIPファイルをドラッグ・アンド・ドロップでアップロードし、スライドコンテンツの表示サイズを画像データの比率に合わせればコンテンツの埋め込みは完了です。では実際に埋め込んだデジタルブックを見てみましょう。

埋め込んだデジタルブックを見る
※クリックするとデジタルブックが開きます

このようにmeclibでは専門的な知識が無くとも、とても簡単にスライドコンテンツを埋め込む事が可能です。もちろんご紹介したコンテンツ作成方法以外にも自社で作成されたHTMLデータを埋め込む事も可能です。

※作成方法は千差万別ですので、コンテンツの動作保証はできかねます。試用版で事前に動作確認を行ってください。

「たくさんの商品写真をのせたいが掲載スペースがない！」
「競合カタログとは違ったアプローチをしたい！」
「簡単に作れる目立ったデジタルブックを作りたい！」

このようなお悩み・ご希望のある会社様はぜひスライドコンテンツの埋め込みに挑戦してはいかがでしょうか。

サンプルでもスライドコンテンツを埋め込んだデジタルブックをご確認いただけます。
サンプル

また、まずは試しにデジタルブックを作ってみたい、という方は、
無料トライアルがありますので、お気軽にお申し込みください。

meclibの多彩な演出方法

お役立ち情報