DIST 6周年記念イベント 参加メモ

本当はブログに書くつもりはなかったけど、自分の整理のためにせっかくなので載せます。
ハッシュタグを追ったりスライドが出揃ったらもっと詳細にわかる内容ですので、合わせてご覧ください。

描きながら学ぶかんたんイラスト講座!+グラレコの仕事がもらえるようになるためにやったこと

読む人を楽しませる工夫をする
→楽しげなものは注目してもらえる
→注目した結果:理解が深まる

図形に感情を載せると見てもらいやすい

例:「このアプリのユーザーの7割はなんと70歳以上」という表現
グラフにおばあちゃんのイラスト+「なんと!」といった感嘆符

例:「1ヶ月で−5kg減量!」という表現
グラフに喜んでいる人(一ヶ月後)のイラスト

グラレコのコツ
・書いてすぐの休憩時間にイベントハッシュタグと(わかれば)登壇者のTwitterアカウントを記載してTwitterにアップ:家に帰ってからだと旬がすぎて誰も見なくなってしまう
・セルフでまとめておくとRT数なども一覧で見られる→それでイベント公式からグラレコを仕事としてもらった

次代のビジュアルブランディングの鍵

ビジュアルブランディングの鍵
story 物語と背景 ← 一番大事・今回話したこと
system 点でなく・線と面で
science 見た目だけでなく五感を刺激する

GAPはロゴのリデザインで100億の損出を出した。6日間で前のロゴに戻した
airbnbのロゴは賛否はあったが今のロゴが定着した。
その違いはビジョン・ストーリーを明文化できたか否か

参考:ロゴのリデザイン ー なぜGapが失敗しAirbnbが受け入れられたのか
https://blog.btrax.com/jp/gapandairbnb/

ビジネスとビジュアルデザインを分けて考えてはいけない。
今はインスタの投稿一つでビジネスがひっくり返るので軽んじてはいけない。
クライアントが「かっこよくしてください」「わからないのでお任せしまう」と言っても
グラフィックの大切さは企業の姿勢を伝えるための重要な道具ということを絶対インプットする。

流行らせないけど廃らせないデザイン:企業ブランディングはウォーキングでなければならない。

独自の文化を結晶化・デザインに落とし込む前に言語化
・顧客に支持される理由
・歴史
・これから目指したい未来

なぜダメなデザインが生まれるのか

人間の集中力は8秒程度。(マイクロソフトの研究より)

バッドノウハウ
会員登録しなくても記事が閲覧できるのに小さく記載 / 複数ある×ボタンをタップさせてCV / 偽の髪の毛を置くことでタップさせてCV etc…
→それらを「自分は関係ない・自分の仕事ではない」と思っていることが一番やばい

スキルを持っているからこそ、相手を簡単に騙すことができる

ビジネスの指標はPVだが、
なぜ人がページを見るのか、どういう風に読んでもらうか」を考えられない限りダメなデザインが生まれてしまう

ユーザーにとって有益な時間をどれだけ提供できたか
例:インスタグタムは余計に閲覧させない工夫として「all caught up」を置いている
例:Netflixの「次のエピソードの自動再生が選択できるか」
無限に費やすためにあるわけではない

新しいデザイナーの役割=いい見た目+課題解決のコミット

SPA/PWA時代のWebデザインのお作法

スライド:https://speakerdeck.com/hiloki/stateful-web-design

インスタやこえのブログはwebでもアプリでも遜色がない。

PWAに必要なもの
・信頼性
・速さ
・エンゲージメント

UI stack
・記事数が足りない時
・ネットの環境が悪くてローディングさせるとき
・layoutshift(ローディングが遅くてコンテンツ表示がずれてガタガタさせてしまう

参考:UIデザインのバグを減らすための施策
https://yasuhisa.com/could/article/ui-design-bugs/

goolenewsはいくつかのローディングパターンがある
→どう待ってもらうかがデザインされている
読み込み中のデザインも後回しにしない

Vチケット(競馬)
競馬のユーザーの心理状態はシビア
オフラインの通知をモーダルで出している・繋がった時も通知している
JSでオフラインを検知するイベントがある

「通知を求めてます」も最初から出さない

フロントエンドの技術選定

イニシャル開発→リリース→運用では運用が一番楽であるべき
→運用フェーズで疲れさせないような技術選定が必要
会社の人員周期は1−2年で入れ替わる
大型開発は1−2年かかるから、「なんでこれリプレースしてるんだっけ」となりかねない

プロジェクトは往往にして混沌

SPAを検討しているときは、「そもそもSPAで作る必要があるのか」を考える

Developer Experiment(=DX)
DXが高くなければ、エンジニアの定着率が下がり求人も難しい

イニシャル開発時のメンバーで技術選定をしない
→運用フェーズで息切れするから、あまり技術力が高いものを使用しない

lint、Prettier使用することで勝手にコード整形できるようにする

React,AngulerはSPAでなければ使わなくてよい
サイト制作はjQuery、vue

品質の岐路に立ったときの実装術

webGLでコードで動きを作るときの負荷対策
webブラウザにおけるfpsはだいたい60、50以下の場合は無理をさせている可能性がある

フレームレートを可視化するプラグインはstats.js

・リアルタイムぼかしをやめる
→ぼけた画像と普通の画像2つを用意
・大きすぎるテクスチャを使わない
→後ろに小さく動いている文字はサイズが小さい画像
・素材は使い回す
・リアルすぎる表現をしない、追求しすぎない
・状況によってfpsを下げる
→MVは60fps、スクロールして要素が出てきたら30fpsにする
・画質を落とす
・要素情報の取得は効率よく

許容範囲をどこまでできるか話し合う。
リアルの表現よりも、webならではの動きを!

特化するということ

特化にもレベルがある
例:web制作会社→コーポレートサイト専門のweb制作会社→採用サイト専門のweb制作会社

特化することのメリット
・集中できること→ノウハウが溜まって詳しくなる
・ブランディングできる→何ができるのかわかりやすい

ラーメンを食べたい時に行くのは、レストランじゃなくてラーメン屋

間違うと大変、選定理由は
・自分の得意とするもの
・需要のあるもの
・自分がいいと思っているもの

やらないことを決める
ピクセルグリッドさんでは「やらないこと」をwebに載せている
https://www.pxgrid.com/service/#reject

Web Creation in Society

スライド:https://docs.google.com/presentation/d/1kVz4fZFrXaROByBzQSP7SzTLAO8U4dRdE9CDYlQXGmM/edit#slide=id.p

ユーザーは様々な属性をもつ
・個性の多様性…目が見えない人、漢字が読めない人
・デバイスの多様性…PCかSPか
・閲覧環境の多様性…料理をしながら、夜寝る前
・一時的な制限…怪我をしている、マウスが壊れている

・性別のフォーム 男か女かだけで考えない
・生年月日のプルダウン・入力が面倒
ユーザーの年齢を収集する意味を考える
10代20代、未成年・成人 くらい大きな括りでよい場合も

「なんのためのフォームか」を考え、正確な情報を求めすぎない

情報の判別に色だけで違いを持たせない
P型・D型色覚の人はわかりにくい
形での違い、可能であればラベルをつける 例:東京メトロの路線図

ダークモードが誰にとってもいいとは限らない
→夜間に文字の意味を判別する時間が、ダークモードだと遅い結果がでている

ユーザーが望むかたちで、自由にウェブサイトを利用できるようにすることが大事

こういう考えがどこまでやっていけるか、ひとりだと限界がある
これらを宣言すること、発信することが大事
仲間はすぐに見つからないけど、探さないと見つからない