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
860
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
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
Is Xcode slowly dying out in 2025?
uetyo
1
270
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Goで作る、開発・CI環境
sin392
0
230
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
A Modern Web Designer's Workflow
chriscoyier
695
190k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
A better future with KSS
kneath
238
17k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
How GitHub (no longer) Works
holman
314
140k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
It's Worth the Effort
3n
185
28k
Balancing Empowerment & Direction
lara
1
430
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 テク多数で必見!