WCK Meeting vol.35　レスポンシブWeb　 コンバージョンアップにつながるワイヤーフレーム作成術

株式会社ロックウェーブ 上林洋介

52 50 10 0 3 52/50

im b ea _ k o k

@ @ @ , C H

vp vLM h P Q

P uT S

52 50 10 0 3 52/50

sy

http://www.aiship.jp/knowhow/

目次• レスポンシブECサイトのディレクションを成功させる考え方

• レスポンシブデザインでワイヤーフレームを作るためのポイント

目次• レスポンシブECサイトのディレクションを成功させる考え方

• レスポンシブデザインでワイヤーフレームを作るためのポイント

C

通常のディレクション

ワイヤーフレーム

デザイン

コーディング

コンセプト設計

レスポンシブECサイトのディレクション

ワイヤーフレーム

デザイン

コーディング

コンセプト設計

ワイヤーフレームワイヤーフレーム

デザイン デザイン

コーディング コーディング

SP PC TAB

レスポンシブECサイトのディレクション

ワイヤーフレーム

デザイン

コーディング

コンセプト設計

ワイヤーフレームワイヤーフレーム

デザイン デザイン

コーディング コーディング

SP PC TAB

ワイヤーフレームは間取りと同じ

何を

どこに

どのように

配置するのか

ワイヤーフレーム無しで家を建てる

こんなはずではなかった事例

• 画像サイズ変更 • バナーサイズ修正 • コンテンツ配置変更 • レイアウト変更 • 全体配置変更 etc…

E

レスポンシブECサイトのディレクション

ワイヤーフレーム

デザイン

コーディング

コンセプト設計

ワイヤーフレームワイヤーフレーム

デザイン デザイン

コーディング コーディング

SP PC TAB

目次• レスポンシブECサイトのディレクションを成功させる考え方

• レスポンシブデザインでワイヤーフレームを作るためのポイント

最低限必要な要素を配置した 軽量なコンテンツ設計から始める

秋のスーパーセール 開催中！！ PCファーストの画像

モバイルファーストの画像

秋のスーパーセール開催中！！

秋のスーパーセール開催中！！

C

C

スマホ タブレット

ダミーテキストよりも実際に使用するテキストを

ボタンのサイズ テキストの読みやすさ 画像の大きさ 画像内文字の可読性 コンテンツ配置の不整合

@yosuke_kam

yosuke.kambayashi