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

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

@yuka2py ノジマユウジ

自己紹介
ノジマユウジ　　@yuka2py
● 株式会社フォーエンキー所属
● Android/iPhoneアプリ開発。
Webシステム開発、デザインや印刷全般など。
Web関係は...ここ最近はスマホ系三昧。
● 好きな言語：Python (*´Д`*)、Javascript
しかし一番書いているのは PHP...
● グラフィックデザインもやります。
● 趣味：オサレ♪（若干かわいい系 (｀･ω･´)ｷﾘ
● 弱点：お嫁ちゃん

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

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

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

メンドーそうじゃん！

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

レスポンシブWebデザイン以前
● きっとメンドクサイ
● @mediaとか難しそう（メンドクサイ）
● ソースぐちゃぐちゃになるさ。きっと
● PCサイトだけでも苦労するのに、
スマホも一緒とかアレ(ry...
● そんなに世の中あまく無い！ (`･ω･´+) ｷﾘｯ

そもそも要るか？

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

SPでも使えるPCデザインで良いよね♪
● 有名なところで、Appleのアプローチ
● カタログ的なサイトでしか使えないとか言う人も…
● 並のコーポレートサイトでも使えると僕は思うけど
● スマホブラウザの操作性を考慮したらOK
● ダブルタップズーミングを念頭に
● タップ領域の確保
– 複数行のテキスト内のリンクをちゃんと辿れるように、
行間を多目に取る（54px以上）

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

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

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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à 簡単！低コスト！楽しい！レスポンシブデザインディレクション

Similaire à 簡単！低コスト！楽しい！レスポンシブデザインディレクション (20)