CSS Nite公式サイト

2019年12月、CSS Niteでは667回の関連イベントを通して、67,829人の方にご参加いただきました。

その他

• Aquent Gymnasium LIVE w/ CSS Nite
• BuWis in Matsuyama 「地方組織を強くするブランディングの実践論」
• CSS Nite in Omotesando
• CSS Nite shuffle
• CSS Nite特別編： 西脇 資哲のスーパープレゼンセミナー
• 『効率的なサイト制作のためのDreamweaverの教科書』出版記念セミナー
• ノン・デザイナーズ・アカデミア 〜Design for the rest of us
• 帰ってきたWeb研
• Web標準の日／Web標準の日々

2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。

その中からベスト・セッション＋αを選びました。 https://cssnite.jp/archives/best-session2019.html

一部のセッションが近日公開になっていますが、すべてのセッションのスライドや動画を公開しています。

ベストスピーカー

• 植木 真（インフォアクシア）、辻 勝利（コンセント）

殿堂入り

• 中川 直樹（アンティー・ファクトリー）
• 草間 淳哉（ウェブエイト）

ベストスピーカー（次点）

• 権 成俊（ゴンウェブコンサルティング）
• 井水 大輔（エスファクトリー）
• 筒井 美希（コンセント）

ベストセッション

プロジェクトをうまく進めるた　めに、コーダーが進化するためのテクニック

大串 肇（mgn）

ベストセッション（次点）

Webデザイントレンド

原 一浩（カンソクインダストリーズ）／矢野 りん（バイドゥ）

ベストセッション10

インハウス で〝カイゼン＆グロース〟を実践すれば成功できる！

谷脇 しのぶ（へノブファクトリー）、林田 拓郎（へノブファクトリー）

デザイン制作工程で工夫できること

角田 綾佳（キテレツ）

現場で活用できるマイクロインタラクションの作り方

池田 泰延（ICS）

Adobe XDの自動アニメーションで作るプロトタイプ

松下 絵梨（ツキアカリ）

水産業とクリエイティブ

安達 日向子（フィッシャーマン・ジャパン）

企業が動画メディアを始める理由と、YouTubeの育て方

たにぐちまこと（H2O space ／ともすた）

現場で働くコーダーのためのCSS Grid + モダンコーディング

鹿野 壮（ICS）

Web制作現場の働き方とワークフローが変わる Adobe XD活用法

益子 貴寛（まぼろし）

起業にまつわるデザイン

吉村 正裕（サイバー・アシスト）

名刺デザインから考えるクリエイターのためのSNSブランディング術

上司ニシグチ

ベストセッション20

おさえておきたい文字まわりのトレンド 2019

関口 浩之（ソフトバンク・テクノロジー）／鷹野 雅弘（スイッチ）

ウェブ制作に活かすユニバーサルデザインの視点

間嶋 沙知

ウェブ開発のいまと、コーディングしない制作手法

阿部 正幸（モチヤ）

あなたの価値を高めるアクセシビリティ

伊原 力也（freee）

ウェブページを高速化してユーザーに価値を届けたい制作者のためのセミナー＆ワークショップ

佐藤 歩（サイバーエージェント）

Webフォントを120%活用するための基礎知識＆最新動向

松田 直樹（まぼろし）

むずかしい！と言われないためのお客様とのコミュニケーション術

高木 剛志

対症療法から根本治療へ〜戦略から考え直すウェブ活用

黒瀬 直樹

IoM（Internet of Me）時代のコミュニケーション

伊藤 光弘

すぐにできるMacの作業効率化入門 第二部　〜繰り返し作業をもっとラクに！ アプリの活用で価値を生み出すステップアップ編〜

サイトウマサカズ（N’s Creates）・TD・上西 啓司

選外（非公開のため）

地方都市でもできる！最新ツールと泥臭さのブランディング

半田 惇志

誰もが隣にいる人と一緒に楽しむために

松森 果林（聞こえる世界と聞こえない世界をつなぐユニバーサルデザインアドバイザー）

ブランディングを事業戦略に！　コーポレートブランディングとサービスブランディングの違いとその役割、プロセスについて

辻原 咲紀（アイリー）

ベスト・マインドセット

良いデザインのための、マインドセットの作り方 待島 亘（Gear8）

ベスト・パッション

映像で生きていく 椿 英明（グリッド）

ベストスライド

Nuxt.jsがもたらすWordPressの新たな可能性 カイト（キテレツ）

新人賞

ほっこりイラストレーターが結果を出すためにやったこと、やらなかったこと ＊Haiji＊（スタジオいっぽ）

ベスト・小芝居

デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作 鹿野 壮（ICS）、松下 絵梨（ツキアカリ）

ベスト・マーケティングアナリスト

• 寳 洋平（アユダンテ）

ベスト・地方版イベント

• CSS Nite in Fukushima, vol.7
• CSS Nite in Okayama, vol.9

ベスト・地方版

• CSS Nite in Kobe

2019年3月19日に開催したCSS Nite After Dark 2019の池田 泰延さん（ICS）の『現場で活用できるマイクロインタラクションの作り方』フォローアップを公開します。

• スライド
• サンプル

メッセージ、補足など

マイクロインタラクションのセッションにご参加いただき、ありがとうございました。

今回のセッションでは、マイクロインタラクションの役割から、モーション系のツールで作る話、エンジニアがCSSやJavaScriptで実装する段階まで具体的に紹介しました。

ウェブサイトにマイクロインタラクションを実装しようとするとデザイナーやエンジニアのプラスアルファの作業となることが多く、実装工数は増える可能性があります。実装工数が増えようとも、ユーザー体験の向上のために提案できることは大事です。そのため、マイクロインタラクションの必要性をお伝えすることに注力しました。プロダクトが目指すユーザー体験を実現するために、マイクロインタラクションを活用していきましょう。

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

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

たくさんのアニメーション用のコードを書くと重くなると思います。軽くするにはどのような手段がありますか？

「再生が滑らかでなく重たい」と「データ容量が重たい」の2つの意味が考えられます。今回は前者について回答します。

再生負荷に関しては、いくつかの最適化のポイントがあります。

• ベクターグラフィックスだと再生負荷が高い → ビットマップ画像にする
• 同時に表示している要素が多い → 数をへらす
• フィルター効果（ぼかし）など高負荷なエフェクトを使っている → フィルターを使わない

一般的にDOMやSVGに比べて、HTML5 CanvasやWebGLのほうが描画性能は高いです。そのため、「再生が重たい」と感じたらHTML5 CanvasやWebGLの採用を検討するといいでしょう。参考までに、私が以前検証した記事を紹介します。同時に動かせる要素の数で比較すると、DOMだと3000個程度、WebGLだと40000個程度となります。

最速のアニメーションライブラリはこれだ！ JSライブラリの性能をDOMとWebGLで比較検証 - ICS MEDIA https://ics.media/entry/14993

Nuxt.js等で作成したシングル・ページ・アプリケーションでは、pjaxのようにURLが切り替わりますが、SEOとして問題ないですか

最近のGoogle検索エンジンはJavaScriptを解析すると言われています。しかし、確実に解析される保証がないので、HTMLのソースコードとして展開しておくことがベストプラクティスのひとつとして知られています。

Nuxt.jsの場合は、SSR（サーバー・サイド・レンダリング）という技術を使って、シングル・ページ・アプリケーションのページ内リンクを静的なHTMLファイルとしても生成できます。HTMLファイルが存在する状態となるので、通常のウェブサイトと同様に検索エンジンは解析してくれます。

次の資料がNuxt.jsのSSRについてわかりやすく説明されているので、参考にするといいでしょう。

Nuxt.jsによるAdobe MAX Japan 2018公式Webサイト制作の舞台裏 - Speaker Deck https://speakerdeck.com/haribote/nuxt-dot-jsniyoruadobe-max-japan-2018gong-shi-websaitozhi-zuo-falsewu-tai-li

マイクロインタラクション有り無しで見積もりを変えてしますか？

はい、変えています。 私の場合ですが、マイクロインタラクションを用意する前提ではじめに提案します。予算や期間が限られる場合に、他の要件と優先度を調整しながら、場合によってはマイクロインタラクションを削ります。

外注にマイクロインタラクションをどのように発注するか

構成案や仕様書に、絵コンテなどの形で明確に記載しておきます。「マテリアルデザインのリップルエフェクトをボタンに追加してほしい」といった共通言語を使って仕様書に記載しておくのもいいと思います。

After Effectsで作成したモーションはCSSやJSで再現できると思っていいでしょうか

残念ながら、かならず再現できるわけではありません。

After Effectsはもともと映像制作用のソフトウェアなので、ウェブに適さない部分もあります。たとえば、「エフェクト」はBodyMovinで書き出すと、ブラウザではまったく再現できません。また、複雑なパスアニメーションだと変換で壊れる場合があります。After Effectsで作成する際は、BodyMovinでの変換結果をこまめにブラウザで確認することが大事です。

マイクロインタラクションを勉強するために行っていることを教えてください。

アニメーションのセンスを磨き、アイデアの引き出しをためておくことが大事です。そのためには、さまざまなウェブサイトやアプリを普段から観察しています。たとえば、次のギャラリーサイトでセンスのいい動きをチェックします。

https://www.awwwards.com/ https://thefwa.com/

また、普段からアニメーションやマイクロインタラクションの練習として、小さなデモを制作するのもオススメです。ウォームアップができていると、いざ制作するときにすぐにアイデアがでてきます。アニメーションは試行錯誤がものをいう場面があります。アニメーションにおいて、予備動作（スケール変化など）が必要な場合とそうでない場合を判断することがありますが、そのときも普段から制作していると感覚的に判断がつくようになります。

文字1つ1つをspanタグで囲んでアニメーションしたところで、あとからpタグに切り替えるとおっしゃっていたと思いますが、具体的にどのように切り替えるのか教えて欲しいです。

サンプルの「1_texteffect」フォルダ内のJavaScriptを、そのような設計のコードにしてみました。アニメーションを始める前に元のinnerHTMLプロパティーのデータを変数にとっておき、アニメーションがおわったところで、innerHTMLプロパティーに再代入します。

2019年6月28日（金）にTen to Ten SAPPORO STATIONで開催したCSS Nite in Sapporo, vol.22「デザインを語る夕べ」のフォローアップを公開します。

• （1）ベーコンさん
• （2）待島 亘
• （3）コロさん
• （4）鷹野 雅弘

2019年6月28日（金）にTen to Ten SAPPORO STATIONで開催したCSS Nite in Sapporo, vol.22「デザインを語る夕べ」のフォローアップとして、鷹野 雅弘さん（スイッチ）の『Photoshopの非破壊編集と“コンじる”の進化』セッションのスライドなどを公開します。

フォローアップ

リンク集（Photoshop）

コンじる（コンテンツに応じる）

「コンじる」については、次のように進化しています。

• 第10回「Photoshopマジックの奥義「コンじる」の進化」

手法の変化

Mandal-Art（マンダラート）

• マンダラート｜目標設定にも使える一気に72のアイデアを出す発想法 - Web活用術。
• 『これからの人生論: 新しい時代の生き方をデザインする マンダラートブックス』

『「A4」1枚アンケート』という手法で有名な岡本 達彦さんも「マンダラ広告作成法」として発展されています。