公開ポリシー

このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。

• このページのID/パスワードの情報はツイートなどされないようにお願いします。
• CSS Niteのコンテンツの再利用について

Twitter

ツイートは下記にまとめました。

• CSS Nite in YOKOHAMA, Vol.1 powered by Wsidas - Togetterまとめ

動画について

ダウンロード期限があるものもありますのでご注意ください。

• OS X Yosemite+Google Chromeの組み合わせでダウンロードができないことがあるようです。お困りの場合には、異なるブラウザーでお試しください。
• 利便性のため、パスワードを設けず、プライベートリンク（リンク先を知っている人だけが見られる）になっています。URLをツイートなどされないようにお願いします。

Webの未来と必要な技術
阿部 正幸（KDDIウェブコミュニケーションズ）

CSS Nite in YOKOHAMA, Vol.1 の「Webの未来と必要な技術」に登壇いたしました、 KDDIウェブコミュニケーションズの阿部です。

セッションでWebの未来は感じていただけましたでしょうか。 近い将来Webは、下記のようになると言われています。

1. CMS / サーバー

CMSは現在、1つのサイトに対して1つのCMSを導入しています。 今後はCMSはデータ置き場となり、複数のサイトに対してデータを配信する データ置き場になります。

2. コンテンツ

コンテンツは現在不特定多数の方に同じコンテンツを提供していますが、 今後はアクセスしたユーザーの特性に合わせて、最適なコンテンツを配信するようになります。

3. ビジネスニーズのためのUX、MAなど

どこからユーザーが入ってきて、どのようにコンバージョンするかのトラッキング 物を売る、会社のブランディングのためのWebサイト

4. ブラウザ

近い将来、ブラウザからのアクセスが減り、音声でのWeb利用になるかもしれません。 現在では、Amazon Echoや、Google Homeを使うと音声認識し、Webサービスと連携することができます。

上記でいくつか将来にのWebを紹介させていただきました。 これらの知識や技術は、今後必ず必要になりますので、ご自身にあった興味あることを ウオッチしておくと良いかもしれません。

---------------------- セッションで紹介したライブラリ等のリンク ----------------------

・JavaScriptフレームワーク： 　Riot.js 　https://riotjs.com/ja/

・JSON取得用のAPI 　Fetch API 　https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

・REST用CMS 　Drupal8 　https://www.drupal.org/

・Amazon Alexa 　https://developer.amazon.com/alexa

---------------------- セッションで紹介した記事や動画 ----------------------

・Top 5 takeaways for the future of CMS 　https://www.epinova.no/en/blog/top-5-takeaways-for-the-future-of-cms/

・The future of decoupled Drupal 　https://buytaert.net/the-future-of-decoupled-drupal

・Amazon Echo 　セミナーで紹介した以外の動画も多数あります。 　https://www.youtube.com/user/amazon/search?query=echo

・Amazon Echo + Drupal REST Server 　https://buytaert.net/cross-channel-user-experiences-with-drupal

---------------------- 最後に ----------------------

長くなりましたがセミナーに参加いただきました皆様、フォローアップメッセージを 最後まで読んでいただきありがとうございました。 またみなさまにお会いできることを楽しみにしております。

下記は私のソーシャルアカウントです。 LINE@ではセミナーの無料招待チケットなどもお配りしております。 お気軽にLine@、Facebookフォローいただけると幸いです。

Facebook https://www.facebook.com/chiyo.abe

LINE@ https://line.me/ti/p/@gkv8736o

CPIスタッフブログ https://shared-blog.kddi-web.com/

制作会社だからできること Google アナリティクスもう少し踏み込んでみませんか？
横山 倫洋（24-7）

CSS Nite in YOKOHAMA, Vol.1 の
制作会社だからできること！ Google アナリティクスもう少し踏み込んでみませんか？
に登壇いたしました株式会社24-7の横山です。

使用していたスライドのみですと伝わらない部分がございますので当日お伝えしたものも踏まえてこちらに記入させていただきます。
スライド上の
　1. Google アナリティクスの画面を見る機会ってどんなときですか？
　2.こんなこと、ここ数年でありませんか？
は、あまり補足したい事項がございませんので割愛いたします。

3. 仮想案件でGoogle アナリティクスを見てみよう

スライド上、P.19の補足事項

①サイトの状況を知る
②流入元を知る
③コンテンツを知る
④コンバージョンを知る
こちらの項目です。
当日にもお伝えしましたが、Google アナリティクスのメニュー構成と一緒です。実際にGoogle アナリティクスの画面をご参照いただけますでしょうか。
メニュー構成と何を意味しているかを把握する事により、欲しいものがどこのメニュー内に入っているかがわかります。

Google アナリティクス
　ユーザー → ①サイトの状況を知る
　集客 → ②流入元を知る
　行動 → ③コンテンツを知る
　コンバージョン → ④コンバージョンを知る
　※1 Google アナリティクス画面のアカウントがない方用に最後にURLがございます

スライド上、P.25の補足事項

当日では、仮想案件として、Google アナリティクスの画面を開きつつでしたので、スライド上にはございません。
当日お伝えしたものをテキストベースではございますが、お伝えしたいと思います。

【サイト状況を見る】
Google アナリティクス上ではユーザーの概要を参照ください。まずは、1ヶ月、直近3ヶ月、過去1年分の傾向値を把握します。
把握したいものとして、
・月あたり、どの程度が平均値なのか？
・季節要因
・唐突なセッションの伸びと要因
　（展示会、紙媒体掲載、テレビ掲載など）
が主な知りたい項目です。
また、これらの傾向値を知ることにより、施策のタイミングを知る事もできます。

【流入元を知る】
Google アナリティクス上では集客→すべてのトラフィック→チャネル
ここで見たい、確認したいものは
　・主要な流入元
　・中長期的にみて、主な流入元が上がっているか？下がっているか？
　・流入元別にコンバージョンがどの程度されているか
の確認になります。
※2 コンバージョン設定がない方用に最後にURLがございます

【コンテンツを知る】
ページビュー編
Google アナリティクス上では行動→サイトコンテンツ→すべてのページ
ここで見たい、確認したいものは
・どのページが見られているか？
・当然読まれているであろう、製品紹介・サービス紹介ページがどの程度読まれているか？離脱していないか？
となります。

ランディングページ編
Google アナリティクス上では行動→サイトコンテンツ→ランディングページ
ここで見たい、確認したいものは
・入り口になってるページはどのページか？
・入り口、かつコンバージョンに結びついてているのはどのページか？
となります。

【コンバージョン編】
Google アナリティクス上ではコンバージョン→目標→概要
Google アナリティクス上ではコンバージョン→目標→目標到達プロセス
ここで見たい、確認したいものは
・コンバージョン日時
・コンバージョン数、コンバージョン率
・フォーム到達数
・フォーム到達前ページ
・プロセス上の放棄率
の確認になります。
コンバージョンを見るときの注意事項です。
展示会や雑誌など、オフラインの影響によってGoogle アナリティクスに入ってきます。オンラインのみのコンバージョン数をカウントする場合、オフラインの状況を踏まえてみる必要があります。

4. 制作会社だからできること

P.30 マイレポート

アンケート上でいくつか見かけました、マイレポートを補足いたします。
マイレポート使用する場合、メリット・デメリットがあります。
メリット
・作り方が簡単
・作ったレポートは共有できる
・PDF自動送信（毎月○日に送信も可）
・簡易的なレポートになる
・一画面で収まるので全体把握が用意
デメリット
・入れられるグラフや数値に個数として制限がある（12個制限）
・PDFなので、数字の流用がしにくい
がございます。

最後に

長くなりましたが参加いただきました皆様、フォローアップメッセージを
最後まで読んでいただきましてありがとうございます。

ご不明な点がございましたら、下記メールアドレスまでご連絡いただければと思います。
flwup.yokoyama@gmail.com

Illustrator/Photoshop web制作を行う上でおさえておきたい差分とキャッチアップ
鷹野 雅弘（スイッチ）

フォローアップはこちらにまとめました。

シンボリックリンク

Photoshopの画像アセットのくだりで取り上げた「シンボリックリンク」は、macOS、Windowsともに標準機能ではありません（ともに黒い画面なら可能）。

GUIでシンボリックリンクを作成する方法については、フォローアップページに記載しておきました。

セミナー情報

次のセミナーに出演します。

• 第184回バンフーセミナー「Illustrator徹底攻略（シンボル、ライブカラー編）」が3月24日に開催されます - DTP Transit

DTP系のセミナーですが、今回のトピックは、Web系にも必須の内容。そして、無料です。

Webデザイントレンド
原一浩（グレーティブ）

CSS Nite in YOKOHAMAの4番目のセッション「Webデザイントレンド」に登壇しましたグレーティブの原一浩です。 今回は、横浜の方々だけでなく、さまざまな場所からご参加いただきありがとうございました。

配布スライドについて

配布スライドについて、いくつか説明をします。

まず、スライドはPDFで配布しますが、各キャプチャにはサイトへのリンクが仕込まれています。 キャプチャをクリックすることでブラウザにてサイトを閲覧することが可能になっています。

また、配布スライドの最後に「おまけ」というコーナーがあり、本編では行わなかったネタが合計100ページ近く収録されています。あくまでおまけですが、他にこんなトレンドがあったんだという部分でお楽しみいただければと思います。

スライドを見つつ、実際にサイトを眺め、奥深い階層もチェックしてみると新しい発見があるかもしれません。また、キャプチャ当時からリニューアルして、トレンドを採用しなくなっていることもあると思います。

さて、今回取り上げた話題の中に「フッター街とストーリー」というものがありました。

このトピックで「フッター街」については語りましたが、「ストーリー」について語り忘れていましたので、この場を借りて手短に解説してみようと思います。

自治体Webサイトにおける「フッター山」は、ただの山に見えて、実はその地方を知るものにとっては何かしらの郷愁を感じさせるものとなっていたりします。

多くの場合、山だけでなく、その土地の名所・旧跡・史跡などがちりばめられており、Webサイトを見たその自治体に関係する事柄を知っている人が持つ記憶(ストーリー)によって、サイトに関係のあるコンテンツとして見えてきます。

しかし、多くのフッター街にはあまりそういったものが感じられませんでした。

これは、企業のWebサイトを訪れた人が持っている文脈とは関係があまりない見知らぬ街であったり、そもそも現実には存在しない街であったりするためです。つまり、そのフッターにある画像に対する思い入れが希薄であることで、テクスチャとして以上の価値を持ちにくいということがあるのではないでしょうか。

逆に、これからフッター街を作られる人は、訪問者が持つ企業イメージやブランディングを喚起させるような風景を描くことで、単なる背景画像以上の価値を与えることができるような気がします。

ということをフッター街を見ていて感じたのでした。

配布スライドの有効活用方法

最後に、配布スライドの有効活用方法について書きます。

まず、個人で見て楽しむ、学習に使うというのがありますが、その先に同僚やお客さんと一緒に見るという使い方もあります。 また、トレンドというのは不思議なもので、第三者から発したもののほうがすんなりと受け入れやすいという性質があります。 プレゼン資料の時に引用するといった用途でもお使いください。

トレンドは、一時期だけを切り取れば単なる流行にすぎませんが、積み重ねることで歴史の把握につながると思っています。変わるもの、変わらぬもの、見続けることで見えるものがあります。ということで、また1年後とかにお呼びいただけましたら幸いです。ありがとうございました。

協賛、協力

• 
•