一覧
状態:確認中
閲覧数:2,793
投稿日:2017-01-01
更新日:2017-01-07
マウスhover+clickエフェクト
マウスhoverエフェクト
clickエフェクト
斜め線
Web2.0 ボタン
・Pure CSS で光沢系ボタンを実装
・画像ボタンと比較すると、完成度はどうしても低くなる
その他
マウスhoverエフェクト
clickエフェクト
斜め線
Web2.0 ボタン
・Pure CSS で光沢系ボタンを実装
・画像ボタンと比較すると、完成度はどうしても低くなる
その他
マウスhover+clickエフェクト
マウスhoverエフェクト
clickエフェクト
設置済
Squishy Toggle ボタン
Progress ボタン
弾みのあるボタン
未設置
Upload Button
Social Share Button
Shazam-Like Morphing Button Effect
Bullsh*t button with ThreeJS only
・ThreeJS, ThreeCSG 依存
その他
1次選考
設置候補 … 15
SVGフィルタによる歪んだボタンのエフェクト
・エフェクトが希少
Bootstrap ボタンのデザイン
・何の面白みもないが、ボタンだとひと目で分かる
box-shadow の ボタン hover エフェクト
・かなり良い
アニメーション投票ボタン（pure CSS）
・希少エフェクト
・flexコメントアウトすると正常動作しないため、コード理解が必要
花火のボタン：D
・希少エフェクト
・「display:flex;」依存している
背景カラーが左右に分かれていく ／ 奥から背景をふわっと表示させる #2 ／ 要素がパタッと開く ／ キューブ状にクルッと回転する
ボタンスタイルとエフェクトのインスピレーション
シンプルなアイコンhoverエフェクト
3D swing ボタン
Erik Deiner の Twitter Button コンセプト
SVGで画面全体に斜め線や曲線を引く
「斜線」2本描画
Email Input Validation 動作 - JS 及び SCSS
Subscribe フォーム #1
Pixie Dust 入力
次点 … 2
CSSのみの「Material デザイン」アニメーションボタン
・すっきりしていて今風だが、普通の人がボタンと認識するか、若干不安が残る
ステッチ装飾のあるボタン ／ ふわっと浮くボタン
・「2-2.animationを使って常にボタンがふわふわと浮いているように見せる」は、モバイル右下へ配置すると良いかも
何かの際に参考にするかも … 2
Progress ボタン
・ブログレスバーを設置する際に参考にするかも
・ブログレスバーの進捗状況との連動の仕方は不明
Subscribe フォーム #2
落選 … 5
Pure CSS ボタン
・全体的にイマイチ
ボタンhoverエフェクトのコレクション
・使用する場面を想像できない
Squishy Toggle ボタン
・白背景では、(質感があり過ぎて)汚く見える
弾みのあるボタン
・動きは面白いが、実際に使用する場面を想像できない
斜めのストライプ
・実際にボタンを作成してみたが、期待していた程良い感じでもなかった
1次選考結果
選考総数
・24
2次選考進出
・15／24
1次選考敗退
・9／24
選考期間
・8日間
・2017-1-1 ～ 2017-1-8
2次選考
設置候補 … 15
SVGフィルタによる歪んだボタンのエフェクト
・SVGエフェクトはqualityが高い
Bootstrap ボタンのデザイン
・定番のデザイン
・相対評価によりここで落選
・面白みがない
・新しさがない
box-shadow の ボタン hover エフェクト
・現時点の設置候補No.1
アニメーション投票ボタン（pure CSS）
・安定の設置候補
花火のボタン：D
・相対評価によりここで落選
・使い所がちょっとだけ難しいかも
背景カラーが左右に分かれていく ／ 奥から背景をふわっと表示させる #2 ／ 要素がパタッと開く ／ キューブ状にクルッと回転する
・相対評価によりここで落選
・普通の人にはボタンだと、もしかしたら分かり辛いかも
・アニメーションは面白いが、何度も試す際はウザくなるかも
ボタンスタイルとエフェクトのインスピレーション
・qualityは高い
シンプルなアイコンhoverエフェクト
3D swing ボタン
・相対評価によりここで落選
・悪くはないが、決め手に欠ける
Erik Deiner の Twitter Button コンセプト
・相対評価によりここで落選
・悪くはないが、毎回パカパカ開閉するのも面倒な気がする
SVGで画面全体に斜め線や曲線を引く
「斜線」2本描画
・相対評価によりここで落選
・悪くはないが、決め手に欠ける
Email Input Validation 動作 - JS 及び SCSS
・quality高い
Subscribe フォーム #1
・相対評価によりここで落選
・悪くはないが、同じ入力フォームなら、「Email Input Validation 動作 - JS 及び SCSS」の方が良い
Pixie Dust 入力
3次選考
設置候補 … 8
SVGフィルタによる歪んだボタンのエフェクト
・完成している
・他のカスタマイズ結果次第
・jsで色指定しているため、例えば「カテゴリ毎に異なる色のボタンを複数設置」などという要件には対応が難しい
・依存ライブラリTweenMax.js
・使い所が難しい
・このためだけに、TweenMax.js導入するには、若干の抵抗がある
box-shadow の ボタン hover エフェクト
・要カスタマイズ
・テキスト表示
アニメーション投票ボタン（pure CSS）
・要カスタマイズ
・落選
ボタンスタイルとエフェクトのインスピレーション
・完成している
・他のカスタマイズ結果次第
シンプルなアイコンhoverエフェクト
・アイコン部門の最終候補
・落選
SVGで画面全体に斜め線や曲線を引く
・ボタン部門の設置候補No.5
・デザインのみ
・「hover」「click」 エフェクトなし
Email Input Validation 動作 - JS 及び SCSS
・入力フォーム部門の最終候補
Pixie Dust 入力
・入力部門の最終候補