CSS Nite LP66「デザイントレンド特別版」

こちらは、CSS Nite LP66のフォローアップページです。

Facebookイベントページ

公開ポリシー

このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 本セミナーのフォローアップは、90日後の一般公開を行いません。

Twitterやブログなど

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

VODにおけるUIデザインとトレンド
松本 俊介（サイバーエージェント）、内田 達也（サイバーエージェント）

リンク先

ダウンロード

Webデザイントレンド［特別版］
原　一浩（カンソクインダストリーズ）、矢野 りん（バイドゥ）、坂本 邦夫（フォルトゥナ）

原 一浩さんから

Webデザイントレンド[特別編]と、Webデザイントレンド[自治体編]を担当しましたカンソクインダストリーズの原です。
雨が降る中、ご参加いただきまして誠にありがとうございます。

年末行った Shift13 のWebデザイントレンドセッションより2倍以上の時間をいただいてお話しましたが、年末話せなかったネタも含めまして、なおかつ初めて参加した方にもわかりやすくなるよう再構成しました。
ちょっと時間がおしてしまった点はお詫び申し上げます。

さて、まずは自治体編の冒頭で触れました前回のWebデザイントレンド自治体編についてフォローアップページのご案内をしておきます。
前回は 2016年2月24日にワテラス コモンホール（お茶の水）で開催され、当時は自治体サイトだけでなく自治体特設サイトについても触れました。

フォローアップサイトにある写真が少しコスプレ気味になっている点はご容赦ください。当時のスライドを見ていただきますと、時代の変化を感じとることができると思います。例えば、坂戸市のWebサイト (https://www.city.sakado.lg.jp/) は当時自治体Webサイトとしては斬新だと紹介していますが昨年リニューアルされました。どう変わったのか、ご自身の目で是非確かめてみてください。

世界の大学編は、年末はじめて行ったリサーチでしたが概ね好評な評価をいただき誠にありがとうございます。懇親会の場では大学の現場にいらした方より、より詳しいお話を伺うことができました。Webデザイントレンドセッションは発生している現象を表面から深掘りしていくスタイルなため、なかなか中の状況までたどり着くことはありません。ただ、参加者の中には自分が担当していたサイトが取り上げられましたという人もたびたびいて、その方からより深い話を聞くことができたりします。もし可能なら懇親会まで含めてのご参加を検討いただけるとより満足できる内容になるかと思います。

続いて、世界の大学編でスライドに掲載していなかったVRについて紹介します。VRといってもいわゆるヘッドマウントディプレイをつけて何かするという形ではなく、あくまで擬似的に大学内を散策するようなコンテンツということでのVRとなります。
以下の大学のWebサイトのフッター付近には、パノラマ写真が回転しているエリアがあります。ここがYouVisitというサービスを使っている箇所で、クリックするとユーザー登録が必要となりますがキャンパスの紹介を見ることができます。

また、アクセシビリティツールについても補足情報を書きます。
セッション中に紹介したUSERWAYが使われているサイトは以下のようなサイトですが (こちらは左上にアクセシビリツールが配置されています)、

他にもツールがあるので紹介しておきます。以下のサイトではAudioEyeというツールが使われていて、右下にあるアクセシビリティアイコンをクリックすることで起動しますが、まるでデスクトップアプリケーションのようなツールパネルが起動します。

こちらも合わせてチェックしてみてください。
今回の配布資料ですが、インターネット上での再配布はご遠慮いただいておりますが、社内にて発信元を明記の上でしたら自由にご利用いただいても構いません。お仕事やプレゼンのネタとしてご利用くださいませ。また、社内セミナーなどを実施したいなどのご要望がありましたが、お気軽にお声がけください。

最後に、今後のWebデザイントレンドの開催予定について書いておきます。

次に開催される場所は青森で、2月15日になります。イベント詳細については以下のリンクを参照ください。

続いて次の開催地は大阪で、3月1日に開催されます。

もし、開催地近くに在住のご友人などがおられましたら教えていただけるとありがたいです。

ではでは、良いWebデザインライフを！

Kansock.Industries 原 一浩
https://kansock.industries/
Twitter : https://twitter.com/kara_d
Facebook : https://www.facebook.com/kazuhirohara

矢野さんから

CSS Nite LP66 Webデザイントレンドセッションにご参加ありがとうございました。
矢野からはフォローアップとしてグローバルの若年層で高い支持を得ているサービス増量版、およびセッション内で口頭で触れた動画サービスの紹介と、ランキング選外だけど知ってほしいWebサイトをご紹介します。

新しいサービス

Soul

https://www.soulapp.cn/

上海生まれの「リアルで会わない出会い系」。ソウルメイトと引き合わせてくれるという壮大な用途をかかげています。

Discord

https://discordapp.com/

各ユーザにサーバを割り当て、そのサーバに友達を勧誘するという斬新な基本設計の音声チャットサービス。誰かが立てたサーバで遊ぶという前提はマインクラフトのおかげで最近の若年層にとってはなじみがあるようです。
若年層はDiscordでボイスチャットすることを「ディスコでボイチャする」などと言います。

Zenly（ゼンリー）

https://zen.ly/home

リアルな友達同士の交流ツールです。『友達同士で一番よく送られているメッセージって「いまどこ？」なんだって。Zenlyを使えば、もうそんなメッセージ送る必要ないよ！
という紹介文の高校生に絶大な支持を得る位置共有アプリ。

Amino

https://aminoapps.com/
もとは韓国アイドルとアニメの話題で盛り上がるためのWebコミュニティでしたが、近年スマホUIに特化しました。上海生まれNY育ち。

Yey

https://yay.space/
高校生をメインターゲットとしたコミュニティサービスです。サービス自も興味深いですが、運営の拠点を自社ドメインではなくnote上に置いている点も面白いですね。
https://note.com/yay_official
SEOを自社でがんばるより有効なのかもしれません。

動画サービス

Wistia

https://wistia.com/

Bryan university
https://bryanuniversity.edu/
が導入している動画配信サービス。
自社のブランドに合わせて動画のUIデザインを調整できるツールや配信技術を提供しています。コンテンツ・マーケティングの考え方に関する読み物もあります。

Britecove

https://www.brightcove.com/ja/solutions/marketers

HSBC
https://www.hsbc.com/
が導入している動画サービス。
こちらは部分的に日本語にローカライズされています。動画配信技術やマーケティングのためのデータ分析ダッシュボードなどを提供しています。

ぜひ見ていただきたい選外のサイト

Alban Mezino氏の自己紹介

https://albanmezino.fr/

フリーランスのデベロッパーの自己紹介です。
かなり砕けた内容ですが、自分の立ち位置や価値観を素直に強く表明している点が印象的です。

tobaccodock イベント紹介サイト

https://www.tobaccodocklondon.com/

問い合わせへのリンク先を常にfooterにFIXさせているところなど、デザインセオリーにとらわれずにイベントの想定参加者の課題をよく見ているところが素晴らしいです。

メールクライアントアプリの紹介ページ

https://www.juicymail.co/

昨年なら静止画像でもそれなりに製品説明サイトの体裁はつくろえましたが、デモを動画で見せなければ全く伝わらない時代になりました。svgでフレームを作り、中にvimeoにアップした動画をはめ込んでモーショングラフィックっぽく見せているところも良い演出。

以上、セオリーにとらわれずにどこまで工夫ができるのか。まさに「独自の工夫」こそ次のトレンドであると言えそうです。

ダウンロード

Webデザイントレンド［自治体編］
原　一浩（カンソクインダストリーズ）、坂本 邦夫（フォルトゥナ）、清家 順（ユニバーサルワークス）

清家さんから

Webデザイントレンド[自治体編]を担当しましたユニバーサルワークスの清家です。私自身は、約4年ぶりのCSS nite出演となりましたが、ご満足いただけましたでしょうか。

今回は、リニューアルされたサイトを対象としたランキングに加え、「清家の目」では「シティプロモーションという名の憧憬」をテーマにお話しました。ランキングと清家の目、どちらも自治体の思いや特徴が表現されているかどうかを重視し、それぞれの自治体が持つ魅力、自治体サイトが持つ楽しさをお伝えしようと目論みました。

清家の目では、シティプロモーションサイト、特に移住・定住をテーマにしたコンテンツのコピーやメッセージに注目し、その取組を比較しました。「都会」と「田舎」というあいまいな尺度の中で、両方の要素をバランスよく併せ持つことができている自治体、都市機能の充実を謳う自治体、豊かな自然と穏やかな暮らしを訴求する自治体など、様々です。そのまちならではの魅力をWebサイトで表現すべく工夫（苦悩？）している様子を感じ取っていただけたら幸いです。

今回のセッションでは、十分なコメントはできませんでしたが、自治体サイトは、Webアクセシビリティ確保の観点からも優れた事例や興味深い取組やたくさんあります。当社ユニバーサルワークスが毎年実施している「自治体サイトWebアクセシビリティ調査」で、その一端を垣間見ることができると思いますのでぜひご一読ください。

最後に。
アンケートへの回答ありがとうございました。参加いただいた方の地元や周辺自治体が取り上げられたケースがあったようで、ご自身が持つイメージとWebサイトで表現されているイメージの差に言及いただくなど、とても参考になりました。住民が認知している強みと、外から見たイメージにギャップがある場合、それを解消するのか、より強調するのかでコンテンツやデザインが変わってくるはずです。そんなことにも注意を払いながら自治体サイトウォッチを続けたいと思います。

有限会社ユニバーサルワークス　清家 順
https://www.u-works.co.jp/

坂本さんから

Webデザイントレンド［特別版］・ Webデザイントレンド[自治体編]を担当したフォルトゥナの坂本です。足下の悪い中、ご参加いただきありがとうございました。年末のShiftは2年間お休みさせていただいており、久々に東京でお話させていただきましたが、ご満足いただけたならうれしく思います。坂本からはサイトで取り入れられていたツールについて少し補足したいと思います。

以前はアクセシビリティ・お問い合わせなどは自前で実装していたことが多かったのですが、最近は外部のツールを上手く取り入れて、組み合わせるようになってきています。その代表的なものがチャットボット・アクセシビリティツールです。

チャットボット

まずチャットボットですが、国内外様々なサービスがあります。数年前は海外のサービスを日本語で使うという選択肢も多かったのですが、国産のサービスも増えました。かなりの種類があるため、どれを選ぶかというのは製作者（提案者）の腕の見せ所と言えるかもしれません。

自治体や大学サイトなどでは質問と回答がある程度想定できることから、機械学習で回答の精度を上げていけるはずで、そのノウハウは予算規模の大きなサイトだけでなく、小規模のものにも活かされていくはずです。

このような話になると、大きなサイトでしか使えないのではないかとなりがちですが、多くの人がチャットボットに使い慣れてくると、もっと小さなサイトでのチャットボットも使われるようになるはずですので、コンタクトの1つの方法として、チャットを上手く使うことを考えてもよいタイミングなのではないかと思います。

アクセシビリティツール

アクセシビリティツールについても、海外を中心に普及してきています。海外では訴訟になるケースも多いため、自前で実装する必要のない部分をツールに任せるというのは妥当な選択肢と言えるでしょう。

今回の調査で見たツールとしては、USERWAYとUser1stの2種類でしたが、
USERWAYはウィジェットを貼り付けるだけで動作しますので、非常に試しやすいのではないかと思います。

私のサイト（ https://www.color-fortuna.com/ ）にも、チャットボットとUSERWAYを取り付けてみましたので、一度お試しください。

年末のShift14にも復活登場することになり、再び原さん・矢野さん・坂本の3人のコンビも復活いたします。このトレンドが年末にはどうなっていくのか、また東京の皆さまとも共有できればうれしく思います。

この度は本当にありがとうございました。

フォルトゥナ 坂本邦夫
https://www.color-fortuna.com/
Twitter : https://twitter.com/Kunio_Sakamoto

ダウンロード

お問い合わせ

ご不明点やお気づきの点がありましたら、フォームからご連絡ください。

お問い合わせ

このページの上部に戻る