Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Maximum Reversiを作って学んだUI/UX向上テクニック(CSS3編)
Search
hinastory
February 22, 2022
Programming
2
760
CSS Maximum Reversiを作って学んだUI/UX向上テクニック(CSS3編)
UI/UXデザイナーLT会 - vol.6の発表資料です。
hinastory
February 22, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
Site Reliability Engineering for GMO
pyama86
9
1.1k
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
400
新宿ダンジョンを可視化してみた
satoshi7190
3
420
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
530
2 週間で Twitter Bot を作ってみた
contour_gara
0
800
Next.js App Router
quramy
12
2k
Going beyond Apache Parquet's default settings
xhochy
0
140
VS Code をプロダクトにどう取り込むか
onomax
1
780
GitHub Copilotのススメ
marcy731
1
240
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
12
4.2k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
1k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.3k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
Designing with Data
zakiwarfel
96
4.8k
Happy Clients
brianwarren
92
6.4k
Music & Morning Musume
bryan
41
5.6k
How to name files
jennybc
65
93k
Designing Experiences People Love
moore
136
23k
Automating Front-end Workflow
addyosmani
1357
200k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Atom: Resistance is Futile
akmur
260
25k
Done Done
chrislema
178
15k
Optimizing for Happiness
mojombo
370
69k
Building an army of robots
kneath
300
41k
Transcript
CSS Maximum Reversi を作って 学んだUI/UX 向上テクニック (CSS3 編) hinastory 2022/2/22
UI/UX デザイナーLT 会 - vol.6 CSS3 を駆使して最高のUI/UX をどうやって実現するか?
自己紹介 自己紹介 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/ 遊びながらお聞きください。
なぜCSS Maximum Reversi を 作ったのか?
そこにCSS3 があったから CSS よ、おまえの実力はそんなもんじゃないよな?
SVG 、Canvas 、WebGL の派手な 活躍に隠れがちなCSS3 ブラウザゲームやCodePen の派手なエフェクトを見るとCanvas やSVG が優勢・・・
それでもCSS3 はWeb デザインの 血肉 CSS は避けては通れない
CSS3 に光 光を当てよう! CSS の本気を見てみたい!
なぜリバーシ? リバーシがUI/UX の実験場として適格な理由
なぜリバーシ? ゲームにはUI/UX の要素が詰まっている モーションデザインを自然と考える 現実のモデルがある リバーシはゲームとして比較的単純 ただしリバーシAI の実装を除く ゲームで遊べるので飽きずに作れる リバーシがUI/UX
の実験場として適格な理由
なぜリバーシ? ゲームにはUI/UX の要素が詰まっている モーションデザインを自然と考える 現実のモデルがある リバーシはゲームとして比較的単純 ただしリバーシAI の実装を除く ゲームで遊べるので飽きずに作れる リバーシがUI/UX
の実験場として適格な理由 UI/UX を学ぶには馴染み深いリアル世界の ゲームを実装してみるのが効果的 Point
UI/UX 向上のための CSS3 テクニック4 選
UI/UX にはモーションデザインを取り入れよう " 動き" がWeb ページに命を吹き込む
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 次ベジェ曲線で速度変化を記述
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%); } }
グラデーションとフィルターがUI/UX の質を高める 光の表現やガラスの質感の表現にも使える
グラデーションとフィルターが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%);
グラデーションとフィルターが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%);
グラデーションとフィルターが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);
レスポンシブデザインはUI/UX の新たな基準 〜 モバイルファーストが叫ばれて幾星霜 〜
レスポンシブデザインはUI/UX の新たな基準 レスポンシブデザインとは? 画面サイズに合わせてレイアウトを最適化 Box モデルでレイアウトはもう古い Flex レイアウト - display:
flex ◎ Grid レイアウト - display: grid ◦ IE を除けば問題なく使える iPhone 12 PC 〜 モバイルファーストが叫ばれて幾星霜 〜 ` ` ` `
レスポンシブデザインは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">
CSS3 を支える名脇役と危険な刺客 CSS3 を最大限に活かして最高のUI/UX を実現したいあなたへ
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 秒待機, アニメーション等のタイミング調整
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 秒待機, アニメーション等のタイミング調整
「生殺与奪の権を他人に握らせるな!! 」 CSS フレームワークは開発が進むとUI/UX の足かせになることが多く、 一度使ったら止められない麻薬のようなもの・・・
レガシーブラウザが駆逐されつつ現在、 CSS3 とVue3 で UI/UX を備えたゲーム開発が一応できるようになりました (^o^) (サンプル: CSS Maximum
Reversi ) Point
まとめ 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 テク多数で必見!