WEB制作

WEB制作

WebデザイナーがSigilでEPUB3の電子書籍を作るまでに学んだこと

Sigilという無料のソフトを使い、Web制作の経験(一応、仕事としてお金を貰える程度w)がある筆者が独学でEPUB3規格の電子書籍を作るたろ情報収集したことを紹介する。

なお、個人的経験であり、間違った理解などもあるかも知れないので、電子書籍という樹海に迷い込まないように注意。

対象読者はWebデザイナーやコーダーで、趣味レベル以上のHTMLやCSSの経験者を想定。電子書籍の中身がHTMLベースなのでWeb制作の経験の有無は重要。但し、最新のHTMLはどうせEPUB3では使えないので、4~5年前くらいの知識でOK牧場。

EPUB3とはなんぞ?

電子書籍にもHTMLみたいにバージョンがある。現在主流なのがEPUB3という規格で、これから作るのであれば基本的にこれしか選択の余地がない。

もの凄い古い電子書籍リーダーでは対応していないかも知れないが、スマホアプリやiPad等の電子書籍アプリはEPUB3に対応している。

Sigilとはなんぞ?

電子書籍を作るためのフリーソフト。オープンソースとも言う。WindowsやMacで動く。

電子書籍制作が樹海なのは色々と理由はあると思うが、これぞ決定版みたいなソフトが存在しないことも一因。電子書籍を作るには色々な手段があるけども、Sigilが一番お手軽かつ、HTMLやCSSの読み書きが出来る人には取っ付きやすいと思う。

ダウンロード先

Sigl以外の選択肢は?

市販の高級なソフトとかを使えば楽に電子書籍が作れるんじゃないの? と思ったのは私も同じ。しかし、アナログの書籍を作るInDesignから変換して作られる電子書籍も世の中には沢山あるものの、ブログとかを書籍化したいとかの目的だと、ほぼSigilが一番だと思う。

他にWord文書から変換するサービスとか色々あるけども、結局、細かいことをやろうとすると変換サービス系は、かゆい所に手が届かなかったり、かえって時間を無駄にする場合がある。多少なりともHTMLの理解がある人はSigilがいいと思う。

電子書籍の正体

先に電子書籍はHTMLと関係があると書いたが、電子書籍はHTMLやCSS、画像などがZip圧縮でパッケージ化されたWebサイトの一種と考えてよいと思う。電子書籍のファイルを解凍すればそういったファイルが出てくるはず。

でも、そこまで簡単な話ではなくて、電子書籍特有のファイル構造などもあって、WebサイトをZip圧縮すれば電子書籍になるかというと、そうはならない。

まず、電子書籍リーダー(ハードウェアやソフトウェア)は、現代のWebブラウザみたいに高機能ではなく、IE6どころかIE4くらいの機能しかない。しかも、仕様がブラックボックス化されていたり、かなり苦しむこともなる。

電子書籍作成を学ぶには?

以下の書籍をおすすめしたい。少し古い書籍だが、通常のWeb制作ほどは電子書籍界のスピードは速くないので、学ぶには問題ない。

詳細なファイル構造や電子書籍特有の記述方法などを学ぶことができるので、これからSigilなどで電子書籍を作りたい人は必読の本だと思う。なぜなら、意外とまともな電子書籍作成をまとめたサイトというのは、なかったりするからだ。

WEB制作

【iPad実機検証】PCとSPだけじゃ不十分! iPadだとレイアウト崩壊するサイトが意外に多い


WebデザインやWeb制作に関わる皆さんは、どうやってサイトのデザイン検証をしていますか? PCとスマホは実機検証するとして、意外とiPadなどのタブレットPCは省略してたりしませんか?

「PCと同じくらいの画面サイズだから、PCでちゃんとなっていればiPadもOKなはず」と思っていると、痛い目に合う場合があります。大手企業のサイトでもPCやスマホは綺麗でも、iPadで見ると右や左に寄ってたり、全体的にデザインが破綻しているサイトが意外とあったりします。

iPadはラスボス級の鬼門!

iPadはiPhoneと同じiOSなので、画面が大きいだけのiPhoneと思ってしまいがちですが、どうしたことかiPhoneでベリーグッドなデザインになっているサイトでも、iPhoneだとヤバめな感じになる場合があります。

大事なのでもう一度言いますが「PCで大丈夫だから」という驕りと、「iPhoneでも大丈夫だから」という驕りが重なるため、実機検証を省くケースが多いからでしょう。確かに2018年現在、Webサイトの閲覧デバイスはスマホが6~7割くらい、PCが3~4割くらいで、iPadなどタブレットPCは1割未満というサイトが多いと思います。

しかし、企業サイトなどで月間100万PVくらいあるサイトだと、1割でも10万PVはiPadに代表されるタブレットPCなのです。実機検証を省いていいか? というと疑問ですね。

iPadの仕様は独特

個人的な経験だと、少なくとも画面が大きいiPhoneではないし、PCとは全然違うという印象です。

PCとSPを切り替えているサイトでは、PC版を表示させていることが多いと思いますが、どっちかというとiPhone仕様に近いiPadなだけに、レイアウトの崩れや意図しない動作が起きる場合が多いです。

レスポンシブはレスポンシブで、PCとスマホの中間くらいのサイズのiPadは、どっちつかずなバランスのデザインになってしまいがちです。ちょっとバランスが悪いくらいで済めばいいですが、画面がはみ出していてズーム操作すらできなかったり、余白があり過ぎたり、逆に全く余白がなかったり・・・どうしてこうなった?みたいなサイトも結構あります。

iPadユーザーのライフスタイル

私も個人的にiPadを使っているのですが、使い道としてはPCとスマホの中間的というか、ややPC寄りの使い方です。じっくり調べ物をしたり、大きな画面でじっくりゲームしたり、バッテリーの持ちが平均的なノートPCの2~3倍くらいあるので、外で使うことも多いです。

iPadはスマホよりもじっくり使う人が多いと思うので、なおさらWeb制作に関わる人にはiPad検証を薦めたいですね。

ところで、あなたのサイトは「iPadで検証」していますか?

もししていなかったとしたら、iPadで見ると結構ヤバいことになってるかも・・・(!?)

WEB制作

【画像容量削減】jpegのロスレス圧縮のフリーソフト「Voralent Antelope」は優秀!!

jpeg画像のファイル容量を画質の劣化なく下げる方法について。ロスレス圧縮とも言う。

Web用の3大画像形式

わかる人は読み飛ばして構わないが、Webサイトで使う画像のファイル形式は大きく3つある。

jpeg

非可逆圧縮されるので、圧縮後の画像は多少劣化する。ファイル容量は小さくなる一方で、圧縮率を高めれば細かい部分が潰れたり、ノイズっぽくなる。写真やイラストなどで諧調のあるカラー画像に適している。Webで広く使われる形式。

gif

初期のネット界ではよく使われていたが、256色という制限があるのが特徴で、写真など諧調のあるものには通常使われない。アイコンやバナー、シンプルな諧調のイラストに使われる。ブラウザの機能のみでパラパラ漫画方式のアニメーションができるので、近年は再び注目される。透明部分を持てる。

png

可逆圧縮で画質が劣化しないので、写真にもイラストにも万能に使えるが、ややファイルサイズは大きくなるのがネック。高画質で表示させたい場合や、「なんとなく」使われる場合がある。透明部分を持てる。

jpegのロスレス圧縮とは

上記のように、jpegが非可逆圧縮というのはWeb制作者なら常識だろう。いや、デジタル画像の知識が豊富な人ほど、jpegでロスレス圧縮と言われるとハテナマークが浮かぶはず。

ここでいうロスレス圧縮とは、画質とは関係のないExifなどの情報を削除したり、データの並びなどを最適化することによってファイル容量を下げる手法である。

一般にイメージする“ロスレス圧縮”というよりは、画像表示に関係のないデータを削除+最適化してファイル容量を下げると言った方が適切かもしれない。

初心者向けの解説サイトで、この手のツールを使って「見た感じ、画質の劣化は気にならない程度でした」と書かれていることがあるが、目に見えないデータしかいじっていんいないので。画質が劣化したら設定がおかしいはずなので注意すること。

フリーソフトなども色々ある

Web上のオンラインサービスや、WordPress用のプラグインなどもあるが、今回取り上げるのはローカルにインストール可能な下記のソフト。ローカルで動くソフトの方が結局は万能に使えるので一つ知っておくと良いと思う。

無料で利用できるし、ドラッグして画像を複数追加して、容量を削減したものを指定のファルダに書き出す・・・といった現実でありがちな流れが簡単にできたりして、使い勝手が良いと感じた。

Voralent Antelope
2018年10月現在、公式サイトからうまくダウンロードできない場合があるようなので、その場合は窓の杜などの配布サイトからダウンロードしよう。

画質劣化を伴わないロスレス圧縮でも、画像によるが10%~30%程度も容量を圧縮することができる。さらに容量を減らしたい場合は、非可逆圧縮のオプションも使用することができる。

jpegの画質はソフトによって様々

元ファイルであるjpegを書き出した時のソフトが使っているエンジンにもよるが、CS6以前の古いバージョンのPhotoshop(Web用に保存、を含む)では、そのエンジンが古いこともあってファイル容量が大きくなりがち。

CreativeCloudではさすがに今どきのエンジンが採用されて、ファイル容量を抑えつつ画質を確保できるのだが、過去に古いバージョンのPhotoshopで書き出したjpegの容量を減らしたい、という用途にも「Voralent Antelope」は役に立つだろう。

ブロードバンドの時代でもファイル容量は大事

以前に比べるとインターネット環境は非常に高速になった。

しかし、モバイルファーストな時代だけあり、スマホユーザーの利便性を考えた時に画像のファイル容量というのは、重要な検討課題となる。読み込みの遅いサイトはSEO評価も下がり、表示が遅いがためにユーザーを逃すことにもなりかねないだろう。

最近人気の格安SIMでは1カ月あたりの通信容量別に料金プランが決められていることもあり、画像などのファイル容量が小さいことはユーザーの気持ちを考えても大切なことだ。