選考ポイント
状態:調査中
閲覧数:2,232
投稿日:2016-12-20
更新日:2016-12-30
「モバイル」「パソコン」異なる挙動？
「ハンバーガーメニュー」「それ以外？」
ハンバーガーアイコンの位置
「ハンバーガーアイコン」「クローズアイコン」の位置は「同一？」「それ以外？」
Framer JS
・有料
Material Design
・MATERIAL DESIGN LITE
ionic
・モバイル向けの AngularJS ベースの CSS/JavaScript ライブラリ
「ハンバーガーメニュー」「それ以外？」
ハンバーガーアイコンの位置
「ハンバーガーアイコン」「クローズアイコン」の位置は「同一？」「それ以外？」
見送り
Framer JS
・有料
Material Design
・MATERIAL DESIGN LITE
ionic
・モバイル向けの AngularJS ベースの CSS/JavaScript ライブラリ
「モバイル」「パソコン」異なる挙動
ハンバーガーメニュー
Google Nexus Website Menu
・ハンバーガーアイコン左上
3D Bold Navigation
・ハンバーガーアイコン右上
・クリックで右←左
ハンバーガーメニュー以外
Horizontal Slide Out Menu
・階層対応
Paradeiser
・優先順位水平メニュー＋クリックでドロップダウン
優先順位+ナビゲーション
・優先順位水平メニュー＋クリックで「表示」「非表示」切り替え
レスポンシブマルチレベルナビゲーション
・JS未使用
・CSSメディアクエリ … @media screen
・CSSターゲット属性 … :target
レスポンシブ水平メニュー
・水平メニュー＋クリックでドロップダウン
タブ付きナビ
・クリックでトグル型
GreedyNav
・水平メニュー＋クリックでドロップダウン
okayNav
・モバイル時に溢れたメニュー項目は、クリックでスライドイン表示
Fluid CSS Navigation
・モバイル時に溢れたメニューは、「ハンバーガー＋MENUボタン」にまとめる
・クリックすると、モバイル時に溢れたメニュー項目だけではなく、全てのメニューをtoggle表示
・これはこれでアリかも
「モバイル」「パソコン」同じ挙動
ハンバーガーメニュー
CSS Menu Animations
・ハンバーガーアイコン左上
・A.左→右。長方形アニメーション。テキストも左→右
・B.左上→右下。円アニメーション。テキストは中央上→中央下
・C.一瞬で切り替え。テキストは、中央 →観音開き
jQuery+CSS3で円が画面全体に広がる系スマホメニュー
・ハンバーガーアイコン右上
・右上→左下。円アニメーション。テキストは左→右
CSSだけで円を画面全体へ広げるアニメーション
・ハンバーガーアイコン左上
・左上→右下。円アニメーション。テキストは中央下→中央中
Dynamics.jsで作る小気味いい動きのスマホ用サイドメニュー
・ハンバーガーアイコン左上
・右→左。長方形アニメーション。テキストも右→左
Multi-Level Push Menu
・ハンバーガーアイコン左上
・左→右。長方形アニメーション
・階層メニュー対応(親メニューは表示されずbackで戻る)
※「ハンバーガーアイコン」「クローズアイコン」の位置は異なる
Responsive Multi-Level Menu
・ハンバーガーアイコン左上
・各種長方形アニメーション
・階層メニュー対応(親メニューは表示されずbackで戻る)
jQuery pop menu
・レシポンシブ未対応(と言うより何もしていない)だが、表示上問題はない
Pure CSS Header Menu
Left slide menu with icon
・ハンバーガーアイコン左上
・作りかけ？
・デザインが良い
ハンバーガーメニュー以外topナビゲーション
Sign In Button and Form
・右上メニューボタン
・中央一点から全画面へスケールアウトアニメーション。テキストも同
IZIMODAL
・右上メニューボタン
・クリックで全画面モーダルウィンドウ
Menu with mix-blend-mode buttons
・左上メニューボタン
CSS Google Glass
・中央上時計(メニューボタン)
Makisu
・モバイル未対応
ハンバーガーメニュー以外bottomナビゲーション
bottomナビゲーション
・「単一ページ」もしくは「複数ページ間でAjax遷移」での使用が前提
Material Share Interaction
・ナビアイコン右下
・アニメーションは素晴らしいが、レスポンシブ未対応
Switchin' Nav
・コンテンツがスペースを満たす場合、ナビは表示されない
GitHub - jossiwolf/js_bottom_tabs: An implementation of Material Design Bottom Navigation using MaterializeCss
・タブ内容を表示している
・探しているのは、ページ遷移用のリンクナビゲーション
固定されたボトムナビゲーションバー
・レシポンシブ未対応(と言うより何もしていない)だが、表示上問題はない
・position: fixed;
・bottom: 0;
CSS Dock Menu
・レシポンシブ未対応
その他
Touch device jelly menu concept
1次選考
設置候補 … 10
Google Nexus Website Menu
3D Bold Navigation
Paradeiser
レスポンシブ水平メニュー
タブ付きナビ
okayNav
Sign In Button and Form
・bottomメニュー候補
固定されたボトムナビゲーションバー
・bottomメニュー候補
jQuery pop menu
・カスタマイズがうまくいったので、bottomメニュー候補
Switchin' Nav
・コンテンツがスペースを満たす場合ナビ未表示のため、このままでは使えない
→ カスタマイズがうまくいったので、bottomメニュー候補
次点 … 1
Horizontal Slide Out Menu
・モバイル時に場所を取る
・メニュー項目が多い時は選考対象
実装方法依存 … 2
bottomナビゲーション
・「単一ページ」もしくは「複数ページ間でAjax遷移」での使用が前提
js_bottom_tabs
・「単一ページ」もしくは「複数ページ間でAjax遷移」での使用が前提
カスタマイズがうまくいけば選考対象 … 1
CSS Dock Menu
・レシポンシブ未対応
・カスタマイズに挑戦するもどこから手をつければ良いか分からず
→ レスポンシブ対応方法不明
・レスポンシブ対応しなくても、メニュー数を少なくして中央表示すれば問題ないかも、と思うが
・スマホでマウスホバー効果を取得できないと厳しいかも
・マウスホバー時のアニメーションは面白いが、実際に選択する際はちょっとウザい気もする
・これ以上調査しても労力にあった対価が得られないと判断したためここで終了
・必要が生じた際は、参考にするかも
何かの際に参考にするかも … 6
GreedyNav
・同機能の「レスポンシブ水平メニュー」の方が良い
・メニューがアニメーションするところがイマイチ
・サブメニュー数表示機能も、よく考えれば不要
CSS Menu Animations
・3種類のアニメーション
jQuery+CSS3で円が画面全体に広がる系スマホメニュー
・モバイルはともかく、パソコン表示時にはツライかも
・使用するとすれば、挙動切り替えが必要
CSSだけで円を画面全体へ広げるアニメーション
・モバイルはともかく、パソコン表示時にはツライ
・使用するとすれば、挙動切り替えが必要
Multi-Level Push Menu
・メニュー項目が多い時は選考対象
・しかし、そもそもここまでメニュー項目を増加させていること自体に問題があるような気もする
・ドリルダウンは分かりづらいし
Material Share Interaction
・アニメーションは素晴らしいが、レスポンシブ未対応
落選 … 6
優先順位+ナビゲーション
・意義は分かるが、moreクリック時の表示方法がダサい
レスポンシブマルチレベルナビゲーション
・moreクリック時の表示方法がダサい
Dynamics.jsで作る小気味いい動きのスマホ用サイドメニュー
・動きは確かに気持ちが良いけれども、飽きそう
Responsive Multi-Level Menu
・デフォルトがハンバーアイコン表示だけなのは×
・ドリルダウンは分かりづらい
・どうしてもメニュー項目を減少させられない時のみ選考対象とする
IZIMODAL
・ただのモーダル表示
MATERIAL DESIGN LITE
・掲載されているデモに魅力を感じなかった
・他で採用したデモのデザイン参考にはするかも
1次選考結果
選考総数
・26
2次選考進出
・10／26
1次選考敗退
・16／26
選考期間
・11日間
・2016-12-20 ～ 2016-12-30
2次選考進出一覧 … 10
Top候補 … 6
・Google Nexus Website Menu
・3D Bold Navigation
・Paradeiser
・レスポンシブ水平メニュー
・タブ付きナビ
・okayNav
Bottom候補 … 4
・Sign In Button and Form
・固定されたボトムナビゲーションバー
・jQuery pop menu
・Switchin' Nav
2次選考
Top候補 … 6
Google Nexus Website Menu
・現在この形式は使用されていないようなので、最善とは限らない
・サイドインして表示されるサブナビ項目がスクロールしづらい
・スクロールバー非表示なのはどういう意図なの？
→ ドロップダウンだから
・ハンバーガーアイコンをマウスオーバーした後の挙動が、若干分かりづらい
→ 落選
3D Bold Navigation
・メニュー数は6に限定される
・分かりやすい
→ 設置候補
Paradeiser
モバイルで、moreクリック時のサブナビ表示方法(横100%)が若干ダサい
・悪くはないのだけれども
→ 落選
レスポンシブ水平メニュー
・何の面白みもないけれども、アイコンとテキストが表示されるため、分かりやすい
→ 設置候補
タブ付きナビ
・親階層メニュー内容を大きく2つにカテゴライズできる場合は有効かも
・悪くはないのだけれども、優劣を付けなければいけないので
→ 落選
okayNav
・ハンバーガーアイコンは改良の必要あり
・アイコンはあった方が良い？
→ 設置候補
Bottom候補 … 4
Sign In Button and Form
・全画面オーバーレイ
・毎回同じアニメーションなので飽きるかも
・むしろウザくなりそう
→ 落選
固定されたボトムナビゲーションバー
・悪くはないけれども、積極的に推す理由も見つからない
・アイコンもないし
→ 落選
jQuery pop menu
→ 設置候補
Switchin' Nav
→ 設置候補
2次選考結果 … 10
3次選考進出
・5／10
2次選考敗退
・5／10
選考日
・1日間
・2016-12-30
3次選考進出一覧 … 5
Top候補 … 3
・3D Bold Navigation
・レスポンシブ水平メニュー
・okayNav
Bottom候補 … 2
・jQuery pop menu
・Switchin' Nav
決戦投票
Bottom候補
第1位
・Switchin' Nav
第2位
・jQuery pop menu
Top候補
判別しづらいため、Bottom候補第1位を装着した上で表示してみることにする
・なお、「jQuery pop menu」は捨てがたいため、カスタマイズしてTop候補としても参戦
jQuery pop menu
・思ったよりも良い感じ
・アプリッぽい
・検索窓をどう配置するか、要検討
・現時点で第1位
3D Bold Navigation
・現時点で第2位
レスポンシブ水平メニュー
・上も下も水平ナビを表示すると合わない(クドく感じてしまう)
・現時点で第4位
okayNav
・上も下も水平ナビを表示すると威圧感がある
・現時点で第4位
選考後
3D Bold Navigation
モバイル
・動作支障なし
パソコン
・大画面でアニメーションが展開されるため、ウザく感じる
・初見でのインパクトは凄いがそれだけ
・繰り返しには耐えられそうにないかも
・また、ナビ画面は一つ一つのパーツが大きいのに、コンテンツ部分は一つ一つのパーツが小さいため、バランスが取れていない
・遷移後に違和感を感じる
・統一感がない色の写真を見るような感じ
2017/1/24時点の評価
第1位
・jQuery pop menu
第2位
・okayNav
新規検討候補
恰好は良いけど、実際には多分使用しづらい
Social Buttons Slider
・これはアリじゃないの？
3D Navigation
・格好良いが使い所が不明
・配置場所のスペース確保が大変そう
3D Navigation
A Little Menu Bar
・Bar Navigation with Flexbox and SVG icons
・スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5