Aggregator

日頃から気になるオンライン周辺の疑問を、広報・マーケティング担当者をはじめとするネットPR.JP読者に投げかけ、コミュニケーションを図る投稿型のミニアンケートをスタートしました。

結果は(1位)「Facebook (161件)90%」、(2位)「Twitter (78件)44%」、 (3位)「YouTube (72件)40％」、(4位)「Instagram (48件)27%」、(5位)「google+ (22件)12%」、(6位)「Pinterest (12件)7％」、(7位)「Linkedin (11件)6%」となりました。

（実施期間：2014年4月14日~5月2日、ネットPR.JP上で実施）

▼当初の予想通り、圧倒的な数でトップはFacebookとなりました。途中YouTubeがTwitterの数を上回る攻防を見せましたが、最終的にTwitterが2位にランクイン。BtoBのコミュニケーションツールとしてはまだまだFacebookが優勢でした。BtoC向けのオウンドメディアで実施したら、また違った結果が出たかもしれませんね。

記念すべき第一回目から179票とたくさんの方にご投票いただきました！
ご協力いただきました皆様ありがとうございます。次回もぜひご回答ください。

またネットPR.JPのFacebookでは、今後もネットPRに関する情報発信を行います。
気になった方はぜひ「いいね！」の登録をお願いいたします。

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップを公開します。

• （1）谷 拓樹さん（サイバーエージェント ）
• （2）柴田 大樹さん（unCopi）
• （3）黒野 明子さん（crema design）
• （4）森田 壮さん（Sou-Lab）
• （5）坂巻 翔大郎さん（ピクセルグリッド）、山田 敬美さん（ピクセルグリッド）
• （6）木村 哲朗さん（まぼろし）、西畑 一馬さん（まぼろし）
• （7）富田 梓さん（LINE）
• （8）高津戸 壮さん（ピクセルグリッド ）

出演者のひとり、森田 壮さんの執筆された『Web制作者のためのSassの教科書』もオススメします。

• Web制作者のためのSassの教科書 - 公式サポートサイト

追記：

各セッションの音声を追加しました。

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、木村 哲朗さん（まぼろし）、西畑 一馬さん（まぼろし）の『Sass/Compass よくあるトラブルと 解決方法・回避方法』セッションのスライドなどをシェアします。

• 音声

スライドはSlideShareにて公開されています。

メッセージ、補足（イベント終了直後にいただいたものを再掲）

みなさま、足下の悪い中お越しいただきまして誠にありがとうございます。

今回私たちは、実際の制作業務ではまりがちな落とし穴や、細かな要望に応えるためのTipsについてお話ししました。クライアントを含めて様々な職能の方に共有いただけるような内容を意識したのですがいかがでしたでしょうか。セッションで何ページか飛ばして進めた今回のスライドは、資料として今後のお仕事にご活用いただければ幸いです。

また、SassやCompassを足がかりとした「次」へのステップとして簡単にGruntの紹介もしました。デモでご覧いただいたとおり、様々なタスクを柔軟に組み合わせることができるので大変に便利なツールです。SassやCompassにある程度慣れてきたら、是非チャレンジしてみてください。Gruntについては、西畑のブログに入門記事が掲載されていますので是非ご覧ください。

http://blog.webcreativepark.net/2013/08/28-010250.html

# いただいた質問

Q. コンパイルするとカラーコードが色名になってしまいます。回避することはできないのでしょうか。

A.
Sassでは、変数にカラーコードを代入してそれを呼び出すと、コンパイル時に色名に変換（例：#f00 → red）してしまいます。手っ取り早い方法としては、変数に代入する際に文字列で指定することで回避が可能です。またそのようにして「色」を「文字列」として変数に代入した際は、呼び出す際にunquote関数を用います。以下に、変数の定義方法と呼び出し方の例を示します。

```
$keyColor: '#f00'; //カラーコードをクオーテーションで囲うことで、「色」ではなく「文字列」として代入する

.foo {
color: unquote($keyColor); //呼び出す際はunquote関数を使って呼び出す
}
```
ただしこの方法では、lightenやdarkenなどの色演算機能を使うことができなくなりますのでご注意ください。

Compassを使う場合はもう少し高度な回避方法があります。それはSass本来の機能を独自に上書きする方法です。詳しくは以下のURLに書かれています。少し難しい内容ではありますが、ご興味のある方はご覧ください。

http://blog.webcreativepark.net/2014/02/16-185913.html

Q. GruntではCompassみたいに保存時の即時反映があるのか気になりました。

A.
ファイルの更新をウォッチ（監視）するプラグインを使用すれば可能です。ウォッチプラグインでは「scssファイルが更新されたらsassのコンパイルする」などのタスクを定義することが可能です。セッションでは飛ばしてしまいましたが、資料には代表的なウォッチプラグインを掲載していますのでご確認ください。また、上記に挙げた西畑のブログではGruntによるウォッチの実現方法について具体的に解説していますので、是非ご覧いただければと存じます。

最後に宣伝

弊社で監修した『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール』という書籍が発売中です。Sass/CompassやGruntなど、昨今の現場で必要とされているWeb制作の技術についてまとめた一冊となっておりますので、ご興味のある方は是非お手にとってご覧ください。

また、この書籍の発売を記念したイベントを3/8（土）に開催します。本書に書かれている内容について著者自らが掘り下げてお話しするイベントとなっておりますので、お時間のある方は是非ご参加ください。

以上、ありがとうございました！

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、高津戸 壮さん（ピクセルグリッド ）の『HTMLテンプレートの設計』セッションのスライドなどをシェアします。

• スライド、ダウンロード
  ※ローカルでスライドを確認するためには、apache等のサーバーを立て、index.htmlを参照してください。Gruntを導入している場合、`npm install`後、`grunt serve`でサーバーが立ち上がります
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

長時間のセミナーでしたが、最後までお付きいただきありがとうございます。講演の内容としては、各概念の中で、基本的な部分に絞り、理解に時間がかかりそうな内容については省き、お話させて頂きました。それぞれの概念について興味のある方は、より、突っ込んで調べてみることをおすすめいたします。

講演の中でもお話させていただきましたが、SMACSSの書籍は日本語化もされています。読みやすいのでおすすめです。
http://smacss.com/ja/

# 補足

質問頂いた内容についてお答えします。

> 複数人でやる時に実際どんな感じでやってるのか

コーディングを複数人でやる場合、私の場合ですが、以下の2パターンで作業する事が多いです。

1. 主設計者＋展開
2. 主設計者＋サブ設計者

まず、1ですが、これは、ページ数の多いコーポレートサイト等を一つ一つ手作りしていく場合に取る体制です。サイトのCSSは、主設計者しかいじりません。主設計者は、各ページで使うモジュールを始めにコーディングし、その他のメンバーが、そのモジュールを使いながら、具体的なページを作っていきます。主設計者は、単純な作業を他の人に任せるように動きます。

2は、そのように、ページを量産できないような場合です。二人以上でモジュール群をコーディングしていくので、ちょっとむずかしいです。この場合、私の例はあくまで一例なのですが、以下のようにしています。

まず、基本的には1と同じく、主設計者が基本的な設計を行います。しかし、主設計者は、全てのモジュールのコーディングを行うわけではありません。部分的にコーディングを任せたいモジュールを、サブ設計者にコーディングしてもらいます。ただ、この時、そのモジュールの名前を始めに決めてしまいます。

講演の中でお話したとおり、モジュールの名前をベースに、HTMLとCSSを書いていくというルールにしているため、最低限、モジュールの名前が決まっていれば、コーディングは可能です。

この時、CSSファイルは、別に分けることもあります。そして最終的には、サブ設計者の書いたHTMLとCSSをマージします。サブ設計者がコーディング中に気づいたモジュールの粒度や懸念点は、適宜主設計者にフィードバックします。主設計者はなるべく、単純にコーディングが行えるモジュールから選んで仕事を振っていきます。

この方法を取る場合、講演の中で話したような設計の概念が固まっていると、よりスムーズに設計が行えます。弊社では、コレといった設計のルールを作っているわけではないのですが、講演中に話したSMACSSに近い形で普段コーディングしており、概ねの考え方が共通認識として存在しているため、分担は可能になっています。長いプロジェクトの場合は、このあたりの土台作りをきっちりやっておけば、寿命の長いサイトにできるでしょう。

以上、ありがとうございました。

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、富田 梓さん（LINE）の『Sassの日常の運用』セッションのスライドなどをシェアします。

• スライド（PDF、69ページ、11.7MB）
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

それに慣れてくると、こんどは「もっとこうしたら楽になるのに」とか「もっとこうしたら綺麗になるのに」といった
更に進んだ欲求や要望がでてくることになります。
本日紹介した内容はすこしだけ高度な内容でしたが、そんな欲求や要望の芽が出てきたときに改めて見なおしていただくと、新たな発見があるかと思います。

Sassを理解するためには、とにかく実際に使ってみることがなによりの第一歩です。
今日参加されてSassに興味をもった方は、まずはインストールしてその第一歩を踏み出してみてはいかがでしょうか。

補足

本日のスライドの中で触れた「プレースホルダーセレクター」について説明いたします。

プレースホルダーセレクタとは、extendされた時だけ効果を発揮する特殊なセレクタです。
「.」で指定するクラスセレクタや、「#」で指定するIDセレクタと同じように、プレースホルダーセレクタは「%」で指定します。

extendを使っていると、「extendされるためだけ」で、単体では利用されないクラスを作る場合があります。
普通にextendをつかうと、そのHTML側には利用されない無駄なクラス名が、extendしたクラスとともに出力されてしまいます。
プレースホルダーセレクターを使うと、この無駄なクラス名の出力を防ぎ、必要なクラス名だけを出力することができるようになります。

以下のサンプルを御覧ください。

# Sass

'''
/* 通常のextend */
.style01{
width:100px;
height:100px;
}

.boxA{
@extend .style01;
border:1px solid red;
}
.boxB{
@extend .style01;
border:1px solid green;
border-radius:4px;
}

/* プレースホルダーセレクタのextend */
%style02{
width:100px;
height:100px;
}

.boxC{
@extend %style02;
border:1px solid red;
}
.boxD{
@extend %style02;
border:1px solid green;
border-radius:4px;
}
'''

# CSS

'''
/* 通常のextend */
.style01, .boxA, .boxB {
width: 100px;
height: 100px;
}

.boxA {
border: 1px solid red;
}

.boxB {
border: 1px solid green;
border-radius: 4px;
}

/* プレースホルダーセレクタのextend */
.boxC, .boxD {
width: 100px;
height: 100px;
}

.boxC {
border: 1px solid red;
}

.boxD {
border: 1px solid green;
border-radius: 4px;
}
'''

CSSを見ると、通常のextendでは.style01といういらないコードが出力されているのに対し、プレースホルダーセレクタのextendでは、style02といういらないコードは出力されず、style02のスタイルだけが、extendしたコードに継承されているのがわかります。

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、坂巻 翔大郎さん（ピクセルグリッド）、山田 敬美さん（ピクセルグリッド）の『コピペで使える！変数とmixin！』セッションのスライドなどをシェアします。

• スライド（PDF、85ページ、12.4MB）
• mixinのサンプルコード集（GitHub）
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

長丁場のセミナーの中盤で、ひたすらコードの解説をされたらつらいかなと思い、かけあい形式のセッションにしてみましたがいかがでしたでしょうか。内容が頭に入ってこなかったというご意見もありましたので（スミマセン…）、ぜひ、スライドとGitHubのREADME.mdを参考にしてみてください。

また、今回は初心者向けだったので、mixinの中身の解説はいっさい省きました。普段からSassを使っている人は、今回配布するmixinのコードの中身をみてみると、あらたな発見があるかもしれません。

ご参加いただいたみなさま、どうもありがとうございました。

いただいたご質問

Q.「自分でmixinを作れない場合の探し方まとめサイトとかあるのでしょうか」

これといったmixinまとめサイトというのは把握していないのですが、基本的なmixinはCompassにまとまっているので、まずはそれを使い、制作していく中でほしくなるmixinというのは、やはり自分でつくれた方が、プロジェクトに合わせて柔軟に対応できるので便利かと思います。

今回紹介したものの中には、つくりが複雑なmixinも含まれていますが、シンプルなものだと簡単につくれてしまうので、Sassに慣れてきたらぜひつくってみてください。

Compassに似たもので、BourbonというSassのライブラリがあるのですが、これは構造がシンプルでわかりやすく作られていますので、mixinづくりの参考になるかもしれません。

Bourbon Documentation

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、黒野 明子さん（crema design）の『Sassにもっと便利な機能をプラス！ Compassを使ってラクしましょ?』セッションのスライドなどをシェアします。

• スライド（PDF、29ページ、2.3MB）
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

大雪直後の土曜日、長時間セミナー、本当にお疲れ様でした。

私のセッションでは、Compassの使用感をイメージしていただけるデモをメインに行いました。アンケートを拝見したところ、比較的多くの方にお楽しみいただけたようで、ほっとしています。環境さえ構築できれば、黒い画面が苦手とお感じの方でも、Compassを使い始めるのは決して難しくありません。まずは、今回ご紹介した3つの機能から、試してみてはいかがでしょうか？

そのためにも、デモで作成したファイルを以下に置いておきました。screen.scss内に、解説コメントが入っていますので、コピペしてご利用ください。
https://www.dropbox.com/s/1qxpl8699ies02r/cssnite.zip

また、セッション内でご紹介したいくつかの記事URLを、下記に挙げておきます。

【Compass Helpers | Compass Documentation】
→Compass公式サイト内のHelpersのページです。非常に多くの機能が用意されていますので、いくつかピックアップして試してみてください。

【CompassでCSSスプライト（Retina対応） | clear sky source】
→今回のイベントで監修を担当した株式会社まぼろしの小林さんの記事です。デフォルトのCSS Sprite生成機能ではできないRetina対応について、言及されています。

# いただいた質問

ベンダープレフィクスはすべて書き出す（指定する）必要がないので、そのあたりのカスタマイズをするのが大変そうです。

今回登壇されたした、株式会社まぼろしの西畑さんのブログで、カスタマイズ方法が紹介されていますので、ご確認ください。
http://blog.webcreativepark.net/2013/09/02-225206.html

CSS Spriteの画像名は、必ず変わってしまうのですか？

デモでご紹介したような、ファイル名後半に自動で付与される文字列は、下記の方法で取り除くことができます。英語の記事ですが、Answersの一番上の答えで紹介されているコードを、config.rb内に記述してください。
【How to turn off COMPASS SASS cache busting?】

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、柴田 大樹さん（unCopi）の『CSSがもっとラクに書ける！ これから始めるSassの書き方』セッションのスライドなどをシェアします。

• スライド（PDF、248ページ、20.9MB）
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

先日は悪天候の中、足をお運びいただき、本当にありがとうございした。

Sassの全てをいきなり使い倒そうとすると、どうしてもつまづきやすくなってしまいます。まずはセッションの冒頭で紹介した、ネストや変数から試して、実際にSassって簡単だなと思えていただければ幸いです。

体験談ですが、一通りの書き方に慣れてきたら、これまで自分で書いてきたCSSのバックアップをとりながら、Sass化してみるとより早く慣れました。これまで書いてきたCSSを見返しながら、「ここは同じ値を使っている」「コード上は離れてるけど、おんなじスタイル使っている」といったことが振り返ると出てきます。

ぜひ、書き方を軽く理解したらトライしてみてください！

■スライド上の主なソースコード
http://sync-d.jp/lp32/
スライド内で使用したコードをSass Meister上でもシェアします。

■スライド上で紹介したURL
http://sassmeister.com/
Sassをお試しするときには非常に便利なWebサービスです。
環境構築するよりも前にSassを使う際にはぜひお試しください！

■以前公開したスライド

• ネストを覚えた人のためのSassの便利な使い方
  http://www.slideshare.net/sivacchi/sass-16282977
• CSS preprocessorの始めかた
  http://www.slideshare.net/sivacchi/css-preprocessor

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、谷 拓樹さん（サイバーエージェント ）の『Why Sass?』セッションのスライドなどをシェアします。

• スライド（PDF、61ページ、6.8MB）
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

谷のセッションでは基調講演ということで、なぜSassなのかという話をさせてもらいました。
講演でお話したことの繰り返しとなりますが、SassはCSS開発を効率アップする大変便利なツールです。

ツールであるがゆえ、その使い方を誤るとよりひどいCSSを生み出してしまうことがあります。
LP32の一日で、Sassの基礎から応用、ベストプラクティスとバッドプラクティス、CSSの設計までを学べた一日かとおもうので、ぜひ業務に活かせてもらえれば幸いです。
イベントに参加いただいた皆さん、基調講演から出席していただいた皆さんありがとうございました。

アンケートできになる人が多かった「他のプリプロセッサではなく、Sassを選ぶ理由をもっと知りたい」というのをいただいたので、
簡単な記事をあげておきますので、参考にしてください。

• https://gist.github.com/hiloki/545946ff868f40bb12f1

Convertro Brings its Attribution Solution to EMEA

http://performancein.com/news/2014/04/09/convertro-brings-its-attribution-solution-emea/

マルチタッチ・アトリビューション会社のConvertro（米国）が、アトリビューション機能を新たにEMEA地域（欧州・中東及びアフリカ）へ拡大させることを表明しました。

【アトリくんの視点】ここで注目すべきは、Convertroが日本よりも先に中東・北アフリカ地域への進出を計った点です。Zenith Optimediaによれば、12～2013年にかけての地域別広告費支出の伸び率は、日本の2.4％に対し、MENA地域（中東・北アフリカ）は倍以上の5.5%を記録。14年には6.8%、15年には8.9％の広告費支出が予想されています。ConvertroのCEOであるJeff Zwelling氏の考えと同社の行動力が、先見性という形で展開するか、今後に注目していきたいと思います。

Marketing Landにてクロスチャネル・マーケティングに関する記事が掲載されていました。

A Concise Overview Of Cross-Channel Marketing Models
http://marketingland.com/concise-overview-cross-channel-marketing-models-79641

近年最も応用されている クロスチャネル・マーケティングのモデリング手法は次の３つ。

• 計量経済学的なトップダウン・アプローチ（ex. マーケティング・ミックスモデル）
• アルゴリズム的なボトムアップ・アプローチ（ex. アトリビューションモデル）
• 機械学習型アプローチ（ex. エージェントベースドモデル）

計量経済学的アプローチ

マーケティング・ミックスモデルに使われる方法であり、最も古典的で今日も広く適用されています。

★アプローチの概要

1. コンバージョン/売上データや、経済・価格変動などの非メディア要因と共に、メディアチャネル間の過去の売上やマーケティング活動の関係を統計的に分析
2.  売上高やKPI (Key Performance Index)など変動的な効果を評価する統計モデルを構築
3. 各マーケティングチャネルやキャンペーンの影響度を定量化

★強み：データ駆動型の統計的アプローチにより高い予測性の実現ができる

★弱み：洞察や仮説シナリオの精度はインプットデータの粒度次第である

アルゴリズム的アプローチ

アトリビューションへのタッチポイントに基づく方法であり、クロスチャネルトラッキングを経由することによりごく最近可能となった方法です。このアルゴリズム的方法では、cookieレベルのイベントデータを調査し、ユーザーの遷移パターンやコンバージョンから、キャンペーンや流入チャネルを経由する各タッチポイントの効果を計ります。

★アプローチの概要

1. コンバージョンと共に、それまで経由してきた媒体のタッチポイントのデータをcookieレベルでたどる
2. 特定のタッチポイント効果を評価するために、類似する遷移パターン同士を比較
3. 遷移データを集計し、メディアやキャンペーンに対する貢献価値を割り当てる

★強み：タッチポイントレベルの計算により、きめ細やかなアトリビューション分析やメディアへの影響・評価が見込める

★弱み：予測的でない。オフラインメディアや追跡されてないオンラインメディアなどを組み入れることができない

機械学習型アプローチ

エージェントベースドモデルは機械学習型アプローチの代表例として挙げられます。これは個々人をエージェントとして扱います。エージェントは、イベントや刺激に接することで特定の行為を示し、それが影響度を測定する計算シミュレーションに役立てられます。社会科学分野などに適用されてきましたが、最近ではマーケティングインパクトモデルに応用されるようになりました。

★アプローチの概要

1. デモグラフィックなデータを使用し、顧客プロフィールを把握することで、ビジネスにおける模擬的な人口環境を想定する
2. 過去のマーケティング活動に加え、コンバージョン/売上データや非メディア要因を使い模擬的な人口環境を育成、調整する
3. 様々なマーケティング活動、変化への反応をシミュレーションする

★強み：個々人の属性をベースにしたモデルであり顧客のデモグラフィックなレベルでの柔軟なシミュレーションを可能にする

★弱み：結果の正確性は、ビジネスおよびデモグラフィックなセグメントがどのような行動を取るかの仮説に依存する

マーケティングの影響評価の展望

マーケティングがアカウンタビリティの時代に突入したにつれて、クロスチャネル・マーケティングの影響度評価への需要は高まり続けていくと予想されます。今後１０年、クロスチャネル・マーケティングはさらに精度を上げ、またこれらのアプローチが組み合わせられていくでしょう。既にいくつかのベンダーはトップダウン・アプローチとボトムアップ・アプローチを組み合わせています。
しかしビジネスやマーケティング成果に影響を与える様々な変数をすべて予知するのは不可能です。モデルの正確性と複雑性が停滞状態に入ったとき、予見できない、もしくは不明の要因が、実践の場でのモデルの正確性や有用性を左右するでしょう。結果、リアルタイムなシミュレーションと予測する能力こそが鍵を握るのです。

【アトリ君の視点】 今後もクロスチャネル・マーケティングのニーズが高まる可能性は非常に高そうですね。変数が増えるだけでも、どの変数が意味を持ちそうかを判断するために様々なシミュレーションをリアルタイムに試行することは今も行われ始めてますね。BIツールが最近活用されているのもそういった背景があると思います。今後も加速するように思います。そして重要なのは経験、ノウハウ、スキル、センス、実行力などさまざまな資質をもった人がいるかどうかという点になるかと思います。