タグ ハンバーガーメニュー
人気順 5 users 50 users 100 users 500 users 1000 usersユーザーのインタラクションを伴うさまざまなUIコンポーネントをCSSで実装できる軽量フレームワーク -Ellegant CSS
ハンバーガーメニューを使用したスマホ用のナビゲーション、アニメーションで表示されるモーダル、要素を表示・非表示するトグル、要素を切り替えるスイッチなど、ユーザーのインタラクションを伴うUIコンポーネントをCSSで実装できるフレームワークを紹介します。 Ellegant CSS Ellegant CSS -GitHub Ellegant CSSの特... 続きを読む
親にLINEの使い方を教えようとしたけど、UIの意味から全く伝わらん...写真とか目のマークとか...→なぜなんだろう
うめめ🔛ITエンジニンジャ🗯 @beConjuror 親にLINEの使い方を教えていると、UIの意味が圧倒的に届かない層があることが再認識される。写真を送るアイコンは理解できず、パスワード入力の目のマークはわからない、ハンバーガーメニューは意味不明、スワイプ操作は異次元。そういえば自分はどうやってこれらのマークの意味... 続きを読む
「WEB屋しか使わない単語だから…」サイトの上にある押すとメニュー出てくる3本線のアイコンは「ハンバーガーメニュー」というらしい - Togetter
まいか? @maikasan そういや会社でウェブ屋さんと電話してて「ハンバーガーメニューをクリックしてもらうと…」って説明されて「なん?て?マック??造語?」と思いつつ適当に流してしまったんだけど、後で調べたらサイトの上にある押すとメニュー出てくる3本線のアイコンをそう呼ぶらしい事を初めて知ったのであった。... 続きを読む
Adobe XDステート機能を使いこなそう! - ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 - ICS MEDIA
Adobe XDステート機能を使いこなそう! ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 AdobeXD2019年11月の大型アップデートで「ステート機能」が登場し、リッチなインタラクションを作成しやすくなりました。従来はアートボードを複数枚組み合わせて表現するしかなかったのですが、ステート機能の登場によ... 続きを読む
これなら簡単!CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions | コリス
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクション... 続きを読む
スマホ向けのナビゲーションにハンバーガーメニューを使うなら、ソーセージリンクを試してみて | コリス
スマホ向けのナビゲーションにハンバーガーメニューが使用されるのを多く見かけると思います。ハンバーガーメニューが必ずしも悪いということではないですが、ハンバーガーのコンセプトを乱用または誤用している場合は、ソーセージリンクが適しているかもしれません。 スマホ向けのナビゲーションデザインについての考察... 続きを読む
Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント | コリス
スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が... 続きを読む
ハンバーガーメニューを簡単に実装できる、プレーンなHTML/CSSとReactコンポーネント -Animated Burgers | コリス
プレーンなHTMLとCSS、またはReactコンポーネントとして利用可能なハンバーガーメニューを紹介します。 コピペで簡単に利用でき、サイズやカラーのカスタマイズも簡単です。ハンバーガーメニューのアニメーションもさまざま...記事の続きを読む 続きを読む
便利なツールが登場!ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツール | コリス
SVGアイコンは美しく軽量で、非常に便利です。Webサイトでもスマホアプリでも、SVGアイコンを使用している人は多いと思います。 SVGアイコンをアニメーションさせるには、どうしていますか? 例えば、ハンバーガーメニュー...記事の続きを読む 続きを読む
ハンバーガーメニューの実装もこれなら簡単!パネルを左右上下からスライドさせる超軽量スクリプト -Pushbar.js | コリス
Webページやスマホアプリで、ドロワーのパネルを左・右・上・下からスライドさせるだけの超軽量3kBのスクリプトを紹介します。 実装もカスタマイズも超簡単で、デスクトップ・タブレット・スマホを完全にサポートしています。また...記事の続きを読む 続きを読む
ハンバーガーメニューを使用する最適のタイミングとは | UX MILK
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事は こちら をご参照ください。 ハンバーガーメニューとは、メニューを表示するために使われる3本線のアイコンです。アイコンをクリックまたはタップすると、ナビゲーションが表示されます。 デザイナーが書いたハンバーガーメニューに関する記事はたくさんあり、その多くはハンバーガーメニューに反対するものです。... 続きを読む
ハンバーガーメニューが進化中!2018年に押さえておきたい最新トレンド5個まとめ - PhotoshopVIP
はじめにハンバーガーメニューが登場したとき、デザイン業界の反応はさまざまでした。そこから数年が経ったいま、この単純な図形は、インターネットの世界に浸透しています。 ここにくるまでハンバーガーメニューは、特にアニメーションの分野において、新しいレベルの洗練されたスタイルへと進化してきました。CSS3に加えて、SVGやキャンバスは、ユーザーエクスペリエンス全体を高める複雑で、シームレスなコンテンツ遷移... 続きを読む
ハンバーガーメニューは本当に優れているのか | UX MILK
Stephen Moyers はオンラインマーケッター、デザイナー、テクノロジーに精通しているブロガー。 この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 Analyzing the Hamburger Menu in Web Design (2017/4/26) 誰もがモバイルサイトの上の角の「ハンバーガーメニュー」を見... 続きを読む
東海限定「夜マック」販売へ プラス100円で具材2倍:朝日新聞デジタル
日本マクドナルドは14日から、ハンバーガーメニューに100円追加すると主な具材が倍になる「夜マック」を愛知、岐阜、三重の3県で売り出す。東海地方はボリュームの多いハンバーガーを夕食で利用する客が多く、新サービスを地域限定で導入する。 東海3県の全278店で、毎日午後5時から閉店まで。24時間営業店は翌朝5時まで販売する。期間限定商品を除く定番のハンバーガー16種類すべてが対象で、100円をプラスし... 続きを読む
クリック率が違う!?4タイプのメニューアイコンの比較検証! : ニキビ跡
スマホ対応の記事で、「≡」のようなメニューを見たことはないですか? このマークは『ハンバーガーメニュー』と呼ばれるメニューを表す記号です。 本記事では、ハンバーガーメニューと「MENU」と書いてあるメニューボタンでクリック率がどの程度違うのかA/Bテストを報告している記事から、その結果をご紹介します。 基本パターン ハンバーガーメニューの最も基本的なデザインです。 単純に三本の線が描かれて... 続きを読む
[CSS]デスクトップ・スマホ対応、浮かんだり光ったりアニメーションするボタンを簡単に実装できるスタイルシート | コリス
外部ファイルを一つ加えるだけで、さまざまなボタンを簡単に実装できるスタイルシートを紹介します。 鋭角や角丸の矩形、楕円形、ハンバーガーメニューに使われる円形、グラデーションやフラット、ゼリーみたいなボタンもあります。 B ...記事の続きを読む 続きを読む
Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ | コリス
スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しか ...記事の続きを読む 続きを読む
やっぱり! ハンバーガーメニューをやめたらPVも再訪問も劇的に改善! などSEO記事まとめ10+3本 | 海外&国内SEO情報ウォッチ | Web担当者Forum
Web担トップ » 海外&国内SEO情報ウォッチ » やっぱり! ハンバーガーメニューをやめたらPVも再訪問も劇的に改善! などSEO記事まとめ10+3本 海外&国内SEO情報ウォッチ やっぱり! ハンバーガーメニューをやめたらPVも再訪問も劇的に改善! などSEO記事まとめ10+3本 「みんな使ってるから」ではなくユーザーにとって良いナビゲーションを考えて実行するだけで…… 鈴木 謙一 2016... 続きを読む
ハンバーガーメニューはもう古い!代わりに使えるモバイル用ナビメニュー5つまとめ - PhotoshopVIP
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。(この問題の参考にしたい記事は こちら や こちら 、 こちら 、 こちら からどうぞ。) 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介して... 続きを読む
最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ | コリス
去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホペ ...記事の続きを読む 続きを読む
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10 | NxWorld
画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 その他のハンバーガーメニューアイコンのエフェクト 先述したように以前にも同じようにCSSで実装したハンバーガー... 続きを読む
コメダ珈琲の「ハンバーガー」はシンプルでデカイ! - 団子のゆとりごと
2016 - 01 - 11 コメダ珈琲の「ハンバーガー」はシンプルでデカイ! グルメ グルメ-コメダ珈琲 スポンサーリンク どうも、コメダ珈琲でのランチをひたすら推している団子です。 そろそろコメダブロガーと呼ばれても良い頃だと思います。 今回はコメダ珈琲のハンバーガーを紹介します。 ハンバーガーメニュー 「ぼうしみたいなコメダのバーガー」 コメダ珈琲のバーガーは「ハンバーガー」「フィッシュフラ... 続きを読む
闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita
はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI に関する記事です。急遽枠に空きができたので連投になりますがこの記事を書かせていただきました。なお8日目は私の記事 君たちはそんなにハンバーガーメニューが好きなのかね? です。ご興味あれば合わせて如何でしょうか。 また途中脱線気味かもしれないので、目次から適当に読み飛ばすか、ご興味がなければそっとじ... 続きを読む
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える | webOpixel
Posted: 2015.12.09 / Category: HTML&CSS, javascript / Tag: jQuery jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #m... 続きを読む
モバイルでのページ遷移を支援しよう(ハンバーガーメニューがあったとしても) – U-Site
ハンバーガーメニュー(3本線メニュー)を利用しているモバイルサイトでは、移動を助けるサポートがサイト全体にわたって必要である。ユーザーがサイトのメインナビゲーションを見つけられなかったり、利用しないことがあるかもしれないからだ。 公開:2015年10月26日付(日本語版)、2015年8月16日付(原文) 著者:Amy Schade 原文(英語):Supporting Mobile Navigati... 続きを読む