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

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

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

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

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

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

これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions | コリス

2019/09/13 85 users コリス interactions インタラクション アロー

ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクション... 続きを読む

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アイコンをアニメーションさせるには、どうしていますか？ 例えば、ハンバーガーメニュー...記事の続きを読む 続きを読む

ハンバーガーメニューの実装もこれなら簡単！パネルを左右上下からスライドさせる超軽量スクリプト -Pushbar.js | コリス

2018/07/23 57 users コリス ドロワー スクリプト 実装 パネル

Webページやスマホアプリで、ドロワーのパネルを左・右・上・下からスライドさせるだけの超軽量3kBのスクリプトを紹介します。 実装もカスタマイズも超簡単で、デスクトップ・タブレット・スマホを完全にサポートしています。また...記事の続きを読む 続きを読む

ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレンド5個まとめ - PhotoshopVIP

2017/08/28 96 users SVG PhotoshopVIP シームレス 図形 キャンパス

はじめにハンバーガーメニューが登場したとき、デザイン業界の反応はさまざまでした。そこから数年が経ったいま、この単純な図形は、インターネットの世界に浸透しています。 ここにくるまでハンバーガーメニューは、特にアニメーションの分野において、新しいレベルの洗練されたスタイルへと進化してきました。CSS3に加えて、SVGやキャンバスは、ユーザーエクスペリエンス全体を高める複雑で、シームレスなコンテンツ遷移... 続きを読む

[CSS]デスクトップ・スマホ対応、浮かんだり光ったりアニメーションするボタンを簡単に実装できるスタイルシート | コリス

2017/03/28 61 users コリス 矩形 鋭角 円形 CSS

外部ファイルを一つ加えるだけで、さまざまなボタンを簡単に実装できるスタイルシートを紹介します。 鋭角や角丸の矩形、楕円形、ハンバーガーメニューに使われる円形、グラデーションやフラット、ゼリーみたいなボタンもあります。 B ...記事の続きを読む 続きを読む

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

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

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

やっぱり！ ハンバーガーメニューをやめたらPVも再訪問も劇的に改善！ などSEO記事まとめ10+3本 | 海外&国内SEO情報ウォッチ | Web担当者Forum

2016/12/01 89 users 鈴木 Web担トップ Web担当者Forum ユーザー 再訪問

Web担トップ » 海外&国内SEO情報ウォッチ » やっぱり！ ハンバーガーメニューをやめたらPVも再訪問も劇的に改善！ などSEO記事まとめ10+3本 海外&国内SEO情報ウォッチ やっぱり！ ハンバーガーメニューをやめたらPVも再訪問も劇的に改善！ などSEO記事まとめ10+3本 「みんな使ってるから」ではなくユーザーにとって良いナビゲーションを考えて実行するだけで…… 鈴木 謙一 2016... 続きを読む

ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー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テストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあっ... 続きを読む

スマホ対応のキモ。スマホサイトのナビゲーションメニューが悩ましい。

2015/06/08 76 users ナビゲーションメニュー ナビゲーション 引き出し キモ 工夫

スマホ対応は今後ますます必須になります。ナビゲーションへの工夫も、いろいろと引き出しを増やさなくちゃ。スマホサイトのナビゲーション。どーいう感じにしようか、いつも悩みます。 最近、よく見られるのは、こういう「ハンバーガーメニュー」。試しに、右上の「三」をクリックしてみると、 See the Pen Burgers & Sliders by Erik Rahm (@erikrahm) on Code... 続きを読む

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

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

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

もう並ぶ必要ナシ！六本木の『the 3rd Burger』が最新iBeaconシステム導入 - 週アスPLUS

2014/06/25 85 users 週アスPLUS 六本木 der わさび ビジネスパーソン

ハンバーガーレストラン『the 3rd　Burger』六本木店は、スマホアプリ『O:der』を利用した“スマートオーダー”システムを6月26日より導入します。 本格志向でかつヘルシーなハンバーガーメニューで若い男女やビジネスパーソンに人気の『the 3rd Burger』（ザ・サード・バーガー）。写真は看板メニューの“the 3rd Burger”。ワサビ入りなのが特徴。 『O:der』はショーケ... 続きを読む