親にLINEの使い方を教えようとしたけど、UIの意味から全く伝わらん...写真とか目のマークとか...→なぜなんだろう

2022/08/28 260 users スワイプ操作 うめめ アイコン 異次元 line

うめめ🔛ITエンジニンジャ🗯 @beConjuror 親にLINEの使い方を教えていると、UIの意味が圧倒的に届かない層があることが再認識される。写真を送るアイコンは理解できず、パスワード入力の目のマークはわからない、ハンバーガーメニューは意味不明、スワイプ操作は異次元。そういえば自分はどうやってこれらのマークの意味... 続きを読む

「WEB屋しか使わない単語だから…」サイトの上にある押すとメニュー出てくる3本線のアイコンは「ハンバーガーメニュー」というらしい - Togetter

2020/12/27 332 users Togetter 造語 マック 単語 アイコン

まいか? @maikasan そういや会社でウェブ屋さんと電話してて「ハンバーガーメニューをクリックしてもらうと…」って説明されて「なん？て？マック？？造語？」と思いつつ適当に流してしまったんだけど、後で調べたらサイトの上にある押すとメニュー出てくる3本線のアイコンをそう呼ぶらしい事を初めて知ったのであった。... 続きを読む

Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント | コリス

2019/03/19 194 users コリス absolute position Disney 多く

スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が... 続きを読む

ハンバーガーメニューを簡単に実装できる、プレーンなHTML/CSSとReactコンポーネント -Animated Burgers | コリス

2019/02/06 147 users コリス Reactコンポーネント コピペ アニメーション 利用

プレーンなHTMLとCSS、またはReactコンポーネントとして利用可能なハンバーガーメニューを紹介します。 コピペで簡単に利用でき、サイズやカラーのカスタマイズも簡単です。ハンバーガーメニューのアニメーションもさまざま...記事の続きを読む 続きを読む

便利なツールが登場！ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツール | コリス

2018/08/29 156 users コリス スマホアプリ SVGアイコン ハンバーガー ツール

SVGアイコンは美しく軽量で、非常に便利です。Webサイトでもスマホアプリでも、SVGアイコンを使用している人は多いと思います。 SVGアイコンをアニメーションさせるには、どうしていますか？ 例えば、ハンバーガーメニュー...記事の続きを読む 続きを読む

Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ | コリス

2017/02/14 452 users スクリーン 議論 候補 コリス スマホ

スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しか ...記事の続きを読む 続きを読む

ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ - PhotoshopVIP

2016/11/15 584 users PhotoshopVIP

ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事は こちら や こちら 、 こちら 、 こちら からどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介して... 続きを読む

最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ | コリス

2016/10/20 547 users 階層構造 レスポンシブ対応 去年 スクリーンサイズ コリス

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホペ ...記事の続きを読む 続きを読む

CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10 | NxWorld

2016/01/21 139 users 備忘録 NxWorld ハンバーガー エフェクト 見栄え

画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 その他のハンバーガーメニューアイコンのエフェクト 先述したように以前にも同じようにCSSで実装したハンバーガー... 続きを読む

闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita

2015/12/09 480 users 連投 Qiita 本稿 目次 GUI

はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI に関する記事です。急遽枠に空きができたので連投になりますがこの記事を書かせていただきました。なお8日目は私の記事 君たちはそんなにハンバーガーメニューが好きなのかね？ です。ご興味あれば合わせて如何でしょうか。 また途中脱線気味かもしれないので、目次から適当に読み飛ばすか、ご興味がなければそっとじ... 続きを読む

jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える | webOpixel

2015/12/09 157 users tag Category webOpixel Posted

Posted: 2015.12.09 / Category: HTML&CSS, javascript / Tag: jQuery jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #m... 続きを読む

[CSS]軽量のスタイルシートで、スマホにもデスクトップにも快適で分かりやすいナビゲーション -Paradeiser | コリス

2015/09/16 100 users レスポンシブ対応 スクリプト無し アイコン コリス 小さい画面

スマホで表示すると三本線のアイコンになるハンバーガーメニューは、確かに小さい画面の問題を解決する方法の一つですが、ベストな選択ではありません。 ハンバーガーメニューの良い点を利用し、悪い点を改善した、スクリプト無しでレスポンシブ対応のナビゲーションを実装するスタイルシートを紹介します。 Paradeiser Paradeiser -GitHub Paradeiserの特徴 Paradeiserのデ... 続きを読む

CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ | NxWorld

2015/06/19 525 users NxWorld クローズボタン エフェクト CSS 矢印

自分用に一覧化したのでシェアします。ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開している時などのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。よく見る「×」のようなクローズボタンに変化するものから矢印に変... 続きを読む

≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）

2015/06/10 1053 users Bテスト 概要 メニュー 三本線 結果

概要 2014年のA/Bテストの結果によれば、いわゆるハンバーガーメニューは使わない方が良いという結果に。 スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあっ... 続きを読む

モバイルナビゲーションを考察する – ハンバーガーメニューに代わるもの | POSTD

2015/05/08 145 users POSTD 欠点 UXデザイナー ナビゲーション アプリ

Webサイトやアプリのナビゲーションにおいて頻繁に用いられるハンバーガーメニューは、簡単で便利なソリューションであると同時に数多くの欠点を併せ持っています。それでは、他に使えるナビゲーションパターンとは一体何でしょうか？いくつかのアプリの例を見比べて考察していきます。「Webサイトやアプリのナビゲーションにハンバーガーメニューを使うべきかどうか」というテーマに関して、UI/UXデザイナーの間で交わ... 続きを読む