SlideShare une entreprise Scribd logo
1  sur  42
Télécharger pour lire hors ligne
このところのWeb制作事情
前川昌幸
2013-06-23 第25回オープンラボ岡山
自己紹介
• @maepon
• 株式会社 スクイズ研究所 所属
• マークアップ/フロントエンドエンジニア
okayama-js
岡山でCSS3を学ぼう会
はじめに
最近のWeb制作事情をテーマに?
Web閲覧環境の変化
スマートフォン?タブレット?
Fragment!
2013年6月
http://japanese.engadget.com/2013/05/01/android-jelly-bean-4-1-ics-4-0-55-9/
Fragment!!
2012年8月
http://opensignal.com/reports/fragmentation.php
Fragment!!!
2012年8月
http://opensignal.com/reports/fragmentation.php
http://bradfrostweb.com/blog/post/this-is-the-web/
何で見られるかわかったもんじゃない
長谷川恭久 氏(@yhassy)
PCはもはや過去のデバイス
黒ベンツ先生
(大月茂樹:@ohtsuki2843)
求められるのは
『最適化』ではなく『汎用化』
で、どうすんのよ?
これまでは画面全体を作り上げて実装
既存のデバイスや未知のデバイスを
全て想定するの?できるの?
サイトのルック&フィールから
パーツを作り組み上げる
http://www.starbucks.com/static/reference/styleguide/
組み上げながらデザイン
http://trentwalton.com/2011/07/14/content-choreography/
話変わりまして…
Webサイトはサクッと作ろう
http://expo.getbootstrap.com/
スタートアップはstaticでサクサクと
Amazon S3でお安く始める?
ローカルで生成してサクッとデプロイ
それぞれについてはまた解説します
(リクエストあれば…)
また話変わりまして…
CMSに求められること
http://ogp.me/
The Open Graph protocol
リッチスニペット
http://www.schema.org/
Twitter Cards
https://dev.twitter.com/docs/cards
コンテンツの管理
↓
コンテンツがどう利用されるかの管理
複雑化していく入力をどう運用していくか
システム・UI・運用それぞれの連携が重要に
まとめ
バラバラと話しましたが…
近々Web制作は
テーブル→CSSレイアウト以上の
大きな変化が起きそう
まとめ
制作には『対応力』が求められる時代に
#olojpの皆さん、Webに乗り込む準備はいかが?
ありがとうございました
Twitter: @maepon

Contenu connexe

Similaire à このところのWeb制作事情

Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況 Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
Masakazu Muraoka
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Toshiaki Maki
 
ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03
Daiki Maekawa
 
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
 
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきことメンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
Mitsuru Ogawa
 
女子美術大学メディアアート演習ⅡB 2013 Spring 第1回
女子美術大学メディアアート演習ⅡB 2013 Spring 第1回 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回
女子美術大学メディアアート演習ⅡB 2013 Spring 第1回
Satoru Tokuhisa
 

Similaire à このところのWeb制作事情 (20)

雲にのって札幌まで来た話
雲にのって札幌まで来た話雲にのって札幌まで来た話
雲にのって札幌まで来た話
 
SappoRo.R #3 LT: Shiny by RStudio
SappoRo.R #3 LT: Shiny by RStudioSappoRo.R #3 LT: Shiny by RStudio
SappoRo.R #3 LT: Shiny by RStudio
 
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況 Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
 
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
 
IT業界とソフトウェア技術者を取り巻く今日の様相と荒波の将来への船出
IT業界とソフトウェア技術者を取り巻く今日の様相と荒波の将来への船出IT業界とソフトウェア技術者を取り巻く今日の様相と荒波の将来への船出
IT業界とソフトウェア技術者を取り巻く今日の様相と荒波の将来への船出
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
 
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
 
世界最安値!? 鯖江産コンピューターIchigoJam 〜福井技術者の集い その2〜
世界最安値!? 鯖江産コンピューターIchigoJam 〜福井技術者の集い その2〜世界最安値!? 鯖江産コンピューターIchigoJam 〜福井技術者の集い その2〜
世界最安値!? 鯖江産コンピューターIchigoJam 〜福井技術者の集い その2〜
 
最近のブラウザ状況
最近のブラウザ状況最近のブラウザ状況
最近のブラウザ状況
 
ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03
 
LL祭り2013資料
LL祭り2013資料LL祭り2013資料
LL祭り2013資料
 
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
 
JSUG勉強会 2018年その5 Spring I/O 報告会
JSUG勉強会 2018年その5 Spring I/O 報告会JSUG勉強会 2018年その5 Spring I/O 報告会
JSUG勉強会 2018年その5 Spring I/O 報告会
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
Nodeにしましょう
 
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきことメンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
 
MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会
MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会
MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会
 
女子美術大学メディアアート演習ⅡB 2013 Spring 第1回
女子美術大学メディアアート演習ⅡB 2013 Spring 第1回 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回
女子美術大学メディアアート演習ⅡB 2013 Spring 第1回
 
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザインスマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
 
Angular2
Angular2Angular2
Angular2
 
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
 

Plus de Masayuki Maekawa

Text editor anywhereでtextareaもsublime text 2
Text editor anywhereでtextareaもsublime text 2Text editor anywhereでtextareaもsublime text 2
Text editor anywhereでtextareaもsublime text 2
Masayuki Maekawa
 

Plus de Masayuki Maekawa (10)

常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
 
自治体サイトのWordPressのメンテナンス
自治体サイトのWordPressのメンテナンス自治体サイトのWordPressのメンテナンス
自治体サイトのWordPressのメンテナンス
 
「セルフブランディング」という文脈で5年間を振り返ってみる5分間
「セルフブランディング」という文脈で5年間を振り返ってみる5分間「セルフブランディング」という文脈で5年間を振り返ってみる5分間
「セルフブランディング」という文脈で5年間を振り返ってみる5分間
 
実践 大都会式 プロトタイピング&フロントエンド 2014
実践 大都会式 プロトタイピング&フロントエンド 2014実践 大都会式 プロトタイピング&フロントエンド 2014
実践 大都会式 プロトタイピング&フロントエンド 2014
 
まえぽん式ダイエット
まえぽん式ダイエットまえぽん式ダイエット
まえぽん式ダイエット
 
Bootstrapカスタマイズ&ビルド!
Bootstrapカスタマイズ&ビルド!Bootstrapカスタマイズ&ビルド!
Bootstrapカスタマイズ&ビルド!
 
マルチデバイス対応のコーディング・マークアップのポイント
マルチデバイス対応のコーディング・マークアップのポイントマルチデバイス対応のコーディング・マークアップのポイント
マルチデバイス対応のコーディング・マークアップのポイント
 
Text editor anywhereでtextareaもsublime text 2
Text editor anywhereでtextareaもsublime text 2Text editor anywhereでtextareaもsublime text 2
Text editor anywhereでtextareaもsublime text 2
 
JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工
 
Windowsユーザーむけのツール紹介
Windowsユーザーむけのツール紹介Windowsユーザーむけのツール紹介
Windowsユーザーむけのツール紹介
 

Dernier

Dernier (11)

新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 

このところのWeb制作事情