モバイル対応メニュー候補

UIメニュー

選考ポイント

 状態:調査中  閲覧数:2,327  投稿日:2016-12-20  更新日:2016-12-30
「モバイル」「パソコン」異なる挙動?
「ハンバーガーメニュー」「それ以外?」
ハンバーガーアイコンの位置
「ハンバーガーアイコン」「クローズアイコン」の位置は「同一?」「それ以外?」


見送り


Framer JS
・有料

Material Design
MATERIAL DESIGN LITE

ionic
・モバイル向けの AngularJS ベースの CSS/JavaScript ライブラリ

「モバイル」「パソコン」異なる挙動

 閲覧数:443 投稿日:2016-12-22 更新日:2017-01-04

ハンバーガーメニュー


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表示
・これはこれでアリかも

「モバイル」「パソコン」同じ挙動

 閲覧数:467 投稿日:2016-12-22 更新日:2017-01-06

ハンバーガーメニュー


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次選考

 閲覧数:429 投稿日:2016-12-28 更新日:2016-12-30

設置候補 … 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次選考

 閲覧数:457 投稿日:2016-12-30 更新日:2016-12-31

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

決戦投票

 閲覧数:423 投稿日:2016-12-31 更新日:2017-01-04

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位

選考後

 閲覧数:412 投稿日:2017-01-10 更新日:2017-05-01

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


メニュー他サイト調査



週間人気ページランキング / 10-5 → 10-11
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 48
2 RGB ⇔ Lab | 色変換(色) 12
3 Design 0 9
4 16進数カラーコード / 2進数 8
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 5
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 5
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 5
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 5
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
7 鉄道会社毎のカラーコード | カラーコード(色) 4
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
8 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
8 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
8 8ビットカラー / インデックスカラー / パレットカラー 3
8 「bgcolor」「background-color」「background」の違い | CSS 3
2024/10/12 1:01 更新