cas-support返信アンテナハウスのWebサイト(https://www.antenna.co.jp/)は、7月10日より全面的にレスポンシブ化してモバイルでも読み易いようになりました。「PDF資料室」は、従来はモバイルでは次のように表示されていました。これでは、狭いモバイル画面で表示するとき、左のナビゲーションメニューのため本文の表示幅がさらに狭くなってしまって大変読みにくい状態です。そこで、新たにモバイルで次のように表示されるようにレイアウトを追加したものです。CSSとメニュー表示用のJavaScriptの機能を追加して、画面幅が狭いときはモバイル用のレイアウトで表示するようにしたものです。PCファーストのレスポンシブデザインと言えるかもしれません。アンテナハウスのWebサイトは、2011年に全面的にリニューアルしたものです。当時はモバイルWebはまだマイナーな存在でしたので、WebページはPCの画面を想定してデザインされています。その後、スマホの隆盛により、Webサイトのデザインの流行もだいぶ変っています。デザインの流行はともかく、PC向けのデザインのままではスマホの画面ではとても読みにくいものとなってしまいます。そこで、とりあえず、レスポンシブデザインの考え方を取り入れて、スマホでもできるだけ読み易いようにすることにしました。レスポンシブデザインは、表示する画面の幅に応じてレイアウトを最適化するものです。具体的にはCSSのメディアクエリーの機能を使って画面幅に応じたCSSデザインを適用するものと考えます[1]。市販されているレスポンシブデザインの本を読みますと、デザインパターンなどが紹介されており、それらはほとんど、Webをデザインし直して、ゼロから作り直すことを想定しています。考え方としてはモバイルファーストが良いとされているようです。アンテナハウスの現在のWebサイトのように(会社の規模にしては)膨大な情報量を用意しているページを、モバイルファーストでゼロから作り直す、というのは無理があります。不可能とまでは言いませんが、工数が大きくなりすぎてとても短時間では実行できません。そこで、今回はPCのときは従来のデザインはそのままとし、狭い画面でのみ新しいデザインとするという、一般の本に書かれているのとは逆の方法でレスポンシブ化してみました。これにより、ほとんどのWebページでCSSとJavaScriptを入れ替えるだけでレスポンシブ化ができています。[1]幾つかの本をチェックしてみますと、この考え方は、少し単純化しすぎかもしれません。デザイナーの理想とすることは分からないでもないですが、膨大な(?)Webページをゼロから作り直しは無理があると思います。この機会にオンラインストアを少し改善しました。第3巻』を10月下旬発売します。第4版』プリントオンデマンド版発売。技術書典5にも出品しますのでどうぞよろしくお願いします。簡単な解説10月8日(月)「アンテナハウスCAS電子出版」は、『技術書典5』に出典します。『XSL-FOの基礎』画像制作のこと。Word経由でインポートした画像は印刷品質の劣化が激しいため、第2版ではできるだけSVG形式に変更した件。EdgeのEPUB表示機能はなかなか良い。これからはEdgeだと言いたいところですが、しかし、残念な点もあります。FormatterClubセミナーでの、CAS-UBのスライドと動画を公開しました。