@yuka2py ノジマユウジ

簡単！低コスト！楽しい！レスポンシブ Webデザイン

ディレクション

自己紹介ノジマ ユウジ　　@yuka2py ● 株式会社フォーエンキー 所属● Android/iPhoneアプリ開発。

Webシステム開発、デザインや印刷全般など。Web関係は...ここ最近はスマホ系三昧。

● 好きな言語：Python (*´Д`*)、Javascriptしかし一番書いているのは PHP...

● グラフィックデザインもやります。● 趣味：オサレ♪（若干かわいい系 (｀･ω･´)ｷﾘ● 弱点：お嫁ちゃん

今日は敢えてちょっと極端なお話をいたしますが、ご了承ください♪　

基本的には、あまり予算の無い案件でのレスポンシブWebデザインの考え方・取り組み方のひとつ、的なお話です。

レスポンシWebデザインなんて...

メンドーそうじゃん！

...ってか絶対めんどくさい！ ヽ(`皿´)ﾉｶﾞﾙﾙｯ

レスポンシブWebデザイン以前● きっとメンドクサイ● @mediaとか難しそう（メンドクサイ）● ソースぐちゃぐちゃになるさ。きっと● PCサイトだけでも苦労するのに、

スマホも一緒とかアレ(ry...● そんなに世の中あまく無い！ (`･ω･´+) ｷﾘｯ

そもそも要るか？

...２つ以上のレイアウトって当然コスト掛かるじゃん？ (,,ﾟдﾟ)ｲﾙ?!

SPでも使えるPCデザインで良いよね♪● 有名なところで、Appleのアプローチ

● カタログ的なサイトでしか使えないとか言う人も…● 並のコーポレートサイトでも使えると僕は思うけど

● スマホブラウザの操作性を考慮したらOK● ダブルタップ ズーミングを念頭に● タップ領域の確保

– 複数行のテキスト内のリンクをちゃんと辿れるように、行間を多目に取る（54px以上）

⇒多くのWebサイトで検討可能なアプローチ

そんな風に思ってたわけですが…

RWD提案しちゃった♪

RWDを提案した理由(1)● 最初に「PCもスマホも対応必須」と言われた● でも「予算はあんまり無い」って言われた● 内容的はシンプルで、ツブシが効きそうだった

● 目的が明確な、シンプルなサイト● 基本的な動線が１ラインしか無く、Gblナビも不要

● 必要性を感じた（動線の明確化の為に、スマホでのレイアウトのアレンジは効果的に思えた）そしてももちろん...

RWDを提案した理由(2)

まあ、なんだかんだ言っても、いっぺんやってみたかった！

(｡-д-｡)ゞﾍﾍ…

そしてやってみた。

( `-ω-) ん?

印象が...

変わった！

レスポンシブWebデザイン後● あれ？ 意外に簡単？（もちろん内容によるが）

● 基本的にこれまでのテクニックの延長線上● 新しく使った @mediaも 特に難しく無かった● まぁ、ちょっとデザインやコーディングの考え

方は変えないと行けないけれど... (;ﾟ∀ﾟ)↑本格的にやるならやっぱりここ重要。

● 意外にお客さんが言う事を聞いてくれる？

レスポンシブWebデザイン後● あれ？ 意外に簡単？（もちろん内容によるが）

● 基本的にこれまでのテクニックの延長線上● 新しく使った @mediaも 特に難しく無かった● まぁ、ちょっとデザインやコーディングの考え

方を変えないと行けないけれど... (;ﾟ∀ﾟ)● 意外にお客さんが言う事を聞いてくれる？↑でも今回はこちらに注目！

そして思った…

これは上手くやれば、

ワリと楽しいんじゃないか？

（↑ここが今日話したいところ）

実際の業務はどんな感じだったか...

お客様への事前の説明● レスポンシブデザインの特徴を説明● コストダウン目的なら、制約があることを説明

● 比較的シンプルなデザイン● PC/スマホで大きく変えることは難しい● 具体例を見せてイメージを共有

● コストダウンの為の制約の受け入れを確認、見積もりの備考欄にも記載（いちおう）

説明の雰囲気…● レスポンシブウェブデザインという手法で、

コストを抑えて制作することができますよー。● 同じHTMLで、スマホでも使えるように、画面

サイズに併せて表示を少し変えてやるんですよ● もちろん制約はありますが、その分コストが抑

えられるんです。制約としては...● デザインはシンプルに抑えておく必要があります。● 同じHTMLを表示するので、PCとスマホで見た目

を大きく変えられるわけじゃないです。

説明の雰囲気…● レスポンシブウェブデザインという手法で、

コストを抑えて制作することができますよー。● 同じHTMLで、スマホでも使えるように、画面

サイズに併せて表示を少し変えてやるんですよ● もちろん制約はありますが、その分コストが抑

えられるんです。制約としては...● デザインはシンプルに抑えておく必要があります。● 同じHTMLを表示するので、PCとスマホで見た目

を大きく変えられるわけじゃないです。

全部は説明していないけれど、コストダウンが目的なら、

だいたいこんな説明になると思う。

Re: お客様からの質問● シンプルってどんな感じですか？

● CSSで制御しやすいと思えるデザインのサイトを、一緒に実際に見てイメージを共有する

● 僕の場合、スマホのサイトを見てもらった⇒SPデザインベースの方が低ｺｽﾄに出来ると思う

● PCとSPであまり大きく変えられないって？● これも例示できるサイトを一緒に見て共有する

● いつもの事ではありますが、より一層、ｻﾝﾌﾟﾙを一緒に見てイメージを共有することが大事

ついでに....● 画像はあまり使わず、CSSで表現しますね。

● PCとスマホで画像も同じものを表示するんですよ● やっぱりスマホの3G回線とかでローディングが遅

いとNGですので、画像はあまり使わない方向でザインしましょうね。

● 代わりに、プログレッシブエンハンスメントという考え方もありまして...(中略)...要するに、一部の古いﾌﾞﾗｳｻﾞでは装飾が再現できませんが● 画像を使わず軽いデータで装飾できるんですよ。● でもIE系ではちょっぴり寂しいかも、ですね

せっかくなので、もういっちょ！● IEは８以降の対応で良かったですね？！

● IE8以前の古〜〜〜いブラウザの対応はやっぱりコストが掛かってきてしまいます（対応しますか？）

● レスポンシブデザイン対応という点でも、ワリと大きな制約になりますね…。

● ご存知かも知れませんが、IEの自動アップデートが始まって…(中略)…一般向けのサイトでは、もうあまり気にしなくても良くなってきて（ry...

● もし対応するとなると、レスポンシブ対応のコスト感もやっぱり少し違ってき（ry...

そんなわけで...

こんな豪華アイテムを獲得！● ｺｰﾃﾞｨﾝｸﾞしやすいﾃﾞｻﾞｲﾝ〜シンプルなHTML！

● デザインを考えるのも楽チンに♪– もちろん凝りたいデザイナーさんは凝ってください。

マークアップがシンプルなら大丈夫です。

● CSS3の装飾をベースに考えれる！● 画像点数が飛躍的に少なくできる● 角丸とかグラデーションとか使える。ﾎﾞﾀﾝ､bg楽!

● IE7以下非対応！● 何度躓いたことか…。何度泣かされたことか…

制作途中の想定外の要望にも...● 「こんなん出来ないの？」とかワリと香ばしい

ご要望があった時も…● スマートフォンとPCでHTMLを共用する限りは、

このデザインはちょっと難しいですね…。● 画像を使うことになりますが、スマートフォンでの表示速度を考えると…。

やれば出来るけど…というのは有るにしても、どこかに線引きが必要…RWD導入に伴う制約が、その境界を明確にする

今まで、こんな事を言えたかな？言っても聞いてもらえたかな？

大事なところは...

お客様にとっても「スマホも対応」という分かりやすくて、大きなメリットがある。

だから僕らもお話がしやすくなるし、お客様も納得しやすいんだと思う。

ここ、結構重要だと思っています。 (`･ω･´+) ｷﾘｯ

そしてその結果…、比較的コーディングしやすいデザイン〜ｼﾝﾌﾟﾙでｾﾏﾝﾃｨｯｸ指向な HTML に繋がり、

最終的に制作コストの低減という目的に繋がるように思います。

誤解の無いように少し補足● 決してお客様のご要望を無理に丸めこもうとい

うことではありません。● 限られたコストの中で、お客様にとって最も有益と思われる制作方法を、お客様も納得しやすい形で、提案する為の一つの考え方です

● もちろん、レスポンシブWebデザイン自体は、他にも様々な可能性がありますが、ここではあくまでも予算の限られた案件でのディレクションについてのお話です。

まとめ

RWDのディレクション面● お客さまにとってもSP/PC両対応のメリットは大きく、一定の制約も受け入れてもらいやすい

● 制作コスト低減の為にお願いすべきことが、お客様メリットと一体なのでお願いしやすい

● 制作中の要望について難しいと判断する時も、より明確な根拠を持って回答できる

● 結果として、PC/SPサイトをそれぞれ単体で制作する場合よりも、要求管理がしやすくなる

RWDの制作面● RWDだからといって、いつもテクニカルなも

のを作る必要は無い（当たり前ですが）● 要は、PC/SP/その他のデバイスにおいて、

ある程度の最適化がはかられれば良い● 注）もちろんサイトのゴールにもよります！

● RWDならシンプルなHTMLは必須になる思う● 伴ってワリとシンプルなデザインが要求される(?)● シンプルなHTMLは制作コストを低減に繋がる

制作面では（続き）● RWD自体に新しい技術はそんなに要らない

● でも、SPサイト構築経験は必要かな、と思う● でも、定石を知り、コツは得る必要はある

● これらは経験・実験を重ねて得るが吉（と思う）– デザイン段階で各画面ｻｲｽﾞ毎の雰囲気が想像できる

● あまりデザイン画段階でフィックスしようとしない– RWDのセオリーは読んで勉強し、実践して感じておく

● SPサイトベースが吉（だと思います）● モバイルファースト！

　新しく覚える技術は少ないし、はじめるのは意外に簡単！

RWDの制約は、低予算案件のディレクションには

ワリと馴染みやすい

きれいなコーディングで、コーダーも楽しい♪

そんな訳で最近は…

RWDにした方が全体的には楽なものが多く、また、経験も積めるなーと気付いたりいたしまして、

低コストな案件でもやりようによれば...ではなくって、

低コストな案件でこそ積極的に…

レスポンシブWebデザインを やりたいと思ってます♪

ありがとうございました！

m(o＾ω＾o)m