Aggregator

2011年1月から2016年8月まで、平日夜に行う形態としてCSS Nite After Darkを開催してきましたが、平日夜に少人数、ハンズオン／ワークショップ形式として、「After Dark 2019」をスタートします。

会場はStocker.jp / Space（渋谷）。各回25名です。

ハンズオンで学ぶBootstrap 4の基礎

阿部 正幸さん （Mochiya）を講師にBootstrapの基礎と、実際にプロとして使うためのノウハウをセミハンズオン形式で学びます。

1月10日[木] 19:30-21:30

実サイトで学ぶウェブ解析のキホン

井水 大輔さん（S-FACTORY）を講師にを迎え、実サイトを例に公開コンサルティングのようなカタチでウェブ解析について学びます。

1月28日[月] 19:30-21:00

ハンズオンで学ぶCSS Grid

鹿野 壮さん（ICS）を講師に迎え、CSS Gridの基本を抑えつつ、より一歩使いこなすためのテクニックをハンズオンで学びます。

2月4日[月] 19:30-21:30

『こんなプロジェクトはいやだ！』をいいね！にするカイゼン

栄前田 勝太郎さん（リズムタイプ）を講師に迎え、問題発見・解決のためのメソッドを伝え体験してもらい、それを持ち帰って自分の職場（プロジェクト／チーム）で実践できるようにする講義＋ワークショップです。

2月27日[水] 19:30-21:30

2018年に公開したCSS Niteのフォローアップを一覧にしました。年末年始、お時間のあるときに、チェックされてみてください。

CSS Nite LP58「Coder’s High 2018」

2018年9月29日 http://cssnite.jp/archives/post_3025.html

CSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」

2018年3月3日 http://cssnite.jp/archives/post_3005.html

CSS Nite LP57「All About XD」

2018年4月28日 http://cssnite.jp/archives/post_2989.html

CSS Nite LP57「All About XD」再演版

2018年6月30日 http://cssnite.jp/archives/post_2998.html

CSS Nite in Osaka, vol.45「All About XD」

2018年8月11日 http://cssnite.jp/archives/post_3014.html

2018年9月29日に都内で開催したCSS Nite LP58「Coder’s High 2018」のフォローアップを公開します。

• （1）中村 勇希さん
• （2）水越 佑介さん
• （3）植木 真さん、 秋山 豊志さん
• （4）井水 大輔さん
• （5）阿部 正幸さん
• （6）佐藤 あゆみさん
• （7）伊藤 由暁さん
• （8）鹿野 壮さん
• （9）木達 一仁さん

次のブログで取り上げていただきました。ありがとうございます。

• CSS Nite LP58に参加してきました｜140文字では伝えきれない想い｜note
• CSS Nite LP58 Corder's High 2018にいってきました - 寝ても覚めても犬が好き
• 初めてCSS Niteに参加しました #cssnite | chiilog
• 初めて東京のwebセミナー「CSS Nite」に参加しました！ | マイホーム
• CSS Nite LP58「Coder’s High 2018」に参加しました！
• CSS Nite LP58「Corder's High」に参加してきました | マテンロワークス
• CSS Nite LP58「Coder's High 2018」に参加しました | ブログ | 札幌のホームページ作成 リーグラフィ【Regraphy】

講演者のブログなど

• JavaScriptフレームワークは、習得しないといけませんか？という質問への回答｜ナユ｜note
• CSS Nite LP58「Coder's High 2018」 | 覚え書き | @kazuhito

2018年も間もなく終わります。HAPPY ANALYTICS という自分の会社を作ってから、丸２年となります。

というわけで今年も1年間の取組を色々と振り返っていきます。最初に書いておきますが、長い（全部読むと20分くらい）ですので実家に帰省中とか、暇なときに一読いただければ！

去年（2017年）と一昨年（2016年）の記事へのリンクは以下からどうぞ。

analytics.hatenadiary.com

analytics.hatenadiary.com

• 長いので3行にまとめると
• 簡単に自己紹介
• 2018年の主な取り組み
• 稼働時間
• 仕事内容の内訳
•  セミナー
  • １：Adobe Summit 報告会 2018
  • ２：パーソル社での社内研修
  • ３：富良野と郡山での観光協会向けの講座
  • ４：UNCOVER TRUTHの大型イベント「USERDIVE connect 2018」とFaber Companyの大型イベント「ミエルカユーザー会」
  • ５：アフィエイト協会での講演
• 役員コンサル
• 個人コンサル
• 執筆
• 会社
• 収入
• 今年の振り返りと来年に向けて

長いので3行にまとめると

１）稼働時間1,873時間と前年比で若干減り、売上は1.7倍に

２）個人コンサルやセミナーの時間が増え、役員コンサルや執筆の時間が減少

３）自社主催の「中上級者向けの全10回育成講座開講」、Adobe Summit 2018 報告会の実施、観光協会やアフィリエイト協会など新しい場所での講演機会、書籍の監修、Lancersとの取組など新しい事にも色々チャレンジした

簡単に自己紹介

ウェブサイト分析や改善提案、コンサル、講師、執筆などを行う「ウェブアナリスト」として活動しています。事業会社で10年以上働きつつ様々な社外活動をした後、2015年にフリーに。2017年1月に「HAPPY ANALYTICS」として法人化。単著6冊、その他共著多数。詳しくは以下をご覧ください。

Taku Ogawa（小川 卓）

2018年の主な取り組み

２０１８年１月

・10月にリニューアルされるサイトの方針を決めるため、ごりごりウェブサイト分析
・改訂版の書籍に向けての変更・追加執筆

２０１８年２月

・@tsujさんのご紹介で、はてな公式ブログで3本ほど記事執筆。 

blog.hatenablog.com

blog.hatenablog.com

blog.hatenablog.com

・新規サイト立ち上げに向けた分析要件やKPIの設計
・監修した書籍「Googleデータスタジオによるレポート作成の教科書（マイナビ）」発売

２０１８年３月

・年度末でお仕事忙しさMAX。アプリの分析、コンセプトダイアグラムのワークショップ×２など
・そんな中、3月末にAdobe Summit@LasVegasに参加。情報とモチベーションのアップデート

www.adobe.com

 ２０１８年４月

・Adobe Summit 報告会 2018を開催

・リニューアルを控える巨大ECサイトのGoogle Tag Manager / Google アナリティクス（拡張eコマース等）の各種設定やテストに大量に時間を使う

・新卒向けの研修等などもいろいろと

 ２０１８年５月

・中上級者のウェブアナリストを対象とした、自社主催の全10回講座「ウェブアナリスト育成講座」をスタート。第1期生は14名

※現在は2期生向けの授業を開講中、3期は2019年5月より開講予定

提案型ウェブアナリスト育成講座＜第二期＞のご案内

・Chief Analytics Officerを勤める、株式会社SoZoでのアドバンス講座開始

www.sozoinc.jp

２０１８年６月

・顧問を勤めるウェブ解析士会議 2018で登壇

www.waca.associates

・「現場のプロがやさしく書いた～」の改訂2版が発売。1/3程内容を変更しました。（おかげさまで11月に増版かかりました） 

現場のプロがやさしく書いたWebサイトの分析・改善の教科書【改訂2版】

• 作者: 小川卓
• 出版社/メーカー: マイナビ出版
• 発売日: 2018/06/19
• メディア: 単行本（ソフトカバー）
• この商品を含むブログを見る

 

２０１８年７月

・新たに愛媛での案件がスタート（12月に第1弾終了）
・電子書籍系サイトや、住宅系サイトのデータ取得設計などをごりごりと

２０１８年８月

・アプリ分析に関する講演
・「東京2020オリンピック絡み」の分析案件
・ログリー さんとの取組開始

２０１８年９月

・2日間で12時間の新人研修講師。。。
・ウェブアナリスト育成講座1期生卒業
・新規案件がいくつか開始

 ２０１８年１０月

・初タイ旅行（’バンコク＆プーケット！）
・ウェブアナリスト育成講座第2期開始（第2期は8名）
・ベーリンガーインゲルハイムとの案件スタート

 ２０１８年１１月

・デジタルハリウッド大学院でのアクセス解析の講義開始（今年で5年目）
・ノートＰＣ ( VAIO A12 )と携帯 ( Mate 20 Pro )　買い替え。初Android端末メイン
・監修したGoogle Optimize本発売

Googleオプティマイズによるウェブテストの教科書 ~A/Bテスト、リダイレクトテスト、多変量テストの実際~

• 作者: 井水大輔,大柄優太,工藤麻里,瀧里絵,針替健太,松本大河
• 出版社/メーカー: マイナビ出版
• 発売日: 2018/11/27
• メディア: 単行本（ソフトカバー）
• この商品を含むブログを見る

 

 ２０１８年１２月

・ランサーズさんとの取組開始

hosting.lancers.jp

 ・自社でSalesforce Essentials 導入。来年から活用してまいります

稼働時間

2016年～2018年の稼働時間は上記の通り（移動時間除く・作業時間含む）。

年間で集計すると

2016年：約1,700時間（月平均142時間）

2017年：約2,100時間（月平均175時間）

2018年：約1,873時間（月平均156時間）

今年は2,000時間以内に収まりました。去年は新規の書籍執筆もあり、かなり時間を使いましたが、今年は大丈夫でした。ただ毎年3月～6月が稼働時間多くなりますね。そして寒くなり始めると少し落ち着くと（10月は旅行のため、12月は年末だからという感じですね）。来年も2,000時間以内に収めたいものです。

仕事内容の内訳

2年連続で、役員コンサルが減り、個人コンサルが増えました。そして書籍が大きく減り、セミナーの比率が2017年比較で増えていますね。時間にすると以下のような感じです。

それぞれの定義は以下の通りです。

 

■役員コンサル

Chief Analytics Officerなどの役職あるいは役員として働いている、UNCOVER TRUTH、FaberCompany、Sozo、日本ビジネスプレス(NEW!)の４社の合計。

■個人コンサル

株式会社HAPPY ANALYTICSとして直接依頼を受けている分析やコンサル案件

■セミナー

デジタルハリウッド大学院の客員教授、社内勉強会、講演依頼をいただいての外部セミナー登壇、自社主催のウェブアナリスト育成講座（役員コンサルで行っている講演は、役員コンサル側にて時間計上）

■執筆
書籍に執筆、監修でのチェックや校正、外部媒体（雑誌・ネット）等での連載など文章を書いている時間

 

■会社
経理回り、毎月のミーティング、その他もろもろの業務（大半は秘書が担当）

 セミナー

2011年以降のセミナー（社外講演・社内勉強会含む、大学院の授業除く）回数です。これ以上増えないかなと思っていたのですが、結果増えました。ここ数年、ご講演依頼件数が多い　Markezine Day　あるいは　宣伝会議　は減らず、新たに自社開催のウェブアナリスト育成講座が増えたのが一番の要因かなと。

月別で見ると

という感じです。意外と2月が多かった。4月や10月は年度始まりのところが多く、その時期は登壇が若干減りますね。1月も最初の2週間くらいはセミナーが少ない印象です。

今年も全国各地から、勉強会や講演依頼をいただき色々な所でお話させていただきました。東京以外では、大阪・栃木・名古屋・愛媛・富良野・郡山・札幌・福岡あたりですね。やはり色々な所にいけるのは大変楽しいです（滞在が24時間以内場合も多々ありますが）。来年もこのような機会を楽しみにしております！

セミナーはどれも印象的だったのですが、敢えて５つ（ウェブアナリスト育成講座除く）あげるとすれば

１：Adobe Summit 報告会 2018

analytics.hatenadiary.com

ラスベガスで開催されたAdobe Summit 2018の報告会を行いました。自社で主催するセミナーって普段行っておらず（年１回くらい）、クリーク・アンド・リバー社にもご協力いただき、無事に100名集めることもできました。他ではなかなか聞けない内容だったかと思いますし、全体的に好評でした！2019年もAdobe Summitに参加し、報告会を行う予定です！

２：パーソル社での社内研修

最近はあまり話す機会が無い、アプリの分析に関するテーマでしっかりお話しできたということで、内容という面において特に印象的です。

３：富良野と郡山での観光協会向けの講座

11月に2か所の観光協会で講演させていただきました。富良野の観光協会では3時間の講義、郡山の観光協会ではワーク＆発表もある2日間の講義でした。観光協会の現状を知ることが出来たり、地域ならではの情報交換や食事も楽しんだりと印象的でした。

４：UNCOVER TRUTHの大型イベント「USERDIVE connect 2018」とFaber Companyの大型イベント「ミエルカユーザー会」

mieru-ca.com

offers.uncovertruth.co.jp

Chief Analytics Officerを勤めている2社で、200人規模の大型のイベントが11月～12月に開催されました。前者では座談会のモデレーターを、後者では貴重講演を担当させていたいただきました。

まだ人数が少ないころから両社を知っていますし、一緒にお仕事した（している）方もたくさんいるので、こういった大型イベントが開催されるのは感慨深いです！来年も貢献できれば。

５：アフィエイト協会での講演

初めてのアフィリエイター向けの講演という事で、難易度や内容をどうするかをかなり迷いました。結果的に全部盛りの内容にはさせていただきました！分析TIPSから、具体的に改善施策そして各ブログの一言改善コメントなど。多くの方に喜んでいただけたようでよかったです！

www.japan-affiliate.org

他にも「IT Search+ の100回目記念講演での登壇」や「清水さんと一緒に行った講演」をはじめ印象的なものはたくさんあるのですが、これ以上書くと更に長くなりそうなので、これくらいにしておきますね！

役員コンサル

前年と比べて時間が減りました。UNCOVER TRUTH社が特に減りましたが、これはネガティブな理由ではなくアナリストの人員も倍以上に増えてしっかり運用が回るようになったからであり、私が自ら出ていく必要が無くなったというのも大きいかと思います。

それでもいくつかの案件でコンセプトダイアグラムを担当したり、有名アパレルブランドのユーザー軸での分析を行ったりなど、何度か登板機会がありました！

Faber Companyでは社内研修やミエルカユーザー向けの勉強会が中心でしたが、dShoppingのリニューアル時にGoogleTag ManagerやGoogle アナリティクスの設計・設定等を担当させていただきました。詳しくはこの辺り

eczine.jp

SoZoでは、ブライダル式場の担当者向けのGoogle アナリティクス講座　なども行い、今年から新たにChief Analytics Officerを担当している、JBpress では毎月ブログ記事を執筆したり、提供しているCMS「Media Weaver」を導入している企業の分析・改善提案なども行いました！

というわけで時間は減ったものの、内容は充実していました。

個人コンサル

時期によって変わりますが、定期的にミーティングをしたり、スポット（数か月～半年くらい）で分析を行ったりと、同時進行している案件は大体１０～１５社になります。毎月定例を行っている会社が7社ほどあり、それ以外にスポットの案件が常に複数あるというような形です。

大企業、外資系の製薬会社、広告代理店、制作会社、ベンチャー企業まで対象会社やサイトは様々です。スポット分析もあれば、運用レポート作成もあれば、ＫＰＩ設計もあれば、コンセプトダイアグラムのワークショップもあれば、ＧＴＭやＧＡの設定など幅は非常に広いです。

また去年も書きましたが、単純な分析案件は最近は少なく、ゴールやＫＰＩ設計そして、その先の実装設定系の案件がここ2年くらいは増えている印象です。

以下の図でいうところの「Define」や「Measure」系の案件ですね。

来年は少し幅を広げた案件もいくつか手掛けていきたいと考えております。早速来年1月から広島で新しい案件が始まるので、こちらも楽しみです！

執筆

今年は新しい書籍の執筆は無かったのですが、既に記載した「Google Optimize」と「Google Data Studio」の書籍を監修させていただいたり、マイナビから出している書籍の第2版を出したりというのが紙媒体での主な動きでした。昨年発売した、以下の書籍も何度か増版がかかり、9,500部となりました。

「やりたいこと」からパッと引ける Google アナリティクス分析･改善のすべてがわかる本

• 作者: 小川卓
• 出版社/メーカー: ソーテック社
• 発売日: 2017/08/09
• メディア: Kindle版
• この商品を含むブログを見る

 

その他、ウェブ上では様々な記事を今年も書かせていただきました。

・KOBITで毎月記事を書いています

kobit.in

・JBpressでもブログを毎月書いています 

www.jbpress.co.jp

 ・他にも以下のような媒体で、執筆あるいは登場しています

"達人"が歩むデータ解析の道 - HAPPY ANALYTICS 小川氏：IT Search+スペシャルセミナー100回記念｜データ分析｜IT製品の事例・解説記事

小川卓氏が見せた！ Googleアナリティクスのライブ解析。成果を生み出す秘訣を学べ | ウェブ解析士会議2018 | Web担当者Forum

流入数439％にアップ！利用者拡大に悩んでいたｄショッピングが選んだ起死回生の方策とは (1/4)|ネット通販情報満載の無料Webマガジン「ECzine（イーシージン）」

【失敗から示唆を得る】パソナの事例に学ぶ目標を確実に達成するサイト改善 (1/3)：MarkeZine（マーケジン）

パソナ事例から学ぶ、Webサイト改善における正しいKPI設定 (1/3)：MarkeZine（マーケジン）

小川卓のブログ分析入門 カテゴリーの記事一覧 - 週刊はてなブログ

他にも多分色々あるかと思いますが、とりあえず検索して見つけたやつをぱらぱらと！

そういえば嬉しかったのは、以前6年間働いていたリクルートの社内報「かもめ」で、インタビューいただき記事として取り上げていただいたことです。覚えていてくれて有難いですｗ

会社

HAPPY ANALYTICSは、私と、社員ではないですがお手伝いいただいている方が現在2名います。秘書の工藤さんと、MA回りを見てくれる飯村さんです。去年も今年もこの3名体制で進めました。

会社として今年大きなチャレンジだったのは、「ウェブアナリスト育成講座」の開講ですね。自社での継続型セミナーという事で新しいチャレンジとなりました。今のところしっかり進めることが出来ており、現在は2期生向けに講座を行っています。来年5月から3期生も開始予定です。

講座設立の思い

analytics.hatenadiary.com

第1期生振り返り

analytics.hatenadiary.com

また今年はいくつかのマーケティング系ツールも導入し、さらなる効率化を図りました。2018年12月現在、HAPPY ANALYTICSは以下のシステム等を利用しています。

■ウェブサイト( http://happyanalytics.co.jp )　の構築「ferret One」

ferret-one.com

■リード管理やメール配信「Mautic」

https://jp.mautic.org/

■案件管理「Trello」

■日常のやりとり「Slack」

ウェブサイトに来たお問い合わせ等に関しては、Zapierを使ってSlack連携をしていたりなど、細々したことも試しています。

■会計管理「freee」

来年1月からはSalesforce essentialsの活用をはじめ、更に色々チャレンジしていこうと考えております。

収入

月別の売上（毎月の口座への入金額）での推移は下記のとおりです。さすがに実数だすとアレなので、なんとなく相対的に見ていただければ(フリーになった2015年4月より掲載）。

そして年単位で見た時は以下のような感じです。

2014年（Amazon在籍時の給料＋講演や執筆などの合計）を100として計算。2015年4月にフリーになったその当時と比べると、収入は伸びました。2015年⇒2016年が40%増、2016年⇒2017年が8%増　そして、2017年⇒2018年が70%増となり、今年は大きく伸ばすことが出来ました。

今年、大きく伸びた原因を挙げるとすれば

・ウェブアナリスト育成講座の開講

・（単体で見てしまうと、売上貢献が低い）書籍執筆の時間が減り、その分の時間をコンサルやセミナーに充てることが出来るようになった

・4月～6月に大型の案件が集中した

・分析だけではなく、その手前の設計や設定など案件の幅が広がった（＝案件の単価が上がった）

・業務の効率化

あたりかなと考えております。個人的には、出来すぎな一年でした。

月を軸にしたデータも、確認してみましょう。

そして月別の売上データを見ると特徴がありそうですね。

・10月は旅行に行くことが多く、仕事時間が少なくなり、その分11月~12月の収益が下がる。

・1月～3月は案件が多く、それの振り込みが4月～6月くらいに山となって出やすい。

・9月は8月のお盆休みの影響もあり稼働時間が少ないため下がりやすい（セミナー数がそもそも少ない） 

ちなみに、コンサルティングやセミナー業がメインのため、経費等は一般の企業と比べるとかなり低いかと思います。

主な経費は、私の給料・工藤さんと飯村さんへの支払い・自宅のオフィス費（家賃の一部）・携帯電話利用料・各種サービス利用料となります。その結果、経常利益は売上の50%を超えています。

今年の振り返りと来年に向けて

今年は自分が想像していたよりも成果が出た1年でした。大きく体調を崩すこともなく、ご依頼いただいたすべてのセミナーに登壇出来ましたし、案件の遅延などもありませんでした。成果を出せた案件も多数あり（出なかった案件も当然ありました…）、特にセミナーや育成講座など様々な人に解析に必要性や魅力をお伝えできたと思います。

分析やコンサルティングという意味では、自分の得意領域を中心に少し広がった1年でもありました。2019年は自分の範囲を少し広げつつ、リード獲得の強化　及び　その時の案件増に対応出来るための、分析を依頼できる人材を増やす（接点強化＆育成）活動も行います。

この辺りは2018年にトライアル的にチャレンジしており、数名に複数の分析案件を依頼させていただき、無事に納品いただきました。

リード獲得に関しては、営業面においてサポートいただける人員が増えます。Salesforceなどもしっかり活用していこうかなと。なので来年は私＋3名体制で頑張る予定です。

外部からのお仕事依頼の「窓口」を増やすために、まず第一弾としてランサーズでの取り組みが今月公開されました。

hosting.lancers.jp

そして、それ以外にも（今のところ）2つほど更に取り組みを進めているところで、1月～3月の間にはお知らせできるかなと考えております。

また今の育成講座を地方の方や物理的に来れない方が受けやすい仕組みも準備中でして、こちらは来年の上半期にお伝えできればなと。

「上場したい！」とか「社員増やしたい！」という思いは設立当初から無く、今後も無いと思うので、引き続きこんな感じで進めていきたいと思います。健康を意識しつつ、楽しむ＆自分自身と回りが成長する！という事を主眼に2019年も取り組んでいきます。  

本記事に関しての質問等ありましたら、以下サイトから匿名で 質問することができますので、どうぞー！本記事に追記する形でご返信いたしますね。

peing.net

情報収集の手段として、Twitter（ツイッター）を活用するユーザーが増えています。Twitterが動画広告の媒体としても見逃せないものになっている中で、どのようなTwitter動画広告が効果的なのでしょうか。この記事では、Twitterならではの広告効果や、動画広告をTwitter上で展開するメリット、広告用動画を制作する際の注意点について紹介します。

Twitterの動画広告の特徴

若年層にリーチできる

スマートフォンの普及が進むにつれて外出先でも手軽に利用できるTwitterは、多くのユーザーに利用される便利なメディアになっています。Twitterのユーザー数は全世界で約3億2,800万人といわれています。日本国内においては約4,500万人いるという調査結果があります。（Social Media Lab調べ）

ユーザー層で見ると、若年層の利用に大きく偏っていて、10代から20代の若年層では、50%前後の利用率になっています。この若年層は学生を中心とした層となっていて、学生のみでみるとTwitter利用率は85%にもなります。(Webコンサルタント.jp調べ)

注目したいのは、10代から20代の若年層ユーザーは普段の会話をするようにTwitterを利用したコミュニケーションをとり、20代のユーザーは情報収集としてTwitterメインにしているという傾向にあります。このことから、Twitter広告は若年層へのアプローチによる効果が高いのではと予測することができます。また、全フォロワーに対して投稿が届くので多数へのアプローチができ、リツイートによってさらにフォロワーの枠を超えた不特定多数へのリーチに展開できます。

3種類の広告掲載が可能

Twitter広告の種類はいくつかあり、「プロモアカウント」はおすすめユーザー欄やアカウント検索画面に、「プロモツイート」はタイムライン上に、「プロモトレンド」はTwitter上のファーストビューにそれぞれ表示することができます。

Twitter動画広告のメリット

動画広告には媒体によって異なるメリットがあります。ここでは、Twitter広告だからこそ得ることができるメリットについて説明します。

2次拡散が期待できる

Twitterはさまざまなフォロワーがいて、各々に感じたことや見聞きしたできごとなどを「ツイート」としてを通して発信したり、観覧したりすることができます。そのやり方の中に「リツイート」というものがあります。Twitter広告では、このリツイートが大きな拡散を期待できる機能になります。

広告をみたユーザーが、その内容をリツイートしてさらに多くの人の目に触れると、またそこから拡散されていくという拡散現象が期待できます。2次拡散から3次拡散、4次拡散と広がりを見せれば見せるほど大きな効果を見込むことができます。

Twitterの広告費は、最初の1次ユーザーへのアプローチにのみチャージされますので、2次拡散以降のリーチに関しては一切広告費がかかりません。これはメリットの一つです。

リーチ力が高い

Twitter広告には、ターゲティングをする機能があります。一般的にTwitterでは、自分の興味があるものや関心事を話題にすることが多く、ツイートの中でしばしばその言葉が出てきます。そこで、Twitter広告の機能であるキーワードターゲティングを行うと、リスティング広告などではリーチしにくいユーザーへも広告を配信することができます。

Twitterでは、本人だけでなくその周りの友人やつながっている人たちが、今現在話題にしている内容が数多くやり取りされています。そのため、趣味趣向が認識されやすいといわれています。細かいターゲティングを行うことで、Twitterでしかリーチできない層へもアプローチが可能になります。

Twitter動画広告を制作依頼する際のポイント

できるだけ多くの潜在ユーザーへリーチするためには、ユーザーがツイートで話題にあげたい動画広告やリツイートしたくなるものを制作することが大切です。どのような点に着目して動画広告の制作を行えばよいのでしょうか。Twitter動画広告を制作する際のポイントについて説明します。

ターゲット層に合わせる

最初に確定しておきたいのが、どのようなユーザー層をターゲットにするかという点です。Twitter動画広告は、とても細かなターゲティング設定が可能になっています。そのため、しっかりとしたターゲットを定めることが重要になります。

Twitter動画広告の効果を上げるためには、ユーザー層をTwitterのターゲティング設定の細かさにあわせて絞り込んだうえで、そのターゲット層に合わせた内容を決めていきます。Twitterは情報の流れが早く、ターゲット層と内容が合っていない場合は、まったく見てもらうことなく、タイムラインから流れてしまう可能性もあります。

最初の数秒で視聴者の心をつかむ

Twitterでは、膨大な量のツイートがタイムラインを占めています。その膨大なツイートの中からユーザーは自分が興味を持ったもののみを見ることになります。では、動画の場合はどのようにして興味があるかを判断するのでしょうか。

多くの場合は動画の冒頭で決まります。ユーザーが興味を引く画像や情報などが最初に現れなければ、動画を見続けることはありません。また、リツイートされるにはさらにハードルが高くなります。冒頭でのシーンでどれだけ視聴者の興味をひけるかがTwitterでは大きな分岐点となりますので、制作の際には最初の数秒を大切にしたストーリー作りがポイントになります。

字幕を上手く活用する

スマートフォンでTwitterを利用している人は、ほとんどが外出先などや移動中の電車の中などで見ることになります。その場合、スマートフォンの音声はオフにしています。この状態で動画を見たとしたらどうでしょうか。大切なメッセージは、音声だけだと伝わりません。

そこで大事なのが字幕を利用することです。字幕は音声のない環境であっても情報を伝えられますし、耳で聞くよりも目で見たほうが、情報が認識されやすくなります。Twitter動画広告では、音声がなくても十分に情報が伝わるように字幕をうまく使うことがポイントです。

Twitterの動画広告の事例紹介

動画制作サービスCrevo（クレボ）では、さまざまな動画広告を制作していますが、その中には、Twitter広告のための動画も数多くあります。リツイートの効果でさらなる拡散が期待できる効果的なTwitter広告用動画がどのようなものかの事例を紹介します。

スマホゲーム「荒野行動」プロモーション動画

出典：Crevo制作実績

スマホゲーム「荒野行動」のプロモーション動画です。冒頭の女子高生の真剣な表情で視聴者の興味をひき、15秒という短い尺の中でゲームの臨場感を伝えるインパクトの強い動画になっています。また、音がなくても理解できるように実際に、女子高生がゲームに熱中している姿を視覚的に表現することでゲームの面白さを表現しています。

Twitterの特性を踏まえた動画広告はプロに依頼しよう！

Twitterの動画広告を制作する場合には、Twitterならではの特徴をふまえて、上手に潜在ユーザーへのリーチができるような動画広告を考えていくことが大切です。特に、リツイートによって制作された広告は拡散されると、想定していた効果を上回るプロモーションができます。

しかし実際には、Twitterの特性を踏まえ効果につながる動画を制作するには、さまざまなポイントがあります。それらをひとつひとつ組み込み、まとめ上げていくには制作の経験が必要になります。

効果的なTwitter動画広告を制作したいのでしたら、制作実績が豊富なプロに頼むのがおすすめです。CrevoでもTwitter動画広告の制作の経験があります。プロの持つノウハウでパフォーマンスのよい動画広告を制作しましょう。

Crevoの関連サービス

・Twitter広告の動画制作・映像制作

schema.org には医療や健康に関する MedicalEntity というタイプが存在する。薬や病気、医学の研究や論文など医療と健康についての情報を、ほかの schema.org タイプと同様に、検索エンジンを始めとする機械に理解させ人間であるユーザーに届けやすくできる。

投稿 医療・健康系のアップデート対策になるか？ schema.orgのMedicalEntity構造化データ は 海外SEO情報ブログ に最初に表示されました。

• スライド（PDF）
• 動画

ハンズオンで学ぶCSS Grid

鹿野 壮さん（ICS）を講師に迎え、CSS Gridの基本を抑えつつ、より一歩使いこなすためのテクニックをハンズオンで学びます。

• 2月4日[月] 19:30-21:30
• https://cssnite.doorkeeper.jp/events/85103

メッセージ、補足など

今回はご参加ありがとうございました。各モダンブラウザで使えるようになって1年経ったCSS Grid。2018年のオススメの書き方、採用事例、IE 11の対応方法、未来のCSS Gridまでを解説しました。アンケートでは「現場で使ってみようと思った」「CSS Gridの環境が便利になっていて驚いた」などの声をいただき嬉しく思います。新しい手法や技術を知ることは、自分自身の表現力や作業効率を上げることに直結します。ワクワクしながら新しい技術を一緒に学びましょう。

フォローアップでは、発表での補足とお寄せいただいた質問をいくつかピックアップして回答します。

アンケートでいただいた質問に関して

（質問）縦にコンテンツが並んでいるケースでも使うことはあるか？

はい、あります。今回紹介した案件では、固定幅のヘッダー・フッター、可変幅のメインコンテンツ、gapプロパティを用いたレイアウトの際に使用しました。サンプルコードは次のとおりです。

• https://codepen.io/tonkotsuboy/pen/aROyVq

（質問）チームの学習コストはどれくらいかかったか？

CSS Gridを案件に導入した2017年は、本セッションで紹介したエリア名の行列定義ができなかったため、覚えてもらうことに苦労しました。Autoprefixerの進化でエリア名の行列定義が可能になると、他のCSSによるレイアウトよりも簡単だという声もあり、数回使用するだけでCSS Gridを覚えてもらえました。

（質問）Sassを使用した場合、Autoprefixerをどのタイミングで使えばよい？

Sassのコンパイル後に、Autoprefixerによる変換を実行します。

（質問）要素が重なる表現は可能か？

同じ行・同じ列にアイテムを配置すると、アイテム同士は重なります。z-indexで重なり順を制御することもできます。

（質問）repeat()メソッドを使った場合、IE 11でアイテムがすべて左上に並んでしまうがどうしたらいいか？

行・列の繰り返しに使用するrepeat()メソッドは、AutoprefixerによるIE 11向け変換が可能です。しかし、アイテムの配置の際に注意点があります。IE 11を除くブラウザでは行・列の左上から順にアイテムが配置されていきますが、IE 11では自動的に配置されないので次のように配置位置を指定する必要があります。

▼ CSS

/* 1行目・1列目に配置する */
	.item:nth-child(1) {
	  grid-row: 1;
	  grid-column: 1;
	}
	
	/* 1行目・2列目に配置する */
	.item:nth-child(2) {
	  grid-row: 1;
	  grid-column: 2;
	}

行数、列数が増えると手動で記述するのは煩わしいので、我々の案件ではSassを使って次のように対応しました。$rowNum、$columnNumを変更すればコピペで使えるので是非ご利用ください。

▼ Sass

.item {
	  // 行数（3行）
	  $rowNum: 3;
	  // 列数
	  $columnNum: 5;
	  
	  // 左上から順番に配置する
	  @for $row from 1 through $rowNum {
	    @for $column from 1 through $columnNum {
	      $index: ($row - 1) * $columnNum + $column;
	      &:nth-child(#{$index}) {
	        grid-row: $row;
	        grid-column: $column;
	      }
	    }
	  }
	}

また、gapのIE 11向け変換はrepeat()メソッドを使った場合は不可能です（2018/10/01時点）。我々の案件では、repeat()メソッドを用いる場合はmarginやpaddingでアイテム間のスペースを設けることにしました。

（質問）repeat()メソッドで、行数・列数を固定して行幅や列幅が動的に変化するレイアウトがしたい

3行5列の行列を作成するには、次のようなコードを書きます。grid-template-rowsは行のサイズのみを指定するプロパティ、grid-template-columnsは列のサイズのみを指定するプロパティです。

▼ CSS

.container {
	  display: grid;
	  grid-template-columns: repeat(5, 1fr);
	  grid-template-rows: repeat(3, 1fr);
	}

「repeat()メソッドをIE 11で使う場合の注意点」で紹介したアイテムの配置を行えば、IE 11でもレイアウトが可能です。サンプルを用意しました。

• https://codepen.io/tonkotsuboy/pen/dgPgGb

（質問）repeat()メソッドで、画面サイズに応じて行数や列数が動的に変化するレイアウトがしたい

repeat()メソッドの第一引数にauto-fillを指定すると、コンテナーのサイズに応じて行数や列数の変わるレイアウトが可能です。詳しくは、記事「これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る - WPJ」を参照ください。

▼ 画面サイズに応じて100pxサイズの列の数を変えるCSSコード

.container {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, 100px);
	}

ただし、auto-fillはIE 11では使えないので、repeat()メソッドではなくgrid-templateプロパティなどで行数・列数を書き換えるか、Flexboxでレイアウトします。

感想

いただいた感想の中から、とくに印象深かった感想をいくつかピックアップします。Gridの便利さが伝わったようで何よりです。

• 行番号・列番号での指定が難しかったので、grid-templateプロパティを用いたエリア名の書き方がわかりやすかった。
• 昨年も参加したが、昨年よりもCSS Gridを使うのに便利な環境になっていることがわかった
• IE 11でgapプロパティの変換が可能になったことを知らなかった
• IE 11の対応を気にしていたが、今回の話を聞いて使ってみようと思った
• display: contentsやCSS Houdiniが、早く全ブラウザに実装されてほしい
• うにちゃんが可愛かった

さいごに

次の媒体でWebデザインやフロントエンドの情報について発信しています。こちらも是非ご覧ください。

• ICS MEDIA - Webデザイナー/デベロッパーの必読メディア
• tonkotsuboy_com - Qiita
• Flexbox 入門 - Lynda.com
• Gulp入門 - Schoo
• WebデザイナーのためのiOSアプリ開発入門 - WPJ

もしCSS Gridの学習をしていて不明な点があれば、Twitter等で気軽にご相談くださいませ。

2018年9月29日に都内で開催したCSS Nite LP58「Coder’s High 2018」のフォローアップとして、中村 勇希さん（トゥーアール）の『枯れゆく技術との付き合い方』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

メッセージ、補足など

基調講演を勤めました中村です。電車遅延で聞けなかった方、早口で聞き取れなかった方、ぜひビデオ配信もご覧ください。
また、今後の情報発信はツイッターで行なっているので、ぜひツイッターをフォローしてください。

@nayucolony

アンケートでの質問やコメントへの回答

技術への好奇心・モチベーション

スキルの低い自分では、自己満足を満たせないというのが一番の原動力です。あとは、すごく尊敬しているデザイナーさんがいつか起業した時に創業メンバーに手をあげられるようになっておきたい！みたいな野望もちょっとあります。長い目で見るとそういうモチベーションはありますが、目先の小さなモチベーションでいうとお給料がたくさんほしいのでできることを増やしたいというのが大きいです。

技術情報のキャッチアップはどうしたらいいか

Twitter で片っ端からフロントエンドエンジニアっぽい人をフォローしましょう。大きめのカンファレンスで登壇している人をフォローし、おすすめユーザーを芋づる式にフォローするのをおすすめします

JavaScript フレームワークは習得しないといけないか

長くなりそうなので記事を書きました

JavaScript フレームワークは、習得しないといけませんか？という質問への回答

java 有償化が JS へ何か影響を与えることがあるか

全く別物なので影響は皆無です。ただ、もし脱 java の流れが来るならば、それに伴い一気にモダン化をすすめようという流れでフロントエンド構築の案件がくるかもしれませんね。

これから様々に自動化が進んでいくことを鑑みると、フロントエンドエンジニアもコードをかけるだけでは生活できなくなる世の中になるのでは？

明日突然仕事がなくなることはありません。しっかりと状況を追っていれば、次の何かに移行することが可能です。何も知らない間に気づいたら取り残されていた、ということを避けるために、広い視野を持って情報収拾しましょう。おすすめはツイッターです。

バックエンドの開発に Vue や React に移行するメリットを上手く理解してもらう方法

SPA のメリットと、開発上のメリットを両方伝えることになりそうです。前者は調べればいくらでも出て来ますが、後者はコストの問題が大きそうですね。私は Vue や React で開発する時にサーバーサイドの環境は特に気にしなくていいので取り掛かりが楽だなぁと思っています。

受託案件では開発プロダクトの技術はどのくらいの期間担保する想定でとりいれているか

特に気にしていません。即リニューアルの判断がくだることもあれば、クローズされることもあります。作り変えることを前提に、その時安定している技術を採用しています。

チームでの知識レベルがバラバラなのだがどうしたらいいか

私は経験が浅く、チームを組むと「チームの中央値より下」のスキル感である場合がほとんどです。ですが、スキルがある人がちょっとしたケアをしてくれていることで、うまくやれていることが多々あります。

• 情報格差をなくす（環境の立ち上げ方など逐一ドキュメント化してくれている）
• コメントを書く（どういう意図のもとで設計されたロジックなのかを理解できる）
• レビューをする（人格否定ではなく、実装の甘さを詰めてくれる）

また、これらはスキルのあるなしによらず実行可能なことですので、私も心がけるようにしています。

JS に対する苦手意識が払拭できないがどうしたらいいか

こんな本があるみたいですよ。

スラスラ読める JavaScript ふりがなプログラミング

今の会社環境ではデザインから実装まで一通りやっているが、どれかに特化したい。今の環境では難しいと感じる。転職すべきか。

私だったら転職します。複数社話を聞いて見ると本当にどうするべきかみたいなことが見えて来そうです。

組織の都合上、管理業務が多くなってしまい技術のキャッチアップができていない。その中でも、作る現場のキャリアを取っていきたいと考えているが、何から手をつけていけばいいか？

組織としての価値は、マネジメントスキルをつけることかなぁと思ってしまいます。メンバーもそちらの方が幸せですしね。どうしても手を動かしたいのならば、おすすめ書籍であげた本を読んでみてください。転職もありだなとおもいます。

使いやすい、わかりやすい、ものを作ることが好き。今後のキャリアとしてフロントエンドエンジニアか UI デザイナーか悩む。

私はフロントエンドエンジニアですが、UI デザインに関するレビューは積極的に行うようにしています。結局、実装したものが世の中に出るので、そこの責任を担えるという点でフロントエンドエンジニアという仕事は好きですね。一意見としてご参考ください。

学習するためには、目的が必要だと思うが、仕事で使う前提で考えているか

基本的にはわからないことだらけなので、学習しながら仕事に活かしています。そういう意味では、仕事で使う前提ですね。本当は、全体的な実装コストの把握などできるようにサーバーサイドの勉強などもしたいのですが、フロントエンドで精一杯になっているのが現状です。

このフレームワークはこういう案件に良い、というのはあるのか

私は「客先のチームを組むエンジニアが Vue を書いているので」とか「React の現場を多くやってきたので」とかいう理由で決めて来ていたので、社内のメンバーに聞きました。

• Vue は SPA じゃなくてもカジュアルに使える感じはある。SPA だとあんま変わりないんじゃないかな。好きなの使えば良いと思う。
• Rails ベースでややこしいことを JS でやらなきゃならないときは React じゃなくて Vue かなー。サーバーで出力された HTML を元になにかしたい場合。

とのことです。Vue を軸に入門するのがよいのではないでしょうか。

アプリケーション開発のロジックとかデザインパターンとか MVC モデルとかそういうのを理解していないと意味がないと思う

おっしゃる通りですね。見よう見まねで書いたコードが、後から「実は修正しにくい作りになっている」とか「実はもっとスッキリかける」とかいうことに気づきはじめたのが最近で、現在私は設計の勉強をしています。

ただ、それに気づくにはまずは無理矢理でも動かしてみるのが大事かなとおもいます。私の場合、最近設計の本を読んでいると「たとえばあのプロジェクトのあの部分を、こういう風にわけたらいいのかなー」のように、踏んだバッドパターンを例に落とし込めているという現状があります。

JS が苦手な人は JS の基本をやったほうがいいか

基本を完全に理解しないとフレームワークが扱えないとは言いませんが、基本的な記法は理解しておく必要があります。フレームワークを導入しても、結局我々が書くのは JavaScript です。そこに、フレームワークのルールがあるかないか、という話です。

jQuery でアプリケーション開発は難しいのか / フレームワークをつかっても何ができるかピンとこない

jQuery でアプリをつくる = パワーポイントでデザインをする、というたとえでピンときますか？確かに図形もかければ文章もかけます。しかし、シンボル機能もなければ、レイヤー機能、アートボード機能な「デザインをするにあたって必要な機能」が足りません。
実現するには、スライドを複製して人力アートボードにしてみたりと、無理やり作ることになりますよね。ですが、ワイヤーフレームなど、パワポで十分！な瞬間も時にはあると思います。

jQuery でアプリをつくるというのは、それに近いです。フレームワークでは、パーツごとに

• 見た目
• どのようなデータを扱うか
• 変動する数値は何があるか
• このパーツは、他にどんなパーツを含んでいるか

などを明示的に設定することができます。また、アプリケーション開発における「あるある用途」が最初からいい感じに使えます。もしもフレームワークを使用しない場合、コメントを書いて構造化を頑張ったり、「あるある用途」を人力実装したりすることになってしまいます。ツールがあった方がいいですよね。

storybook を使っているか

一回だけ使ったことがありますが、管理コストがかかるのでビジュアル設計がしっかりしているプロジェクト以外で導入してもあまり意味ないだろうなあと思います。
逆に、ビジュアル設計がしっかりしていれば、完全なる動くドキュメントになるので、管理コストを支払ってでも導入する価値はあるでしょう。

妊娠、出産のキャリア

この辺の情報確かにないですよね。私も当事者ではないのであまり考えたことはなく。福利厚生に恵まれた会社の女性エンジニアのツイッターをフォローしておくといいと思いますよ。

初心者にオススメの本

以下がおすすめです。

JavaScript

• 確かな力が身につく JavaScript「超」入門
• 改訂新版 JavaScript 本格入門 ~モダンスタイルによる基礎から現場での応用まで

Vue.js

• 基礎から学ぶ Vue.js
• Vue.js 入門 基礎から実践アプリケーション開発まで
• Vue.js と Firebase で作るミニ Web サービス

• スライド（PDF）
• 動画

メッセージ、補足など

この度はCSS Niteにご参加いただきありがとうございました！　スライドの一部でテキストが重なって読めないミスがあり、大変申し訳ありませんでした…！

ウェブ制作の現場では、CSSアニメーションは不可欠な存在となりつつあります。アニメーションの追求には専門知識が必要で、それを習得しているデザイナー、エンジニアは多くはありません。にも関わらずウェブではアニメーションが「おまけ」のように扱われている側面があります。

おまけでちょっとしたアニメーションを入れたい、そういうオーダーを言ってくるクライアントが多いけど、「おまけ」で「ちょっとした」アニメーションで合意を取るのがどれだけ難しいかは、うなずいていただける方も多いでしょう。

とても幸いなことに、ウェブには素晴らしいCSSアニメーションがあふれています。それらを探し、再現し、ストックする。それだけで自分の武器が増えます。

CSSアニメーションはCSSで作られていますので、同じようにコードを書けば同じように動きます。この時点で難しさというのは極限まで下がっていると言って過言ではありません。あとは「なぜ素晴らしいと感じたのか」がわかれば、合意形成までの距離はぐっと縮まりますね。

発表の中の「ウケるアニメーションとは」でお話しした通り、全てのキモは「イージング」と「複数の動き」です。まずはイージングを工夫し、次に複数のプロパティーでアニメーションできるかどうか考えてみると良いです。

スライドと質疑応答の補足

easings.netをベースにイージングをカスタムする

cubic-bezier.comで3次ベジェ曲線を自分で調整するデモをお見せしたかったのですが、うまく行かず申し訳ありませんでした。

cubic-bezier.comでは青いハンドルと赤いハンドルをドラッグすることで自由にイージングをカスタムすることができます。Adobe Illustratorでのベクターツールをお使いの方なら調整にはさほどハードルは感じないかと思います。

ベジェ曲線がどうなっていると動きにどう違いが出るのか、体感できる非常に良いウェブサイトなので、少し時間を作って触ってみてください。

流行りのCSSアニメーションの探し方は？

僕が普段チェックしているのはCodePenですが、能動的に見に行くタイミングは「CodePen Spark」という無料メルマガが届いたときです。Sparkではデザインや機能が素晴らしいものやTIPS、ハック的なものが週一で紹介されており、その中でCSSアニメーションで作られたものがあります。それらをfavしておいて、あとで見返して詳しくコードを読み解き、手元にストックしています。

CodePenにも日本のユーザーはいます。アニメーションのクオリティと量共に、下記のお二方のCodePenは要チェックです。

• https://codepen.io/nxworld/
• https://codepen.io/YusukeNakaya/

僕のアカウトもあります！　CSSアニメーションは全然作ってませんが、先日「写真エリアの中央のボタンにhoverすると、ボタンの外側の写真エリアもtransitionする」というのを作りました。ただしクライアントにはそんなにウケませんでした。

CSSアニメーションとJSライブリのアニメーションはどっちがいいの？

複数のアニメーションを連続で順番で再生したい場合、3ステップ以上あるアニメーションならJSで管理したほうが調整が楽です。CSSでは順番でアニメーションさせたいもののdelayが１つ変わったら後のアニメーションの全ての記述を見直さないといけないのでとても大変です。

前のアニメーションが終わったことをちゃんと検知して次のアニメーションを始めたいなどの場合はJSでの処理が必要です。その時はアニメーションは全てJSで管理するようにした方が楽です。実装時に見るべきファイルが少ない方が開発しやすさも上です。

表示パフォーマンスの面ではWebGLやcanvasを利用できるJSライブラリの方が上です。使い分けや各ライブラリの特徴はICS MEDIAの「現場で使えるアニメーション系JSライブラリまとめ(2018年版) ? TweenMax, CreateJS, WebAnimation, Velocityなど」の記事で非常にわかりやすくまとまっているので、参考になります。

アンケートへの回答

デザイナーさんとアニメーションを決めるときはどのようにしているか？

デザイナーさんからアニメーションを入れたいと言われたときは、まず「具体的にこのサイトで使われているやつなどあったらリンクを教えてください」と伝えています。そこでリンクを教えていただけたらそのまま利用するだけなので最も話が早いです。その上にこちらの提案を被せてもコミュニケーションが増えるだけですので、それはせずにありがたく指示を受け入れましょう。

アニメーションは入れたいけど、相手が詳細なイメージを持っていない場合、まず「どんな系統のアニメーションなのか」をヒアリングし、それに応じてアニメーションさせるtransition-propertyを決めます。

• 大きさが変わる系→ width,height,transform: scale()を利用
• 透明度が変わる系→ opacityを利用
• 色反転する系→ colorとbackground-colorを利用
• 座標が変わる系→ top,left,transform: translate()を利用
• 回転する系→ transform: rotateZ()を利用

ここからはクライアントに見せられるサンプルが必要になります。

例えば透明度が変わる系では、まずはピュアに要素丸ごとのopacityをアニメーションさせるサンプルを作り、そこからバリエーションを2つほど派生させ、それに応じた質問もあらかじめ用意しておきます。

• opacityだけのもの→ 今は早く変化してゆっくり終わるんですが、逆でゆっくり変化して早く終わる方がいいですか？
• 画像とテキストのopacityを別のタイミングで変えたもの→ 透過を戻す順番はテキストが先がいいですか？
• opacityと一緒にscale()も変えたもの→ 透過を戻す前は大きい状態からスタートしますか？

このように、サンプルは極力少なくし、どれかをベースにしたコミュニケーションでアニメーションを調整して行くと意外とすんなり決まっていきます。

もちろん、もっと細かいバリエーションを見て決めたいと言われてしまったら、頑張って作りましょう…！

アニメーションがユーザーに与える影響の違いがあれば知りたい

「視線の誘導」としてのアニメーションがユーザーに与える影響が大きいです。わかりやすい例としてはブラウザの高さいっぱいにメインビジュアルが置かれたコンテンツです。ページを下にスクロールできることを示すアイコンや装飾を「スクロールヒント」と言いますが、それがゆったりアニメーションしていると、メインビジュアルを邪魔しすぎず、存在に気づいてもらうことができますね。

スマホコンテンツでも、一見すればスワイプできないエリアでも、指先のイラストが左右に動くアニメーションが表示されれば、ユーザーはそれによってスワイプできることを知れます。動いていることで視線を誘導し、動きの様子でユーザー操作を補助しているわけです。

アニメーションがユーザビリティを高めるシーンは多々あります。何がどのように変化するか、その先に何があるのかを知っているのは制作サイドの人間だけですので、アニメーションを活用すれば誰にとってもわかりやすいサイトが作れます。

サイト訪問者に効果があるのかわからない、うまく使えなさそうで悩む

発表では「CSSアニメーションは結論必要です」とでっかくお伝えしましたが、ない方がいい場合もあります。

• 長すぎるduration
• とにかくいろいろ動いて画面が騒がしい
• クリックできないエリアがhoverでアニメーションする

こうなってしまうとユーザービリティが下がるだけですので不要です。一番重要視したいのは、アニメーションがあることでユーザーの助けになることです。あってもなくても同じであれば、制作側の自己満足にしかなりませんので、まずはその線引で分けてみましょう。

「回っている寿司は美味そうに見える」ともお伝えしましたが、回転寿司がイマイチ美味そうに見えない気がするのは、寿司が「全て」「linearで」「ずっと動いている」からです。情報が平坦化されて、どれも大事に見えなくなってしまうわけですね。イージングが違うレーンで旬のネタが流れてきたら、美味そうに見えるでしょう。

hoverやfocusをトリガーするアニメーションはあくまでPCベースのもので、スマホサイトでCSSアニメーションをどう活用できるか？

リンクボタンやハンバーガーボタンは、スマホでは指で隠れてしまってアニメーションに気づかない場合はあります。しかし、スマホサイトをスマホだけで見るとは限りません。CSSメディアクエリでスタイルを書き分けている場合、デスクトップブラウザでも画面幅を狭めればスマホレイアウトの状態を確認できます。ブラウザを見ながら執筆などの並行作業をしているときに、画面幅を狭くしている人はそれなりにいます。そういったユーザーにはスマホレイアウトでもhoverやfocusは有効ですので、スマホサイトだからアニメーションはいらない、と切り捨ててしまうのは早計です。

発表ではボタンのCSSアニメーションしか紹介できませんでしたが、ページ内リンクのスムーススクロールやドロワーナビのスライドインでも、イージングの活用は可能です。

SPA（Single Page Application）で現在いるページがアニメーションで消えてから次のページを表示する場合なども、ただopacity :0にするだけのアニメーションより、各要素がtransform: scaleY(0)にもなる、テキストと画像が順番に画面外へフレームアウトして消えるなど、様々なパターンが考えられますね！

デモを作るときに凝りすぎてしまってやめどきがわからない

鬼の心で止めましょう。「やりすぎかな？」と思ったらほぼ確実にやりすぎています。

僕が担当してきた案件では、CSSアニメーションは下記の5種類のパターンが多いです。

• 大きさが変わる系
• 透明度が変わる系
• 色反転する系
• 座標が変わる系
• 回転する系

これらそれぞれで派生があればサンプルとしては十分です。似たパターンをたくさん用意してもその違いを判別できるクライアントは多くはありません。派生は、複数の動きを持つものと、イージングが違うものがあれば3つ程度で良いです。

また、アニメーションさせるトリガーとしては

• ホバーしたとき
• クリックしたとき
• 一定時間が過ぎたとき
• スクロールで画面に入ったとき

が主だったものです。hover以外を再現するにはJavaScriptの助けが必要になりますが、サンプルとして見せるならどれもhoverにしておいたほうが、すぐにアニメーションを発動させられるので確認がスムーズになります。

それらを見せながら「スクロールで画面に入ったときに、大きくなりつつopacityが0から1になる感じですね」などといったコミュニケーションが取れるようになれば、サンプルとして十分役割を果たせています。

もし差し支えなければ、レビューしますのでご連絡ください！　コードの良し悪しではなくサンプルとしての過不足をお伝えできます！

• https://twitter.com/o_ti
• https://facebook.com/otiext
• otiext@gmail.com

CSSアニメーションのパフォーマンスについて聞きたい

CSSアニメーションのパフォーマンスというと、transform: translate3d(0,0,0)のような、Null Transformと呼ばれる「おまじない」を利用してGPUレンダリングさせる手法が古くからあります。

.elem {
	  width: 50%;
	  height: 50%;
	  background-color: tomato;
	  transform: translate3d(0,0,0); /* 強制的にGPUレンダリングさせる */
	}
	.elem:hover {
	  width: 200%;
	  height: 10%;
	  background-color: gold;
	}

GPUレンダリングで表示パフォーマンスが向上することは事実です。特に座標が変わる系では効果が顕著です。

僕がこれまで案件をやってきて、CSSアニメーションの表示パフォーマンスの改善が難しかったのは以下のパターンです。

• パララックス
• 画面全体で動いている
• 長大なアコーディオンの開閉
• 写真やイラストなどラスター画像を動かしている
• 一度に動かす数が多い
• 一度に動かす距離が長い
• 画面スクロール中に動かしている

上記のパターンはNull Transformを利用してもほとんど改善できません。GPUレンダリングをしていても、その範囲が大きいとか数が多いと効果が出にくいようです。

さらに、ラスター画像を動かす場合は transform: translate3d(100%,0,0) で要素を画面の右へ追いやるよりも、left: 100%の方が表示パフォーマンスが良いケースも過去にありました。

一方、ボタンなどのマイクロインタラクションでは、Null Transformを意識しなくても表示パフォーマンスに体感で影響が出ることはほとんどありません。ですので、今回のデモでもNull Transformは使用しません。

CSSアニメーションをオーダーされた時は、必ず「表示が重くなる可能性」と「表示パフォーマンスを改善できない可能性」を説明します。それを理解した上でやりたいならば、もちろんやります。

BEMでElementの中にも要素があるので、そのElementもBlockにしたいがどう命名すれば良いか？

CSSアニメーションの話ではないのですが、僕はBEMが大好きなのでこれには答えざるを得ません。

ElementもBlockである場合とは、例えば、下記のようなHTMLでしょうか。

<div class="p-split">
	  <div class="p-split__col  p-code"><!-- p-split__col が p-code を兼ねている -->
	    <div class="p-code__header">...</div>
	    <div class="p-code__body">...</div>
	  </div>
	  <div class="p-split__col  p-view"><!-- p-split__col が p-view を兼ねている -->
	    <div class="p-view__header">...</div>
	    <div class="p-view__body">...</div>
	  </div>
	</div>

個人的にBEMでElementとBlockを兼業させるのはオススメしません。なぜならば、p-code やp-view Blockのスタイルがp-split__colに依存するCSSで構成される場合があり、別の場所でp-codeやp-viewだけで使ったときにスタイルが成立しなくなる可能性があるからです。依存があるのかないのかがまちまちですと、メンテナンス性は下がりますね。

ですので、「依存がない」に統一するために、ElementとBlockを兼業させず、Blockだけで常に独立しているHTML構造にするべきです。

<div class="p-split">
	  <div class="p-split__col"><!-- p-split__col でしかない -->
	    <div class="p-code"><!-- p-code でしかない -->
	      <div class="p-code__header">...</div>
	      <div class="p-code__body">...</div>
	    </div>
	  </div>
	  <div class="p-split__col"><!-- p-split__col でしかない -->
	    <div class="p-view"><!-- p-view でしかない -->
	      <div class="p-view__header">...</div>
	      <div class="p-view__body">...</div>
	    </div>
	  </div>
	</div>

では、ElementとBlockを兼業させないことを守った上で、p-code Block が p-split__col Elementの中にあるゆえに必要なスタイルは、どう書かれているべきでしょうか？　Modifierで管理しがちですが、Modifierは使いません。理由はいくつかあります。

• 命名が難しい
• 使いまわさないModifierになる
• シングルクラスのModifierのSass管理しづらさ
• マルチクラスのModifierのHTMLの冗長さ

まず命名が難しいです。先ほどのHTMLの、p-split__colの中にいるp-codeにどんなModifierをつければ妥当でしょうか。--inSplit__colでしょうか？　--blackBack でしょうか？　悩む時間の無駄さが半端ないです。ただでさえElementの命名で悩んでいるというのに。

そして悩んで命名したけど p-split__col の中以外の場所では使わないModifierになったりしませんか？

シングルクラスBEMにしているとSassのextendを使わないとしんどいですよね。そのときもextendを使うルールも決めておかないとあとあと管理できなくなってきます。

かと言ってマルチクラスBEMでModifierつきの名前をHTMLに併記すると、これがまた冗長すぎて苛立ってきませんか。

ということで、普通に子孫セレクタにして良いです。

.p-split__col .p-code {margin: 30px;}

scssファイルはBlockごとにファイル分割し、_p-code.scss のファイルに p-split__col の中にいるときのスタイルを記述しましょう。

.p-code {
	  .p-section__col & {
	      margin: 30px;
	  }
	}
	
	.p-code__header {...}
	.p-code__body {...}

これらの管理手法は「細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）」を参考にしています。

さて、BEMの理解でつまづくのが、「Element＝Block直下の要素」という先入観です。これは明確に誤りで、ElementはElementを入れ子にすることができます。

<ul class="menu">
	    <li class="menu__item">
	        <a class="menu__link" href="https://">...</a>
	    </li>
	</ul>

https://en.bem.info/methodology/html/#nesting-of-elementsより

ですので、「Elementの中にも要素がある」からといってBlockにしなければならないわけではなく、そのままElementを増やして良いです。その際に命名に困るというのがBEMあるあるですが、そこは割り切っていくと気持ちが軽やかになるでしょう。割り切りとは、以下のような命名を受け入れることです。

<div class="p-split">
	  <div class="p-split__inner">
	    <div class="p-split__inner2"><!-- 割り切りポイント -->
	      <div class="p-split__col">
	        <div class="p-code"></div>
	      </div>
	      <div class="p-split__col">
	        <div class="p-view"></div>
	      </div>
	    </div>
	  </div>
	</div>

おわかりでしょうか、 p-split__inner2です。 __innerの中に別の「インナー的なもの」が必要になったとき、こうして番号をつけてしまうことで考える時間をぐっと減らせます。無理して命名しなくてもいい、命名で困ったらブロックにしてもいい、そんなくらいに考えると良いです。もちろん別の場所で独立したBlockとなるものはちゃんとBlockにしましょう。

ElementはElementを入れ子にできると書きましたが、「Elementを繋いだセレクタを作って良い」とは言っていませんので、注意してください。Elementを繋いだセレクタとは、.menu__item__link とったものです。これはBEM的にもやってはいけないとされています。

終わりに

アンケート全体として、easings.netのcubic-bezier() を見比べられるサンプルにご好評をいただく声が多く、大変嬉しく思います。

ウェブサイトとして参照するだけでなく、リポジトリをフォークし、自分の客先に提案しやすいように色や大きさを自由にカスタマイズしてご利用ください。

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

2018年9月29日に都内で開催したCSS Nite LP58「Coder’s High 2018」のフォローアップとして、井水 大輔さん（エスファクトリー）の『』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

実サイトで学ぶウェブ解析のキホン

井水 大輔さん（S-FACTORY）を講師にを迎え、実サイトを例に公開コンサルティングのようなカタチでウェブ解析について学びます。

• 1月28日[月] 19:30-21:00
• https://cssnite.doorkeeper.jp/events/85104

メッセージ、補足など

『コーダーも知っておきたい解析事情2018』のセッションを務めました井水@190cmです。

質問させていただたた際に普段は解析に関わっていない方が半分ほどいらしたので、ちょっとドキドキしました。

しかし、終わってみればアンケートでは「解析は必要だと思った」「タグマネ使う!」「データ活用の重要さがわかって興味がわきました」など、多くの意見をいただきウェブ解析に興味持ってくれた方が増えてうれしい限りです。ありがとうございました。

アンケートでいただいた質問に関して

（質問）GAのグローバルサイトタグは<head>の直後とありましたが具体的には<title>の上とかでしょうか？

（質問）タグマネージャーのタグ、「<head>のできるだけ上の方に入れて」って言われたんだけどそれも<head>直後でいいんかな？

<head>のなるべく上の方がいいのですが文字コード指定の前にくるとよくないので<meta charset="UTF-8" />の直後がベスト位置です。

（質問）タグマネのタグを</head>の直前に入れてますが大丈夫でしょうか？

基本的には<head>直前でも問題なしです。

Optimize系のタグをGTM（グーグルタグマネージャー）で入れる場合には、なるべく早くタグを読み込む必要があるので、head要素のなるべく前にします。グローバルサイトタグも基本的には問題ありません。

（質問）電話タップは測定できますが、発信までは測定できないのでしょうか？

発信は測定できません。あくまでタップした回数が計測さるので誤タップやその後、電話がつながらなかった回数も計測されてしまいます。

（質問）WPでヘッダー（header.php）に共通でいれている電話ボタンでもページごとにトラッキングできるのでしょうか？

（質問）TELクリック計測で、ヘッダーやフッターのような共通ファイルで同じコードの場合はどうやって分析するのか知りたい。

タグマネを使用するとページのURLを合わせてひっぱってくることができるので同じIDをふっていてもどのページで電話ボタンがタップされたか計測が可能です。

（質問）タグマネージャーを勉強するための書籍やサイトはありますでしょうか？

ウェブで読めるコンテンツとしてはGoogle公式タグマネージャーヘルプがあります。

ただし、文章が多く実際設置するとなると不明点がでてくるかもしれません。そんなときには「GTM＋設置したいタグの名称」で検索すると関連ブログを見つけやすいです

。タグマネに関する書籍は現在2冊でています。

• 『デジタルマーケターとWeb担当者のためのGoogle&Yahoo!タグマネージャーの教科書
• 『実践 Google タグマネージャ入門 増補版』

（質問）昔からアナリティクスが入っているサイトにgtag.jsを足してくださいといわれれることがあります。2つタグが入っていても平気ですか？

同じプロパティIDのGAタグを同時に設置すると2重計測となりPVが2倍になったり直帰率が0になったりするので要注意です。

（質問）「ここにタグいれますか？」とか上流工程のときに聞いてもタグがくるのが遅いです。何の情報と一緒に渡して聞けば実装前にタグを発行してくれますか？

スケジュールの共有の際にタグの受け渡し日程も含めるとよいです。

〇〇日を過ぎると手間が増えるのでスケジュールがずれ込む可能性があるという認識を持っていただくと遅れることは少なくなると思います。

（質問）さまざまなチームでページの作成を行う環境で、それぞれがデータを取得したい場合使用する変数の管理をするのに良い方法はありますか？

今回少しだけしたお話しした取得設計書を使うと良いでしょう。

フォーマットは各チームが使いやすいように作ると良いと思いますが、一覧で確認できるシートを皆さんで共有することで重複や抜け漏れなどのミスを防ぐことに役立ちます。

（質問）GAをいれていますが、サーバーのアクセスログの方が正確だからとデータ抽出を依頼されていて、どうしたらよいか悩んでます。実際のところデータの正確性はどの程度あるのでしょうか？

おそらくサーバーログはリクエストがあった時点でアクセス情報を記録するので正確性が高いといわれていると思いますがそこでいう正確性よりどんな値を取得したいかの意見を聞いてみてはいかがでしょうか？

今回お話したようなGAでないと取得できないデータを活用したい場合はそもそもサーバーログ方式だとむずかしいという話ができそうですし。

またGAのようなウェブビーコン方式（ブラウザのクッキーを利用して計測する方式）とサーバーログ型では取得方式が違うので状況によって正確性が変わります。取得したい数値が取得できるのでればどちらでも構わないと思いますが、大事なことは100人訪問がある際に103と計測するか101と計測できるかという正確さより、同じツールで取得される数値をもとに今と過去や未来の数値を比較することです。

（質問）classでクリックを取得したいということで対応したことがありましたがすべてコーダーで対応しました。どこまでが通常コーダーで対応すべき範囲でしょうか？

基本的にはソースを書き換える部分がコーダーさんの対応範囲かと思います。タグマネの設定はマーケター、ディレクター、アナリストなどがやることが多いですがチームの取り決め次第の部分もあるので量が多い場合はどれくらい工数がかかるか共有して作業を進めると良いでしょう。また分析する人がタグマネの設定をしていないと分析する際にどうなってるかわからず困ることも知ってもらうと良いかと思います。

（質問）他にも役立ちそうなツールはありますか？ヒートマップツールを入れてますがうまく使いこなせている感がないので。

あまり次々にツールを導入すると管理しきれなくなるのでまずはGoogleアナリティクスをはじめ導入しているツールを活用することが重要です。

（質問）これだけは必ず入れておいた方が良いという解析ツールはありますか？また集めたデータはどのように分析していますか？

ひとつ数字を見る際に気を付けることは、いきなり数字を見ないことです。予め個々の数字はこうだろうなという予測をたててから結果を見ます。予想通りであれば仮説が合っていたということでそのままの方向で進めると良いですし、予測値と乖離があればなぜそうなったかを深堀出来るからです。

（質問）会社の方針でLP・解析・課題抽出・改善までサポートする動きになり勉強をはじめたのですが、この場合は「AB」テストなど改善方法に応じたテストパターンなどのところまでコーダーは理解している必要はありますでしょうか？

理解しているに越したことはないですが、それぞれ役割があると思いますので最低限どこまで理解しているとコミュニケーションがうまく進むかチーム内で確認しておくと良いでしょう。

最後に

データを活用したマーケティングは今後ますます加速していきます。クライアントや自社の予算も今後ますますデータ活用にさかれる割合が増えてくるでしょう。

ニーズは間違いなく高くなってくるので、そんな時にコーダーとしてどんな価値を提供できるかをこのセッションを通して改めて考えるきっかけになっていただければ幸いです。

SNSでも情報を発信していきますのでぜひお気軽に交流ください。

• Twitter：https://twitter.com/ImiDai
• facebook：https://www.facebook.com/daisuke.imizu
• Linkedin：https://www.linkedin.com/in/daisukeimizu/

2018年9月29日に都内で開催したCSS Nite LP58「Coder’s High 2018」のフォローアップとして、阿部 正幸さん（モチヤ）の『Webサイト表示速度改善手法』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

ハンズオンで学ぶBootstrap 4の基礎

阿部 正幸さん （Mochiya）を講師にBootstrapの基礎と、実際にプロとして使うためのノウハウをセミハンズオン形式で学びます。

• 1月10日[木] 19:30-21:30
• https://cssnite.doorkeeper.jp/events/85093

メッセージ、補足など

CSS Nite LP58 Coder's highに参加いただきました、皆さまありがとうございました。
Webサイトの高速化に登壇させていただきました、モチヤの阿部と申します。

セッションでは若干緊張しており、伝えもれてしまったことがありますので、こちらでフォローアップさせていただきます。

今回のセッションで一番伝えたかったこと

今回のセッションで一番お伝えしたかったことは、Webの高速化を行うには、なぜ遅いかを知るための原因調査がもっとも重要です。
原因を調査し高速化の対策を実施します。

速度調査ツール

まずはバックエンドに原因があるのか、フロントエンドに原因があるのかの大雑把な調査を行うためには、速度調査ツールを使うと良いでしょう。

• Test My Site
• Web担当者フォーラム
• Gtmetrix
• Google DevTools（ブラウザデフォルト装備）

バックエンドに原因がある場合

今回私のセッションでは主にバックエンドの施策の話をさせていただきました。
バックエンドで重要になるのが、キャッシュと、データベースの効率化で、下記の対策があります。

• サーバー引っ越し（スペックアップ）
• サーバー内部キャッシュを入れる
• データベース設計見直し、キャッシュを入れる
• データベースインデックス作成

「サーバー引っ越し（スペックアップ）、サーバー内部キャッシュを入れる、データベース設計見直し、キャッシュを入れる」　は、インフラエンジニアが必要ですので、今回のセッションは説明を除外させていただきました。

データベースインデックス作成について

データベースのレーコード数が多い場合、データベースインデックスを作成することにより高速になることが多くあります。
インデックスの確認や作成は、レンタルサーバーでも利用ができる、phpMyAdminからでできます。

インデックス作成時の注意点

• 必ずテスト環境で行う
• インデックス作成後は、しっかり検証を行う
• CMSのコアファイル、モジュール、Pluginのソースコードは変更しない

セミナー中は、気軽にインデックスの作成をしてみようと捉えてられてしまような発言をしてしまいましたが、インデックスの作成はメリットもありますが、デメリットも存在ます。

インデックス作成の目安は、スロークエリ（Slow query）を使って、遅いSQLの箇所を特定し、そのSQLのWHERE（検索条件）に対して行うのが有効です。
多くのシステムは適切なインデックスが作成されており、検索を高速に行っています。

またSQLの書き方によっては、インデックスを作成しただけでは早くならないケースも存在ます。原因がSQLにあると分かった時点で、一度エンジニア相談してみると良いでしょう。

インデックス作成のデメリットについて

上記でインデックス作成は必ず検証をしてくださいとお伝えしたのは、デメリットも存在するからです。
デメリットは下記の通りです。

• レコード数が少ないと速度は変わらない
• SQLの書き方が悪いと速度は変わらない
• データ追加時の動作が重くなる
• データベース容量が増える

検証

様々な施策を行ったあとは負荷をかけて、速度検証を行うことが重要です。

Apache bench

Apache benchはWebサーバーの性能をしらべることができます。
Macの場合はターミナル画面を起動し下記のコマンドを実施してください。

ab -n 250 -c 50 http://example.com/

• -n : トータルで発行するリクエスト数(250リクエスト)
• -c : 同時接続数(50同時接続)（最初は少ない数値で実施し、少しづつ負荷を上げる。共用サーバーで高い負荷をかけすぎないでください。）
• Failed requests : エラーの数ですので、ここが「0」だと良い結果です。
• Requests per second : 1秒間に何リクエスト応答できたかの数値です。高い数値の方が良い結果です。

LOAD IMPACT

LOAD IMPACTは、1日5回までの検証が無料で行うことができます。

• Vus : バーチャルユーザー数
• r/s : 1秒あたりのリクエスト数
• Response time : 応答時間

質問の回答

サーバーをホスティングで運用していて、.htaccessで、なかなかキャッシュコントールやgzipがやりたくてもできない場合はどうすれば良いか。

昨今のホスティングはデフォルトでgzip圧縮配信されています。もしサーバーが対応していない場合は使えませんので、ウェブサーバーの引っ越しを検討してください。
ブラウザキャッシュについては、ウェブサーバー側でデフォルトの設定がよく入っていますので、ChromeのDevToolsから確認をしてみてください。
（確認方法スライドに追加いたしました）
入っていない場合は、.htacessに下記を追記することで、追加できます。

<Files ~ ".(gif|jpe?g|png|ico|svg)$">Header set Cache-Control "max-age=1209600, public"</Files>

キャッシュのクリア方法

キャッシュのクリア方法は、キャッシュの設計と同じくらい重要です。
理由は、キャッシュのクリアタイミングが適切でないと、お客様から「記事更新したんだけど反映されない」と必ずクレームに繋がります。
ですので、記事が更新されたら、同時にキャッシュがクリアされるようにシステムを設計する必要があります。

例えばWordPressと、CDNを導入している場合は、WordPressの記事が更新されたことをフックにCDNのキャッシュをクリアするAPIをたたいて削除します。
DBの内部キャッシュを使っている場合も同様に、記事が更新されたら、DB内のキャッシュをクリアするようにプログラミングしておきます。

Lazy Loadの画像遅延読み込みに関してSEOでは非推奨と聞いたがどうなのか。

Lazy Loadは、コンテツサイズが大きいものに関して使うと有効です。
例えば動画をトップに表示したい場合、実案件で下記のような要件がありました。

• [実際にあった要件：動画コンテンツ]
  最初の読み込み時は静止画を表示しておいて、非同期で動画読み込み、動画の読み込みが終わったら、静止画と動画を切り替える。
• [実際にあった要件：画像コンテンツ]
  画像の読み込みはスマホ用の画像（軽量）を初めに読み込んでおいて、PCの場合はPCサイズ用の適切な画像をあとから差し込む。
  スマホファーストの場合は有効な手段で、SEOには影響しません。

デメリットとしては、PCの場合は別途で通信が発生してしまいます。しかし昨今のサーバー環境はHTTP2や、画像圧縮での配信など、ものすごく画像数が多くない限り問題になることは少ないです。

遅延読み込みがSEOで非推奨な理由は、Googleは遅延読み込みをした画像を検索用インデックスに登録できないからです。
その画像がSEOに必要ない場合は、遅延読み込みをしても問題ないですし、表示速度を落としてまで、画像を沢山読み込みたいということも無いでしょうから、適切に導入しても良いのではないでしょうか。

さいごに

イベントに参加いただきました皆さまありがとうございました、また皆さまにお会いできることを楽しみにしております。
下記は私のソーシャルアカウントです、お気軽にフォローいただけると幸いです。

• Facebook : https://www.facebook.com/chiyo.abe
• Twitter : https://twitter.com/abechiyo

2018年9月29日に都内で開催したCSS Nite LP58「Coder’s High 2018」のフォローアップとして、水越 佑介さん（リーグラフィ）の『コーダーとデザイナーの溝を埋める、業務改善のタネ』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

コーダーは、プロジェクトの中盤で活躍するポジションのため、上流からの要件変更やスケジュールの調整によって、苦労されている方も多いと思います。ですので、一つ上流にあたるデザイナーとの関係性は、特に重要です。

アンケートで頂いた貴重なご意見、ご質問に関して

ご紹介した事例に共感していただけた方が多かったのですが、一方で「デザイナーがやるべきことをコーダーが負担するのはちょっと…」と感じた方もいらっしゃったようです。実際の現場では、デザイナーやディレクターからの「歩み寄り」が必要不可欠です。例えば、Adobe XDのデモでお伝えした「レスポンシブの状態を確認する」については、デザイナーの方からアプローチしてもらった方が、より確実です。無理にデザイナーが担当する業務領域に踏み込む必要はありません。

（質問）各ロールの役割が曖昧になりそうですが？

役割分担については、プロジェクトによりますので、進行管理を統括するディレクターと相談してください。デザイナーからの歩み寄りが期待できる場合は、例えばふんわりした指示ではなく、具体案をデザイナーの担当領域として意識してもらってください。

（質問）気持ちコーダーに負担かけすぎでは？
（質問）コーダー側がかなり譲歩している印象でしたが、コーダー側から教育という部分では何かされていますでしょうか？

デザイナーとの協業の中で発生する「溝」を、全てコーダーが埋めることは、現実的に難しいでしょう。デザイナーが負うべき責任範囲も当然ありますので、遠慮なくデザイナーにコミュニケーションをとり、できるところはやってもらって構わないです。デザイナーが苦戦しそうなテクニカルな部分をコーダーがサポートできれば、良い関係が気づけて、お互いの負担が減るのではないかと思います。
教育という言葉が適切かわかりませんが、特にコンポーネント思考については、デザイナーにもコーダーにも共通して理解を深めるよう配慮しています。

（感想）数値でフィードバックをもらわないというやり方に、少しとまどいました。

フィードバック自体が明快で、完成後のイメージを改めて共有するまでもないシンプルな問題の場合は、数値でのフィードバックは効率的でベターですね。
でも、デザイナーにとって、その数値が想定外だった場合はどうでしょうか。改めてデザインを検討し、コーダーに返すことになります。この手間をデザイナーが負担するか、コーダーが負担するかの問題は「役割分担」の話になります。

（質問）コーダーから見るとミスに見えるが、デザイナーは意図していることが多いパターンの例はありますか？

• 視認性の低い極小の文字、コントラストの低い文字など
• マウスホバーで明るくなりすぎて見づらいボタン
• リピートしてもよさそうな背景画像（グランジテクスチャの紙っぽいイメージ）がリピートできない

このようなデザインに対しては、アクセシビリティや表示速度の観点で不都合になるケースが多いので、デザイナーに確認したいですね。

（質問）コミュニケーションがとれないデザイナー・コーダーとのやりとり、先回りする行動など知りたかった。

デザイナーとコーダーが全く接触できないということであれば、体制を見直してみてはいかがでしょうか。

（質問）デザイナーが気分屋の場合は？
（質問）Web制作にアジャイルはないか？

コーダーにデザインデータが渡った後でデザインがころころ変わるということであれば、その意図をまず確認してください。そもそもプロジェクトの進行の仕方に問題があるか、プロジェクトの根本部分がぶれている可能性が高いですが、アジャイル的な開発の進め方をしている場合は、そうとも言い切れません。ディレクターに協力してもらいましょう。

（質問）XDでは細かいことができなさそうと考えて、Photoshopばかり使っています。全てXDでデザインするのでしょうか？

同様の質問を多数いただきましたが、XDだけでデザインカンプの全てを完遂することは、あまりありません。写真加工やPhotoshop、ロゴなど文字間隔を調整する場合はIllustratorというように、適材適所でツールを使い分けます。

（質問）社内全てにAdobe XD導入って、お高いんでしょう？

Adobe XDは、一部機能が制限された無料版があります。（2018年9月現在）詳細は 「プランを比較する | Adobe XD」をご覧ください。

（質問）XDはSketchよりいいですか？

どちらが優れているかということについては、どちらも優れているとしか言えないです。個人的にはXD推しです。デザイナーやディレクターにとっても、とっつきやすいツールです。

（質問）デザインカンプをPhotoshop8割、Illustrator2割で作っている環境です。今後、制作において、InDesignを使用した方がいいと思いますか？その理由はありますか？

InDesignをウェブサイトのデザイン制作に利用した経験がなく、「使用した方がいいかどうか」の判断はできかねます。

（質問）デザインガイドはどのように作られていますか？

色々な手法があるかと思いますが、弊社では主にAdobe XDで、クライアントに向けて作成しています。ウェブサイトのUI策定の基準になると説明し、合意を得ておくケースが多いです。タイミングとしては、コーディングよりも上流の「UI要件」で作成します。

（質問）スライドで使用しているフォント気になる…

フォントは「筑紫A丸ゴシック」です。ちなみに、イラストは、Adobe Stockの「jesadaphornさんのポートフォリオ」から選ばせていただきました。

（質問）画面共有をするサービスを、もう一度教えてください。

appear.inです。非常にシンプルで、簡単に無料で利用できるのでおすすめです。
チャットや画像の共有のみでしたら、チャットワークやSlackといったアプリケーションもいいと思います。いずれも弊社では実案件で利用しています。

2018年9月29日に都内で開催したCSS Nite LP58「Coder’s High 2018」のフォローアップとして、植木 真さん（インフォアクシア）、 秋山 豊志さん（コンセント）の『実案件から学んだフロントエンドにおけるアクセシビリティ対応』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

メッセージ、補足など

セッション3「実案件から学んだ フロントエンドにおけるアクセシビリティ対応」の発表をしました秋山です。
「植木さんのアクセシビリティセッション」として笑いを期待されていた方、今回は笑いポイントが控えめでごめんなさい。

普段、自分達が何気なく行なっているマークアップ。
CSS や JS の表現力の強さに目を奪われがちですが、「情報の提供」という側面においてはマークアップ以上に重要なことはないと言っても過言ではありません。
表現、機能の都合を優先しそうにになることもあるかもしれませんが、そこをぐっとこらえて情報構造としての正しさとの両立を目指してください。

また、基本の「キ」「ホ」の中には、一部、コンテンツについて言及しているものも含んでいます。
これらは「コーダーが考えるものか？」と問われれば、自分は「違う」と答えます。
ただし、「コーダーが担保するものか？」であれば「イエス」と答えるでしょう。
視覚的に表現されない情報の有無にいち早く気付くことができるのもコーダーだからです。
あるべき情報が不足していた場合、コーダーが積極的に声をあげ、周りと連携をとってコンテンツをアクセシブルにするために行動する必要があると考えています。

今回のセッションで情報を提供すること、改めて「マークアップすること」の大切さに気づいていただけたのであれば幸いです。

植木 真（株式会社インフォアクシア）

セッション開始前に「アクセシビリティに取り組んでいる人？」という問いかけに手を挙げた人は、全体の1～2割程度でした。

でも、スライドを入手したら、基本の「キ」や「ホ」で紹介した合計20項目のうち、普段自分が意識していることが幾つあるか改めて数えてみてください。きっとゼロという人はいないと思います。「アクセシビリティ」だと思っていなかったとしても、半分の10項目くらいは意識している人が大半ではないでしょうか。

全国各地で「Webアクセシビリティの学校」を開催しているのですが、アンケートで最も多くいただくコメントが「意外と普通のことが多くて、イメージが変わりました」、「何気なくやっていたことに意味があることを知りました」というものです。今回の基本の「キ」と「ホ」でも、そんなふうに感じた方も多かったのではないかと思います。

2020年にオリンピック、パラリンピックが控えているせいか、アクセシビリティを確保していきたいという企業が増えています。弊社でも案件は増えてきているのですが、対応できるスキルを持った制作会社さんや制作者さんが不足しているのが現状です。今回のセッションで興味を持った方がいらっしゃっいましたら、スキルアップの1つのテーマとしても「アクセシビリティ」を意識してもらえたらと思います。

100点じゃなくていいんです。まずは、基本の「キ」と「ホ」の中で、1つでも2つでもいいので、できることから実践していきましょう。ウェブを今よりもマシンリーダブルにしていけるのは、コーダーの皆さんなのですから！

アンケートでのご質問への回答

Q1. 間違ったコーディング例はdiv要素の場合でしたが、section要素でも同じなのか気になりました。

section 要素を利用する場合においても、div 要素と同様の結果となります。スクリーンリーダーは、現時点ではsection 要素による情報のまとまりをユーザーに伝えることができません。

要素の意味から考えると「section 要素で情報のまとまりを示せる 」と考えるのは妥当ではあるのですが、アクセシビリティの観点からは見出し要素を情報のまとまりの起点とする方が、より幅広い環境へとアプローチできます。ただし、上記は「 section 要素を利用しないでください」というものではありません。

それよりも、単純に「画像1、見出し1、本文1、画像2、見出し2、本文2、...」という順序でHTMLコードに記述されていると、スクリーンリーダーはその順序通りに読み上げていくので、例えば「画像2」が「見出し1」のコンテンツであるかのように聞こえてしまいます。そういった読み上げ順序を考慮しても、見出しの前に情報を伝えているコンテンツがあることは好ましくないといえます。

例えば、同じように見出しの前に画像がある場合でも、情報を伝えていない装飾の画像であれば、alt属性を空にしたり、CSSのbackground-imageプロパティを使ったりすることで十分なこともあるでしょう。

Q2. alt属性は長くてもいい、最近はそうなったんですね。今はlongdesc属性は使わないのでしょうか？

longdesc 属性は「サポートしている環境が非常に少なく、longdesc 属性を利用してもユーザーに情報の提供ができない」状態です。そのため、代替テキストの提供手段として longdesc 属性の利用はお勧めできません。
（また、html5 でも img 要素の longdesc 属性は廃止されています）

少し古いのですが、下記に longdesc 属性のサポート状況が記されています。仕様上は正しかったとしても、ブラウザや支援技術によるサポートが十分でなければ、ユーザーはそのコンテンツを利用できないことに注意する必要があります。
https://waic.jp/docs/as/info/201406/H45.html

Q3. 意味のない要素（例: ULリストの行頭記号）にCSSのcontentプロパティを使用するのはアリでしょうか？

「アリ」です。

ただ、注釈で頭に利用する ※ （米印）は、悩ましさがあります。「参照元と参照先で、一対に ※ （米印）を存在させる」という観点で、秋山は「※」を content プロパティで表現しないようにしています。

Q4. ハンバーガーメニューのbutton要素はフォームの送信用だからダメだと言われたのですが？

ご指摘ありがとうございます。
button 要素を submit として利用させないようにするためには、type 属性の指定が必要でした。
下記のように訂正させてください。

<button type="button">メニュー</button>

また、リンクを強調するために、見た目を「ボタン」的に表現する場合もあります。
この場合は下記のように a 要素を使っていただいて大丈夫です。

<a href="#" class="button">リンク</a>

2018年9月29日に都内で開催したCSS Nite LP58「Coder’s High 2018」のフォローアップとして、佐藤 あゆみさん（ism／PentaPROgram）の『フロントエンドでサイトスピードUP！』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

メッセージ、補足など

たくさんのご意見、ご質問をいただき、本当に参考になりました。ありがとうございます。

フロントエンドの高速化は取り扱う範囲が広く、環境差による例外も多く発生します。
すべてを網羅して説明しようとすると「※ただし?の場合は○○」という注釈だらけになって本文の量以上になってしまいます。

何か違和感を持ったり、うまくいかないことがありましたら、お調べいただくか（図解入りで丁寧に説明された素晴らしいサイトがたくさん存在します）、ご質問をいただければ幸いです。

私は、常に世界は移り変わり、そして人間が改善のための試行錯誤を繰り返す限り、永遠に完成しないものだと捉えています。

そして、ウェブ制作に関するすべてを「完璧」に行う必要はないと考えています。

バリデーターで100点を出せなくても、運用してみて、成果が出ればよし。

結果よければすべてよし、です。その時点でのベストを探ります。

作る側としては完璧な状態というのは気持ちがよいものですが、「ベスト（最良）」と「パーフェクト（完璧）」は異なります。

最終的に人間にみてもらうために制作しているものですから、制作過程で機械的に割り切れなくとも仕方がありません。

高速で表示したい、というのも元をたどればSEOではなく人のため。

サーチエンジンは、人間の後を追って成長しています。

人間を大事にしていれば、サーチエンジンにも評価される（であろう）時代がやっとめぐってきました！

Twitter(@PentaPROgram)

ismでの紹介ページ

セミナー内容への補足

スライド中では直接触れていない内容について補足します。

「消したいけど消せない」への対処はGitで

｢大切にしていたものを失うこと｣は、脳では、体で感じる痛みと同じように処理されている

引用：なぜ僕らはムダなものを買ってしまうのか：部屋も頭も整理するために私が作った4つのルール

という研究もあるそうです。

…さまざまな事情があるかと思いますが、もし周囲の反対にあってコンテンツを消せない場合、こう提案してみてはいかがでしょうか。

「少し外して様子をみてみませんか？　戻すのは、いつでも戻せますから」

消すのではない、少し外して、様子をみてみるだけ。

これなら失うものは何もありませんので、少し和らぐのではないでしょうか。

※ちなみに個人的には削除後に「戻して」といわれたことはありません。消したら消したで忘れていくようです。

そして、（この件に限らず）もちろんきちんと常にバックアップを取って、必要であれば戻せる状態にしておくことが必要です。

そういった場合に便利なのがGit等のバージョン管理システムです。

いつ、誰が、何をしたのかを、HTMLソースを汚すことなく記録に残していけます。

Gitを使えば、例えば「2017年9月29日の状態のWebサイト（静的コンテンツ）をまるごと復元」することも可能です。

また、「去年やってた○○キャンペーン、今年もやるから今からサイトに載せ直して！」という依頼が来たときも、過去メールログやフォルダを漁る必要はありません。

Gitの履歴（コミットメッセージ）をめぐって「…○○キャンペーンは…あった、これだ、この日に削除したこのソースをコピペしよう！」という風に復活させることも可能です。

便利そうだなと思ったら、ぜひ一度、お試しください。

アンケートでいただいたご質問への回答（サーバー編）

以下のサーバー編の回答にあたりまして、同日に「Webサイト表示速度改善手法」セッションで登壇いただいた阿部 正幸（モチヤ）さんにご協力いただきました。アドバイスいただき誠にありがとうございました。

.htaccessですべてのキャッシュを無効にする

テスト・ステージング段階で、クライアントに「リロードしてくださいね」という手間を省くために.htaccessですべてのキャッシュを無効にしたい場合は、下記のような記述にします。

# キャッシュ設定<IfModule mod_headers.c>Header set Pragma no-cacheHeader set Cache-Control no-cache</IfModule>

ただし、以前同じサーバーのファイルにアクセスしたことがある場合、前回の配信時にExpires、Last-Modified や ETag などの指定があった場合は、指定の時間までローカルキャッシュはクリアされません。

また、過去に検証した際に各ブラウザによって動きが異なることがあり、一部ブラウザではキャッシュがクリアされない可能性もあります。

deflateで圧縮してからレスポンスで返す場合、サーバーへの負荷はどの程度？

負荷を測定したことがなく、ご質問への直接的なご返答はできかねます。申し訳ございません。

ただし、gzip圧縮が入っていないサーバーは昨今はほぼないと認識しており、そしてモジュールが入ってるサーバーはデフォルトでonになっていますので、こちらに関しては気にする必要はないと考えます。

.htaccessはフロントエンドエンジニアでも扱えないとまずい？

キャッシュの制御や、リライトルールなど、書けた方がもちろんよいと思います。

アンケートでいただいたご質問への回答（フロント編）

CSS配信の最適化って大変じゃないですか？

• CSSを非同期にした場合の運用・更新が難しそう
  
• 他ページから流入してくる場合は、そのページのFMPのインラインを出しておくという話でしょうか？（全ページ対応！？）
• 作りにもよると思うが、パーツをincludeの場合もFMPはOKか？

とても多くいただいた質問でした。

無理そうであれば行う必要はない、と前置きした上で、回答させてください。

全ページ同じCSSインライン化しちゃってもよい、と考える

まず、私は

• FMPの範囲は同じサイトであれば異なるページでもおおむね同じCSSが適用されている
• FMPの範囲内のCSSは、運用開始して以降はそう頻繁に変わるものではないと考えています。

トップページは特殊なレイアウトになることが多いですが、ヘッダーのデザインやページの背景色、見出しのスタイル等は、サイト内でパターンとして統一されていることが多いのではないでしょうか。

厳密にやろうとすれば、1ページずつ、それぞれのファーストビュー内のCSSを探っていくのが理想的だと思います。

ですが、そもそも端末ごとに異なるのがファーストビューですし、人力で厳密にすべてに対応しようとするとかなりの労力を使います。

そこで、まず、サイト内で統一されているデザイン部分のCSSをすべてのページ内のheadタグ内に書き込んでしまうことで、大体のページのファーストビューは網羅できます。

除外しなくてもよい、と考える

厳密にやろうとすれば、headタグ内に書き込んであるスタイルは、後から読み込む外部CSSからは消しておくべきですが、それも「被っててもいいんじゃない」とおおらかにそのままで対応してもよいと考えています。

まずテスト環境で試して、実際のレンダリングを比較して、それから取り入れるか考えてもよいと思います。

「いやー、取り入れるほどでもないわ」と思えば、元に戻せばよいのです。

gulp等の自動化ツールを使っているとインライン化したCSSの管理が面倒そう

私はgulpを使用したことがありませんが、gulpにはcriticalというライブラリがあるそうです。

※癖があるのでまったくお勧めはしないのですが、私はJekyllというRuby製のテンプレートエンジンをカスタムしたものをコッソリ好んで使っています。

CSSの非同期部分でnoscriptで読み込んでいる部分は？

JavaScriptが動作しないブラウザでもCSSを読み込めるようにしています。

CSS の配信を最適化する(ソースコードの引用元)

CSSを複数読み込んでいる場合にインライン化するには？

Critical Path CSS Generatorを使用する場合、読み込んでいるCSSをすべて2の「FULL CSS」の入力欄にぺたぺたコピペすればOKです。

PageSpeed Insightsの判定が99点でしたが、100点にするにはどうすればよかったのでしょうか？

事例で出したサイトが99点だった理由は「外部サーバーのファイルを読み込んでいるから」でした。

解析タグなどの外部サーバーのファイルをページ内に読み込む場合、外部サーバーの設定は変更できないため、外部サーバーの設定内容で検査項目に引っかかると減点されます。
ただ、100点でなくても気にしなくてよいと思います。

PageSpeed Insightsはページが遅い理由を示しているわけではないですよね？

はい、PageSpeed Insightsでは、速度の計測や「こうすると速くなるかも」という提案はしてくれますが、未実行の提案がページが遅い原因になっているとは限りません。

何がボトルネックになっているかは、先の阿部さんのセッションで触れられている調査方法で調べられます。

では、なぜPageSpeed Insightsを出したかといいますと、私自身が、クライアントからPageSpeed Insightsの結果を見せられ「うちって遅いんじゃない？」と相談されたエピソードにあります。

URLを入力するだけで簡単に実行できるツールのため、誰でも分かりやすく「採点」できます。

ウェブ制作について学習する前の段階でも、速度を意識するきっかけのツールとして一つの指標になるものと捉えています。

画像はどこまで圧縮すべき？

• ファッション系のECサイトの場合、画質が重要なので、どこまで圧縮するか悩みます。
• 圧縮NGの場合、バレない圧縮方法はありますか…

悩みどころですね。

効果が目にみるような容量削減を目的とする場合、バレない圧縮方法というのは、申し訳ありませんが、思いつきません。

ツールによって圧縮精度は異なるものの、JPEGもPNGも「非可逆圧縮」することになり、画質が劣化します。

わざわざ圧縮NGと明確に指示されている場合、チェックの目も相当厳しいと思われます。

ただ、例えば買う気満々100%で商品の詳細ページをじっくりみている場合や、アーティストのファン専用サイト等では、たとえ表示に時間がかかったとしても、待ってくれるとは思います。

何がなんでも圧縮しなければということではありません。

もし私だったら、デザイン優先であれば、それはそういった戦略として受け止めてコーディングします。

その代わりに表示が遅くなることはあらかじめ断りを入れます。

縦長ページであればlazyloadで画像を遅延読み込みさせて読み込み速度を意識させないというのが現実的な落としどころになってしまいそうです。

その上で、私はキービジュアルのような大きな画像の場合は200KB前後を目安にしています。

経験上は下記のようなJPEG画像は劣化が目立ちやすいです。

• 彩度が高い、クッキリした印象の画像
• 明朝体など細いフォントで書き込んである

文字入り画像で、特殊なフォントを使用している場合は「背景画像(JPG)＋文字(PNG)」に分離してからそれぞれ圧縮した後にCSSで重ねる対応をしたことがあります。

ビデオ圧縮ノイズを目立たなくさせる話、気になります

背景に動画を使う場合、きつく圧縮すると動画の画質が汚くなってしまいます。

そこで、圧縮してあることを目立たなくさせるために、背景動画に網掛をして目をだまそう！というテクニックのお話でした。

当フォローアップページ下部、「その他」の「鷹野さんのいっていた『動画の市松模様…』」をご参照ください。

商材の関係で動画がトップにあり、遅いのですが、どうにかなりますか？

※サイト名の記載がありましたが、私の判断で伏せました。

実際に拝見しましたが、確かに表示されるまでに間がありました。動画部分で計3MB位でしょうか、特にケータイ回線では瞬時には表示できないでしょう。

一つ上でお応えしているような「高圧縮にして網掛でごまかす」テクニックも使えるとは思います…が、そもそもこんなにたくさんの動画を再生しなくてもよいように思いました。
特にスマホでは、動画が現れる前に、ただの白背景だと思って動画が表示される前にさっと下にスクロールしてしまいそうです。

• 勝負の動画一つに絞って表示する
• もっと短くカットした動画を繋いで一つの動画にする
• 画像に変更し、CSSを使って少し動いているように見せる

個人的には動かさずとも美しく商材が伝わる「勝負画像」1枚でよいなと思ってしまいます。
正確には横長のPC用と縦長のスマホ用の2枚ですね。
その上で、「サンプル動画ギャラリー」のページを設けて、興味がある方にはそちらでじっくりみてもらうという形はいかがでしょうか。

そもそも画像を使用しないという選択肢があるのではないでしょうか？

そうですね。

画像を使用する必要がない、もしくはCSSで表現できる、アイコンフォントを使用するなどの代替手段がある場合は、画像を使用しなくてよいと思います。

asyncとdeferの違いは？

asyncは非同期、deferは延期です。

asyncの場合は、記述した順序に関わらず、読み込みが完了したスクリプトからすぐに実行されます。

deferの場合は、ページの読み込みが完了した後に順次実行されます。

asyncで非同期読み込みをするとブラウザレンタリングがブロックされないという認識でいいでしょうか？

はい、そうです。

どんなJSでも非同期にしてしまってよい？

表示を開始した時点で実行される必要があるスクリプト、また、主にファーストビュー内で直接的にレンダリングに影響するスクリプトは、非同期にしない方がよいです。

解析系のタグは、原則として記述をいじることなく指示された通りに設置しましょう。

FMPはどこで確認できるのでしょうか、ChromeのDevToolsのAudit (Lighthouse)でしたっけ

はい、ChromeのDevTools内のPerformanceやLighthouseにて、どのようにレンダリングされているかを確認できます。

2018年9月29日に都内で開催したCSS Nite LP58「Coder’s High 2018」のフォローアップとして、の木達 一仁さん（ミツエーリンクス）『クロージングトーク 「UI開発者の生存戦略」』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

メッセージ、補足など

アンケートにご記入いただいた感想すべてを、やや緊張しながら（なにせCSS Niteでは10年以上ぶりの登壇でしたので……）拝読させていただきました。「仕事のモチベーションが上がった」「コーディングを楽しんでいきたい」といった感想を複数いただき、イベント全体を締めくくる役目をある程度は果たせたのかなと、ホッとしています。

タイトルに含めた「生存戦略」……だいぶ堅苦しい印象の言葉ではありますが、要は技術の変化にどう向き合うべきかを提案したつもりです。UI開発者はともすると、学ぶべき技術の量やその変化に圧倒されそうになりますが、闇雲に焦る必要はありません。Webやその周辺がどう変化しようとしているか、表層的な流行り廃りに振り回されすぎることなく、大局を見定めたうえで、いつ何を学ぶべきか取捨選択しましょう。

そしてユーザーへのフォーカスについて。講演では「CSS in JS」を引き合いに、ユーザーという言葉をUI開発者自身という意味でお話ししましたが、開発されたUIを使う立場のユーザーについても同様です。ユーザーの課題をUI開発者が正しく認識できなければ、UIを改悪しかねません。だからこそユーザーにフォーカスし、解決すべき課題は何か、その課題解決に適した技術は何かを、都度考えることが重要です。

またいつか、10年後かもしれませんし来年かもしれませんが、ご縁がありましたらCSS Niteの場でお目にかかりたいと思います。改めて参加された皆様、そして鷹野さんはじめ運営側として尽力くださった皆様に、感謝申し上げます。ありがとうございました。

旅行の詳細を決める際に行き先が決まると次に考えるのが宿泊先です。旅行で利用するホテルを選択するときの決め手はどこにあるのでしょうか。そのポイントをプロモーションの中でアピールすることは重要なことです。さまざまなホテルの違いを説明するときには、客室や施設を紹介する映像を活用すると効果的です。この記事では、ホテルがプロモーション動画を活用するメリットと制作するときのポイントを紹介します。

ホテルのプロモーション動画の効果

ホテルのプロモーション動画は、画像やテキストのみでは紹介しきれないホテルの印象を明確に伝えることができます。プロモーション動画を使う効果について、どのような訴求ポイントがあるのかを中心に説明していきます。

ホテルの雰囲気や特徴を紹介できる

ホテルを選ぶときにどのような情報を活用するのでしょうか。旅行会社のパンフレットもそのひとつですが、多くの場合、インターネットで情報の収集を行います。インターネットにあるホテルの検索サイトは、単純にひとつひとつのホテルの情報があるだけでなく、ホテルのさまざまな項目を比較することができるようになっています。

場所や料金はもちろんのこと、食事のメニューや、アメニティ、付随施設など自分たちが気にするポイントを比較して選んでいきます。しかし、細かい情報を比較する前にまず目に飛び込んでくる情報は、ホテルの見た目や部屋の様子の写真になります。

最初の印象が良ければ、大きなアピールポイントになります。そこで、写真の代わりに映像を活用すると、ホテルの魅力がしっかりと伝わりより印象に残すことができます。映像はひとつの流れでホテル全体を紹介することができます。文字や写真では表現できない雰囲気や空気感も表現できます。伝わりにくいものほど、本来のそのホテルの魅力であることが多く、映像で表現されたアピールポイントは、しっかりと顧客の印象として残ることが期待できます。

外国人にも伝えやすい

観光業において、年々増加しているインバウンドの取り込みは大きな課題です。そのため、ホテルプロモーションにおいては、外国人へのアピールは外せないものになっています。

ワールドワイドのネットワークを持っているホテルでは、ウェブサイト上にホテルプロモーションとして映像を活用しています。さまざまな国の人たちをターゲットにしていることもあり誰にでもわかる映像は、ホテルの魅力を一目瞭然でアピールすることができるからです。

ホテル外観だけでなく、ホテル内の設備や部屋の様子、周りの環境を映像に収めてシンプルに伝えることによって、そのホテルの仕様をしっかりと伝えることができます。また、ホテル内で行われるイベントや、そのホテル特有の施設などを組み込めば、より一層効果的なプロモーションが期待できます。

映像では、音声をつけてホテル全体の雰囲気を表現することもできますし、外国語の字幕がなくてもホテルの施設や滞在したときの様子を伝えられますので、効果の高いプロモーションとなります。

ブランディング

ホテルをステータスで選ぶ顧客もいます。ホテルの持つ世界観は、そのままそのホテルのブランドになっていて、顧客満足度を上げる条件になっているものも少なくありません。ホテルのブランディングは、ホテルの設備などではなく、従業員の立ち振る舞いや気遣い、ホテルから宿泊者への思いを伝えるものです。

このブランディングは、言葉ではなかなか伝わりにくいのですが、映像にすることで、具体的であったり抽象的であったりとさまざまな面から伝えることができます。

日本のホテルのプロモーション動画事例

では、実際にどのようなホテルプロモーションが映像で展開されているのかを、いくつかのホテルの映像で見てみましょう。

東京ディズニーランドホテル

出典：東京ディズニーリゾート公式/TokyoDisneyResortOfficial

東京ディズニーランドホテルは、東京ディズニーリゾートの中心となるホテルです。プロモーション動画では東京ディズニーランドのにぎやかさは影を潜め、キャラクターに頼らない落ち着いたホテルの印象を表現しています。キャストのやさしい笑顔はそのままに、遊び疲れた顧客がゆっくりとくつろげる夢の空間であることがアピールポイントです。

京王プラザホテル

日本語版

出典：Keio Plaza Hotel Tokyo

英語版

出典：Keio Plaza Hotel Tokyo

新宿にある京王プラザホテルは、映像によるホテルプロモーションのターゲットを外国人に絞っています。そのため、利便性の良さと、グローバルなホテルサービスに加え、日本文化に接することができる空間の印象を強く打ち出した映像になっています。同じ映像を日本語版と英語版の2種類用意し、どちらの映像を見ても、京王プラザホテルの特徴がしっかりと伝わります。

ザ・ペニンシュラ東京

出典：ThePeninsulaHotelsJP

丸の内にあるザ・ペニンシュラ東京は、皇居、銀座などの日本を代表する地域の隣接したロケーションを活かしたホテルです。そのため、日本の文化と海外の文化の融合、モダンとクラシックの融合など、融合することで生まれる新たな文化を映像の中で見せています。観光客が日本ならではの雰囲気を味わえたり、東京丸の内ならではの感覚を持つことができたりすることに着目して映像が作られています。

パークハイアット東京

出典：Hyatt

パークハイアット東京の映像は、外観こそ映像の中にありますが、ほかのホテルのプロモーション動画は一線を画した作品になっています。幾何学模様の羅列からさらに東京に目を向け、新宿に目を向け、ホテルに目を向けるという流れは、パークハイアットのセンスの良さを十分にアピールする映像です。

星のや

出典：星のや

星のやのプロモーション動画は、シリーズ化されています。いろいろな人たちがいろいろなゆとりのある時間を過ごそうとやってくるだろうということをベースに、ゆったりとした時間をさまざまな角度から表現しています。ここに行けば、リラックスしてリフレッシュできるのではないかと思わせてくれる美しい映像で星のやのコンセプトを表現しています。

海外ホテルのプロモーション動画に学ぶ制作のポイント

国内のホテルに続き、海外ホテルのプロモーション動画に目を向けてみます。海外では、それぞれのホテルのブランドや土地柄が映像に表れています。海外ホテルの映像制作のポイントについて説明します。

Shangri-La Hotel Paris（シャングリ・ラ ホテル パリ）（フランス）

出典：Shangri-La Hotels and Resorts

伝統のあるShangri-La Hotel Parisは、ローラン・ポナパルト王子の邸宅だっただけあって、伝統と格式のある作りになっています。ホテルの非日常の空間と雰囲気は、インテリアや調度品からもうかがえるものです。

Shangri-La Hotel Parisの映像は、この素晴らしいインテリアを余すとこなく表現しています。まるでタイムスリップしたかのような部屋やホール、レストラン、ホテルスタッフの印象もパリのおしゃれさをそのままに感じることができます。パリに行ったらShangri-La Hotel Parisの窓からセーヌ川を眺めたいと思わせるのに十分な魅力が伝わります。

Belmond Hotel Caruso（ベルモンド ホテル カルーソー）（イタリア）

出典：Belmond

Belmond Hotel Carusoが映し出すのはまるで映画を見るような映像です。ワンカットごとが映画の一部になっているような構成になっています。ホテルに滞在することで、自分もこの中の出演者になれるのではないかという錯覚をもたらし、ゆったりとした時間を得ることができるような印象を受けます。美しい風景に出会いたいときには訪れたいと思わせるプロモーション動画です。

Hotel Indigo（ホテル　インディゴ）（バリ）

出典：Hotel Indigo

バリのHotel Indigoプロモーション動画は、アクティブでポップな映像になっています。出会いをテーマにしていることもあり、レストランやバー、サーフスクールなどが次から次へと現れ、スタッフたちのテンポのよい動きと合わさって、より楽しさを増しています。楽しいホテル滞在の雰囲気が伝わる映像です。

どの部分を訴求するかがホテルのプロモーション動画のポイント

ホテルのプロモーション動画を見てみると、それぞれのホテルで個性があります。同じストーリー、同じ紹介の仕方ではなく、ホテルが訴求したいポイントをしっかりとプロモーション動画の中で表現することが大切です。

顧客がホテルを選ぶときに自分たちのホテルはどの点を強調すればよいのかをまず考えます。集客につながることが重要であるからです。とはいえ、それをどのようにアピールするか、映像として表現するかは悩めるところです。そういうときには、動画制作をホテルのプロモーション動画の実績が豊富な制作会社に依頼することをおすすめします。

ECサイト利用者の拡大により、より素早く簡単に商品を購入したいという需要が高まってきている今日、よく聞かれるのが「動画コマース」という言葉です。名前を聞いたことはあるという人も多いのではないでしょうか。この記事では動画コマースの内容や、メリット・デメリットとその活用事例を幅広く紹介していきます。

動画コマースとは

そもそも動画コマースとはどういうものなのでしょうか。ここでは、動画コマースの特徴と用途について説明していきます。

動画コマースの特徴

動画コマースとは、動画を見ながら簡単に商品を購入できるインタラクティブな動画の手法のことを指します。動画上でクリックをすれば商品を購入できるので、従来の動画のように、動画から商品の注文ページに移動する必要はありません。また、動画は視覚と聴覚の両方に訴えかけることができるので、ユーザーにより商品やサービスの魅力を伝えやすいのも特徴です。このような特徴から、動画コマースはEC業界では導入が進んでおり、実際に効果も生まれています。

動画コマースの用途

動画コマースが導入される先は、主にECサイトやECモールです。これらの媒体では動画コマースを活用する機会が増えてきており、とりわけ生放送で商品紹介の動画を配信して注文を促す「ライブコマース」として使われる事例も多くなってきました。ライブコマースでは、テレビショッピングのように映像を見ながら商品を注文でき、ライブコマースを行なっている人と視聴者が直接やりとりをしながら商品の魅力を発信することができます。また、生放送というライブ感と双方向性などが受けて、ライブ動画自体が盛り上がることも珍しくありません。盛り上がった動画はその日のトレンドになるなど、さらなるビジネスチャンスを生み出す可能性もあります。

動画コマースのメリットとデメリット

動画コマースは、企業にとっては売り上げや認知度を上昇させるチャンスであり、ユーザーにとってはより商品の魅力について知ることができるチャンスであるといえます。ただし、メリットだけではなくデメリットもあります。動画コマースについてより良く知るために、利点と注意点の両方を解説していきます。

動画コマースのメリット

動画コマースにはいくつものメリットがありますが、ここでは代表的な3つのメリットに絞って紹介していきます。

商品の魅力を簡潔に伝えられる

動画の良いところに、写真や文字では伝わりにくい情報やニュアンスまで細かく伝えられる点が挙げられます。動画編集の見せ方によっては、商品やサービスの詳しい紹介や使い方、生産者の思いなど、魅力を簡潔かつわかりやすくアピールできるのです。動画の情報量は数千枚の紙のページに匹敵するといわれています。数千ページを読むことは困難ですが、動画ではその情報量を短時間で手に入れることができます。動画を上手に活用することで、ユーザーに商品やサービスの魅力をたくさん伝えることが可能です。

SNSでシェアされやすい

インターネットを使用したマーケティングの魅力のひとつに「シェア」があります。面白い動画や話題性のある動画は、SNSでシェアされやすく、高いマーケティング効果が期待できます。情報社会の今日において、SNSにおける拡散力は活用すべき重要なものです。もしも広くシェアされることを目的としている場合は、一時的なライブ感を楽しむライブコマースよりも、基本的には動画コマースのほうが向いているでしょう。動画コマースとライブコマースの特徴を理解することで、目的に沿った使い方ができるようになります。

ウェブサイトへ飛ばす必要がない

動画を使っての販売促進では、商品を購入してもらうためには一旦ウェブサイトへ移動してもらうことが一般的です。しかし、動画コマースは動画内をクリックすることで直接注文でき、場合によっては動画上で決済までできるサービスもあります。そのため、コンバージョン率アップの効果が期待できるでしょう。また、ウェブサイトに移動する手間が省けることで購入に対する壁がひとつ減るため、動画コマースはユーザーにもメリットが大きいのが特徴です。クリックするたびに別のページに飛ばされると、購買意欲が減っていくことがあります。動画コマースでは、「欲しい」という気持ちと「購入」という行動の間に壁がないのが大きなメリットといえます。

動画コマースのデメリット

ここまで代表的なメリットを見てきました。動画コマースをより深く理解するためには、メリットだけでなくデメリットも押さえておきましょう。ここでは、動画コマースで考えられる代表的なデメリットについて紹介していきます。

制作コストがかかる

動画コマースを作る際に知っておきたいことは、制作コストが通常の動画制作よりも大きくなることです。その理由は、ショッピングカートと連動させるなど、通常の動画に比べていろいろと手間がかかるためです。動画コマースでは、制作コストを回収できるだけの魅力的な動画を作ることを心がけましょう。

動画コマースの事例紹介

動画コマースについて理解が進んだところで、動画コマースの実例を見ていきましょう。ここでは3つの事例を紹介していきます。

メルカリチャンネル

日本を代表するフリマアプリとして有名な「メルカリ」には、ライブ配信で商品を売買できる「メルカリチャンネル」があります。これは、配信者と視聴者をリアルタイムでつなぐものであり、1回の配信でいくつもの商品が紹介可能です。配信者は販売促進効果を得ることができる一方、視聴者からは出品者の顔が見えたり、配信者とのやりとりで商品に対する疑問点が解決できたりするのがメリットです。このように、動画コマースでは売る側と買う側の双方が得をするWin-Winの関係を築くことが可能となります。

Yahoo!ショッピングLIVE

日本を代表するオンラインショッピングモール「Yahoo!ショッピング」では、「Yahoo!ショッピングLIVE」という動画コマースが行われています。法人出展者は「ストアクリエイター」というアプリを利用して、最大30分間のライブコマースを行えます。配信できる時間帯は決まっており、毎日午後6時～午後11時の間です。スワイプによって商品の一覧や配信の概要などを知ることも可能で、視聴者にとっては大変利便性の高い動画コマースといえるでしょう。

これからが期待される動画コマース

動画コマースを通して、ユーザーはより満足度の高い購入体験が可能になりました。これからの動画コマースに大きな期待が寄せられています。