サクサク感をデザインする
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフオク!アプリ開発部の中島(@52shinNaka)です。今日はデザイナーの立場からサービスの体感速度をテーマに記事を書いていきます。 サクサク感の正体 サクサク動くサービスと聞いて、どんなサービスを思いつくでしょうか？サクサク動くを分解すると下の２要素に分かれると思います。 表示速度は、純粋にコンテンツが表示されるまでの時間、体感速度は、実際にプロダクトを触って感じられた時間の長さです。触っていて「サクサク動く！」と感じられるサービスは、上の２つの要素が満たされていることが多いです。 表示速度はサービス利益に直結する デザイナーが日々の作業の中で表示速度を意識するタイミングは少ないかもしれません。しかしグロースステージにある多
長いページでも飽きさせない3つの工夫 - Oisix ra daichi Creator's Blog（オイシックス・ラ・大地クリエイターズブログ）
初めまして。デザイナーの高橋です。普段はUI設計や改善を担当してます。 前回、出口さんの旬ページリニューアル事例のエントリーでは、 スマホファーストの考えに基づき、「読ませる」より「見せる」にデザインの方向性を決めて「ビジュアル訴求を高めた」事例について紹介しました。 では、どのようにして「見せる」ことを実現させるためにスマートフォン上のデザインで解決していったのか？ 今回はその事例をご紹介できたらと思います。 簡単に「見せる」と言っても、オイシックスの売り場の特徴はページの「長さ」にあります。 いかにしてお客さまがサイトに訪問していただいた時のテンションを維持したまま、ページの最後まで飽きずに「見て」いただくことが出来るかが、デザインの成功のカギだと考えています。 そのため、長さを極力意識させない工夫、またテンションを上げもらう工夫が必要です。 「見せる」ためにやったこと そのために具体
御社のウェブサイトは「簡単モドキ」になっていないか？ 「簡単」のギャップが生まれる理由（第4回） | 見るゾウ！ 知るゾウ！ ユーザー像！
こんにちは！ 象好きのかたわら、パソコン教室を運営し、教室に通っている方の操作を観察し、お困りごとを発見する仕事をしているモリマミコと申します。アジアゾウがとても好きなんだゾウ。ゾウさんについて語らせたら、電源を切れない壊れかけのRadioのように、小一時間は話し続ける自信があるゾウ！ ある日、当社が運営するパソコン教室に「なんかうちのパソコンが変なの」とノートパソコンを持ち込まれた方がいらっしゃいました。 何が“変”と感じられましたか？ とうかがっても よくわからないけど、なんか“変”なの。 というお答え。 パソコンを操作していただくと、インターネットエクスプローラーを起動しても、何も表示されない。画面は真っ白だ。 何もしていないのに、ヤフーが出なくなっちゃったのよ、変でしょ。幽霊かしら。それ以外に原因が考えられないでしょ。 とおっしゃる。 幽霊!? YOU礼！ ギャグは要冷凍！ と心の
目が見えない状態を想定したUI設計
視覚がない、弱い人はどのようにサイトを利用しているのか、使っているのはどんなインターフェイスなのか。ずっと気になっていたというのもあり、「目が見えない状態を想定したUI設計」という内容で、主催した勉強会 Design Casual Talks #1 で発表をしました。 インターフェイスとは目で見えるものだけではなく、音声だけで構成されるインターフェイスもある。では僕らがページを作るとき、具体的にどうすればいいのか？ 出典・参考文献 すべて2016年9月時点（スライド作成時）の情報を参考にしました。 視覚障害者 - Wikipedia 視覚障害とは - 公益財団法人 関西盲導犬協会 視覚障害とは - 高知県立盲学校 ２－１ 視覚障害とは - 秋田県立視覚支援学校 厚生労働省 統計情報・白書 平成18年身体障害児・者実態調査結果 視覚障害者 全盲者と弱視者の割合 統計みたいなものが欲しい… -
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
ユーザーインタビューってなに？
ユーザーリサーチってなに？残念なリサーチと、意味のあるリサーチの違い。以前は「UXデザイン」というと、なんだか理解が難しいモノかと思っていたが、本当はすごく単純なものかも、と思うようになってきた。実際にモノを使う人に会って、フィードバックをもらって、「その人が必要としているモノを作ること」の結果がいいUXデザインなのだ。(多分) じゃあどうやったら「その人が必要としているモノ」が分かるのか？その唯一の方法は、実際に会って、「その人」と「その人が生活する環境」を出来るだけ理解することだ。 これは人見知りの私には結構ハードルが高いことなんだけど。。やってみると意外と楽しい。(まだマスターするまでには程遠いけど) そこで、最近ユーザーリサーチをするようになって分かってきた、残念なリサーチと意味のあるリサーチについてまとめてみる→→→ ▶︎新車開発のプロジェクト ビジネスのビジョンを踏まえ、最初の
より良いデザインにするために大切にしたいと思っていること - クックパッド開発者ブログ
こんにちは。デザイナーの遠藤です。 私は今クックパッドiOS/Androidアプリのデザインを担当しています。 みなさんは、既存の機能を別のプラットフォームに追加する際に、あまり考えずにそのまま追加してしまい、後で後悔したことはないでしょうか？今回は、web版にある機能「料理の基本」をクックパッドアプリへ追加した時のことを交えて、より良いデザインにするために大切にしたいと思っていることをご紹介します。 料理の基本について レシピをみて料理を作っている際に、「あれ、半月切りって何だっけ？」「水にさらすってどれだけやればいいんだろう」のような、基本的なことさえわからず手が止まってしまったことはありませんか？クックパッドでは、そんな方のために料理の基本を提供しています。今回私は、この機能をiOS/Androidアプリのレシピページに追加する際、デザインを担当しました。 この機能の使い方は、レシピ
言葉も重要なUIの要素！言葉で高めるUIデザイン
はじめまして！ 株式会社Fablic で バイクフリマアプリ “RIDE” の、アートディレクション・UIデザインをしている わりえもん (@wariemon) と申します！この記事を読んでくださりありがとうございます！ UIにおける言葉の重要性 みなさん、アプリのデザインをする際にどのような箇所に気をつけていますか？ 情報整理・UI・ビジュアル・アニメーションなど、気にかけることは非常に多いのですが、アプリ内で使われる「言葉」も、情報を伝える上で非常に重要な要素です。 今回は、言葉に注目して、アプリをより魅力的に見せている例とポイントを紹介していきます。 先日リリースしたRIDEでも、実際に取り入れている部分もありますので、実践例の一つとしてお話します。 アップデート文言 タスク管理ツール “Wunderlist” や、Tumblrクライアントソフト “tumblrtext fot tu
コンバージョンを最大化するためにメールフォームで絶対やってはいけない９のこと。
おはようございます。藤本です。 厳しい寒さも落ち着きつつありますね。 春になればサイクリングに釣り、花見にキャンプ。。。 やりたいことがたくさんできるシーズンインです！早くコイ！ さて今回のブログはイエタテサイトにてEFOを実行したので、その時に注意すべき事柄をまとめましたので公開いたします。 その１.フォーム内の不要なリンクは全て削除する。 ショッピングサイトにて買い物カゴへ商品をいれいざ購入フォームへ。個人情報を入力中に あと500円で送料無料！！ 会員登録すると送料無料！！ 何月何日！（未来日）セール開始！ この商品を買っている人は以下の商品も合わせて購入している（類似商品） なにがしキャンペーン開催中！くわしくはこちら といったバナーやリンクをみることってありますよね。 魅力的であればあるほどフォーム入力に集中できなくなり、離脱の可能性が高くなります。 離脱したあと結局悩んで注文す
プロトタイプに発生する溝と対処法
完成品になれない溝をどう埋める あたかも完成品に見えてしまうデザインカンプには、様々な暗黙の了解が存在します。グラフィックツールで Web ブラウザ上での見た目を再現しようとしても、実際 HTML / CSS で組まれたデザインの見た目と同じになることはありません。どこまで静止画を作り込んでも、実際の完成品には成り得ない大きな溝が存在します。この溝が大きな誤解に繋がることがあります。 例えばレスポンシブ Web デザインの場合、幾つかの大きさで静止画のデザインを用意したとしても、その間（可変状態）でどうなるか想像するのが難しい場合があります。また、レスポンシブ Web サイトにおける表現は多彩になってきています。要素の順番を Flexbox で変えることもできますし、画像の配置の仕方もより柔軟で表現豊かになってきています。知識や経験がある方であれば静止画では表現されていない「実はこうなる」
品質アップの時間を確保するデザインの進め方について - クックパッド開発者ブログ
こんにちは。ユーザーファースト推進室、デザイナーの坂本です。 私は、クックパッドのレシピを主に生活習慣病の方に向けて管理栄養士が健康的にアレンジした「おいしい健康」というサービスのデザインを担当しています。 「おいしい健康」は2月22日に、アカウント（会員）機能やレシピのリコメンド機能、献立の保存機能などの新機能をリリースしました。このリリースに関わったメンバーは、ディレクター1名、エンジニア3名（＋アルバイトの方2名）、デザイナー1名です。 私はデザイナーとして、UI設計からビジュアルデザインまで関わったのですが、パターンの考慮漏れや使い勝手の悪さなどで、手戻りを増やしてしまいました。 リリースした今、改めて振り返ってみると、もう少しうまくやれば手戻りを少なくし、品質アップの時間をもっと確保できたのでは？と思いました。一体何が悪かったのか？ どうすれば良かったのか？ もし神様が願いを叶え
アプリケーションの設定はごめんだ！ : アプリケーションのユーザビリティを考える | POSTD
(訳注：2016/3/2、頂いたフィードバックをもとに記事を修正いたしました。) 注 このブログ投稿は不満をぶちまけています。かなりのものです。自説は曲げません。長いです。そして、頭に血が上っています。かなり暴言です。 目次 アプリケーションの中身は？ アプリケーションについての考え方が間違っている アプリケーションは 体験 のようなもの この問題の解決策 1. 設定より規約 2. アプリケーションを使いながらユーザを丁寧に導く 3. 失敗は起こる。その直し方を知りたい 4. ドキュメンテーションについて考えるのは、やめよう まとめ 参考文献 最近、ソフトウェア開発において復活しつつあるとても 興味深い 傾向があるようです。おそらくNode.jsの哲学に影響を受けているのでしょう。何かを使うためには、まず大量の「依存パッケージ」をインストールする必要があり、さらにそのコンフィギュレーション
アプリ開発で参考にしておきたい UI デザインパターンまとめサイトのまとめ - Qiita
業務や個人でのアプリ開発で、UI デザインを考えるときに参考にできそうなサイトを紹介します。なかなか個性的・奇抜だったり、少し古い UI が混ざってたりしますが、インスピレーションを働かせる良い刺激になります。 tumblr 多めです。 Behance https://www.behance.net/ Adobe のポートフォリオサイトです。 モバイルデザインのみならずファッションやグラフィックデザインなど、様々なコンテンツが登録されています。 このサイトでは Creative Field という名前でカテゴリ分けされており、アプリ開発においては Interaction Design や Web Design あたりが参考になります。 Pinterest https://jp.pinterest.com/explore/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%A
「UXは遅効性の漢方薬」DMM.comラボに学ぶ、「ユーザーを見る」組織文化の作り方 | SELECK
デジタルコンテンツ配信、FX、英会話、そして3Dプリントサービスに至るまで、幅広いビジネスを展開するDMM.comグループ。同社でUXチームの設立に関わり、マネジメントを行う井上 誠さんは、「いまDMMに必要なのはユーザー視点で考える文化」だと語る。 世界的なバズワードである「UX」だが、その概念に企業としてどう取り組むか、ということはひとつ大きな課題だろう。井上さんは1年に及ぶ草の根活動を通じて、社内にUX文化を浸透させてきたという。「定性的なデータを拠り所とするUXは、グロースハックとは異なる中長期的な目線が必要」と語る井上さんに、UXチームの立ち上げから、UXという考え方を全社に浸透させていくまでのストーリーを伺った。 Webデザインって何？ から始まった、DMMでの10年 大学を卒業して、まだ新卒制度もなかったDMMに、大学に貼ってあった求人広告を見て入社しました。大学では染物の研
酔っ払ってUXレビューをして学んだ10のこと | POSTD
フリーボーナスガイド：あなたはフリーランスのUXデザイナですか？ ビジネスの成長を加速するのに必要な全てがこの総合ガイドに詰まっています。 こちらからダウンロードしてください 。 こんにちは。このブログでは、一般的な記事のようにモノローグ的に書いていくのではなく、読者の方といきなり対話するような形で始めたいと思っています。私はRichardです。 The User Is Drunk（利用者は酔っている） を運営しています。The User Is Drunkは、クライアントのホームページが酔っ払いにどんな風に見えているか、というのを彼らに伝えるために、私が数カ月前に立ち上げたサイトです。 手順はこんな具合です。まずは私が酒を飲んで酔っ払い、クライアントのWebサイトを見ます。そして、どうやったらそのサイトがもっと良くなるかを、普通の利用者の視点で考えます。つまり、私の就業時間は通常は夜になり
アプリのプッシュ通知を実装するときに気をつけるべきこと
アプリエンジニア。株式会社マイナースタジオ所属。主に扱っているプログラミング言語はSwift、Ruby、PHP、Python。イカが好き。 プッシュ通知はユーザーがアプリを起動していなくても、こちらからメッセージを送ることができる非常に強力な機能です。しかし、使い方を間違えると、アプリ利用を促す効果がないだけではなく、アプリ自体をアンインストールされてしまう原因となる可能性があります。実際、３割近くのユーザーがプッシュ通知が原因でアプリをアンインストールした経験があるという調査結果も出ています。 今回はプッシュ通知を実装するにあたって、エンジニア視点から気をつけるべきことをいくつか紹介します。（本記事はiOSアプリに関することを中心に記述しています。） プッシュ通知を何に利用するかユーザーに伝える ユーザーにプッシュ通知を届けるためにはアプリ側で許可をしてもらう必要があります。しかし、すべ
物理サーバを選定する際のポイント – Eureka Engineering – Medium
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
グッドパッチがSketch 3で作ったUIデザイン事例4選 (1/2)
グッドパッチのデザイナーがSketch 3を使ったUIデザインの方法を解説する本連載。第3回までは、Sketchの基礎的な操作方法と実務で役立つTipsを解説してきました。最終回では、Sketchを使ってグッドパッチがデザインしたモバイルアプリやWebサイトの事例を紹介します。 モバイルアプリ事例 グッドパッチの社内では、モバイルアプリのUIデザインでSketchが特に活躍しています。モバイルアプリの事例を3つ挙げながら、それぞれのデザイン時に便利だったSketchの機能についても解説します。 TALKIE 不動産情報サービスのアットホームが配布している「TALKIE（トーキー）新築・分譲マンション」は、スマートフォンで新築・分譲マンションの情報収集や比較検討ができるアプリです。 このアプリのUIは、ユーザーと不動産会社が、手軽に、頻繁にコミュニケーションできるように設計しました。例えば、
TechCrunch
X, formerly known as Twitter, is introducing two new tiers for its subscription offering in order to bring in additional revenue. The social media giant is adding a new Premium+ tier that costs $16 pe Welcome to Startups Weekly. Sign up here to get it in your inbox every Friday. For my column this week, I told the story of how an ex-colleague was impersonated by an AI-powered spambot and almost tr
お申し込みを1割増やしたフォーム改善の話
もうやりきったと思ってませんか？まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化tanakayoshikif-code
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
