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
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
PipeCDのプラグイン化で目指すところ
warashi
1
280
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
710
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
We Have a Design System, Now What?
morganepeng
53
7.7k
Writing Fast Ruby
sferik
628
62k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Automating Front-end Workflow
addyosmani
1370
200k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Visualization
eitanlees
146
16k
Building an army of robots
kneath
306
45k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
For a Future-Friendly Web
brad_frost
179
9.8k
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 テク多数で必見!