Web Directions East LLC代表
菊池 崇
ノーマン＆ニールセングループのUXサーティファイド・モバイルデザインスペシャリスト。海外から各分野のスペシャリストを招聘し、国内のトップデザイナーや開発者向けにカンファレンスやワークショップを開催している。Web Directions Eastをはじめ、UX DAYS TOKYO、Node.jsなどのサポートを担当。著書に『レスポンシブWebデザイン コンセプト』などがある
こんにちは、Web Directions East LLCの菊池です。
私はフロントエンドエンジニア兼、技術系コンサルティングをしています。年に数回の開催ですが、海外のITカンファレンスを日本で開催する事業も行っています。今回は、今年10月24日に開催するワークショップのご案内と、今フロントエンドエンジニアが勉強すべき内容をご紹介させていただきます。
先日、Microsoftが2016年1月よりIEのサポートポリシーの変更を行うことが発表されました。それに伴い、フロントエンド技術も使えるものが一新するため、大きな変革が予想されます。
IEのサポートポリシー変更の詳細はこちら
日本でiPhoneを発売したばかりのころに、アップルストア銀座でイベントを開催しました。そのセミナーで、Flashはなくなっていくという話をさせていただきました。当時は「そんなことはない」と言う方がいました。現在もなくなったわけではありませんが、デファクトスタンダードだったその勢いはなくなっています。
これと同様に、2012年にレスポンシブWebデザインが主流になっていくと話をセミナーなどでさせていただきました。その際にも「そんなことはない」といった声を多くいただきました。でも2015年現在、多くの企業でレスポンシブWebデザインを採用するほどになっています。
私は預言者ではないですし、言ったことが必ず実現するとは思ってもいません。ただ、世界のWeb技術と情勢を見たり、世界各国のエンジニアと情報交換をしていく中で、「次に来る技術」を知ることができます。そのことから、自分のスキルアップすべき道を間違わずに進んでいます。
そんな私が考える、「次に来るフロントエンドエンジニアが学ぶべきスキル」をご紹介いたします。
正しく学ぶということの重要性
レスポンシブWebデザインは、いろいろなメディアやブログでも紹介されていますが、中には特定の画面サイズだけでサイトが表示される【アダプティブWebデザイン】がレスポンシブWebデザインと誤認されているケースが日本では多くありました。
しかし、2015年４月21日から開始されたGoogleのスマホフレンドリーテストで、「コンテンツが横幅を超えている」というエラーで、アダプティブWebデザインではスマホ対応ができていないことが広まりました。
アダプティブWebデザインで実装したサイトを検証した結果に出るエラーメッセージ
モバイルフレンドリーでないことから、発注者からクレームが入り、制作会社が瑕疵でWebサイトで作り直すという案件が相次いだと聞きます。
Web Directions Eastの主催で、2013年に日本で行われたAndy Clarke氏の「For a Beautiful Web」ワークショップでは、「レスポンシブ」と「アダプティブ」の違いについて明確に説明をしていました。
>> 「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点
もしこのワークショップに参加して、正しい実装を学ぶことができていれば、間違ってアダプティブWebデザインを実装をすることはなかったはずです。
前置きが長くなりましたが、そろそろ「今学ぶべき内容」とは何か？をご紹介します。それは、さらに進化したレスポンシブWebデザインの技術です。
日本でのレスポンシブWebデザインは、デバイスの幅でデザインが変更していれば問題ないという認識が多いのです。ただ、進化したレスポンシブWebデザインは、どのデバイスのサイズでも画角が均等に伸縮します。
MicrosoftのSarfaceデザインは、横スクロールなので縦幅を検知しているデザインもありましたが、幅のサイズを検知するデザインにおいても、縦の伸縮によってデザインが変更することが最新のレスポンシブWebデザインになります。
“縦のレスポンシブ”が必要な理由は簡単です。次に見てきましょう。
縦軸を検知して横スクロールのレスポンシブWebデザイン（http://all-web.org/ms/win8-rwd.htmlから）
“縦のレスポンシブWebデザイン”とは？
実例で説明しましょう。iPhoneですが、縦（ポートレート）で利用しているユーザーが多いですが、横（ランドスケープ）で利用するユーザーもいます。
ポートレートの画面のままのデザインを表示すれば、ユーザーにとって必ずしも読みやすくありません。
Web Directions East LLCが主催するワークショップ（詳細は以下）のサイトを、iPhone 6でエミュレートして表示してみました。ポートレートの場合は、説明文もしっかりと表示され、説明文も目に入ります。
通常の縦(ポートレート)で閲覧した結果
iPhone6で通用利用する縦（ランドスケープ）で表示した時の画面は、ロゴが小さく表示され、お申し込みボタンだけではなく説明文も表示されていますが、横向きのポートレートにすると画面の高さがなくなり、ファーストビューで見える部分が限られてしまいます。
下のスクリーンショットは、同じ画面をiPhone 6の横向きで表示したものです。
iPhone 6の横向きで表示した結果
一方、以下は縦の高さも考慮したレスポンシブWebデザインで、サイトのロゴを小さくしコンテンツと申し込みボタンまで表示されるように設計しました。
高さを考慮してロゴのサイズやコンテンツを調整した結果（※現在サイトでは実装していません）
サイズ変更の設計がカギ！
デバイスのスクリーンサイズの高さによってレイアウトを変更する方法は、メディアクエリのデバイスの向きを検知する「Orientation」や、スクリーンの高さを検知する「min-height」を利用するのも一つの方法かもしれません。
しかし、いずれの方法も試してみると、CSSが複雑になり過ぎ、思ったような挙動や好ましい結果を得ることはできません。
私が代表を務めるWeb Directions Eastは、今年10月24日、世界最大級のテックブログ『Smashing Magazine』の創業者Vitaly Friedman氏を招いて最先端レスポンシブWebデザインマスタークラスワークショップ『Respond15』を開催します。その中で、今回紹介したポートレートでの設計についても、少し違った角度から説明します。
世界最大級のテックマガジン『Smashing Magazine』とは？
世界最大級のテックマガジン『Smashing Magazine』はドイツを拠点とし、カンファレンスの運営や書籍の出版をしています。創業者/編集長であるVitaly Friedman氏は、Web技術に関してあらゆる見識を持つ人物です。
特に、パフォーマンスの知識も多く備えており、Smashing Magazineは、広告やトラッキングなどが入っているのにも関わらず、Google PageSpeed Insightで100点満点を出しています（更新内容によって異なる場合があります）。中ページも90点後半のクオリティを維持しています。
そんな『Smashing Magazine』の創業者/編集長を招いて行う『Respond15』では、今回紹介したポートレートの設計も含め、パフォーマンス、flexboxを利用したレイアウト、高度なRWDレイアウトパターン、CSS設計、知っておくと便利なツール紹介まで1日では足りないくらいの充実した内容が盛り込まれています。
IEのサポートが最新版になった今、flexboxを利用したレイアウトは頻繁に利用されます。分かりやすく解説しているので、まだレスポンシブWebデザインに不慣れな方もご参加いただけます。
先に紹介したように、基本概念をこのワークショップで学ぶことで、複雑な考え方から解き放され、間違った道に行かない思考をつかむことができます。スパゲティコードはパフォーマンスにも影響し、複数人で制作するには向いていません。
このワークショップで、自分のソースを見返してみてはいかがでしょうか？
『最先端レスポンシブWebデザインマスタークラスワークショップ』で来日するVitaly Friedman氏
最先端レスポンシブWebデザインマスタークラスワークショップ
10月24日（土）9:30～18:00
受講料金：5万円～8万円（参加人数によって異なります）
■当日の講義内容
・効率的なRWDのワークフロー
・PageSpeed Insightsで100点目指せ！パフォーマンス改善手法
・Smashing Magazineの大規模リニューアルから得たテスト・検証技術
・RWDのモバイルUX最適化
・flexboxを利用した高度なRWDレイアウトパターン
・モジュール（テーブル・カレンダー・マルチレベルメニュー・地図・フォーム）
・拡張性高いコードメンテナンス、解像度で左右されない堅牢性のCSS設計
・RWD広告&RWDメール問題の解決方法
・RWDのオフライン&プリント向けUX最適化
・RWDの完成品・納品・予算・組織管理と戦略手法
＜転職希望者に朗報！＞
エントリーだけでも早割（6万円）の10％引き＆ワークショップ開催後のテスト得点に応じて割引されるキャンペーンを実施しています。
■関連の外部リンク