日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
酔いどれデザイン日誌 - Drunken Design Diary -
皆さん、UIデザイン時のエンジニアとの情報連携を行う際、どのツールを使っていますか？私はFigmaを愛用しています。 ただ、このFigmaに一点だけ気に入らない箇所があります。それはコメントが要素に吸着しない（くっつかない）ことです。これができないせいで、修正等で要素のサイズが変わったり場所が変わった際、すべてのコメントの位置を手作業で修正するという無駄な作業が発生していました。 いつかアップデートで修正されるだろうと思って我慢していましたが、全く修正されず・・・。もはや諦めていたのですが、つい最近Figmaでコメントを要素にくっつける方法を発見したので、今回はその方法を皆さんにお伝えしようと思います。 目次 Figmaのコメント仕様について Figmaのコメントを要素に吸着する方法 Figmaについて思うこと Figmaのコメント仕様について まず、Figmaのコメントが何に対して吸着し
UXデザインツール「STUDIO」でのプロトタイプ作成が最高という話 | sizucca.com
ブログ書くぞーー！！ と取り急ぎのブログを立ち上げた のが 1 ヶ月前。 月日が経つのって早いですね（思わず目が遠くなる）。 その内ビルド方法を忘れて記事の更新できなくなりそうな未来が見えるわぁ…と思っていたら、 テンション上がるプロトタイピングツール「STUDIO」を見つけたので、 勢いに任せてその感想を書き散らしてみようと思います。 目次 作成したデモ プロトタイピングツールの使い所 STUDIO の感想 あとはこれができれば最高！！な要望 敢えての懸念点 まとめ 作成したデモ 百聞は一見に如かず。とにかくどんなプロトタイプが作れるのか見たい！！という方は、 以下からデモで作成したプロトタイプのライブプレビューがご覧いただけます。 iPhone 版 ※ 1 ページのみ Web 版 ※ 1 ページのみ sizucca.com（iPhone 版） ※ グローバルナビゲーション部分は遷移可能
見た目が悪くても人気なサービスから学ぶユーザビリティ設計
まるで90年代かのような、見た目は良くないけれども人気のあるWebサイトは、今現在でも多く存在しています。 上記のWebサイトは、お世辞にも良いデザインとはいえないですが、それにもかかわらず人気があります。なぜ人気があるのか、それはユーザーがもっとも必要としているものを確実に提供しているWebサイトであるからです。 たとえば、各Webサイトにはこのような特徴があります。 ・Redditは、ユニークユーザーが2億3,400万人、月間ページビュー数が81.9億、日間投票数が2,500万（2016年時点の統計）にもかかわらず、表示速度が非常に速いサイトです。 ・Hacker Newsは最新のスタートアップ関連のニュースを掲載するだけのサイトです。しかし、この「コンテンツを目立たせる」ことこそが、ユーザーからもっとも評価されている点です。 ・Wikipediaは情報がとてもよく整理されていて、ユー
アニメーションをWebサイトに導入するためのテクニック
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち
【デザイナー向け】これからAndroidのデザインをする人へ - Qiita
はじめに 自己紹介 私は日本にAndroidが上陸したAndroid 1.6の時代(2009年頃)からAndroidの開発者としてAndroid7系になった今も(執筆時2017年)Androidエンジニアを続けています。 Androidの歴史をずっと側で見守り続けた私がエンジニア目線で思っている事を述べるので、これからAndroidのデザインをするデザイナーに見て頂きたいです。 ※ この記事の内容は一個人の意見で所属先は一切関係ありません 一番言いたいこと まず、普段iPhoneを使っているデザイナーは最新もしくは1つ前のOSが入ったAndroid端末をメイン端末とまではいかなくても2台持ちにして常用して下さい。 ハッキリ言ってこれが全てです!! 良さ気なUIのアプリを一通り入れて数十分触るだけでは全く意味がありません。 Androidの良さは通知やIntentと呼ばれるアプリ間の密な連携
Facebook UIデザイン大解剖─UIの使いやすさを決める「グレースケール」の配色ルール ｜ブログ｜root｜芯を問い、成長に貢献する
初めまして、rootアシスタントデザイナーの内藤です。 今日はFacebookのモバイルUIを事例に、UIデザインにおける「グレースケール」の使い方について考えてみます。 そもそも「グレースケール」とはなんなのか。僕も、言葉だけ知っていてなんとなく使っていたので改めて調べてみました。 IT用語辞典（e-words.jp）によると グレースケールとは、画像などに使われる色の種類・範囲を表す用語の一つで、白と黒とその中間の何段階かの灰色のみを用いること 一言でいってしまえば、限りなく黒に近いものから限りなく白に近いものまで「いろんなグレー」ということでしょうか。 グレーという色は地味ですが、UIデザインにおいて実はもっとも重要で、なおかつ難しい色なのではないかと考えています。 例えば、Webサイトのキーカラーなどは、目立ちますし、サイト、しいてはブランドそのものの印象を決定づける色なので、色選
モバイルのUXデザインにおけるベストプラクティス
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アプリはコンテンツやサービスを提供するための、今日（こんにち）の主流かつ確かな方法です。しかし、飽和状態の市場でユーザーを満足させ、その興味をつなぎとめるために、どうすればモバイルアプリは意義や価値のあるものとなるのでしょうか。 この記事では、素晴らしいモバイルUXを作る鍵となる、UXデザインのための７つのヒントをご紹介します。 １. 一つの画面につき、一つの操作 ユーザーが情報を取得する際の努力を軽減する 皆さんがデザインするアプリの画面では、ユーザーにとって最も価値のある一つの動作を助長するものでなければなりません。各画面を一つの目的だけのためにデザインし、Call to Action（行動喚起）は一つに留めましょう。こうすることで、ユーザーはアプリを理解・
これからのデザイナーが知っておくべき7つの変化 デザイン会社 ビートラックス: ブログ
デジタルとテクノロジーの急激な発達でデザイナーの役割に大きな変化が訪れようとしている。 これまでにもグラフィックからWeb、WebからモバイルUIからUX、そしてジェネレーティブAIなど、次から次へとデザイナーが身につけなければならないスキルの量と種類が増えてきている。 それに加え、最近ではビジネスのフィールドにおいてのデザイナーの役割にも大きな注目が集まり、デザイン中心の考えから生み出されるプロダクトも増えてきている。 1. 優れたデザイナーになりたいならまずはコミュ力を磨けチーム内におけるデザイナーの仕事内容に求められるスキルも変わりつつある。例えばデザイナーの仕事は大きく分けると； 1/3が正しい人から適切な情報を引き出すこと、1/3が絵を描くデザイン作業、そして残りの1/3が出来たものの情報を正しい人に正しく伝えることである。 これからも分かる通り、デザイナーの仕事の実に2/3がコ
なぜウェブデザイナーは暗黒面に落ちて人をだます「ダークパターン」を使うようになるのか？
by Patrizio Cuscito ウェブサイトやアプリを使っていると自分の意図するものとは違う操作が勝手に行われていて戸惑うことがありますが、ミスではなく、「わざと」そのようなデザインにしているユーザーインターフェースを「ダークパターン」と呼びます。なぜ善良なデザイナーがダークパターンを使う悪意あるデザイナーになってしまうのか、その仕組みがムービーで公開されています。 Dark Patterns - User Interfaces Designed to Trick People http://darkpatterns.org/ ダークパターンとは何か？ということは以下の記事を読むとわかります。 ユーザーをだますのが目的のデザイン「ダークパターン」いろいろ - GIGAZINE なぜデザイナーが暗黒面に落ちてしまうのかは以下のムービーで解説されています。 Dark Patterns:
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
UIデザイナーの私が4年間で学んだ、ダッシュボードのデザインで大切な26のこと
モバイルアプリ相互送客ツール「Tapdaq」のメインデザイナーであり、Dashboard UI Kitの作者として知られるJan Losertさん。4年間のダッシュボードデザインの経験からまとめた26のステップは、UI/UXデザイナー必読です。 過去4年間にわたってダッシュボードとアプリケーションのデザインを続ける中、プロダクトをさらに良く効率的なものにするために、いろいろな部署と付き合っていくこと、そしてそうした部署の人たちの知識を活用することを学びました。 この記事では、私が学び、日常のルーティンに取り込んだすべてのステップを紹介しようと思います。こうしたステップがあったからこそデザイナーとして大きく成長できたと思うので、読者のみなさんに役立つことを願っています。 事前準備をする Step 1. 集められるだけの情報を集める（例示は3パターンでお願いする） 私にとって、実際に稼働してい
ケーススタディ：NetflixはどのようにA/Bテストを実施しているのか？ | UX MILK
Netflixはどうやって素晴らしいストリーミング体験を提供しているのでしょうか？ 彼らがどのようにサイトを作り、さらにA/Bテストを通してどのようにUIの改善をしているのでしょうか？ この記事では私がYelpで参加したDesigners+Geeks eventで学んだことから共有します。２人のスピーカー、Anna Blaylocky氏とNavin Iyengar氏はNetflixのプロダクト・デザイナーであり、何年も何百万人という会員に行ってきたA/Bテストから収集した実態について語ってくれました。また、参加者がデザインを考える上で手助けとなるようないくつかの関連する例を示してくれました。 科学的な手順 仮説 科学において仮説は、研究や実験を通して検証されるアイデアや事象の原因を指します。デザインでは理論やや予想を「仮説」と呼ぶことができます。 仮説の基本的な概念には、あらかじめ決まった
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
現役のデザイナーが語る！優秀なUI/UXデザイナーになるために不可欠なスキルとは | TechAcademyマガジン
現役のデザイナーが語る！優秀なUI/UXデザイナーに不可欠なスキルとは UI/UXデザイナーと聞くと、UIデザイナーとUXデザイナーはそれぞれ使えるツールが違い、求められることも違うことがあるでしょう。それでも優秀なデザイナーとして活躍するために必要な要素を紹介しています。これから目指す上でぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になりま
モバイルデザインで押さえておきたい６つの基礎テクニック
最近のインタラクションデザインの成功例を調べてみると、どれも基礎をしっかりとおさえたものとなっています。これらのデザインには共通して、人間の自然な行動をもとにし、私たちが気づかないところで障壁となるものを取り除いています。ビジュアルの表現やインタラクティブな体験が重視されており、中でも読みやすさ、理解しやすさは特に重視されます。 それでは、最も重要なデザインテクニック、およびそれがどのように機能するかについて簡単に見てみましょう。 効果的なタイポグラフィ サイトまたはアプリにおけるテキストの目的は、アプリとユーザーの間に明確なつながりを確立し、ユーザーが目標を達成できるようにすることです。そして、タイポグラフィはこのインタラクションにおいて重要な役割を果たしています。 テキストのサイズとレイアウトは、画面上でものを読むときの体験に大きな影響を与えます。小さな書体や狭い行間、余白の文字を処理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
growiz.us
http://www.ogura.blog/entry/2017/04/21/105207
［対談］2017年のSEOはどうなる？ 楽天市場のSEOマネージャー近谷氏とアイレップ吉野氏が語る3つのポイント | Web担当者Forum
