CSS Maximum Reversiを作って学んだUI/UX向上テクニック(CSS3編)

UI/UXデザイナーLT会 - vol.6の発表資料です。

Transcript

1. CSS Maximum Reversi を作って 学んだUI/UX 向上テクニック (CSS3 編) hinastory 2022/2/22 UI/UX デザイナーLT 会 - vol.6 CSS3 を駆使して最高のUI/UX をどうやって実現するか？
2. 自己紹介 自己紹介 hinastory, hinastory999, hinastory フルスタックエンジニア, データエンジニア https://hinastory.github.io/cats-cats-cats/ UI/UX の経験 サービスやプロダクト制作の実践で学習 好きな言語 Rust 🆙, Scala, Ruby 資格 AWS 認定11 冠, G 検定等 個人プロダクト CSS Maximum Reversi 最高のUI/UX を備えたリバーシを探究 CSS3 とVue3 を使って！ CSS Maximum Reversi はQR コードから飛べます。 URL: hinastory.github.io/css-maximum-reversi/ 遊びながらお聞きください。
3. なぜCSS Maximum Reversi を 作ったのか？
4. そこにCSS3 があったから CSS よ、おまえの実力はそんなもんじゃないよな？
5. SVG 、Canvas 、WebGL の派手な 活躍に隠れがちなCSS3 ブラウザゲームやCodePen の派手なエフェクトを見るとCanvas やSVG が優勢・・・
6. それでもCSS3 はWeb デザインの 血肉 CSS は避けては通れない
7. CSS3 に光 光を当てよう！ CSS の本気を見てみたい！
8. なぜリバーシ？ リバーシがUI/UX の実験場として適格な理由
9. なぜリバーシ？ ゲームにはUI/UX の要素が詰まっている モーションデザインを自然と考える 現実のモデルがある リバーシはゲームとして比較的単純 ただしリバーシAI の実装を除く ゲームで遊べるので飽きずに作れる リバーシがUI/UX の実験場として適格な理由
10. なぜリバーシ？ ゲームにはUI/UX の要素が詰まっている モーションデザインを自然と考える 現実のモデルがある リバーシはゲームとして比較的単純 ただしリバーシAI の実装を除く ゲームで遊べるので飽きずに作れる リバーシがUI/UX の実験場として適格な理由 UI/UX を学ぶには馴染み深いリアル世界の ゲームを実装してみるのが効果的 Point
11. UI/UX 向上のための CSS3 テクニック4 選
12. UI/UX にはモーションデザインを取り入れよう " 動き" がWeb ページに命を吹き込む
13. UI/UX にはモーションデザインを取り入れよう CSS トランジション CSS の様々なプロパティを指定した時間で変化させる よく使うの変化は位置、大きさ、色の変化、透明度 速度変化をデザインする (linear/ease/ease-in/ease-out/ease-in-out) " 動き" がWeb ページに命を吹き込む transition: height 0.5s linear; // 等速 transition: all 500ms ease; // 加速して減速 transition: all 500ms cubic-bezier(.2,.05,.32,1); //3 次ベジェ曲線で速度変化を記述
14. UI/UX にはモーションデザインを取り入れよう CSS トランジション CSS の様々なプロパティを指定した時間で変化させる よく使うの変化は位置、大きさ、色の変化、透明度 速度変化をデザインする (linear/ease/ease-in/ease-out/ease-in-out) CSS アニメーション CSS トランジションを連続させる / 回転や3D 効果もよく用いられる " 動き" がWeb ページに命を吹き込む transition: height 0.5s linear; // 等速 transition: all 500ms ease; // 加速して減速 transition: all 500ms cubic-bezier(.2,.05,.32,1); //3 次ベジェ曲線で速度変化を記述 animation: winJumping 1.7s linear 0s infinite; @keyframes winJumping { 0% { transform: scale(1.0, 1.0) translate(0%, 0%); } 10% { transform: scale(1.1, 0.9) translate(0%, 5%); } 100% { transform: scale(1.0, 1.0) translate(0%, 0%); } }
15. グラデーションとフィルターがUI/UX の質を高める 光の表現やガラスの質感の表現にも使える
16. グラデーションとフィルターがUI/UX の質を高める CSS グラデーション 線形グラデーション: linear-gradient(), repeating-linear-gradient() 放射グラデーション: radial-gradient(), repeating-radial-gradient() 扇形グラデーション: conic-gradient() 光の表現やガラスの質感の表現にも使える background-image: linear-gradient(to top, black, 20%, cyan); background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%);
17. グラデーションとフィルターがUI/UX の質を高める CSS グラデーション 線形グラデーション: linear-gradient(), repeating-linear-gradient() 放射グラデーション: radial-gradient(), repeating-radial-gradient() 扇形グラデーション: conic-gradient() 光の表現やガラスの質感の表現にも使える background-image: linear-gradient(to top, black, 20%, cyan); background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%);
18. グラデーションとフィルターがUI/UX の質を高める CSS グラデーション 線形グラデーション: linear-gradient(), repeating-linear-gradient() 放射グラデーション: radial-gradient(), repeating-radial-gradient() 扇形グラデーション: conic-gradient() CSS フィルタ Glassmorphism （グラスモーフィズム）が熱い！ backdrop-filter: ※firefox では効かないのでフォールバックが必要 ばかし、明度、コントラスト、セピア調など　様々なフィルタが可能 光の表現やガラスの質感の表現にも使える background-image: linear-gradient(to top, black, 20%, cyan); background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%); backdrop-filter: blur(3px);
19. レスポンシブデザインはUI/UX の新たな基準 〜 モバイルファーストが叫ばれて幾星霜 〜
20. レスポンシブデザインはUI/UX の新たな基準 レスポンシブデザインとは？ 画面サイズに合わせてレイアウトを最適化 Box モデルでレイアウトはもう古い Flex レイアウト - display: flex ◎ Grid レイアウト - display: grid ◦ IE を除けば問題なく使える iPhone 12 PC 〜 モバイルファーストが叫ばれて幾星霜 〜 ` ` ` `
21. レスポンシブデザインはUI/UX の新たな基準 レスポンシブデザインとは？ 画面サイズに合わせてレイアウトを最適化 Box モデルでレイアウトはもう古い Flex レイアウト - display: flex ◎ Grid レイアウト - display: grid ◦ IE を除けば問題なく使える iPhone 12 PC モバイルならではの調整ポイント ブレークポイント メディアクエリーを用いて制御 ビューポート 〜 モバイルファーストが叫ばれて幾星霜 〜 ` ` ` ` @media screen and (max-width: 1120px) { .screen { // 1120px 以下で縦並びに変更 flex-direction: column; } } <meta name="viewport" // おまじないのビューポート content="width=device-width,initial-scale=1">
22. CSS3 を支える名脇役と危険な刺客 CSS3 を最大限に活かして最高のUI/UX を実現したいあなたへ
23. CSS3 を支える名脇役と危険な刺客 名脇役 SCSS CSS を生成するためのメタ言語・プリプロセッサ CSS の構造化 / 変数 / 関数 / Mixin / 数値計算 Vue3 親しみやすく融通が効く高性能JS フレームワーク SFC / Scoped CSS / TypeScript / Vite 非同期 Async / Await / Promise WebWorker // リバーシAI で利用 CSS3 を最大限に活かして最高のUI/UX を実現したいあなたへ const sleep=(msec)=>new Promise((s)=>setTimeout(s, msec)); await sleep(1000); // 1 秒待機, アニメーション等のタイミング調整
24. CSS3 を支える名脇役と危険な刺客 名脇役 SCSS CSS を生成するためのメタ言語・プリプロセッサ CSS の構造化 / 変数 / 関数 / Mixin / 数値計算 Vue3 親しみやすく融通が効く高性能JS フレームワーク SFC / Scoped CSS / TypeScript / Vite 非同期 Async / Await / Promise WebWorker // リバーシAI で利用 危険な刺客 生CSS ➡ グローバルスコープ、構造化が困難 React CSS の選択肢に王道がない CSS in JS ➡ パフォーマンスが悪い? 状態が多いと辛い➡ゲームや動的UI は状態の塊 CSS フレームワーク Bootstrap / Bulma / Tailwind CSS 開発初期◦ 設計の省力化 / 最低限のUI/UX を担保 開発後期✗ 柔軟性/ 拡張性/ 保守性でUI/UX の足枷 CSS のクラス命名 = 設計 / ドキュメント / リファ クタリングのトリガ CSS3 を最大限に活かして最高のUI/UX を実現したいあなたへ const sleep=(msec)=>new Promise((s)=>setTimeout(s, msec)); await sleep(1000); // 1 秒待機, アニメーション等のタイミング調整
25. 「生殺与奪の権を他人に握らせるな!! 」 CSS フレームワークは開発が進むとUI/UX の足かせになることが多く、 一度使ったら止められない麻薬のようなもの・・・
26. レガシーブラウザが駆逐されつつ現在、 CSS3 とVue3 で UI/UX を備えたゲーム開発が一応できるようになりました (^o^) （サンプル: CSS Maximum Reversi ） Point
27. まとめ UI/UX を学ぶにはリアル世界のゲームを実装してみ るのが効果的 UI/UX を飛躍的に向上させるCSS3 テクニック4 選 UI/UX にはモーションデザインを取り入れよう グラデーションとフィルタがUI/UX の質を高める レスポンシブデザインはUI/UX の新たな基準 CSS3 を支える名脇役と危険な刺客を理解しよう OSS としても公開しています! hinastory/css-maximum-reversi 最新のVue3 を用いて本格的なUI/UX を備えたゲーム の実装が公開されている珍しい事例かも 「 CSS Maximum Reversi CSS Maximum Reversi 」遊んでみてください。 URL: hinastory.github.io/css-maximum-reversi/ オープニングとエンディングはCSS テク多数で必見!