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
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.7k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
CDK引数設計道場100本ノック
badmintoncryer
2
480
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Gamification - CAS2011
davidbonilla
81
5.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How STYLIGHT went responsive
nonsquared
100
5.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Navigating Team Friction
lara
187
15k
Automating Front-end Workflow
addyosmani
1370
200k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building Adaptive Systems
keathley
43
2.7k
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 テク多数で必見!