wcaf seminar vol.5に参加してきたっ
参加なうなう. 随時レポート追加するよ
参加してきました.
1/15 福井県産業情報センターで開催.
vol.3以来の参戦>< そういえば僕にとっては新年1発目の勉強会でした.
とりああえず当日書いた,今回あった3つのセッションのまとめ.
はじめようGoogleAnalytics -WEBサイトの分析方法 -赤坂さん
GoogleAnalyticsとは
http://www.google.com/intl/ja/analytics/
無料で高機能なアクセス解析ツール
"Webサイトの健康診断"ができる
Analysticsで見れる情報
ユーザーがサイトに訪れるまでの流れ
コンバージョン(購入手続き)までの流れ
googleAnalysticで参考にするべき,着目すべき項目
ランディングページ:: サイトに訪問した人がはじめて見るページ
直帰率とは:: サイトに訪問してから,他のどのページにもアクセスせずにサイトを去った人の割合
直帰数が多いページを改善すると良い
対策::
- コンテンツの見直し
- リンク強調
- デザインの刷新
- ページランキング
対策::
- 該当ページのコンテンツ強化
- コンバージョンへの誘導強化
- 下層ページの離脱率
下層ページとは:: ランディングページ以外のページ
離脱率とは:: サイトのあるページから別のサイトへの移動 ブラウザを閉じる等
離脱率...単純にそのページから離脱された率.
下層ページの離脱率を下げる対策::
- リンク前後のギャップを甲斐性
- 次のページへの誘導を強化
GoogleAnalyticsでできること まとめ
集計
集計データから原因を仮説
それを改善
モバイル版あるらしい
このブログにも設定してみた><
反映は24時間後らしいですが楽しみですです
CSS3を用いたスマートフォン向けWebサイト構築 -高嶋さん
色々な種類のデバイスに対応する方法の紹介
スマートフォン向けwebサイトの特徴
デバイスごとに表示の切り替え方法
スマートフォンで使えるCSS3の機能
まとめ
スマートフォン向けwebサイトの特徴
最新のブラウザに対応
ブラウザの種類
デバイスサイズの違い
- ブラウザ
- ブラウザサイズの違い
対応::
デバイスごとにページを切り替え
webサーバ, webアプリケーション
jsで対応
ウィンドウサイズごとにレイアウトを切り替える
MediaQueries
JavaScript
MediaQueriesについて詳しく説明
- MediaQueriesとは
- CSS3の仕様の違い
ウィンドウサイズとかどうにかできる
Media Queriesの前に
Media types
リンクタグ内のメディアプロパティで対応するcssを洗濯
使い方2つ
- 1つ目html内に書く
linkタグ内に media="screen and (max-width: XXpx)" href="small.css"
media="screen and (max-width: XXXpx)" href="large.css"
- 2つ目cssに書く
css @import url("hoge.css") screen and (max-width: XXpx);
css @media
@media screen and (max-width: 480) {
.column {
float: none;
}
}
MediaFeaturesに色々設定タグあり.
ViewPortをいじってもどうにかなる
ViewPort ::ウィンドウ内の実際に描画される領域
- CSS3のメリット
制作/メンテナンスの時間短縮
画像,js,flashが減る
ページパフォーマンスがよくなる
ページサイズが小さく.
httpのリクエスト数が減る
CSS3demo
http://jsdo.it/taketo1113/codes
透明度も設定できる色指定 RGBA(red,green,blue,alpha)
角丸 Border-radius
グラデーション Gradient
ドロップシャドウ box-shadow
テキストシャドウ text-shadow
アニメーション RGBA, box-shado, border
CSS3Generator使えば楽だよ
http://css3generator.com/
まとめ
Media Queriesでブラウザサイズ対応しましょう
HTML5/css3がんがん使おうぜっ
楽しくwebするワークハック -スーパーデザイナー(佐々木)さん
Workhack
workhack == lifehack
- あなたにとってwebとは何ですか
・楽しい
・仕事
一日の大半は仕事.
仕事が楽しくないと人生が楽しくない?!
楽しむ為にwebの楽しみ方を紹介するぜ
web系勉強会に行こうぜ
webな知識を取得できるぜ.
人の働き方が知れるぜ.
モチベーション維持できるぜ.
- googleHackatonが楽しかったぜ.
仕事と関係ないところで楽しくweb制作して面白さを実感しようぜ.
プログラマーだけじゃなく,デザイナーも来ようぜ.
デザイナーが俺様だけだったので大活躍だったぜ.
第二回GAE Hackatonが3月5日と3月12日あるから参加しようぜ.
http://goo.gl/01tZa
- 勉強会って人の話聴くだけ?
発表もしようぜ.
発表するために勉強したりでいい経験になるぜ.
スキル交換しよう
.fukui来ようぜ.
Kanazawa.js行こうぜ.(2/5にあるよ 金沢にて)
- 自分が知ってることはみんな知ってる?
そんな事はないぜ.
当たり前だと思ってる事が知りたい事だぜ.
どんどん交流して知識交換して幸せになろうぜ
感想とか
どれも全部話の内容が理解出来て,役に立つ濃い話だったと感じました.
GoogleAnalyticsは,マーケティングにうまく活用するための商用的な話だったんですが,自分のサイトやブログを持ってる方にとっては十分それに生かす事のできる有用な情報だと思います。
実際の画面を見せつつ,解析データからわかる事,それに対する状況の判断と具体的な対策までしっかり詰められたプレゼンだったので役に立つかなり良い勉強になりました><
時間があったならもっと突っ込んだ話も聞きたいところ.
このブログにも早速導入してみましたよ;) (後述)
スマートフォン向けのweb構築の話は,個人的にすごい気になってた端末ごとの画面サイズ/解像度の違いにどう対応するか聞けたのでそれだけでも大収穫.
デモ交えたCSS3の紹介は良いですねXD
ただPCのブラウザ毎対応より面倒なんじゃねーかとか思ったんですがどうなんでしょう><
シェアが高い機種から随時対応しとくといいのかなぁ.ここら辺のうまい対応法が知りたい.
最後,我らがスーパーデザイナー様のWorkhackの話.
仕事を,趣味を,生き方を楽しくするための壮大でありがたい内容でした;)
勉強会をどんどん広げようという熱い想いが伝わってきましたよ.
色々出向いて,色々発表して北陸の勉強会をもっともっと盛り上げていきましょー><