（アスキー書籍担当のKさん、すいません。ちょっとばかりブログを書かせてください）
レスポンシブWebデザインの流れと4年の理由？
レスポンシブWebデザインはEthan Marcotte 氏が2010年5月に提唱、命名したものです。2012年8月現在から4年というのは時間のつじつまが合わない！？と思われる方がいらっしゃると思いますが、4年でいいんです。厳密には「レスポンシブWebデザイン」とは異なる部分もありますがEthan Marcotte氏のブログで当時「FLUID IMAGE」 というタイトルで記事で紹介されていたり、 Ethan Marcotte氏の会社 Airbag では、「レスポンシブWebデザイン」 の原型とも言える W3C のウェブサイトもこの頃(2009年)に作成しリリースされたものでした。 つまり、命名前から技術自体はあったと言えます。
※Fluid Image = 画像が拡大と縮小をするもの、その技術自体は Clearleft（英） の Richard Rutter氏が考案。
僕は2008年7月に「iPhone 対応サイトの制作手法」としてiPhone発売の1週間前にアップルストア銀座で日本初の元祖「レスポンシブWebデザイン」の講演をさせていただきました。
その際の講演では、メディアクエリを利用してスクリーンサイズごとにデザインを切り替えるという手法についてご紹介させていただきました。
アップルの講演後、マルチデバイス対応を意識し始め、2009年1月にThink IT でクロスブラウザの内容をまとめました。他にも「Background-sizing」 についてご紹介したのも2008年頃のことです。
また、紙面ではWeb Designing 2010年4月号で、レスポンシブWebデザインで利用される Fluid Grid （フルードグリッド）レイアウトや横幅と画像の同時可変について記載させていただきました。
この記事は、記事記載の1年前くらいに SwapSkills で、「Vertical Grid」 や「 Designing In Browser」 で紹介したものをまとめさせていただいた内容になります。
ちょっと長くなりましたが、ということで約4年としています。
（もし違っていたらごめんなさい）もしかして？なのですが「Web Designing」 誌の僕の記事「レスポンシブWebデザインの原型」を参考にされてか、 CSS Nite のコーディングコンテストにレスポンシブWebデザインでの実装で応募された方がいらっしゃいました。生憎レスポンシブWebデザインの原型を審査委員の方の思考とかみ合わなかったようで、レスポンシブの原型の画像などを小さくリサイズすることが個人的好みではなかったコメントが残念でたまりませんでした。
このように、当初レスポンシブWebデザインは、議論もあり別の意見の方もいらっしゃったりします。現在でも議論があるのかも知れません。
追加：修正
このブログにリンクされていた「スマートフォン制作実践講座」に参加された方が、レスポンスJSの紹介、 講座途中の講師の発言などからレスポンシブWebデザインの講座と受け取っていたようですが、レスポンシブWebデザインの講座でないという事が判明いたしましたので訂正してお詫びいたします。
現在は移行期であり、その手法は移行期だけのものかもしれない。
テーブルレイアウトからCSSレイアウトへの移行期もそうですが、ハイブリッド（CSS＋テーブルレイアウト）が紹介されていました。またdiv要素とtable要素を単純に入れ替えるといった現在では考えられないような講座もありました。いずれも現在では、手法として本流ではありません。わずか1年もしない内に語るひともなくなりました。このように、いろんな手法やアイディアがでてくるのは自然の摂理かも知れませんがきちんとした見識があればハイブリットのような移行期のみの手法を本流として教えることはないでしょう。
人間というのは、古いものを利用して新しい事象をとらえます。そして古い事象を発展させて限界が訪れて新しい事象を改めて認識するのです。なおさら、教える人達や学ぶ人達も新しい事象を早く認識するべきなのです。
“...copy, extend, and finally, discovery of a new form. It takes a while to shed old paradigms.” -Scott Jenson移行期においては、その先に何があるかを必ず捉える必要があるのです。つまり先を見えないのなら移行期がわからないのと一緒のことなのです。 レスポンシブ Webデザインを流行ではなく、未来なのです。
自分のスキルセットは技術の限界と同じではない。
自分のスキル不足を（新しい）手法や技術の限界だと思わないでください！僕自身もレスポンシブWebデザインを研究していきてうまくいかない事や大変な事もありますが、諦めずにトライアンドエラーを繰り返しています。そして、コツなどを講演や記事、書籍に組み込んでいます。
レスポンシブWebデザインは面倒だな。と思うこともありますが、Tweetなどはしません。教えている僕がそんな事を記載したらどうでしうか？生徒は迷うに決まっています。教える立場であればメディアの利用も考えるべきだと思っています。
そして、大切なことは、自分の技術の限界をその手法の限界とせず、その手法を研究して、とことん突き詰めることが必要なのだと思います。
レスポンシブWebデザインは簡単ではない
レスポンシブWebデザインは単純なため簡単だと思っている制作会社の方が多くいます。実はこれこそが問題だったりします。簡単だと思っているので案件を安易に受けたりしている制作会社の方が多い気がします。確かに、技術的には「メディアクエリ」「Fluid Image」 「Fluid Grid」だけを利用している単純な技術でありまが、レスポンシブWebデザインは、簡単ではありません。技術単体が簡単なだけに奥が深い技術です。
サッカーは手を使わない単純なゲームですが、簡単ではありません。レスポンシブWebデザインもサッカーと同様に奥が深く、戦術などたくさんの考えなければならないことがあります。
また、デバイスが増えこれほどの画面の数や解像度があるのに、未だにデスクトップのカンプ画面やスマホのカンプ画面らしいものをクライアントに提供をしています。カンプに落としどころをつくっても、流動的なウェブ＝多数のスクリーンサイズや解像度を再現したことになりません。
僕が技術を紹介しているゆめいろデザイン：yumeirodesign .jp の東さんが「炎上などの案件について」をブログで執筆していますが、一度、記事を読んでみるといいと思います。彼は、僕が書籍を執筆するにあたりから Fluid Grid, Vertical Grid, Responsive Web Design を１から学んでくれました。
やはり、レスポンシブWebデザインは難しいため、彼の元に様々な制作会社、出版会社、ウェブスクールから問い合わせがくるそうです。
レスポンシブWebデザインの書籍を執筆してきて
レスポンシブWebデザインの書籍を記載しているのですが、6月から8月31日まで週のうち半分は講演や講師をしているなどで遅々としていたのですが、そろそろ僕の書籍も完成が近づいてきて発売される段階に入っています。ただ、ラストピースが足りず今回イギリスまで足を運び個人レクチャーを受けます。
僕はWDEを行っていることもあり、海外で世界トップのレクチャーを受講しに年に4回ほど海外に行きます。（ある意味投資をしています。）
しかし、僕が行った無料の講演などに参加された方が、僕の話を聞いて自分の考えや手法が間違っていることに気がつき修正されているケースをみます。具体的にはメディアクエリの読み込みをlinkでされていた書籍があったのですが、その筆者が参加されてその書籍の内容に修正が入っていました。もちろん、修正されるのは良いのですがやはりリスペクトされたことについては記載すべきだと考えています。あたかも自分が勉強したものと表現されているのは正直気分が悪いです。
Webに記載している記事も無料で見られますが、その記事を自分の記事として掲載することが問題であるように無料のイベントの講演内容も自分のものとして掲載するのはよくないはずです。（実際には書籍に引用したとの記載されなくても連絡のすべはわかるのですから、承諾を得るための連絡をすることは社会人として当然のように思います。）
あと、こういった出来事もありました。これも無料のイベントでの講演での事ですが、英語のことわざを直訳してしまった講演がありました。この僕のミスをそのまま間違って書籍記載されたのです。書籍にすることを一言貰っていたらキチンと調べれたのかも知れないので残念に思います。
今後のレスポンシブWebデザイン
やっと本題になった感じではありますが、4年ほどレスポンシブWebデザインの技術を研究してきて次の段階のレスポンシブWebデザインがあるのでは？と感じて注目しています。 これについてもイギリスで解決できればいいなと考えています。そして、これから発売されるレスポンシブWebデザインの書籍にもその内容も入れられたらと考えています。（難しかったらすみません。）
という事で、レスポンシブWebデザインが難しいということは伝わったでしょうか？
既に記載済みの内容でもレスポンシブWebデザインの基本をきちんと学ぶことができますのでしばしお待ちいただければと思います。
ということで、今からイギリスに行ってきます！イギリスからも写真投稿しますのでFacebookをチェックしていただければと思います。
0 件のコメント:
コメントを投稿