目次
まえがき
文字に関する実験
文字の大きさを変更してみる実験
フォントを変更してみる実験
文字のスタイルを変えてみる実験
画像に関する実験
いくつかの画像を並べてみる実験
3,000×3,000ピクセルの画像を配置してみる実験
推奨サイズの画像を配置してみる実験
page 4
page 5
タイトル+推奨画像(縦968px)
タイトル+推奨画像(縦968px)+テキスト
iBooks(iPad)の画像表示寸法を割り出す実験
page 9
page 10
推奨寸法画像と最大表示寸法のページめくり実験
page 12
page 13
page 14
page 15
page 16
page 17
page 18
page 19
page 20
page 21
page 22
page 23
iBooksとGif画像は相性が悪いのかを実験
Gif画像です。
PNG画像です。
Jpeg画像です。
iBooksはaltタグを検索できるかの実験
SVG1.1
動画に関する実験
YouTubeを埋め込んでみる実験
パブーの使い方に関する実験
公開中の本を一旦非公開にして再公開するとどうなるか実験
コラム
(コラム)ダウンロード数は自分のも含まれている?
(コラム)2011年末にはパブー2万冊を超える?
(コラム)パブーの未来予想図は「今後の予定」でわかる?
(コラム)パブーのランキングの仕組みは?
(コラム)高年齢層も活躍!パブーユーザー
(コラム)校正もiBooksで!
(コラム)電子書籍の閲覧に欠かせないもの
(コラム)電子書籍元年は2010年?
(コラム)100ダウンロード超えました。
(コラム)電子書籍のポジショニング
巻末資料
(巻末資料)iPhone4
(巻末資料)iPad
(巻末資料)キンドル
(巻末資料)ガラパゴス(5.5型)
(巻末資料)ガラパゴス(10.8型)
(巻末資料)ソニーReader (PRS-650)
(巻末資料)ソニーReader (PRS-650)
(巻末資料)GALAXY Tab SC-01C
関連書籍の紹介 in パブー
(お薦め書籍)『パブーで遊んでみよう』

閉じる


まえがき

パブーでどんなことができるのかな? の実験室です。いろいろやってみたいと思います。よろしくお願いします。確認デバイスがiPhone3GS・iPhone4・iPod touch (2010年モデル)・iPadの4種類です。

ビューワーアプリは「iBooks(ver1.2)」です。実験結果画像は縦と横を含めるとバリエーションが多く、最小限の掲載となります。電子書籍は、見るデバイスによって表示が変化しますから、この本をダウンロードしてそれぞれのデバイスでどう見えるか比べてみるのもいいかも知れません

2010年12月27日 graphis 水口 知己

文字の大きさを変更してみる実験

文字の大きさテスト。(何もせずに入力)
文字の大きさテスト。(大きさ1)
文字の大きさテスト。(大きさ2)
文字の大きさテスト。(大きさ3)
文字の大きさテスト。(大きさ4)
文字の大きさテスト。(大きさ5)
文字の大きさテスト。(大きさ6)
文字の大きさテスト。(大きさ7)
実験結果
文字サイズを指定しない文字の大きさは〈大きさ3〉と同じ。iPhone3GSだと〈指定なし、大きさ1、2、3〉だとやや滲む。3GS、4(Retina)、iPod(Retina)だと〈大きさ1と2〉は同じサイズで表示されるが、iPadでは差がある。

追加実験
必要はなさそうだけど、敢えて大きさをHTMLエディターで8.9.10とさらに大きくしてみる実験。
CODE:<font size="8">8</font><font size="9">9</font><font size="10">10</font>
8910
実験結果
7以上には大きくなりませんでした。

フォントを変更してみる実験

フォントを変更FontGraphis0123
フォントを変更FontGraphis0123(ヒラギノ明朝 Pro W6)
フォントを変更FontGraphis0123(ヒラギノ明朝 Pro W3)
フォントを変更FontGraphis0123(HGS明朝E)
フォントを変更FontGraphis0123(メイリオ)
フォントを変更FontGraphis0123(Osaka)
フォントを変更FontGraphis0123(MS P ゴシック)
フォントを変更FontGraphis0123(Arial)
フォントを変更FontGraphis0123(Geogia)
フォントを変更FontGraphis0123(sans-serif)

実験結果
日本語については変化なし。PDFでも確認してみたのですが、変化はありませんでした。

文字のスタイルを変えてみる実験

文字のスタイル(何もさわらない)

文字のスタイル(Pragraph)

文字のスタイル(Header1)

文字のスタイル(Header2)

文字のスタイル(Header3)

文字のスタイル(Header4)

文字のスタイル(Header5)
文字のスタイル(Header6)
実験結果
PragraphにするとPタグがつく→<p>○○○○○○○○</p>

いくつかの画像を並べてみる実験


最初の実験は、50ピクセル、100ピクセル、150ピクセルの正方形の画像を並べてみようです。さていかがでしょうか? 

実験結果
デバイスの解像度(※1)によって各ブロックの表示される大きさが異なる。


※左がiPhone3GS、右がIPod touch(Retina)です。

実験教訓
解像度の理解は大切。

次の実験
3,000ピクセル×3,000ピクセルの画像はiPadでどう表示されるか?

※1:iPhone4は画面は960×640ドット(326dpi)のIPS液晶で、iPhone 3GSは480×320ドット(163dpi相当) の4倍の解像度を持つ。

読者登録

graphisさんの更新情報・新作情報をメールで受取りますか?(読者登録について