ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフオク!アプリ開発部の中島(@52shinNaka)です。今日はデザイナーの立場からサービスの体感速度をテーマに記事を書いていきます。 サクサク感の正体 サクサク動くサービスと聞いて、どんなサービスを思いつくでしょうか？サクサク動くを分解すると下の２要素に分かれると思います。 表示速度は、純粋にコンテンツが表示されるまでの時間、体感速度は、実際にプロダクトを触って感じられた時間の長さです。触っていて「サクサク動く！」と感じられるサービスは、上の２つの要素が満たされていることが多いです。 表示速度はサービス利益に直結する デザイナーが日々の作業の中で表示速度を意識するタイミングは少ないかもしれません。しかしグロースステージにある多

最近では、新機能や新サービスをリリースする際に、プロトタイプを作成することも増えてきたと思います。 しかし、まだプロトタイピングツールを使ったことがないという人もいるのではないでしょうか？ そこで今回は、オンライン学習プラットフォーム「Udemy」で最近開講した「誰でもかんたんに学べるAdobe XD入門講座」で、Adobe XDの使い方を学んでみたいと思います。 誰でもかんたんに学べるAdobe XD入門講座 この講座は、Adobe認定アソシエイトである濱野 将氏によるAdobe XD初心者向けの講座です。Adobe XDの基礎からはじまり、実在するサービスのモバイルアプリのプロトタイプを作成するという実践的な内容までカバーしています。 また、デザイン初心者向けに「なぜプロトタイプが必要なのか？」といったことやワイヤーフレーム、デザインカンプ、モックアップ、プロトタイプの違いなども丁寧に

It makes me smile when someone raves about how fast this website loads, because that's no accident. We put a lot of effort into making it so. It is the sort of thing that usually goes unnoticed, but when your readers are developers, there's a better chance they notice and appreciate it. I have written about this in the past, but it's worth re-examining because these ideas are always evolving. From

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 この記事ではF字型レイアウトの基本、利点、作成方法ついてわかりやすく説明します。 F字型レイアウトとその働きについて 「F字型レイアウト」はユーザーがサイトを見るときの一般的な視線の動きをあらわします。 FはFastのFでもあり、多くのユーザーはWebサイトを高速で読み流しているのです。 F字型パターンは、200人以上のユーザーが数千のWebサイトを閲覧した結果を記録したNNGroupのアイトラッキング調査によって普及されました。多様なサイトやタスクに関わらず、ユーザーの視線の動きはほぼ一定していることが調査によってわかりました。この一定な視線の動きこそがアルファベットのFの字型に類似していたのです。 F字型は以下の３つの要素によって構成されています。 ユーザー

Download our free report on how leaders and design system contributors from enterprise companies like Caterpillar, PayPal, or Weir Group build and grow design systems. Learn key lessons on design system maturity and operations.

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 製品の成功にはさまざまな要素が関連していますが、製品全体のユーザー体験はほかの要素よりも重要です。新しいアプリやサイトを設計するときには、ベストプラクティスを実践することが堅実な方法です。しかし、全体像を描く際、あれば良いが必須ではないデザイン要素はいい加減にしてしまいがちです。ところが、良い経験と悪い経験の違いはこれらの細かいディテールをどれだけ考えてデザインすることに関係してくるのです。 この記事では、視覚的なフィードバックやマイクロコピー、ホワイトスペースに焦点を当てて、これらの小さい、あるいは大きいディテールがなぜデザインのよりわかりやすい要素と同じくらい重要で、製品の成功を左右するかを説明します。 視覚的なフィードバック 視覚的なフィードバックは、大き

今回は、GoodpatchのUIデザイナーにヒアリングし、UIデザインを理解するためのおすすめ本をまとめました。 次のような人に特におすすめです。 UIデザイナーになったばかりの人 もっとUIデザインについて勉強したい人 サービス、アプリ開発に携わるエンジニア・ディレクターの人 目的別に6つのカテゴリに分けてご紹介します。あなたの関心に沿ったトピックから、 気になる本を見つけていただけると嬉しいです。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 1. UIデザインを基礎から理解する ユーザーインターフェース（UI）とは何なのか、どんなデザイン要素があるのか、UIが機能する環境とは？、どうやって作ってリリースするのか…UIデザインを始めるために、まずは基礎知識を網羅しましょう。 ■ はじめてのUIデザイン 改訂版 この本は、著者の1人である吉竹遼さんが「UIデザイ

たとえば、あなたがデジタルビジネスのオーナーまたはマーケティングの担当役員で、UXデザインの分野について詳しく知りたいとします。すでにUX関連のニュースやデザインのトレンドについて調べただけでなく、自社のUXデザイナーやコンサルタントに、UXの業務がビジネスプラン全体とどのように適応しているか何度も尋ねてきました。さらに、最終的な製品やモックアップがどのように見えたり感じたりするかについて、UXデザイナーにフィードバックを求めたりすることもあるかもしれません。 しかし、もう一歩踏み込んで、根本的にユーザー体験がどのように作られているのかを知りたい場合はどうすればよいでしょうか。または、新しいWebサイトやアプリのアイデアがあり、専門家を雇う前に自分で作ってみたいと思うかもしれません。その場合、おそらく少しトレーニングが必要でしょう。そこで私たちの出番です。 この記事は、UXデザイン全体の流

Christineは、appendToのフロントエンドの開発者およびライターです。appendToではチームのためのJavaScriptトレーニングを提供しています。 「インタラクティブ」「一貫性」「ミニマル」は、Webサイトのナビゲーションが話題となるときに共通して聞かれる言葉です。しかしこのリストにはもう１つ「シンプル」という言葉を加えなくてはなりません。 シンプルナビゲーションは、Webデザイン要素の中でもっとも美しいものの１つです。インタラクティブとミニマルデザイン、それぞれの特性を組み合わせることでWebサイトに一貫性をもらたします。 シンプルナビゲーションには以下の２つの特徴があります。 Webサイトのメインナビゲーションには、３～７つのセクションしかありません。これは、ドロップダウンメニューやメガメニューによる表示またはサブ的なナビゲーションの場合は当てはまりません。 デフォ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 UXデザインを行う際、ワークショップやインタビューなどが主流な調査方法として挙げられます。そして調査結果はユーザーストーリーやプロセスフローで表現されます。また、チームのメンバーと考えを共有したり解決策を話し合うための手段として、ペルソナやWebページのレイアウトであるワイヤーフレームといったツールが使われます。 しかし、これらの調査を行うためには設計した製品のターゲットとなる、実在するユーザーを考慮しなければなりません。製品をより良いものにするためには、ユーザーと製品の間で何が起こっているかを理解し、製品がどのようにユーザーの生活を良くするのかを把握しておく必要があります。そして、ユーザーへの理解を深めるためにストーリーボードを活用します。 この記事では、UX

Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 モバイル向けにデザインをするなら、そのデバイスの使われ方とデバイスそのものの特性に配慮する必要があります。モバイルデザインを始める際に役立つ原則はいくつかありますが、これらはユーザーリサーチに取って代わるものではありません。絶対に厳守するべきガイドラインではないのです。 モバイルデザインでは、たくさんのことを考慮する必要があります。その多くは標準的なUXデザインでも踏まえる事項ですが、同時にモバイルデザイン特有のものも考慮しなければなりません。モバイルで提供するサービスを既存のものと統合する予定ですか？　そうであれば、レスポンシブデザインとアダプティブデザインのどちらを採用しますか？ 編注：レスポンシブデザインとは、デバイスに関係なく画面サイズに応じて表示を

サイバーエージェントでUXディレクターを務める 大塚敏章 氏。13年間、事業立ち上げや運営を手がけてきた。これまでの経験から感じた課題や心がけてきたことを語った。「ディレクターに明日はない」その真意とは？ ディレクターに明日はない！？ サイバーエージェント 大塚敏章 ※2017年3月に開催された「DIRECTORs' SCRAMBLE vol.1」よりレポート記事をお届けします。 2004年にサーバーエージェントに入社して以来、アメーバ関連のサービスやソーシャルゲームの立ち上げ・運営を手がけてきた大塚氏。 UXコンサルや社員の育成なども行い、2016年からアメーバブログのUXディレクターとして活動している。こうした経験を通じて大塚氏がディレクターとして感じた課題や心がけてきたことを語った。 大塚氏曰く、スケジュール管理やリソース調整といった業務はAIにとって代わられるという。例えば、香港の

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち

Fabio Muniz氏はTestLodge社のプロダクトデザイナーであり、製品開発の立ち上げ段階における設計で活躍しています。Fabio Muniz氏の仕事はfabio.designでご覧ください。 ソフトウェアの設計プロセスではプロダクトの欠陥が見つからず、ユーザーが使う段階になって欠陥が明らかになりユーザー体験を損ねてしまうことがあります。 この記事では、そういった事態に陥らないようにチェックしておくべき事項をリストアップしました。ここで挙げるチェックポイントは一般的なものであり多くのプロダクトに適用可能ですが、例外もあることをご理解ください。 インタラクションデザイン 01 - 頻繁に発生する操作が簡単にできるか チェックをする理由：同じ情報を繰り返し入力することは面倒であり、ユーザーの生産性向上に寄与しません。面倒な操作が多ければ、ユーザーはより生産性の高い競合プロダクトへの乗り

このページでは、UI/UXを学ぶための教材を紹介していきます。ノンデザイナーの方にとっても役立つ教材も多数取り上げているので、是非目を通してみてください。 この本について どんな本？ 20年以上前に書かれたにも関わらず、いまだに読み続けられている名著です。今どきのアプリのようなUIについては触れられていませんが、UI/UXの本質を学ぶのには最高の1冊です。 学べることは？ 「ユーザがエラーを起こすのはデザインのせいである」というようなデザイナーとしての姿勢から、具体的にどうやってそのエラーを防ぐかというところまで徹底的に解説されいます。この1冊でUI/UXの考え方の基本を押さえることができます。 難易度は？ 誰にとっても身近なものが具体例として取り上げられており、興味を持ってサクサクと読み進めることができます。最近になって改訂版が出版され、もう少し読みやすくなったようです。 おすすめ度 （

今回は「UIとUXとは？」から始まり「UI/UXデザインをする際のポイント」を50項目に分けて紹介します。

「カード」とは、画像やテキストなどの情報が書かれた下図のようなデザインのことをいいます。カードは、シンプルな使いやすさとデザイン性とのバランスを重視する際にはもっともよく使われる手法となりました。PinterestやFacebookのようなサービスで使われはじめ、現在では多岐にわたる企業で使用されています。

リソースが不足し、予算が取れない中で、企業は成功のほどが不明な大規模のデザインプロジェクトへの投資に乗り気にはなりません。 そんな中Googleは、デザインプロセスを速くし、価値あるインサイトを提供する方法論を作り出しました。 必要最低限の機能を持った製品（MVP）のことは一旦忘れて、１週間以内にプロトタイプを作り出し、テストすることにフォーカスしてみましょう。 Googleデザインスプリントプロセスの概要 Googleデザインスプリントは、５段階のプロセスで構成されます。各段階のプロセスは実行するのにおよそ１日（８時間）かかり、５段階すべて実行するにはおよそ40時間かかります。 素晴らしいデザインプロセスでは、繰り返すこと（イテレーション）が重要です。実際には、最初のスプリントで修正案をつくり、そのあとに少なくとも２回のイテレーションを回すことが強く推奨されています。 また、自分のアイデ

Benjamin Earl Evansはイングランドのロンドン出身で、受賞歴のあるデザイナーです。彼はデザイン思考を活用してスタートアップの作成しており、より包括的な製品やサービスを生み出しています。 デザイナーとしての仕事が無意識のうちにバイアスに縛られていると気付いたのは、つい数か月前のことでした。当時私は、夢のようなプロジェクトにとりかかっていました。それは、苦手だったカラーパレットの作成を克服する機会を与えてくれるものでした。UXの仕事では、クライアントのサイトを数種類作成したら、フィードバックをもらうのが典型的な流れです。ですから私も隣の席の人に意見を求めました。しかし彼は「私は好きじゃないですね、面白みがありません」と冷たく言い放ちました。 情熱をもって作り上げたカラーパレットを真っ向から否定されて落胆した私は、なぜ「面白みがない」と思ったのか尋ねました。答えは驚くべきものでし

大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。「使える」ものではあったものの、「使いやすい」ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか 「フォー