CSS Nite in YOKOHAMA, Vol.1 powered by Wsidas

公開ポリシー

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

Twitter

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

動画について

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

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がございます

リニューアル案件で考えた場合
1.自然検索が減っている場合
自然検索の割合が全体的に下がっている場合、SEOを意識する事が必要になり、場合よりコンテンツマーケティングが提案内容になる事もあります。
どういう要因で下がっているかは別途掘り下げて見る必要があります。
2.広告流入が主な流入経路
広告関連が主な流入経路だった場合、広告費削減した場合、流入数が大きく減り、コンバージョン数が減る可能性があります。(前提として何も施策をせずに広告費を削減する場合)
このため、可能であれば広告費の予算を一部いただいて、SEOを意識した静的ページやコンテンツの拡充が必要になってきます。

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

リニューアル案件で考えた場合
コンバージョンに結びつきやすい製品紹介・サービス紹介ページがページビュー数が多く、かつ離脱が多い場合改修必須ポイントになってきます。
この場合、Google アナリティクスだけではなく、該当ページとGoogle アナリティクスとを照らし合せてナビゲーションが悪いのか?コンテンツのが不十分なのか?をユーザー視点になって考える必要があります。

余談で申し上げますと今やページビューだけを見る事はあまりありません。
閲覧されているページがどの位、コンバージョンに結びつけやすいかという見方が必要になってきています。
弊社の事例であれば、閲覧されているページビュー数とコンバージョンに結びつけるリンクのクリック数で見る場合があります。このケースの場合、デフォルト状態のGoogle アナリティクスでは実現できませんので、カスタムレポートを使用しています。

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

リニューアル案件で考えた場合
入り口になっているページは、ユーザーが情報や商材を欲しいと思っている欲求がダイレクトに反映されているページです。
製品紹介・サービス紹介ページの直帰率が高い場合、改修必須ポイントになってきます。なぜ直帰に至ったかを該当ページとGoogle アナリティクスとを照らし合せてみり必要があります。

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

リニューアル案件で考えた場合
フォーム到達ページからの離脱率、フォームのプロセス上の離脱率を参照し、改修ポイントを探ります。
ここも上記の"コンテンツを知る"と同様にGoogle アナリティクスだけではなく、該当ページと照らし合わせて、フォームの項目数、入力難易度などユーザー視点になって見ていく必要があります。
その他、改修ポイントとしては、フォーム入力画面の直前ページもみる必要があります。フォームを入力するつもりでフォーム到達ページに遷移しているのか、
それと別の理由でフォーム到達ページに遷移してきたのかなどをユーザー視点になって考える必要があります。

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

P.30 マイレポート

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

※1 Google アナリティクスのアカウントがない
※2 コンバージョン設定がない方用に最後にURLがございます
上記に該当する方、Googleがデモアカウントを用意しています
Google アナリティクスデモアカウント
https://analytics.google.com/analytics/web/demoAccount

最後に

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

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

ダウンロード

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

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

シンボリックリンク

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

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

セミナー情報

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

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

ダウンロード

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

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

配布スライドについて

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ダウンロード

協賛、協力

このページの上部に戻る