- DIST.31 「DIST 6周年記念イベント」に参加してきました。
| タイトル | 発表者 |
|---|---|
| [IDEA]描きながら学ぶかんたんイラスト講座！＋グラレコの仕事がもらえるようになるためにやったこと | 湊川 あい |
| [IDEA]次代のビジュアルブランディングの鍵 | 柳 太漢 |
| [DESIGN]なぜダメなデザインが生まれるのか | 長谷川 恭久 |
| [DESIGN]SPA/PWA時代のWebデザインのお作法 | 谷 拓樹 |
| [TECHNOLOGY]フロントエンドの技術選定 | 西畑 一馬 |
| [TECHNOLOGY]品質の岐路に立ったときの実装術 | 池田 亮 |
| [SOCIAL]特化するということ | 中村 享介 |
| [SOCIAL]Web Creation in Society | 伊藤 由暁 |
描きながら学ぶかんたんイラスト講座！＋グラレコの仕事がもらえるようになるためにやったこと
- 湊川あいさん
絵にすると何が良いの
- 脳は文字より画像を好む
- 五感が知覚しているうち視覚が83%
絵は誰でも書ける
- 目と口を5種類ずつ用意したらそれだけで25の表情ができる
- 同じようなものを書いても必ず個性がでてくる
図解の基本形
- 対比、内包、因果などいろいろ表現できる
- 図解+感情
- 図に加えて、だからどうなのかというのを伝えられるとよい
読む人を「楽しませる」
- 楽しげなものは注目してもらえる
- 注目した結果。理解が深まる
次代のビジュアルブランディングの鍵
- 柳太漢さん(アクセンチュア)
ブランディング
- 企業が提供する全ての体験を定義設計し個性を作る
- ブランディングの鍵
- Story
- System
- Science
Story
- ストーリーがあることで価値をうむ
- 単に見た目や味だけでは価値は決まらない
- 背景があることで価値は変動する
System
- いろんなふれかたがある
- 点ではなく線面で伝える
Science
- 情報の触れ方が変わっている
- 見た目だけでなく五感を刺激する
どのようにビジュアルブランディングするか
- ビジネスとビジュアルデザインは分けて考えない
- ビジュアルデザインは古来からある伝えるためのインターフェース
- リテラルからビジュアルへ
- ビジュアルデザインは伝えるための重要な道具
- 流行ってるものに乗っかるとそれは廃れる
- 長くコミュニケーションをしていく器にする
- 考えて言語化していくべきこと
- 顧客に支持される理由
- これまでの歴史
- これから目指す未来
- あとはセンスを爆発させてデザインするだけ
- ストーリーができたらほとんど勝ったようなもの
- ブランディングの価値や意図を理解できていると正しく使える
なぜダメなデザインが生まれるのか
- 長谷川恭久さん
注目してもらうためのテクニック
- 人の集中力は長く持たない
- 目に入ってもすぐ次のなにかにうつってしまう
情報をわざと見えにくくする
- unsubscribeを見えにくくしたり
- 会員登録しなくても使えるのに登録フォームをだしたり
ベストプラクティスを逆手に取る
- YesとNoのボタンで
- Noの色をプライマリーカラーにしたり
- Yesをレッドにしたり
罪悪感を促す
- Noのボタンを罪悪感ある文言にしたり
偽ｘを設置する
- 閉じるのxボタンをおいてタップさせる
- コンバージョン稼ぎ
- 偽の髪の毛を画像に入れて払わせる
なぜこんなことをやるか
- いろんな事情がある
- 食べていくためしかたない
- 他がやっているからしかたない
- スキルを持っているとデザインで騙すことができてしまう
- デザインでどうやって課題解決するのがよいか立ち向かっていかないといけない
- 上の例のようなデザインにならないようにしていかないといけない
我々に何ができるか
- PV数
- 単純に数値が増えればいいだけなのか？
- 閲覧したからといって読んでるかわからない
- それによってユーザは満足しているのか？
- エンゲージメントの定義が変化している
- ユーザが有益な時間を過ごせてるかどうかを考える
- インスタではもう閲覧済みのものを知らせくれる
- 単純にPV数だけを追い求めない
- 良い見た目 + 課題解決へのコミット
SPA/PWA時代のWebデザインのお作法
- 谷拓樹さん(サーバーエージェント)
Webとアプリ
- Webがアプリと比べても遜色なくなってきてる
- そんな中でどうやってWebをデザインしていくか
PWA
- Progressive Web Apps
- オフライン
- プッシュ通知
- 独立したUI
- リンク可能
- 発見性
- インストール不要
- Webの特性とアプリの特性を兼ね備える
SPA
- 非SPA
- リンクをクリックするとサーバからHTMLを受け取って表示する
- サーバサイドレンダリング
- SPA
- データだけ取得して画面を書き換える
- ヘッダーなどを継続して表示し続けられる
- クライアントサイドレンダリング
状態を持つWeb
- Design for "Stateful" Web
- 状態を持つWebをデザインする
- UIデザインにおいても状態を持つことを意識する必要がある
- 考えるべきページの状態
- https://yasuhisa.com/could/article/ui-design-bugs/
- Blank State(空白)
- 非同期でデータを取得して0件だったら？
- Loading State(読み込み)
- 画面全体だけでなく部分的なローディングも考慮が必要
- Partial State(部分的)
- データが部分的に取れているときの状態
- Error State(エラー)
- 部分的なエラーも考慮が必要
- Ideal State(理想)
- 理想のデータが入った状態
- この5個だけでなく例外もある
読み込み
- ローディングをデザインする
- => ユーザにどう待ってもらうかをうデザインする
- ユーザは待ってくれない
- どういったデザインで待ってもらうか
- ローディング中はオーバーレイする
- 情報を取得中ですと出す
- ローディングのぐるぐるのUIを工夫する
- どういったデザインで待ってもらうか
- 旧にオフラインになる体験
- ブラウザのエラー画面を出したくない
- ネットワークが切れたらオフラインであることを通知してあげるとか
- オフライン以外にもいろいろある
- 低速な環境
- 速度制限がかかった状態
- データセーブをオンにしている
フロントエンドの技術選定
- 西畑一馬さん(to-R)
プロジェクトの周期
- イニシャル開発 - リリース - 運用フェーズ
- イニシャル開発
- リリース日が決まってることも
- 何が何でもその日にリリース
- リリースというゴールがある
- 運用フェーズ
- イニシャル開発と比べると期限がゆるいケースが多い
- アジャイル的に
- 目標はあってもゴールはない
- 走り続けないといけない
人員の周期
- 約1~2年くらい
- なぜ辞めていくか
- 少しずつ破綻していくシステムにストレス
- スキルや温度感の差にストレス
- ビジネスサイドとの確執
- 飽きた
- 新しいことがしたい
- 新メンバーの苦悩
- ビジネスドメインの理解
- 既存システムの不満
- プロジェクトは人に依存するが人は流動的
技術選定
- SPAで作る必要があるか
- 静的サイト
- サーバサイドシステム
- CMS
- SPA
- Developer Experiment
- 作る人が作りやすいもので作らせる
- DXが高ければ定着しやすい
- 採用する人員に高いスキルが求められることにもなりかねない
- 技術選定はイニシャル開発の前だが長いのは運用フェーズ
- イニシャルのメンバーに依存した技術選定はよくない
品質の岐路に立ったときの実装術
- 池田亮さん
fps
- fps(フレームレート)
- stats.jsで可視化できる
負荷対策
リアルタイムぼかしをやめる
- 雰囲気を出しやすいが高負荷
- 毎フレーム処理をしないといけない
- ぼかした画像を用意してクロスフェードして対応
大きすぎるテクスチャを使わない
- 大きい画像は処理するデータ量も多い
- 同じ画像でも小さく表示するものは小さい画像を使う
素材は使い回す
- 素材がたくさんあればデータ量も多い
- 同じ見た目のものなら使い回すようにする
- three.jsの場合、geometory/materialを必要なパターン用意して使い回す
リアル表現をしない
- リアルな見た目を追い求めすぎない
- たとえば球体を正確な球に近づけるほど負荷が高い
fpsを下げる
画質を落とす
- 画質が高いほど負荷が高い
要素情報の取得は効率よく
- スクロール連動アニメーション
- いろいろあるけどブラウザごとの対応がまちまちなものも
- ウィンドウのリサイズ時に位置などとりたい
- 負荷が高いから毎フレームはできない
- 30fps下げて2フレームごとに取得するとか
- 正しい値が取得できたら取るのをやめるとか
- 正確性と負荷のバランスを見極める
まとめ
- リアル表現をしない
- それっぽく見せる工夫をした表現
特化するということ
- 中村享介さん(ピクセルグリッド)
特化って何？
- 特定の部分に重点を置くこと
- 業務内容を限定して専門化すること
- 狭い範囲を扱う職業の方が特化する
特化する理由
- 集中できる
- 特化するとその仕事を繰り返す
- ノウハウが溜まって詳しくなる
- ブランディング
- 何ができるのかわかりやすい
- プロフェッショナルにみえる
何に特化するのか
- 特化するものを間違うと大変
- 何に特化するか
- 得意なもの
- 需要があるもの
- 自分がいいと思ってるもの
- やらないことを決めておく
特化したものを変えていく
- 変えるのは簡単
- 自分で決めれば変えられる
- あるタイミングで特化していて時間の経過とともに普通になってくることも
- 10年前ならJavaScript専門の会社なんて全然なかった
- 今はたくさんあるのでJamstack専門の会社に変えた
まとめ
- 全部を取得するのは難しいから特化したところのスキルを伸ばす
- 特化した人が集まるとすごいものが作れる
Web Creation in Society
- 伊藤由暁さん(まぼろし)
Web制作はなんのためにやってるか？
- 生活のため
- 自己表現のため
Webサイトは誰が使ってる？
- ユーザはさまざまな属性をもつ
- 個性
- デバイス
- 閲覧環境
- 一時的な制限
- 何かを制限してしまっているかもしれない
- 性別が「男」「女」しかない
- マウスホバーでしか開けないドロップダウン
- 色だけに除法をもたせたデザイン
- などなど
社会におけるWeb制作において必要なこと
- ユーザが自由に利用できるようにする
- ユーザが望む形で利用できるようにする
- いろんな人にやさしいサイトはいろんな人が使いやすいサイト
まとめ
- Webサイトはユーザのために作る
- ユーザは多様である
- ユーザが自由に利用できるようにする