ナタニー台地の妖精たち
ナタニー台地に棲む妖精たちのちょっぴり不思議な物語…

  • Web上で閲覧する
(別ウィンドウが立ち上がります)
  • 閲覧用HTMLファイル ダウンロード
(Zipファイル28.3 MB)

Google Chrome の 最新版をダウンロード

「ナタニー台地の妖精たち」は最新の「GoogleChrome」で閲覧して下さい。
InternetExplorer、FireFox、safari等には対応しておりません。

このコンテンツはBGMを使用しています。
ご使用機器のスピーカーをオンにしてお楽しみください。

ご注意

本コンテンツの著作権はShimanto40に帰属します。
イラストを含むコンテンツの内容を無断で改編・編集して使用することを禁じます。

コンテンツ内で使用しているフォント・音楽の著作権は下記の方々に帰属します。
使用の条件等については各自でご確認ください。

フォント
ふい字フォント
著作者 ふい 様
ふい字置き場。外部サイトへ移動します
音楽
著作者 秋山裕和 様
フリー音楽素材 H/MIX GALLERY外部サイトへ移動します

コンテンツ内で使用しているSVGファイルが非常に重いため、閲覧環境によっては表示に時間がかかる場合がありますのでご注意ください。

制作者より

このコンテンツは「epubcafé」というサイトで実施された「第1回EPUB3コンテスト」に応募するために制作しました。
「epubcafé」は電子書籍の標準フォーマットEPUBの様々な情報を提供しているサイトです。「第1回EPUB3コンテスト」は日本語表記に対応したEPUB3の策定にあわせ実施されました。
Web技術の可能性の一つであるEPUBは以前から興味があり、自分なりにチャレンジしてみたいと思い応募に至りました。

作品自体は5年程前に作ったもので、イラストを引っ張り出し、ストーリーをリライトしたものです。
応募期間と仕事との兼ね合いで新しいものを考えるのが難しい時期でしたので、昔の作品にスポットを当ててみました。

技術的なチャレンジ

  • epub形式の構成理解(epub作成用のソフト等は使わず手動でコーディング)
  • 日本語の縦組み表記
  • ルビの使用
  • 多様な画面サイズに左右されない画面デザイン
  • CSS3によるアニメーション効果をナビゲーションに採用
  • SVGの使用(サイズ変更可能な特性を活かすため、各扉ページの背景として高さ100%で表示)
  • 音楽ファイルの使用と制御(HTML5のaudioタグとJavaScriptを使用)
  • ソーシャル関連の導線設置(twitter/facebook/mixiボタン設置)
  • オリジナルのコンテンツを作成
  • Webフォントの使用

問題点

  • 高さを画面サイズ100%で指定したいが、background・float・padding・marginなどが縦組みの場合、表示の不具合を生じることが多く、複雑なデザインが難しかった。
  • ビットマップをSVG化したため、SVGのファイル容量が非常に重くなってしまった。SVGはベクターデータから変換した方が扱いやすい。
  • 縦組みの場合、floatをclearにするとmarginや画面表示にバグが生じることが多かった。これも複雑なデザインが難しい要因の一つ
  • 縦・横混合した設定が複雑になる。(ソフトを使えば簡単だったのだろうか?)
  • 普通にフッターナビゲーションにposition:fixed指定をすると、ブラウザのサイズで固定されてしまう現象が発生。コンテンツ内のボックスでスクロール設定することで回避。そのためheightの設定に若干矛盾が生じる。

本当はゲームブックみたいな展開をしたいなと考えていました。また、JavaScriptなどを使って、もっとインタラクティブなものにしたかったのですが、今回は時間切れ。コンテストとは別にボチボチやっていきます。

動作環境について

応募条件として最新のWebKitで稼働するものとありましたので、GoogleChromeのみに対応した作りこみになっています。
これは、応募開始の時点で、EPUB3の仕様に対応したリーダーがないこと、Webkitの対応が一番進んでいることなどが考えられます。
コンテストが終わって仕事が落ち着いたら、横組み版で、GoogleChrome 以外のブラウザでもお楽しみいただけるようにしようとは考えていますのでもうしばらくお待ちください。

フォントと音楽を使用させていただいた「ふい 様」「秋山裕和 様」には心よりお礼申し上げます。

この物語が少しでも皆さまの記憶に残れば幸いです。

shimanto40
blog外部サイトへ移動します
twitter外部サイトへ移動します
facebook外部サイトへ移動します
about.me外部サイトへ移動します

このページの先頭に戻ります