通販サイトの改善をしてみた話｜ハヤカワ五味
こんにちは、ハヤカワ五味です。 今回は何についてにしようかなーと考えていたのですが、"頼まれたのでツイッター用画像の添削をしてみた"という記事が好評だったので、弊社通販サイトがどのようにして今の形になったのかをまとめていきたいと思います。 最初にお断りしておくと、ユーザーがどれくらいまでスクロールして…みたいな細かいデータは持っていないので、あくまで自分が利用者だったら…という視点の改善になります。そして現状から更に改善中なのであくまで発展途上！ まず、弊社の通販サイトを一度見てきてくれると嬉しいのですが、多分、通販サイトに飛ぶの面倒な人いるだろうなあ・・・と思うのでビフォーアフターを載っけます。 そして大前提ですが、弊社通販サイトの利用者の85%(びっくり)がモバイル端末からの利用なので、基本はスマホでの見え方について書いていきます。あと、実際に私のリクエストをセンス良く実装してくれてい
guiflow - 画面遷移を表現するUI Flowsエディタ
UI FlowsというのはRuby on Railsの開発元で知られるBasecampが考えたツールで、画面遷移を画面とアクションをシンプルに記述します。それらを矢印でつなぐことで、全体の画面遷移を分かりやすく管理できます。 そんなUI FlowsをGUIで手軽に書けるようにしてくれるのがguiflowです。 guiflowの使い方 メイン画面です。左側がエディタ、右側がプレビューになります。 ブラケットで囲むと画面の名前、その下にアクションを書きます。さらに矢印をつけて別な画面名を指定することで遷移が表現できます。 画面遷移は複数段階に付けられます。 guiflowでの記述はシンプルなのでテキストエディタでも十分に簡単に書けます。記法はuiflowを使っています。メンテナンスも楽ですし、プレビューを通して全体像を把握するのも容易でしょう。システム開発時に用意しておくと役立ちそうです。 g
Paradeiser - ハンバーガーメニューに代わるモバイル向けメニュー表示 MOONGIFT
モバイル向けのWebサイトではメニュー表示にハンバーガーメニューがよく使われます。しかし、実際のところハンバーガーメニューが一般的に分かりやすいわけでもありません。むしろタップして何が出るのか分からず躊躇してしまう人が多いでしょう。 そこで使ってみたいのがParadeiserです。ハンバーガーメニューに変わるメニュー機能を提供します。 Paradeiserの使い方 このように画面のヘッダー部にアイコンが並びます。 数が増えても大丈夫です。 Moreをタップすると追加のメニューが表示されます。 Paradeiserはスクロールするとヘッダー部のアイコンが自動的に消えるようになっています。そしてちょっと戻ると再度表示されます。ヘッダーにメニューが並ぶのはWebサイトでよく見られた形式ですが、常にあると邪魔になります。両方のいいとこ取りな機能ではないでしょうか。 ParadeiserはJavaS
scrollMonitor - 大量のデータもスムーズにスクロール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で大量のDOMを表示するのは自殺行為です。Webブラウザの動きがガクガクになったり、フリーズしてしまったりします。そのためページネーションが使われるのですが、業務要件として全データの表示を求められることは多々あります。 そんな時にはscrollMonitorを使ってみましょう。大量のデータであってもスムーズなスクロールが可能になります。 scrollMonitorの使い方 利用例です。実際に表示されているのはこの見えている部分だけで、黄色と紫色の部分は消えたり、新しくDOMに追加表示されます。 見出しを残してスクロールもできます。 scrollMonitorではデータはメモリ上にありますが、それをスクロールにあわせて描画しています。また、不要になった部分は破棄しています。こ
U-NEXT キャリア
U-NEXTは、2007年にサービスを開始した動画配信サービスのパイオニア。「ひとりひとりに、最高の時間を配信する。」 をミッションに、いま次のステージに進むべく、新たなメンバーを積極採用しています。会社についての情報はコーポレートサイトもぜひご覧ください。
食材宅配サービスOisixにおけるUXの取り組みとアプリの改善事例
有機野菜などの食品宅配専門のECサービス「Oisix」を展開するオイシックス株式会社。同社ではサービスのUXを向上するため「UX室」というチームを設け、日々サービスの改善を行っています。 今回はオイシックスのUI/UXデザイナーである福山さんにオイシックスのUXデザインの取り組みと、実際の事例のお話をお伺いしました。 Oisixとは 「Oisix」は有機野菜や無添加食品などの定期宅配を行うECサービスで、Webとアプリ両方で展開しています。定期宅配と言っても、注文の最低金額設定もなく、注文をしない週があっても良いなど、自由でフレキシブルな買い物体験を提供しています。 オイシックスにおけるUXデザインの取り組み 福山 遊果 氏 EC事業部 UX室 UIデザインセクション UI/UXデザイナー 千葉県千葉市出身。多摩美術大学情報デザイン学科を卒業し、ソフトウェア会社でのUI/UXデザインを経て
モバイルアプリにおけるナビゲーションUIのデザインパターン
アプリのナビゲーションは、直感的で予測ができなければいけません。新規のユーザーや再訪問したユーザーが、アプリをどのように使ったら良いか迷わないよう、理解しやすくする必要があります。 しかし小さい画面という制限の中で、コンテンツの優先順位を考慮しながら、ナビゲーションを使いやすくすることは非常に難しいです。 この問題に、様々なナビゲーションを使って異なる方法で立ち向かっていますが、多様なユーザビリティの問題に、皆悩まされています。 そこでこの記事では、モバイルアプリの基本的なナビゲーションであるハンバーガーメニュー、タブバーとジェスチャーベースのナビゲーション（タップやフリックを使用したナビゲーション）の３つについて検証し、それぞれの長所と短所を説明します。 ハンバーガーメニュー 画面のスペースは、モバイル上の貴重な商品であり、画面の節約に役立つモバイルナビゲーションのパターンのうち、ハンバ
egjs
egjs is Javascript components group that brings easiest and fastest way to build a web application in your way.
ミニマルなモバイルアプリUIで気をつけるべき６つのこと
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザインはユーザーのエンゲージメントを高める上で、最も重要なものの一つです。ユーザーはシンプルなインターフェースを好むようになってきたので、UIを基本的で必要最低限な要素のみに残していくことが成功の鍵です。 ミニマリズムは、構造と機能の絶妙な組み合わせから成り立ちます。その最大の強味は、構造を明確化することにあります。線を整え、たっぷりと余白を残し、そして視覚的な要素を最小にすることで、最も複雑な主題（内容）でさえもシンプルになります（もちろん、効果的に使われればの話です）。 ミニマルデザインでは、簡潔さ、明確さ、そして一貫性が求められます。明確なビジュアルコミュニケーションによってユーザーの問題解決を導くべきです。ミニマルなデザインのアプリが評価されるのは、ユ
ペンとふせんで！スマホUIのアイデアプロトタイピング - クックパッド開発者ブログ
検索事業部のデザイナー倉光です。 今回は、開発現場でアイデア発散フェーズにやっていることの一例を紹介したいと思います。UIデザインの手法として比較的知名度は高く、デザイナー以外でも学びたいという要望も多い「ペーパープロトタイピング」についてです。 前提として プロトタイピングにはフェーズと目的に応じて 様々な手法がありますが、今回は「小規模チームでアイデアをぽんぽん出し、伝え合うためのプロトタイピング」の話です。ユーザーに実際に評価してもらうためのプロトタイプの作り方についてはこの記事では割愛させていただきます。 また非デザイナーの方は「いやいや、デザイナーじゃないと画面なんてうまく書けないよ…」と躊躇してしまうかもしれませんが、本記事では社内のディレクター/エンジニア/インターン生が書いた成果物も掲載していますので、そちらも参考になると思います。 目次 目次 1.ペーパープロトタイピング
オンラインストア購入率をアップさせる5つのUXポイント デザイン会社 ビートラックス: ブログ
最近ユーザー体験 (UX) はアプリやWebサービス、そしてオフラインの店舗など最新のケースをイメージする事が多い。しかし、より良いUXが最も売り上げとしての結果に直結するのが、Eコマースサイトでのオンラインショッピングに対する体験設計 (UXデザイン) になる。 誰にでも分かるUXデザインの基本 同じ商品を販売する場合でも、よりスムーズで購入意欲を高める導線をデザインする事が出来れば購入率が上がる。各種Eコマースサービスが普及し、実店舗の存在がどんどん危ぶまれて来ているこちらアメリカでは、いかにしてオンラインでの購入量をアップさせるかが企業にとっての大きな課題となっている。 近い将来テクノロジーが葬る10の産業 アメリカ大手ショッピングサイトをベースにリサーチ今回は全体の販売量が多く、UXデザインにもかなりのリソースを投入している Macy’s, Amazon.com, Kohl’s,
ハンバーガーメニューと非表示のナビゲーションはUX指標を悪化させる
Webサイトのメインナビゲーションを非表示にすると、発見しやすさはほぼ半減する。その上、タスク達成に時間がかかるようになり、タスクがより難しく感じられるようになる。 Hamburger Menus and Hidden Navigation Hurt UX Metrics by Kara Pernice and Raluca Budiu on June 26, 2016 日本語版2016年9月26日公開 非表示のメニュー（ハンバーガーアイコンなど）と、表示されているメニュー（ページトップを横切る形で置かれたリンクなど）について、定量的なユーザビリティテストをおこなったところ、以下のようなことが明らかになった： 非表示のナビゲーションは発見されにくい。表示されているあるいは部分的に表示されているナビゲーションよりも。 ナビゲーションが非表示だと、ナビゲーションはユーザーから利用されにくくなる
スマホでの商品表示はグリッドビューとリストビューどちらが最適？ | UX MILK
グリッドビューはEC系のアプリでよく使われる手法ですが、これには何か理由があるのでしょうか？ シンプルなリストビューよりグリッドビューの方が成果が上がるのは、どのような場合でしょうか？ この記事では、グリッドビューについて細かく見ていきつつ、双方の問いに対しての答えも探っていきたいと思います。 グリッドビューとは グリッドビューとは、標準のリストビューに代わる、コンテンツの表示手法です。グリッドビューは水平方向と垂直方向の両方に、２つ以上のセルを配列することで成立します。
デザインの参考に！モバイルアプリUIのギャラリーサイト13個まとめ | 日本VTR実験室
どうもこんにちはJBです。 アプリデザインの引き出しを増やす手っ取り早い方法として、ギャラリーサイトを眺めたり…なんてことがあると思います。そんなわけで、今回はモバイルアプリのギャラリーサイトを集めてみました。 ギャラリーサイト一覧 普段から色々なタイプのUIを見ておけば、いざという時「このコンセプト・機能ならあんな感じかな？」みたいな目安が付けやすいです。パクっちゃダメですけど。 あまり日本のアプリのギャラリーがないもんで、英語のアプリばかりですが…。それでは行ってみましょう！ Inspired UI iPhone、iPad、Androidと切り替えられて便利なギャラリー。 Inspired UI Mobile Design Inspiration モバイルUIのコンセプトなどを集めたTumblrページです。GIFアニメーションなんかもあって楽しいですね。 Mobile Design I
モバイルECの「検索」をデザインするための５つのポイント
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 モバイルにおいて、「検索」は最も基本的なアクションであり、利益のあがるアプリやサイトを作るのに重要な要素です。当たり前ですが、ユーザーが商品を見つけられない限り、その商品は売ることはできません。ユーザーは商品を探し出し、その商品の情報を見る際、アプリをスムーズに操作できることを期待し、出てきた検索結果の質に基づいて即時にアプリの価値を判断をします。 優れた検索というのは、ユーザーが欲しいものを素早く簡単に見つけることを促します。この記事では、それをどのように可能にするかを紹介していきます。 1. 検索の配置を目立たせる ユーザーは検索機能を探すとき、せわしなく、雑に画面内を見回します。大抵の場合「文字を入力できる四角い枠」を探しながらページにざっと目を通します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Login | InVision
See Your Neighbors
カゴ落ち率84%のモバイルECでコンバージョン率を確実に伸ばす4つの方法 | 海外のEC事情・戦略・マーケティング情報ウォッチ
UI Movement - The best UI design inspiration, every day
UI Movement - The best UI design inspiration, every day
