Enviar pesquisa
Carregar
11月12日セミナー資料[pdf]
•
0 gostou
•
587 visualizações
Yuta Sayama
Seguir
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 61
Baixar agora
Baixar para ler offline
Recomendados
11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料
Yuta Sayama
魅せるスマホ対応!?レスポンシブWebデザインセミナー
魅せるスマホ対応!?レスポンシブWebデザインセミナー
ec-campus
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【根性論と精神論編】 先生:桟 義雄
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【根性論と精神論編】 先生:桟 義雄
schoowebcampus
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【実践編】 先生:桟 義雄
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【実践編】 先生:桟 義雄
schoowebcampus
Sakenomyの開発経緯と内容をできるだけ公開しちゃいます
Sakenomyの開発経緯と内容をできるだけ公開しちゃいます
Yo Otagawa
Xamarin × Visual Studio Updates
Xamarin × Visual Studio Updates
友太 渡辺
Xamarinでもクラウドで監視したい!
Xamarinでもクラウドで監視したい!
ayasehiro
オリジナルAR(拡張現実)アプリ導入のススメ
オリジナルAR(拡張現実)アプリ導入のススメ
Etsuji Kameyama
Recomendados
11月12日レスポンシブWebデザインセミナー資料
11月12日レスポンシブWebデザインセミナー資料
Yuta Sayama
魅せるスマホ対応!?レスポンシブWebデザインセミナー
魅せるスマホ対応!?レスポンシブWebデザインセミナー
ec-campus
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【根性論と精神論編】 先生:桟 義雄
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【根性論と精神論編】 先生:桟 義雄
schoowebcampus
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【実践編】 先生:桟 義雄
超絶UXを実現したい!小規模Web制作会社でもフロントエンドのスキルを磨く方法と実践 【実践編】 先生:桟 義雄
schoowebcampus
Sakenomyの開発経緯と内容をできるだけ公開しちゃいます
Sakenomyの開発経緯と内容をできるだけ公開しちゃいます
Yo Otagawa
Xamarin × Visual Studio Updates
Xamarin × Visual Studio Updates
友太 渡辺
Xamarinでもクラウドで監視したい!
Xamarinでもクラウドで監視したい!
ayasehiro
オリジナルAR(拡張現実)アプリ導入のススメ
オリジナルAR(拡張現実)アプリ導入のススメ
Etsuji Kameyama
Enterpriseから見たXamarinの可能性
Enterpriseから見たXamarinの可能性
Atsushi Nakamura
JXUG ハンズオンもくもく会
JXUG ハンズオンもくもく会
Tomohiro Suzuki
JXUGC 13 東京 はじめに
JXUGC 13 東京 はじめに
Yoshito Tabuchi
Xamarin 実戦投入時に気をつけたいことあれこれ
Xamarin 実戦投入時に気をつけたいことあれこれ
Tomohiro Suzuki
Xamarin.forms実践投入してみて
Xamarin.forms実践投入してみて
Masahiko Miyasaka
AR(拡張現実)アプリ+位置情報の事例紹介と導入ポイント
AR(拡張現実)アプリ+位置情報の事例紹介と導入ポイント
Etsuji Kameyama
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
Monaca
Webフロントエンドエンジニアの戦い〜歴史と現在、そして未来
Webフロントエンドエンジニアの戦い〜歴史と現在、そして未来
Emi MATSUDA
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
Yoshito Tabuchi
第1回 Japan Xamarin User Group Conference - Xamarin 概要
第1回 Japan Xamarin User Group Conference - Xamarin 概要
Yoshito Tabuchi
シルバーウィークにfacebookアプリを作成した
シルバーウィークにfacebookアプリを作成した
Shinichi Hirauchi
Xamarin の特徴と開発手法概要
Xamarin の特徴と開発手法概要
Yoshito Tabuchi
Xamarin開発環境の選択
Xamarin開発環境の選択
Miho Kurosawa
Xamarin 実戦投入時の留意点再確認
Xamarin 実戦投入時の留意点再確認
Tomohiro Suzuki
Xamarin概要と活用方法
Xamarin概要と活用方法
Yoshito Tabuchi
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
20分でできる!Xamarin.Forms入門
20分でできる!Xamarin.Forms入門
Shinichi Hirauchi
Xamarin を使用したC# によるモバイルアプリ作成
Xamarin を使用したC# によるモバイルアプリ作成
Yoshito Tabuchi
Xamarin を使うとどんなことができるの?
Xamarin を使うとどんなことができるの?
Yoshito Tabuchi
世界のMaaS事例から学ぶ MaaS事業開発の可能性について
世界のMaaS事例から学ぶ MaaS事業開発の可能性について
拓弥 宮田
Mc cleary2009 o-ensino_de_lngua_estrangeira_e_a_questo_da_diversidade
Mc cleary2009 o-ensino_de_lngua_estrangeira_e_a_questo_da_diversidade
Lulubell Chan
裁判公開原則と知る権利
裁判公開原則と知る権利
shimashi-ma
Mais conteúdo relacionado
Mais procurados
Enterpriseから見たXamarinの可能性
Enterpriseから見たXamarinの可能性
Atsushi Nakamura
JXUG ハンズオンもくもく会
JXUG ハンズオンもくもく会
Tomohiro Suzuki
JXUGC 13 東京 はじめに
JXUGC 13 東京 はじめに
Yoshito Tabuchi
Xamarin 実戦投入時に気をつけたいことあれこれ
Xamarin 実戦投入時に気をつけたいことあれこれ
Tomohiro Suzuki
Xamarin.forms実践投入してみて
Xamarin.forms実践投入してみて
Masahiko Miyasaka
AR(拡張現実)アプリ+位置情報の事例紹介と導入ポイント
AR(拡張現実)アプリ+位置情報の事例紹介と導入ポイント
Etsuji Kameyama
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
Monaca
Webフロントエンドエンジニアの戦い〜歴史と現在、そして未来
Webフロントエンドエンジニアの戦い〜歴史と現在、そして未来
Emi MATSUDA
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
Yoshito Tabuchi
第1回 Japan Xamarin User Group Conference - Xamarin 概要
第1回 Japan Xamarin User Group Conference - Xamarin 概要
Yoshito Tabuchi
シルバーウィークにfacebookアプリを作成した
シルバーウィークにfacebookアプリを作成した
Shinichi Hirauchi
Xamarin の特徴と開発手法概要
Xamarin の特徴と開発手法概要
Yoshito Tabuchi
Xamarin開発環境の選択
Xamarin開発環境の選択
Miho Kurosawa
Xamarin 実戦投入時の留意点再確認
Xamarin 実戦投入時の留意点再確認
Tomohiro Suzuki
Xamarin概要と活用方法
Xamarin概要と活用方法
Yoshito Tabuchi
Onsen UIが目指すもの
Onsen UIが目指すもの
アシアル株式会社
20分でできる!Xamarin.Forms入門
20分でできる!Xamarin.Forms入門
Shinichi Hirauchi
Xamarin を使用したC# によるモバイルアプリ作成
Xamarin を使用したC# によるモバイルアプリ作成
Yoshito Tabuchi
Xamarin を使うとどんなことができるの?
Xamarin を使うとどんなことができるの?
Yoshito Tabuchi
世界のMaaS事例から学ぶ MaaS事業開発の可能性について
世界のMaaS事例から学ぶ MaaS事業開発の可能性について
拓弥 宮田
Mais procurados
(20)
Enterpriseから見たXamarinの可能性
Enterpriseから見たXamarinの可能性
JXUG ハンズオンもくもく会
JXUG ハンズオンもくもく会
JXUGC 13 東京 はじめに
JXUGC 13 東京 はじめに
Xamarin 実戦投入時に気をつけたいことあれこれ
Xamarin 実戦投入時に気をつけたいことあれこれ
Xamarin.forms実践投入してみて
Xamarin.forms実践投入してみて
AR(拡張現実)アプリ+位置情報の事例紹介と導入ポイント
AR(拡張現実)アプリ+位置情報の事例紹介と導入ポイント
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
Webフロントエンドエンジニアの戦い〜歴史と現在、そして未来
Webフロントエンドエンジニアの戦い〜歴史と現在、そして未来
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
第1回 Japan Xamarin User Group Conference - Xamarin 概要
第1回 Japan Xamarin User Group Conference - Xamarin 概要
シルバーウィークにfacebookアプリを作成した
シルバーウィークにfacebookアプリを作成した
Xamarin の特徴と開発手法概要
Xamarin の特徴と開発手法概要
Xamarin開発環境の選択
Xamarin開発環境の選択
Xamarin 実戦投入時の留意点再確認
Xamarin 実戦投入時の留意点再確認
Xamarin概要と活用方法
Xamarin概要と活用方法
Onsen UIが目指すもの
Onsen UIが目指すもの
20分でできる!Xamarin.Forms入門
20分でできる!Xamarin.Forms入門
Xamarin を使用したC# によるモバイルアプリ作成
Xamarin を使用したC# によるモバイルアプリ作成
Xamarin を使うとどんなことができるの?
Xamarin を使うとどんなことができるの?
世界のMaaS事例から学ぶ MaaS事業開発の可能性について
世界のMaaS事例から学ぶ MaaS事業開発の可能性について
Destaque
Mc cleary2009 o-ensino_de_lngua_estrangeira_e_a_questo_da_diversidade
Mc cleary2009 o-ensino_de_lngua_estrangeira_e_a_questo_da_diversidade
Lulubell Chan
裁判公開原則と知る権利
裁判公開原則と知る権利
shimashi-ma
Melnake CV
Melnake CV
Mohammed Elnaker
Reflexivo.teórico ed. infantil
Reflexivo.teórico ed. infantil
Maria Silva Reis
Jury Take Off! 1st round
Jury Take Off! 1st round
Lucia Garcia
AWMA_Brown_Bag_Flyer_May15
AWMA_Brown_Bag_Flyer_May15
Michelle M. Sosa, MBA
Destaque
(6)
Mc cleary2009 o-ensino_de_lngua_estrangeira_e_a_questo_da_diversidade
Mc cleary2009 o-ensino_de_lngua_estrangeira_e_a_questo_da_diversidade
裁判公開原則と知る権利
裁判公開原則と知る権利
Melnake CV
Melnake CV
Reflexivo.teórico ed. infantil
Reflexivo.teórico ed. infantil
Jury Take Off! 1st round
Jury Take Off! 1st round
AWMA_Brown_Bag_Flyer_May15
AWMA_Brown_Bag_Flyer_May15
Semelhante a 11月12日セミナー資料[pdf]
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
xyz corporation
20190517_モバイルアーキテクチャを決定する際の観点
20190517_モバイルアーキテクチャを決定する際の観点
Takahito Miyamoto
JAWS-UG函館 S3とCloudFrontを利用してWebサイトの性能向上
JAWS-UG函館 S3とCloudFrontを利用してWebサイトの性能向上
Hiroshi Koyama
大学サイトにおけるマルチデバイス対応のポイント + HTML5 CMS - Web Meister
大学サイトにおけるマルチデバイス対応のポイント + HTML5 CMS - Web Meister
xyz corporation
【Glide活用】ノーコードではじめるビジネスアプリ講座
【Glide活用】ノーコードではじめるビジネスアプリ講座
Kazuhiro Takada
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
Naoki Yamada
SORACOM Discovery2019 H1新規事業立上げを支援するソラコムチームの活動とユーザー事例
SORACOM Discovery2019 H1新規事業立上げを支援するソラコムチームの活動とユーザー事例
SORACOM,INC
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
BPStudy#101発表資料
BPStudy#101発表資料
Toyohisa Tanaka
IBMクラウドではじめる簡単ECサイト
IBMクラウドではじめる簡単ECサイト
Atsumori Sasaki
ウェブアクセシビリティチェックツール開発者の頭ん中
ウェブアクセシビリティチェックツール開発者の頭ん中
純生 野田
20111203 忘年会・交流会LT_糟谷さん資料
20111203 忘年会・交流会LT_糟谷さん資料
WebSig24/7
スマートフォンサイト構成書作成 超入門編
スマートフォンサイト構成書作成 超入門編
Satomi ENOMOTO
GaiaX_クラウドソーシング活用事例
GaiaX_クラウドソーシング活用事例
Sanako Koufukata
第14回SIA例会プレゼン資料
第14回SIA例会プレゼン資料
Tae Yoshida
Social Change 〜 ソフトウェア開発者が経営者になるまでと、これからの戦略
Social Change 〜 ソフトウェア開発者が経営者になるまでと、これからの戦略
Yoshihito Kuranuki
制作者にとってのWeb解析
制作者にとってのWeb解析
Makoto Shimizu
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
iPhone、Android両対応アプリ開発講座 概論
iPhone、Android両対応アプリ開発講座 概論
Takakuni Furukawa
スマートフォン対応のウェブをつくろう
スマートフォン対応のウェブをつくろう
Takashi Maekawa
Semelhante a 11月12日セミナー資料[pdf]
(20)
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
20190517_モバイルアーキテクチャを決定する際の観点
20190517_モバイルアーキテクチャを決定する際の観点
JAWS-UG函館 S3とCloudFrontを利用してWebサイトの性能向上
JAWS-UG函館 S3とCloudFrontを利用してWebサイトの性能向上
大学サイトにおけるマルチデバイス対応のポイント + HTML5 CMS - Web Meister
大学サイトにおけるマルチデバイス対応のポイント + HTML5 CMS - Web Meister
【Glide活用】ノーコードではじめるビジネスアプリ講座
【Glide活用】ノーコードではじめるビジネスアプリ講座
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
SORACOM Discovery2019 H1新規事業立上げを支援するソラコムチームの活動とユーザー事例
SORACOM Discovery2019 H1新規事業立上げを支援するソラコムチームの活動とユーザー事例
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
BPStudy#101発表資料
BPStudy#101発表資料
IBMクラウドではじめる簡単ECサイト
IBMクラウドではじめる簡単ECサイト
ウェブアクセシビリティチェックツール開発者の頭ん中
ウェブアクセシビリティチェックツール開発者の頭ん中
20111203 忘年会・交流会LT_糟谷さん資料
20111203 忘年会・交流会LT_糟谷さん資料
スマートフォンサイト構成書作成 超入門編
スマートフォンサイト構成書作成 超入門編
GaiaX_クラウドソーシング活用事例
GaiaX_クラウドソーシング活用事例
第14回SIA例会プレゼン資料
第14回SIA例会プレゼン資料
Social Change 〜 ソフトウェア開発者が経営者になるまでと、これからの戦略
Social Change 〜 ソフトウェア開発者が経営者になるまでと、これからの戦略
制作者にとってのWeb解析
制作者にとってのWeb解析
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
iPhone、Android両対応アプリ開発講座 概論
iPhone、Android両対応アプリ開発講座 概論
スマートフォン対応のウェブをつくろう
スマートフォン対応のウェブをつくろう
11月12日セミナー資料[pdf]
1.
2013.11.12 スマホ対応 !? レスポンシブWebデザイン セミナー 2013年11月12日 株式会社クライマークス 加藤
俊司 セミナー資料
2.
まず、自己紹介をさせてください Copyright © 2013
Climarks Inc. All Rights Reserved. 1
3.
自己紹介 加藤 俊司 株式会社クライマークス 取締役クリエイティブ部部長/チーフ・デザイナー Copyright ©
2013 Climarks Inc. All Rights Reserved. 2
4.
自己紹介 株式会社クライマークス ① Webインテグレーション事業 ② Webサービス事業 Copyright
© 2013 Climarks Inc. All Rights Reserved. 3
5.
自己紹介 ① Webインテグレーション事業 大手企業を中心に、Web戦略策定やWebサイト構築の お手伝いをしています。 Copyright ©
2013 Climarks Inc. All Rights Reserved. 4
6.
自己紹介 ② Webサービス事業 スマホサイト作成サービス「smart4me」 スマート・フォー・ミー 無料版 ビジネス版 ベーシック ビジネス版 プロ スマホサイトが10ページまで 無料で公開! 30,000 サイト突破! ページ数無制限! 独自ドメインで公開できる 4,980円/月 作ったサイトをダウンロード 公開するサーバーは自由! 2万円/月 Copyright ©
2013 Climarks Inc. All Rights Reserved. 5
7.
自己紹介 http://smart4me.net/ スマホサイト作成 検索 Copyright © 2013
Climarks Inc. All Rights Reserved. 6
8.
自己紹介 個人活動 ① ギャラリーサイト運営 ② 書籍・雑誌への執筆 Copyright
© 2013 Climarks Inc. All Rights Reserved. 7
9.
自己紹介 ① ギャラリーサイト運営 レスポンシブWebデザインの ギャラリーサイト 「Responsive Web
Design JP」 Copyright © 2013 Climarks Inc. All Rights Reserved. 8
10.
自己紹介 http://responsive-jp.com/ レスポンシブ 検索 Copyright © 2013
Climarks Inc. All Rights Reserved. 9
11.
自己紹介 ② 書籍・雑誌への執筆 ●「レスポンシブWebデザイン テクニックブック」(MdN) ●「Web Designing
2011年9月号」 (マイコミ) ●「Web Designing 2013年3月号」 (マイコミ) Copyright © 2013 Climarks Inc. All Rights Reserved. 10
12.
ここから本題 Copyright © 2013
Climarks Inc. All Rights Reserved. 11
13.
本日のゴール ① レスポンシブWebデザインとは何かを知る ② カラーミーショップの レスポンシブ
Webデザインテンプレートの メリットを知る Copyright © 2013 Climarks Inc. All Rights Reserved. 12
14.
目次 1 スマホサイトがなぜ必要なの? 2 スマホに対応する5つの方法とは? 3 レスポンシブWebデザインとは? 4 レスポンシブWebデザインは何がいいの? 5 レスポンシブWebデザインは効果があるの? 6 レスポンシブWebデザインに向いているサイトとは? 7 カラーミーショップのレスポンシブWebデザイン テンプレートは何がいいの? Copyright © 2013
Climarks Inc. All Rights Reserved. 13
15.
スマホサイトがなぜ必要なの? Copyright © 2013
Climarks Inc. All Rights Reserved. 14
16.
スマホサイトがなぜ必要なの? スマホの契約数は、来年にはガラケーを超える見込み。 スマートフォン契約数の推移・予測(2013年3月予測) (万件) 12,000 10,000 スマートフォン 契約数 8,000 6,000 フィーチャーフォン 契約数 4,000 2,000 0 2008 2009 2010 2011 2012 2013 2014 2015
2016 2017 (年度末) 【出典】MM総研「スマートフォン市場規模の推移・予測(2013年3月)」 Copyright © 2013 Climarks Inc. All Rights Reserved. 15
17.
スマホサイトがなぜ必要なの? BtoCサイトは、スマホからのアクセスが 5割超の場合も。 BtoCサイトのスマホからのアクセスの割合 55% 35% 37% 54% エステサロン 整体院 ハウスクリーニング インテリア情報 【出典】集客チャンネル(エステサロン、整体院、ハウスクリーニングのみ) Copyright © 2013
Climarks Inc. All Rights Reserved. 16
18.
スマホサイトがなぜ必要なの? 楽天もZOZOも売上の 4割がスマホから。 スマホ売上比率 スマホ出荷比率 60% 60% 40% 40% 20% 20% 0% 0% 2011末 2012末 2013末 【出典】2013年7月楽天カンファレンス発表 2012.3 2013.3 【出典】スタートトゥデイ2014年度第一四半期決算短信 説明会資料 Copyright ©
2013 Climarks Inc. All Rights Reserved. 17
19.
スマホサイトがなぜ必要なの? 倍に。 スマホEC市場は、2015年には2013年の (兆円) 3 2兆6,677億円 2兆413億円 2 1兆3,469億円 1 0 8,450億円 2013 2014 2015 (見込) 2012 (予測) (予測) 【出典】国内スマートフォン・コマース市場規模予測(矢野経済研究所) Copyright © 2013
Climarks Inc. All Rights Reserved. 18
20.
スマホサイトがなぜ必要なの? すでに ECサイトのスマホ対応は 売上を大きく左右する段階 Copyright © 2013
Climarks Inc. All Rights Reserved. 19
21.
スマホサイトがなぜ必要なの? スマホ対応しない場合 テキストが読みにくい リンクが押しにくい
フォームが入力しにくい 離脱につながる! Copyright © 2013 Climarks Inc. All Rights Reserved. 20
22.
では、どうやって対応するの? Copyright © 2013
Climarks Inc. All Rights Reserved. 21
23.
スマホに対応する5つの方法とは? Copyright © 2013
Climarks Inc. All Rights Reserved. 22
24.
スマホに対応する5つの方法とは? Webサイトをスマホに対応する方法は、大きく分けて5種類。 ① イチから作る ② スマホサイト簡易作成ツール ③
スマホサイト変換コンバーター ④ システムでPCサイトとスマホサイトを出し分け ⑤ レスポンシブWebデザイン Copyright © 2013 Climarks Inc. All Rights Reserved. 23
25.
スマホに対応する5つの方法とは? ① イチから作る ② スマホサイト簡易作成ツール ③
スマホサイト変換コンバーター ④ システムでPCサイトとスマホサイトを出し分け ⑤ レスポンシブWebデザイン Copyright © 2013 Climarks Inc. All Rights Reserved. 24
26.
スマホに対応する5つの方法とは? ① イチから作る メリット デメリット スマホ専用のとことんこだわったサイトが できる
制作や運用が大変 コストが高い Copyright © 2013 Climarks Inc. All Rights Reserved. 25
27.
スマホに対応する5つの方法とは? ① イチから作る ② スマホサイト簡易作成ツール ③
スマホサイト変換コンバーター ④ システムでPCサイトとスマホサイトを出し分け ⑤ レスポンシブWebデザイン Copyright © 2013 Climarks Inc. All Rights Reserved. 26
28.
スマホに対応する5つの方法とは? ② スマホサイト簡易作成ツール (例)smart4meなど コンテンツを入力 出力 管理画面 Copyright ©
2013 Climarks Inc. All Rights Reserved. 27
29.
スマホに対応する5つの方法とは? ② スマホサイト簡易作成ツール メリット 素早く簡単にスマホサイトを作成でき、 運用も楽
コストが安い デメリット 既存のPCサイトとコンテンツを自動的に 共有することはできない PC用/スマホ用で同じURLにできない Copyright © 2013 Climarks Inc. All Rights Reserved. 28
30.
スマホに対応する5つの方法とは? 同じURLだと何がいいの? SEOに有利。 → 異なるURLの場合、重複コンテンツとみなされる!?
Twitter/Facebookなどで共有しやすい。 → 異なるURLの場合、 ① 共有数が分散!? ② スマホ用のURLを共有すると、PCでアクセスして も、スマホ用の画面が表示!? Copyright © 2013 Climarks Inc. All Rights Reserved. 29
31.
スマホに対応する5つの方法とは? ① イチから作る ② スマホサイト簡易作成ツール ③
スマホサイト変換コンバーター ④ システムでPCサイトとスマホサイトを出し分け ⑤ レスポンシブWebデザイン Copyright © 2013 Climarks Inc. All Rights Reserved. 30
32.
スマホに対応する5つの方法とは? ③ スマホサイト変換コンバーター (例)Mobifyなど アクセスしてきた 端末に応じて変換 変換システム 既存のPCサイト Copyright ©
2013 Climarks Inc. All Rights Reserved. 31
33.
スマホに対応する5つの方法とは? ③ スマホサイト変換コンバーター 既にPCサイトがあれば、スマホ対応できる メリット
PC用/スマホ用とでコンテンツを共用でき、 運用も楽 PC用/スマホ用とで同じURLにできる デメリット 導入までに時間がかかる コストが高い 大規模サイト向き Copyright © 2013 Climarks Inc. All Rights Reserved. 32
34.
スマホに対応する5つの方法とは? ① イチから作る ② スマホサイト簡易作成ツール ③
スマホサイト変換コンバーター ④ システムでPCサイトとスマホサイトを出し分け ⑤ レスポンシブWebデザイン Copyright © 2013 Climarks Inc. All Rights Reserved. 33
35.
スマホに対応する5つの方法とは? ④ システムでPCサイトとスマホサイトを出し分け (例)カラーミーショップ、その他CMS コンテンツを入力 コンテンツ 生成システム 管理画面 アクセスしてきた 端末に応じて変換 Copyright ©
2013 Climarks Inc. All Rights Reserved. 34
36.
スマホに対応する5つの方法とは? ④ システムでPCサイトとスマホサイトを出し分け メリット PC用/スマホ用とでコンテンツを共用でき、 運用も楽
PC用/スマホ用とで同じURLにできる デメリット PC用/スマホ用の2種類のテンプレートが 必要で、導入・管理が面倒 Copyright © 2013 Climarks Inc. All Rights Reserved. 35
37.
スマホに対応する5つの方法とは? ① イチから作る ② スマホサイト簡易作成ツール ③
スマホサイト変換コンバーター ④ システムでPCサイトとスマホサイトを出し分け ⑤ レスポンシブWebデザイン Copyright © 2013 Climarks Inc. All Rights Reserved. 36
38.
ここでやっと レスポンシブWebデザイン登場! Copyright © 2013
Climarks Inc. All Rights Reserved. 37
39.
レスポンシブWebデザインとは? Copyright © 2013
Climarks Inc. All Rights Reserved. 38
40.
レスポンシブWebデザインとは? 1つのサイトを、画面幅に応じてレイアウトを変えることで、 PC/スマホに対応させる技術。 (例)株式会社グローバル ブレイン スクエア(http://www.gb-s.com/) Copyright
© 2013 Climarks Inc. All Rights Reserved. 39
41.
レスポンシブWebデザインとは? 今までの方法 ① PCサイトとスマホサイトを、 ②
PCサイトとスマホサイトを、 端末を判別して転送。 端末を判別して出し分け。 sample.com m.sample.com 端末を判別して 転送 sample.com 端末を判別して 出し分け Copyright © 2013 Climarks Inc. All Rights Reserved. 40
42.
レスポンシブWebデザインとは? 2010年、米国の開発者、イーサン・マルコッテ氏が提唱。 【出典】イーサン・マルコッテ氏による「A List Apart」の記事「Responsive
Web Design」(2010.5.25) Copyright © 2013 Climarks Inc. All Rights Reserved. 41
43.
レスポンシブWebデザインとは? CSS3という新規格によって実現。 レスポンシブWebデザインを実現する3つの技術 ① メディアクエリ(Media Queries) 画面の幅などに応じて、レイアウトを変更すること ができるCSS3の機能 ②
フルードグリッド(Fluid Grid) 画面の幅に合わせ、レイアウトを変えることなく グリッド幅のみを可変させる手法 ③ フルードイメージ(Fluid Image) 画面の幅に合わせ、画像サイズを可変させる手法 Copyright © 2013 Climarks Inc. All Rights Reserved. 42
44.
レスポンシブWebデザインとは? 日本でも、2012年頃からレスポンシブWebデザインを採用 したサイトが急増。 「Responsive Web Design
JP」の掲載サイト数 (サイト数) 400 300 200 100 0 5 6 2012 7 8 9 10 11 12 1 2 2013 3 4 5 6 7 8 9 10 Copyright © 2013 Climarks Inc. All Rights Reserved. 43
45.
レスポンシブWebデザインとは? ECサイトでの採用も増えてきた。 その他のECサイトの例 ■ Zound Industries
Tokyo http://zoundtokyo.com/ ■ セレクトスクエア http://www.selectsquare.com/ ■ AGATHA E-SHOP http://www.agatha.jp/ ■ エアアジア・ゴー https://www.airasiago.com/ja-jp/ ■ GALAPAGOS STORE http://galapagosstore.com/ ■ ホテルオークラ東京ベイ http://www.okuratokyobay.net/ ■ THE STABLES http://thestables.jp/ ■ LADER http://www.lader.jp/ (例)ミンネ(http://minne.com/) Copyright © 2013 Climarks Inc. All Rights Reserved. 44
46.
レスポンシブWebデザインは 何がいいの? Copyright © 2013
Climarks Inc. All Rights Reserved. 45
47.
レスポンシブWebデザインは何がいいの? メリット PC用/スマホ用とでコンテンツやデザイ ンを完全に共用できる PC用/スマホ用とで同じURLにできる
SEOに有利(Googleも推奨) 一からつくると設計が大変 デメリット スマホでもPC用のデータを読み込むので、 ページが長くなったり、表示が遅くなる 利用シーンに応じてPC用/スマホ用のコン テンツや設計を分けたい場合には向かない Copyright © 2013 Climarks Inc. All Rights Reserved. 46
48.
レスポンシブWebデザインは何がいいの? なぜSEOに有利なの?(Google推奨なの?) Googleからみたら、URLが同じでソースも1つなので、 1回クロールすればよく、効率的。 → 出し分けや、別々のURLを使用している場合、 別ページがあることを伝える必要があり、設定が煩雑。 【注意】
レスポンシブWebデザインにすると、 検索順位が上がるわけではない。 下がるリスクを減らせるということ。 Copyright © 2013 Climarks Inc. All Rights Reserved. 47
49.
レスポンシブWebデザインは何がいいの? レスポンシブWebデザインはページが長くなる!? ユーザーはPCサイトの簡略版は見たくない。 ユーザーはスマホでのスクロールに抵抗がない。
スマホサイトでの頻繁なページ移動は離脱につながる。 1ページが長くても、PCサイトと同じ情報が 見られるスマホサイトが好まれる。 Copyright © 2013 Climarks Inc. All Rights Reserved. 48
50.
レスポンシブWebデザインは 効果があるの? Copyright © 2013
Climarks Inc. All Rights Reserved. 49
51.
レスポンシブWebデザインは効果があるの? ① TIME(ニュース誌) モバイルユーザーが
23% 増加 モバイルユーザーの直帰率は 26% 減少 【出典】LukeW「Data Monday: Impact of Responsive Designs」 Copyright © 2013 Climarks Inc. All Rights Reserved. 50
52.
レスポンシブWebデザインは効果があるの? ② Skinny Ties(ネクタイ販売)
iPhoneでの収入が 377.6% 増加 iPhoneでのコンバージョンが 71.9% 増加 【出典】LukeW「Data Monday: Impact of Responsive Designs」 Copyright © 2013 Climarks Inc. All Rights Reserved. 51
53.
レスポンシブWebデザインは効果があるの? ③ Fathead(壁用ステッカー・シール販売) モバイルでの収入が
538% 増加 モバイルでのコンバージョンが 90% 増加 【出典】LukeW「Data Monday: Impact of Responsive Designs」 Copyright © 2013 Climarks Inc. All Rights Reserved. 52
54.
レスポンシブWebデザインに 向いているサイトとは? Copyright © 2013
Climarks Inc. All Rights Reserved. 53
55.
レスポンシブWebデザインに向いているサイトとは? 向いている サイト PCとスマホとでコンテンツを完全に共用 したいサイト 例: 企業サイト、製品サイト、ニュースサイト、 ブログ、ECサイト
大きな画像を多用したサイト 例: キャンペーンサイト 向いていない サイト PCやスマホの利用シーンに応じて異なる コンテンツにした方がよいサイト 例: 飲食/ホテル/テーマパークのサイト スマホユーザーに特化したサイト Copyright © 2013 Climarks Inc. All Rights Reserved. 54
56.
カラーミーショップのレスポンシブ Webデザインテンプレートは何が いいの? Copyright © 2013
Climarks Inc. All Rights Reserved. 55
57.
カラーミーショップのレスポンシブWebデザインテンプレートは何がいいの? カラーミーショップのレスポンシブWebデザインテンプレート Copyright © 2013
Climarks Inc. All Rights Reserved. 56
58.
カラーミーショップのレスポンシブWebデザインテンプレートは何がいいの? 従来のテンプレート レスポンシブテンプレート PC用とスマホ用とでデザ インの統一感がないもの が多い。 ワンテンプレートでPCに もスマホにも対応するの で、デザインも統一。
タブレットに未対応。 タブレットにも対応 別々に設定を行う必要が あり、導入や管理が面倒。 別々に設定を行う必要が ないので、管理が簡単。 本来、一から作ると大変 だが、テンプレート化さ れているので、導入も楽。 Copyright © 2013 Climarks Inc. All Rights Reserved. 57
59.
まとめ Copyright © 2013
Climarks Inc. All Rights Reserved. 58
60.
まとめ すでにECのスマホ対応は売上を大きく左右する段階。 スマホ対応方法にはいろいろあり、レスポンシブWeb デザインはその一つ。
それぞれの方法にメリット/デメリットがある。 レスポンシブWebデザインにもメリット/デメリット があるが、カラーミーショップのテンプレートには、 メリットが多い。 Copyright © 2013 Climarks Inc. All Rights Reserved. 59
61.
ご清聴ありがとうございました Copyright © 2013
Climarks Inc. All Rights Reserved. 60
Baixar agora