One Webとは
スマートフォンをはじめとするモバイル端末の普及により、Web制作の概念は大きく変わりました。昨年の「One Web」では、「レスポンシブWebデザイン」の考え方や具体的な制作技術、方法論などを紹介し、今年はその続編と位置づけられるイベントです。今年の「One Web」では、より深く、より実践的に「モバイルデバイスへの対応」に踏み込む内容となっています。スピーカー陣は以下の5名。海外等における最新動向や、より実践的なノウハウ、ワークフロー等が学べる構成となりました。
- 「Transformative Web Design〜変化にしなやかに対応するデザイン力〜」(長谷川恭久氏)
- 「レスポンシブWebデザインを商業(ビジネス)サイトで実現するための考えと仕組み」(菊池 崇氏)
- 「マルチデバイス対応に最適な手法『デザインニング・イン・ブラウザ』」(斎藤祐也氏)
- 「『制作』から『開発』へ、そして最先端へ - Webアプリ開発の現状と未来」(白石俊平氏)
- 「One Webにする前に、コンテンツを見直そう！コンテンツ・ストラテジーの意味。」(佐々木朋美氏)
「モバイル化」とは「デバイス対応」ではなく「コンテンツのモバイル化」である
こうした状況下で、私たちはどのようにしてWebをデザインしていくべきか。そのためのキーワードとして、同氏は「コンテンツ」を挙げました。今まで「モバイル化」というのは「デバイスに対応する」ことを指していました。しかし、「モバイル化」とは、増えていくデバイスに後追いで対応することではなく、「コンテンツを動かせる状態にする」ことだというのです。わずか百数十ピクセルから数千ピクセルまで、様々なサイズのスクリーンからWebが閲覧できる時代になりました。そうした時代では、コンテンツを、サービスやデバイス、環境、シチュエーションに応じて「自由自在に動かせる」よう設計する必要があります。
特に、これからのデザイナーの仕事は「情報の構造の設計」「情報の配信経路の設計」であるという指摘には、思わず頷かされました。
正しく構造化されたマークアップやコピーライティング(テキスト)、サムネイル(画像)、ビジュアルデザインなど、デザインのスキルは単なるページデザインではなく、情報をどうデザインするかという視点に変わっていきます。また、自分たちが配信している情報が、どうやってユーザーに届き、どうやって共有され、リンクされ、拡散していくのか、デザイナーは想像しながらデザインする必要があるということです。つまり、「モバイル化」というのはデバイスに対応するのではなく、コンテンツをいかにモバイルできるよう設計するかにかかってきます。これこそが、これからのWeb、すなわち「Transformative」(環境や状況に応じて変化できるWebデザイン)なのだという講演内容でした。
「コンテンツアウト」とはモバイル時代に必要な“引き算のデザイン”
- アイテムが多すぎて対応できない
- PCでもスマホでも同じ画像を読み込むから時間がかかる
- レイアウトがうまくいかない
同氏は、この3点について解決策を解説しました。特に印象に残ったのは、限られたモバイルの画面サイズに対応するために、たとえば、商品画像の中に、商品名や値段といった情報を含めるといった「スペースの有効活用」により、デスクトップWebと同じ程度の情報量をユーザーに提供しようという考え方です。モバイルWebでは“引き算のデザイン”で情報をうまくまとめる発想が必要なのです。
また、画像のあしらい方を工夫することでパフォーマンスを向上させるテクニックも紹介されました。「Data URI」を用いてアイコンなどの小さい画像を文字列で読み込ませるテクニックや、サイズの大きなメインの画像は、画像の色数を減らし軽量化するとともに、赤や緑や青のフィルターがかかっているように見せる手法が、海外の事例などを引きながらわかりやすく紹介されました。
そして、セッションの最後を締めくくったのが、「コンテンツアウト」という考え方です。コンテンツアウトというのは、必要なコンテンツは何かというのを最初に吟味し、テキスト、バナー、重要な画像…、何が重要なパーツなのかを考えて、それを基準にしてグリッドを設計していく手法です。
このように、「レスポンシブWebデザインは商業サイトに向かない」という声に対する技術的な解決策が提示されました。新しい技術だからこそ、色々な情報や技術を勉強しながら、実際の自分の案件で少しずつ試行錯誤を繰り返す必要があるのだと考えさせられました。
「ブラウザを使ったデザイン」はワークフローの変革とツールの変革を可能にする
まず、同氏は、「ワークフローの変革」を提唱しました。これまでのワークフローでは、「設計→デザイン→開発」という、いわゆるウォーターフォール・モデル(前工程を踏まえて次工程を進行する手法)で制作を進めていました。これからは、アジャイル開発のような「設計→開発・テスト・デザイン・スケッチ」という、開発とテスト、デザイン、スケッチの工程を反復させる手法が必要になるという指摘です。
次に、「ツールの変革」です。これが、Webブラウザを、開発プラットフォームして活用する本セッションのテーマとなるポイントです。実際に、ブラウザを使って「ワイヤーフレーム」を作るデモや、それを元に、ブラウザ上で動くモックアップまでをワンストップで作り上げるデモは、鮮やかな手際で「こんなに簡単にできるものなのか」と感じさせられました。ロゴやフッター、スライダー、入力フォーム、ボタン、見出しといった様々なデザインパーツを「基本パターン」とし、組み合わせたものをワイヤーフレームの出発点として、スケッチ＆ビルドが繰り返されていく様子は、まさにアジャイル開発なのだなあと思いました。
実際にブラウザ上で組み上げられたワイヤーフレームやモックアップは、その場で動作確認が可能なため、早めにテストが可能になり、結果として、クオリティを高めていくメリットがあります。同氏がセッションの最後に引用したスティーブ・ジョブズの言葉は、“[Design is] not just what it looks like and feels like. Design is how it works.”というものでした。「デザインはどう見えるか、どう感じるかだけでなく、どう動くかが最も重要だ」という言葉です。
実際に制作の現場で、明日から少しずつでも取り入れていけるような有用なTIPSが数多く披瀝されたセッションでした。
Webアプリや、Webアプリのようなサイトを作るための7つのポイント
Web制作は、単なるページ制作から、デザイナーとデベロッパーが分業、協業することにより、Webアプリ開発ともいうべきチームを作ることができます。同氏は、自身の失敗談から得た知見として、「デザイナーとデベロッパーが協力して、アプリ／アプリっぽいサイトを作るためのポイント」を示しました。
(1)セマンティックなマークアップは完璧に身につける
文書のアウトラインを意識してマークアップすると、あとから仕様変更などがあった場合にも、臨機応変に対応が可能になります。事前にHTMLをしっかり作り込んでおくために、セマンティック性をきちんと身につけておくことが大事です。
(2)「シームレスな」レスポンシブデザインにこだわらない
レスポンシブWebデザインは、PC向けもスマホ向けも1ソースで「できる」ものですが、同時に、「しなくてはならない」制限にもなりうる点に注意しましょう。現時点では、PC向けとスマホ向けのデザインを大きく違ったものにはしにくいという性質があります。
(3)レスポンシブにするなら、モバイルファーストで
レスポンシブにするならモバイル向けのサイトを最初に設計した方が絶対によいです。デスクトップファーストにすると、パフォーマンスはどうか、CSSだけでモバイル向けに最適化できるか、コンテンツの設計は適切か、といった不安と常に隣り合わせになります。
(4)「それ、CSSでできる？」の判断力を磨こう
HMLT5/CSS3は素晴らしい技術です。しかし、古いブラウザはどこまで考慮するのかという問題があります。CSS3で色々できるといっても、古いブラウザを考慮するとなかなか難しい面がまだまだあります。悲しいことですが、JSでやる方が簡単なこともたくさんあります。
(5)フレームワークは適材適所
フレームワークとは、作業効率化のためのツールで、クリエイティビティと相反する部分があります。jQuery Mobileをはじめとするフレームワークは確かに便利ですが、万能ではありません。適材適所で使うことが大事です。
(6)インタラクティブなコードでは、「UIの状態」を意識しよう
コーディングの際は、「CSSプロパティは直接JavaScriptで書き換えるのをやめる」ことを意識します。CSSだけ変更すれば、JavaScriptに手を入れなくてもエフェクトを変更できるようにコードを組み立てておくことにより、変更箇所がCSSに集中して、保守性が向上します。
(7)コミュニケーション
デザイナーとデベロッパーが共同で開発するときはコミュニケーションが重要です。コーディングしながら、デザインを変更、微調整する。デザイナーとデベロッパーはコミュニケーションを取りながら進めることが大事です。
やはり、デザイナーとデベロッパーとの対話がものを言うのだなあと感じました。そして、両者のスキル、仕事の領域は今後ますます融合していくのだという思いを強くしました。
コンテンツ制作を成功に導く「コンテンツ・ストラテジー」
モバイルの台頭により、「コンテンツ」は、「デザイン」や「技術」などと並んでWebサイトの中核をなすべき戦略と位置づけられます。コンテンツ・ストラテジーは「有益かつ有効なコンテンツの制作・発信・管理に向けたプランニング」と定義されます。では、「有益かつ有効な」コンテンツというのはどういう特徴を備えているのでしょう。同氏は以下の5つのポイントを示しました。
- ユーザーにとって、ビジネスにとって、適切である
- 特定した目的を達成するために、役に立つ
- 表現が一貫性を保っている
- 簡潔であり、要点を押さえている
- サポート体制がある
上記のポイントを押さえながら、PDCAサイクルを回していくことが大事だということです。セッションを通じて興味深かったのが、同氏が提示した「コンテキストの多様化」というテーマです。
ユーザーが使用するデバイスによって、コンテンツをいつ読まれているかという「時間のコンテキスト」や、どこで読んでいるのかという「場所のコンテキスト」は変わってきます。さらに、モバイルは「パーソナルなコンテキスト」という特性も備えています。ユーザーのパーソナルな情報は全て端末内に集積されているからです。そして、一番大事なのがコンテンツの「モビリティ(可動性)」というコンテキストです。コンテンツは、転送や再配布が容易で、別形態での転送や分解されて流通されるといった可動性が高いことがわかります。モバイルの台頭により、伝え手が思いもよらないような方法で、コンテンツは消費されていくのです。
デバイスが多様化し、新しい技術が出てきているこれからの時代は、制作者はより「モビリティの高い」コンテンツづくりを意識する必要があるのだと感じました。
このように、デザインから開発、コンテンツまで、より実践的な内容で「モバイルデバイスへの対応」を解説した今回の「One Web」。Web制作に携わる方にとって、今後の仕事の進め方を考えるきっかけになったと思います。
