任天堂のUI/UXデザイナーが語るデザイン思想。UI Crunch #13 娯楽のUI【書き起こし前編】
https://goodpatch.com/blog/uicrunch-13/
WEB制作やデザインの参考になる
ゲーミフィケーションにもつながる話
https://goodpatch.com/blog/uicrunch-13/
WEB制作やデザインの参考になる
ゲーミフィケーションにもつながる話
【2019/12/28追記更新】
ATOMのコンパイル機能「sass-autocompile
」をちゃんとインストールができるようになった!!
↓こちらを参照して解決!
https://qiita.com/akane8747/items/f72cf307354ffe10b91d
https://asamone.com/2018/04/01/atom-sass-windows/
↑こちらを参考に設定
エディターを
ドリ→Atom→ドリ(SCSSの自動コンパイルが便利と聞いて)
このように渡り歩いてきましたが、Atomにもあると知り、もう一度出戻りしよう!
と思っていたら、node-sassがインストールできない
↓この方のブログをみると、なにかできないらしい。。。
ということで、こちらを参考に再チャレンジ!
codekitは有料ですが。。
https://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html
↑こちらの8番 クリックで矢印になるものを使いました。
https://techacademy.jp/magazine/9540
↑jqueryに関してはこちらを参考にしました。
https://qiita.com/soarflat/items/4a302e0cafa21477707f
こちらを参考にcss3とjsを組み合わせて、魚が泳ぐ動きを実装したいと思います。
参考にさせていただきました。
ボタンのデザインから出てくる動きまで、html、css、jsのコードと一緒にわかりやすいサンプルで紹介されています。
ボクはページトップの実装ではなく、横から出てくるjqueryの動きだけ探していたので、「横から出てくるボタン」を参考にカスタマイズして使いました。
http://agtsmartphonedesign.com/
Font Awesomeに頼りっきりの最近の僕ですが、気分を変えたい時にちょっとイカしたフォントを使ったりしてます。
https://fontawesome.com/?from=io
使い方参考
https://saruwakakun.com/html-css/basic/font-awesome
http://www.colorzilla.com/gradient-editor/
GUI付きで使いやすい
SCSSも対応
https://www.toptal.com/developers/css/sprite-generator
画像をドラッグでアップするだけでスプライトを生成!
http://www.spritebox.net/
cssだけじゃなくsassのコードも吐き出してくれる