O2Magazin #003！
も
うご覧になられました？『O2 Magazine』最新号、『#003』が10月1日発刊されました！ 『O2Magazine』 http://glitter-style.jp/o2/ こうして並んでくると、少し感慨深いものがあります・・。隔月のペースなのでなかなか増えてはいきませんが、それでもようやく3号まで刊行することができました！ スタートから早半年・・構想から含めると約一年です。 一つ節目を迎えられたな・・と思います。 O2Magazineは3人のデザイナーがローテーションで各号をディレクションしていくというスタイルなので、3号がちょうどワンクールになります。なので、ちょうど一区切りというところです。Theme:「時間」
拡大表示さて、今回は「時間の使い方」をテーマとした構成でメンバーの岩本憲二さんのアートディレクションのもと 各記事とデザインを作成してもらいました。
■記事
ちょっとした時の時間の使い方や
ふと間が空いた時に試してみてほしいこと
などを書いてもらっています。
■デザイン
「時間の流れを感じるもの」をテーマに
一枚絵でその経過を表現する、というところに重点を置いています。
・・・が、最終的には結構アニメーション入っちゃいました。。苦笑
こちらの画像が、表紙をめくって1ページ目のINDEXページ。
全編通してこうしたそれぞれ「時」をイメージするようなメタファーや表現を行っています。
また、今回は全編をこうしたパスを用いたグラフィックにしています。
なので、僕もめずらしくほとんどパスでグラフィックをつくっています。
個人的にパスはワンポイントくらいしか使わないことが多いので、久しぶりにがっつりペンツールを使ったなぁ・・と。笑
なんだかとても新鮮でした。
前半はあまり動かない静的な表現でつくられていて 後半は色々ギミックが入っています。
元々あまり動きをつけないという方向性だかったので、動きが入るものに関してはちょっと注力しすぎたかも・・ その分、今までより完成度は上がっていると思います。 また、今回のアニメーションは連鎖していくような動き方が多いので、なかなかダイナミックな感じになったんじゃないかなと思います。
また、今回最も特筆すべきはこれまでの大きな課題だった「表示速度」の高速化です。
システム面やデータの段階からかなり細かく処理したので、これまでの号とは比べ物にならないくらい表示が高速化されています。
※キャッシュ消去からのローディングで平均4秒。アクセスが少ない時間帯なら1.5秒で読み込み完了
（※光調べ。スマートフォン（3G）は～10秒ほど。）
これでかなり読み込みまでのストレスは緩和されたはずです。
これを受けて#002、創刊号も順次高速化処理を行っていっています。
誌面本体の紹介はBlogでは控えめにして、やっぱりまずは実際に見て触って楽しんでいただきたいな、と思うので 今回は個人的にちょっとオススメなページを紹介したく思います。
P.7-8 /Food Cordinator佐藤さんのページ(http://glitter-style.jp/o2/number003.html#/page/9)
佐藤さんは前回の#002でも記事を書いて下さっていたのでもう「おなじみ」ですね！
テーマに合わせたお料理の紹介とレシピも公開してくれています。
今回は本誌面中いちばんリッチなアニメーションが入っていますので、そちらも一見の価値アリ。笑
段階に分かれて、合計4種類のモーションが用意されていて、結構ダイナミックに動きます。
P.13-14 /編集部ページ(http://glitter-style.jp/o2/number003.html#/page/15)
今号中最も多くのプログラムを使用したページです。笑
画像のように、各メンバーのシンボルへマウスカーソルを持っていくと、それぞれのメンバーが表示され(※画像のような、カーソルオン時の緑のエフェクトは出ません)、クリックでコメントなどが表示される・・という仕様なのですが、このBooklet仕様の構成でこれを行うには実は結構面倒な処理が多々必要になるんです。
※Html上では、左ページと右ページは「別ページ」になっていて(くっついてないんです)
本来縦並びの各ページを、プログラムで「2ページを左右並べ1セット」にしつつ「各セットを重ねている」ので
別ページにあるものどうしを連動させる・・という一手間がかかります。
また、このページの見開きは時計が表示されているところが示唆するように、時間帯によってグラフィックと右上のメッセージが変わるように設定されています。 具体的には、
- 朝 6:00～11:59
- 昼 12:00～17:59
- 夜 18:00～5:59
の三段階に変化します。
ぜひ、こちらも全部見て下さると嬉しく思います！
ちなみに、この切り替わるタイミングで閲覧していると、（多少タイムラグが発生しますが）切り替わりエフェクトも用意しています。（たいしたものじゃないんですが・・）
・・余談ですが、今回この編集部ページに初めて僕も登場してみました。笑
なので、このしがない僕の戯言も見てやって下さい。笑
ちなみに、実を言うとこINDEXページの砂時計にも当初はアニメーションが入っていたのですが
あまりの処理の多さにブラウザに負担をかけすぎて「フリーズした」というケース出てきたので
公開直前にカットすることにしました・・。
どっかでまた使えるといいな・・と思ってます。。
※ただ、DOM操作でのアニメーションなので負担が大きすぎるんですよね・・（当たり前だ）。こういうアニメーションならcanvasか「enchant.js」でやったほうが絶対いいと思う。
あ・と・が・き
今回の記事やグラフィックについては編集部ページの各メンバーのコメントでも話してもらっているのであえて多くは語りませんが、
また補足説明などは後日このBlogでも行っていこうと思います。
そして、ワンクールを迎えたことで、O2Magazineも次号から少し趣向を変えてお届けしていこうと考えています♪
お楽しみに！
しかしながら、前回の#002制作後から少しづつjQuery依存を解消していってるんですが
JavaScriptって楽しいですねー笑。
知れば知るほど本当にいろんなことができるし、つくづくすごいと思います。
もっといろんなものをつくれるようになりたいな。
前回の『記事消失事件(笑)』以来、半月ぶりの更新になってしまいましたね・・。
半月経って、ようやく半分ほどの記事が復旧できました。。
基本、全部「書き直し」（苦笑）たので、内容も結構変わってます。笑
ただ、画像なども追加したり、内容も見直したりで以前ご覧になった方も楽しめる内容になったし、前よりも良い感じになったと思います♪
まだO2Magazine関連の記事はまったく復旧させていないのですが、ドタバタで書いていなかった#002の記事も加えて、またアップしていこうと思いますので合わせて宜しくお願いいたします！
Comments