itsukichang

フロントエンドが得意なエンジニア.ダーツと旅行とギターが好き

wcaf seminar vol.5に参加してきたっ

参加なうなう. 随時レポート追加するよ


参加してきました.
1/15 福井県産業情報センターで開催.


vol.3以来の参戦>< そういえば僕にとっては新年1発目の勉強会でした.


とりああえず当日書いた,今回あった3つのセッションのまとめ.

はじめようGoogleAnalytics -WEBサイトの分析方法 -赤坂さん

GoogleAnalyticsとは

http://www.google.com/intl/ja/analytics/
無料で高機能なアクセス解析ツール
"Webサイトの健康診断"ができる

設置方法
  1. Googleアカウント作成
  2. GoogleAnalysticsに登録
  3. 発効されたトラッキングコードをサイトに張り付け(全てのページ)
目標

アクセス解析は目標達成の為の手段
目標とは:: 会員増加,アクセス数up, 知名度up , 売り上げupを計る.
コンバージョンの最大化

Analysticsで見れる情報

ユーザーがサイトに訪れるまでの流れ
コンバージョン(購入手続き)までの流れ

googleAnalysticで参考にするべき,着目すべき項目

ランディングページ:: サイトに訪問した人がはじめて見るページ
直帰率とは:: サイトに訪問してから,他のどのページにもアクセスせずにサイトを去った人の割合
直帰数が多いページを改善すると良い

対策::

  1. コンテンツの見直し
  2. リンク強調
  3. デザインの刷新
  • ページランキング

対策::

  1. 該当ページのコンテンツ強化
  2. コンバージョンへの誘導強化
  • 下層ページの離脱率

下層ページとは:: ランディングページ以外のページ
離脱率とは:: サイトのあるページから別のサイトへの移動 ブラウザを閉じる等
離脱率...単純にそのページから離脱された率.

下層ページの離脱率を下げる対策::

  1. リンク前後のギャップを甲斐性
  2. 次のページへの誘導を強化
GoogleAnalyticsでできること まとめ

集計
集計データから原因を仮説
それを改善

モバイル版あるらしい


このブログにも設定してみた><
反映は24時間後らしいですが楽しみですです

CSS3を用いたスマートフォン向けWebサイト構築 -高嶋さん

色々な種類のデバイスに対応する方法の紹介

スマートフォン向けwebサイトの特徴
バイスごとに表示の切り替え方法
スマートフォンで使えるCSS3の機能
まとめ

スマートフォン向けwebサイトの特徴

最新のブラウザに対応
ブラウザの種類
バイスサイズの違い

  • ブラウザ

html5/css3が利用可能
webkitが主流

  • ブラウザサイズの違い

対応::
バイスごとにページを切り替え
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にあるよ 金沢にて)

  • 自分が知ってることはみんな知ってる?

そんな事はないぜ.
当たり前だと思ってる事が知りたい事だぜ.
どんどん交流して知識交換して幸せになろうぜ

まとめ

北陸は勉強会いっぱいあって恵まれてるぜ
勉強,交流,刺激 を勉強会で得ようぜ.

知りたい,向上したいはボーダレスだぜ
作る側が楽しまないとサイトは生まれないぜ.
モチベーション高く,楽しくWeb制作しようぜ!


Wcaf Seminar vol.6 (2011/4 /9) テーマ:スマートフォン
Android * iPhone * Windows Phone7


開催するぜっ

感想とか

どれも全部話の内容が理解出来て,役に立つ濃い話だったと感じました.
GoogleAnalyticsは,マーケティングにうまく活用するための商用的な話だったんですが,自分のサイトやブログを持ってる方にとっては十分それに生かす事のできる有用な情報だと思います。
実際の画面を見せつつ,解析データからわかる事,それに対する状況の判断と具体的な対策までしっかり詰められたプレゼンだったので役に立つかなり良い勉強になりました><
時間があったならもっと突っ込んだ話も聞きたいところ.
このブログにも早速導入してみましたよ;) (後述)


スマートフォン向けのweb構築の話は,個人的にすごい気になってた端末ごとの画面サイズ/解像度の違いにどう対応するか聞けたのでそれだけでも大収穫.
デモ交えたCSS3の紹介は良いですねXD
ただPCのブラウザ毎対応より面倒なんじゃねーかとか思ったんですがどうなんでしょう><
シェアが高い機種から随時対応しとくといいのかなぁ.ここら辺のうまい対応法が知りたい.


最後,我らがスーパーデザイナー様のWorkhackの話.
仕事を,趣味を,生き方を楽しくするための壮大でありがたい内容でした;)
勉強会をどんどん広げようという熱い想いが伝わってきましたよ.

色々出向いて,色々発表して北陸の勉強会をもっともっと盛り上げていきましょー><


集合写真とった!