ユーザーのインタラクションを伴うさまざまなUIコンポーネントをCSSで実装できる軽量フレームワーク -Ellegant CSS

2023/04/09 16 users インタラクション トグル モーダル UIコンポーネント CSS

ハンバーガーメニューを使用したスマホ用のナビゲーション、アニメーションで表示されるモーダル、要素を表示・非表示するトグル、要素を切り替えるスイッチなど、ユーザーのインタラクションを伴うUIコンポーネントをCSSで実装できるフレームワークを紹介します。 Ellegant CSS Ellegant CSS -GitHub Ellegant CSSの特... 続きを読む

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

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

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

ロッテリアの『ハンバーガーメニュー』が『ハンバーガーメニュー』だった「知ってる人だけがクスリと笑えるやつだ」

2022/06/05 6 users クスリ ロッテリア youkoseki ツッコ マクドナルド

yu koseki @youkoseki 「ロッテリア　ハンバーガーメニュー」で調べて、昔から何度もツッコまれてたことが分かった。マクドナルドも一時期やっていたようだが、今もやっている他のハンバーガーチェーンは見つけられなかった。これがデザインとして良いか悪いかは、いい議論の題材になりそう。 2022-06-04 14:19:57 続きを読む

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

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

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

2020年7月第4週号 1位は，JavaScriptを使ったハンバーガーメニューの代替3案，気になるネタは，G Suite向けGmailがChat，Meet，Roomを統合：週刊Webテク通信｜gihyo.jp … 技術評論社

2020/07/24 8 users 統合 gihyo.jp 技術評論社 JavaScript ネタ

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2020年7月13日～7月19日の間に見つけた記事のベスト5です。 1. Three CSS Alternatives to JavaScript Navigation | CSS-Trickshttps://css-tricks.com/three-css-alternati... 続きを読む

Adobe XDステート機能を使いこなそう！ - ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 - ICS MEDIA

2020/03/05 11 users ポパー インタラクション カルーセル ICS MEDIA 従来

Adobe XDステート機能を使いこなそう！ ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 AdobeXD2019年11月の大型アップデートで「ステート機能」が登場し、リッチなインタラクションを作成しやすくなりました。従来はアートボードを複数枚組み合わせて表現するしかなかったのですが、ステート機能の登場によ... 続きを読む

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

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

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

スマホ向けのナビゲーションにハンバーガーメニューを使うなら、ソーセージリンクを試してみて | コリス

2019/07/02 29 users コリス 乱用 ハンバーガー ナビゲーション 考察

スマホ向けのナビゲーションにハンバーガーメニューが使用されるのを多く見かけると思います。ハンバーガーメニューが必ずしも悪いということではないですが、ハンバーガーのコンセプトを乱用または誤用している場合は、ソーセージリンクが適しているかもしれません。 スマホ向けのナビゲーションデザインについての考察... 続きを読む

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のスクリプトを紹介します。 実装もカスタマイズも超簡単で、デスクトップ・タブレット・スマホを完全にサポートしています。また...記事の続きを読む 続きを読む

ハンバーガーメニューを使用する最適のタイミングとは | UX MILK

2018/01/26 25 users UX MILK タイミング ソフトウェアデベロッパー 3本線

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事は こちら をご参照ください。 ハンバーガーメニューとは、メニューを表示するために使われる３本線のアイコンです。アイコンをクリックまたはタップすると、ナビゲーションが表示されます。 デザイナーが書いたハンバーガーメニューに関する記事はたくさんあり、その多くはハンバーガーメニューに反対するものです。... 続きを読む

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

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

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

ハンバーガーメニューは本当に優れているのか | UX MILK

2017/06/25 42 users UX MILK モバイルサイト テクノロジー 著者 ブロガー

Stephen Moyers はオンラインマーケッター、デザイナー、テクノロジーに精通しているブロガー。 この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 Analyzing the Hamburger Menu in Web Design (2017/4/26) 誰もがモバイルサイトの上の角の「ハンバーガーメニュー」を見... 続きを読む

東海限定「夜マック」販売へ　プラス１００円で具材２倍：朝日新聞デジタル

2017/06/13 36 users 朝日新聞デジタル 夜マック 夕食 三重 閉店

日本マクドナルドは１４日から、ハンバーガーメニューに１００円追加すると主な具材が倍になる「夜マック」を愛知、岐阜、三重の３県で売り出す。東海地方はボリュームの多いハンバーガーを夕食で利用する客が多く、新サービスを地域限定で導入する。 東海３県の全２７８店で、毎日午後５時から閉店まで。２４時間営業店は翌朝５時まで販売する。期間限定商品を除く定番のハンバーガー１６種類すべてが対象で、１００円をプラスし... 続きを読む

クリック率が違う！？4タイプのメニューアイコンの比較検証！ : ニキビ跡

2017/04/25 30 users MENU メニューアイコン Bテスト マーク 基本パターン

スマホ対応の記事で、「≡」のようなメニューを見たことはないですか？  このマークは『ハンバーガーメニュー』と呼ばれるメニューを表す記号です。  本記事では、ハンバーガーメニューと「MENU」と書いてあるメニューボタンでクリック率がどの程度違うのかA/Bテストを報告している記事から、その結果をご紹介します。  基本パターン ハンバーガーメニューの最も基本的なデザインです。  単純に三本の線が描かれて... 続きを読む

[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で実装したハンバーガー... 続きを読む

コメダ珈琲の「ハンバーガー」はシンプルでデカイ！ - 団子のゆとりごと

2016/01/11 15 users コメダ珈琲 ハンバーガー 団子 ぼうし コメダ

2016 - 01 - 11 コメダ珈琲の「ハンバーガー」はシンプルでデカイ！ グルメ グルメ-コメダ珈琲 スポンサーリンク どうも、コメダ珈琲でのランチをひたすら推している団子です。 そろそろコメダブロガーと呼ばれても良い頃だと思います。 今回はコメダ珈琲のハンバーガーを紹介します。 ハンバーガーメニュー 「ぼうしみたいなコメダのバーガー」 コメダ珈琲のバーガーは「ハンバーガー」「フィッシュフラ... 続きを読む

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

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

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