ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
デザイナー視点でUI設計の質を上げるための4つのポイント | SONICMOOV LAB
こんにちは、ソリューション事業部でデザイナーをしております、こーたと申します。 ゲームを楽しむために、快適で使いやすく、ユーザーにストレスを感じさせないUIデザインが大切であるということを、前回の【UIデザインで幸せになるためにUXで意識している事】で掲載しました。 ではユーザーが幸せになる良いUIデザインをするためには、具体的にどうすればいいのかということですが、それらに基づいた骨組みをしっかりと作ってあげる必要があります。 今回はそんな幸せになるためのUI設計の作り方をご紹介します。 1：共有と理解 まずは設計する前に作るものへの理解を深めましょう！ UIの設計は、ゲームを企画をした人と密に連携をとって、きちんと内容を理解する事が非常に大切です。 たとえば・・・ どんなゲームなのか 何をするゲームなのか どんな世界観であるのか このゲームのウリ、特徴はなにか このゲームのターゲット層は
全然売れないECサイトがやりがちな4つのダメUX
StanはオムニチャネルコマースにおけるSaaSソリューションプロバイダー、Agiliron Inc.のCCOです。彼は30年以上のキャリアがあり、BtoC、BtoBのソフトウェアのローンチなどにも関わってきました。 大繁盛なECサイトがある一方で、ぜんぜん儲からないECサイトも存在します。そのようなECサイトはなぜ儲けを得られないのでしょうか。その原因は多々あります。例えば、商品そのものの品質が悪いということや、登録にとてつもなく時間がかかるということ。その他にもウェブサイトからの反応がなかったり、サイトの所有者や運営団体が不明で、実体そのものが疑わしかったり… このように、ECサイトが期待したほどの成果が得られない理由は様々ありますが、最大の要因はなんでしょう？ それは、「良いユーザー体験の欠如」です。 商品やサービスを販売しているサイトの目的は、クライアントを惹きつけ売り上げを増やす
君たちはそんなにハンバーガーメニューが好きなのかね？
はじめに 本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。 まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。 あの三本線を人はハンバーガーと呼ぶ 最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。 ハンバーガーメニューを避けたい理由 真面目にハンバーガーメニューを考察してみます。 1. 何をするのかがわからないアイコン https://dri
userflowpatterns.com - このウェブサイトは販売用です！ - userflowpatterns リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
スペースを活用！メガメニューを使用した国内参考サイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの藤田です。気候が暖かくなってきたせいなのか、最近ペットとして飼っている猫が私の近くに寄り沿って来なくなり、猫肌恋しい今日この頃です。 さて、今回はスペースを十分に使用することで、ユーザビリティを向上させ、同時に私の心の隙間までも綺麗に埋めてくれる「メガメニュー」を使用したサイトをまとめてみました。 ここ数年、目にする機会が増えた一方で、いざ自身でメガメニューのデザインを行おうと思うと、それらをまとめた参考サイト（特に国内サイト）が極端に少なくて困った、なんて経験をお持ちの方も多いのではないでしょうか？ かく言う私もその一人で、自身の備忘録も兼ね、国内サイトで「メガメニュー」を使用したサイトをまとめてみました。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめ
説得力がグンと上がる！UIデザインの心理学
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
UI変更が不評な時に役立つ原因の切り分け方
UI変更をした時のことについていろいろと記事を見かけたので書いてみました。ユーザー側と制作側、それぞれの原因の切り分け方や分析、その対応に役立つと思います。 UI設計の際考慮する4つの要因 例えば、UI変更により欲しい情報が見つけにくくなった、ということが起こったとします。 この場合、ユーザーはその原因をUIやデザインに求めがちですし、制作者はその原因をユーザーに求めがちです。アプリのレビュー欄が荒れたり、ブログなどで制作側の主張があったり、というのも最近よく見かけます。 このような課題達成の成功や失敗（この場合はユーザーが欲しい情報を見つけられるかどうか）に関して、ワイナー（Weiner, 1974）は、4つの原因があるとしました。 「能力」「努力」「課題の難易度」「運」です。 「能力」と「努力」はユーザー側の要因、「課題の難易度」は制作側の要因、「運」はそれ以外の要因です。 上記の場合
Webサイトリニューアルの9ステップをWeb制作会社が解説！ | 株式会社LIG
成果が出るサイトリニューアルの実績多数！ 年間150サイトを制作・リニューアルし、毎年複数のWebデザインアワードを受賞。 成果にしっかり向き合い、一目見た瞬間に貴社の魅力がグッ！と伝わる、そんなWebサイトにリニューアルいたします。お気軽にご相談ください！ 💡株式会社LIGのWeb制作実績・お問い合わせはこちらから こんにちは。2007年創業のWeb制作会社、株式会社LIGのデザイン部 部長の吉田です。 これからWebサイトのリニューアルを検討しているけど、どうやって進めればよいのかわからない……という方に向けて、Webサイトのリニューアルの手順を9ステップで解説します。加えてWebサイトリニューアルの基礎知識や、参考事例もご紹介していきます。 Webサイトリニューアルの進め方9ステップ Webサイトリニューアルの具体的な手順をご紹介していきます。 ①リニューアルする目的を考える ②現
スマホサイトのUIでよく使うメニューのリスト表示まとめ３３サイト ｜ iPhoneデザインボックス
スマートフォンサイトを作るときにヘッダーにメニューアイコンを設置してクリックするとメニューリストがでるようにすることがあります。ナビゲーションの表示の仕方やアニメーションは色々あるのでまとめました。最近は、流行り？なのかFacebookのアプリように横から出てくるメニューが多いです。
アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル:phpspot開発日誌
Responsive Retina-Ready Menu | Codrops アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル アイコンフォントなら拡大縮小しても劣化はないということで、CSSとJavaScriptを使ってうまくアイコンもリサイズして綺麗にレスポンシブに、更にRetinaにまで対応してくれるデモです。 UIデザイナーな方はやること増えて大変ですが、チュートリアルをベースにライブラリも出てくれば対応は楽になりそうですね。 それにしても色んなテクニックやディスプレイが出てきたりと、この業界考えることが増えて大変ですね 関連エントリ 3DのソーシャルメディアボタンをCSS3で作成するチュートリアル モダンなサイトを作成するためのCSS3チュートリアル集 テキストを円形に描画するチュートリアル WEBデザイナーなら見ておくべきCSS3のアニ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nyle Engineering Blog
講演資料「クリエイターのためのトーン＆マナー設計について」（パソナテック主催セミナー）