こんにちは、渋谷でIT企業運営中の田村でございます。 昨今テクノロジーの普及により、デザイナーの働き方も大きく変化してきました。 今や時価総額のランキング上位はUXに力を入れている企業ばかりです。 商品に顧客が合わせるのではなく、顧客に商品が合わせる時代になってきたと改めて実感しております。 デザイン思考、デザイナーの役割がさらに重要視されてきておりますね。 そこで、今回はデザイナーをこれから目指すデザイン初心者の方にも非常に使いやすく、クオリティの高いデザインをアウトプットできるようになるオススメのサービスを３つ紹介したいと思います！ ①Cocoda! ( https://www.cocoda-design.com/ )Cocoda!とは 「Cocoda!」とはデザイナーへのパスポートをコンセプトとしたデザイナーになれるオンライン学習サービスです。ユーザーを意識した設計力、ビジュアルの表

シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録って大事 新規登録は離脱を抑えるデザインが重要です。 せっかくダウンロードしてくれたユーザーがサービス利用前に離脱してしまうともったいないので。 本記事では新規登録の UI パターンや事例をまとめてみました。新規登録をデザインする際は、この記事を参考にデザインしてみてください。少しでもお役に立てばうれしいです。 新規登録のポイント ① 最も負担の少ないタイミング ② 最小の操作数 本記事でわかること ① UI パターン別の良し悪し ② 操作数を減らす UI 事例 ▼ 目次 パターン一覧 1. 登録必須型 2. 登録先行型 3. 利用先行型 4. メリット先行型 目的別の参考事例 1. 不要な遷移を削る 2. 不要な操作を削る 3. わかりやすく伝える 4. 魅力的に伝える おわりに ・最適な新規

Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！ 流れてきたツイートをみて「なんだこのデモは」といろいろ見てみたところ、Microsoft AI labがすごい技術を公開していたので簡単にまとめます。どういう技術かというと「手書きのワイヤーフレームを適切に修正してHTMLに自動変換」してくれます。 Kabel, Spike Techniques, Microsoftが2018年8月末に公開したSketch 2 Codeというライブラリです。GitHub（ https://github.com/Microsoft/ailab/tree/master/Sketch2Code ）で公開されているので、確認することができます。行っている処理は以下の通り。 1. ユーザはWebに画像（手書きワイヤーフレ

父上氏、ハザードランプと間違えて走行中にプリウスの主電源ボタンを押して車を急停止させてしまう。今日のプリウスになりかねないからそろそろ免許返納してほしい。 「そろそろ免許返納を」 『車ないと生活できない』 「なんでそんなド田舎に… https://t.co/tWZIA6R7Mg

前回の記事では、コードを学んだ経験がインタラクションを重視したデザインをするきっかけになったという話を書きました。 今回はマイクロインタラクションとコードについてです。 マイクロインタラクションとは？僕がマイクロインタラクションという言葉を知ったのは、この本がきっかけでした。 アプリやWebサービスを使っていると、些細だけど使いやすさに繋がっていたり、他のアプリにはない特徴となっているインタラクションに出会うことがあります。登録フォームのパスワードの安全性を示すバーや、いいねボタンを押した際の一瞬のアニメーションなど表現や目的は様々です。 この本では、こうしたインタラクションが ・小さいけれど気の利いたアイディア ・「こよなく愛する製品」と「許容範囲の製品」の違いを生むものであるとされ、様々な事例と共に分析されています。事例を眺めるだけでも楽める本なので是非手にとってみてください。 マイク

WebComponents.kyoto Meetup #2 での発表資料です。 https://wc-kyoto.connpass.com/event/78690/

(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜

CAMはエンタメコンテンツ、ビジネスバラエティメディア、ライフスタイルメディアを主軸に30以上のサービスを展開しています。エンタメコンテンツの分野では、国内外で圧倒的人気を誇るアーティストやアイドルグループとのパートナーシップを結び、オフィシャルファンサイトや動画関連サービスを運営しています。

ご年配の知人に「新しい筆王を買ったんだけどアップデートのお知らせというのが出て先に進めない」と言われて家まで行ってきたんだけど 筆王の配慮 vs それをかいくぐるご年配のバトルがなんかすごかったので参考に書き残しておこうと思った -- 筆王「アップデートするには新規登録かログインをして下さい」 知人「メールアドレスを入れたけどログインできない」 ぼく「新規登録してないのでログインはできないです…」 -- 知人「新規登録のメールアドレスの項目がエラーになる」 ぼく「メールアドレスの「@gmail.com」も入れないとだめです…」 -- 筆王「(女性の声)アップデートが完了しました」 知人「おーできた。この起動っていうボタン押せばいいんだろう？」 筆王「(女性の声)住所録を作成するには…」 ぼく「(めっちゃ音声で言ってくるしめっちゃ説明の画面が出てくる…これなら年配の方でも迷わなさそう…)」

Max is UX and brand designer based in Montreal, Canada. He is currently a staff designer on the Shop team at Shopify. Previously he worked on UX teams at SSENSE and Glossier and also organized a design event series called Dynamic/MTL. No. 494 Read Interview Brand Designer Müge Özcan Her — Slash Müge is a brand designer and creative director living in Abu Dhabi. Currently witnessing a city developi

この記事はドワンゴ AdventCalendar 2017の17日目の記事です。 dwangoアドベントカレンダー17日目を担当させていただきます @ln-north です。デザイナーとして2016年度新卒として入社し、もうすぐ2年になります。 エンジニアさんで埋められるカレンダーの中、ひっそりとデザイナーも参加させていただきます、どうぞお手柔らかに…。 はじめに ここ何年かのWebフロントエンド界隈の動きは非常に大きくそして速く、デザイナーから見ても様々なパラダイムシフトが起こっています。scssやwebpackからHTML5やCSS3まで…本当に大変ですよね。 特に最近はReactやVueなど、 コンポーネント指向 のWebシステム開発が発展を遂げています。Web Componentsなども含め、流れを見てるとおそらくWebはこのコンポーネント指向に向かい、しばらく進んでいくのだろうと

複数ページのフォームは、一つ一つの入力ページをスッキリと見せることができますが、その半面遷移の手間が増えたり、全体を俯瞰しにくいという欠点があります。 対して単一ページのフォームは、遷移の手間こそないものの、ページ内の項目数が多くなることで直帰の増加や項目の記入漏れなどを引き起こす可能性があります。 このように、とくに入力項目数が多いフォームについては、フォーム入力を複数ページに分けるべきか、もしくはひとつの画面のなかにすべての項目を収めてしまうかのいずれかでしばしば議論や検証が実施されます。 今回はそんなフォームの画面数による検証結果をいくつか集め、ご紹介していきます。 目次 複数ページ⇒単一ページへの検証 複数ページ⇒単一ページへの検証 その2 ステップを増やした検証 アコーディオン型フォームによる検証 番外編：検証の観点 複数ページ⇒単一ページへの検証 まずご紹介するのは、Elast

明示的アクション／暗黙的アクションについてずっと言語化できていなかったので、このたび記事にまとめてみました。馴染みのあるMac OSそしてiOSを例に、画面上のオブジェクトを操作するための二つのパラダイムについて説明します。 2005年頃の Apple Human Interface Guidelines (HIG) を開いてみると、そこには「Explicit and Implied Actions – 明示的および暗黙的アクション」と呼ばれるデザイン原則が示されています。Mac OSのユーザーインターフェイスでは、明示的アクションと暗黙的アクション、この二種類の操作体系が同時に提示され、ユーザーは好きな方法を選択することができるようになっています。 明示的アクション明示的アクションとは、すなわち画面上に明示された手段を選択してコマンドを実行するというものです。Macを例にすると、ユーザー

2017-08-03デザイン言語システムを入れたらコミュニケーションコストがぐっと下がった話〜メドレー TechLunch〜ビールが美味しい季節ですね！ 最近飲みすぎて嫁に叱られて、飲み会自粛中のデザイナー・マエダです。 メドレーでは TechLunch という社内勉強会を実施しているのですが、デザインについて私も発表する機会をいただきましたので、その内容を紹介させていただきます。テーマは「DLS の導入について」です。発表資料は記事の最後をご覧ください。 DLS（デザイン言語システム）とはDLS とは DesignLanguageSystem の略で、すごい単純にいえばデザインガイドラインみたいにUI に一貫性をもたせるため、配色やレイアウト、タイポグラフィやマージンなどのルールを策定するものです。 私が主に担当しているオンライン診療アプリ「CLINICS」は、iOS、Android、W

一見同じようで，実は絶えず進化している！「ドラゴンクエストXI」の発売に合わせて，シリーズにおける“コマンドの変遷”を振り返ってみた ライター：相川いずみ 国民的RPGとも呼べる「ドラゴンクエスト」シリーズの最新作「ドラゴンクエストXI　過ぎ去りし時を求めて」（PS4 / 3DS）が，ついに本日（2017年7月29日）発売となる。 ファミリーコンピュータ向けの初代「ドラゴンクエスト」が発売されたのは，今から30年以上前の1986年5月。以来，ナンバリングタイトルはMMORPGを含めて10本がリリースされてきたわけだが，基本的なゲームシステムは変わっておらず，黒地に白文字のコマンドウィンドウは，シリーズを象徴するものとなっている。 だが，変わっていないように見えるコマンドウィンドウも，実は1作ごとに細かい改良が施され，新たな機能が追加されているのだ。 そこで本稿では，ドラゴンクエストシリーズ

結果だけでなく過程も 途中経過を見せることはデザインへの誤解が生じると考える人はいるかもしれません。また、途中経過は『企業秘密』だから見せるべきではないと考える人もいるでしょう。そもそも恥ずかしいから見せたくない人も少なくありません。自分も最初は恥ずかしかったですし、そもそも途中経過は見せる必要ないと思っていたほうでした。 しかし、今は途中経過を見せなければ良いデザインが生まれないと考えるようになりました。手描きのものから、インタラクションがあるものまで様々な形状を作っては見せています。仕事現場だけでなく、Twitter や Instagram のような場でも見せることもありますし、このブログにしてもデザインにおける途中経過を文章として表していることが多いです。 完成されたモノをどう作るかというノウハウも重要ですが、デザインという『よく分からないもの』が生まれるまでのプロセスを見せるほうに

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

最近のモバイルUIにはとあるトレンドが見られます。重要な要素が画面の下側に配置されるようになってきているのです。iOS 10で変更されたアップルの地図アプリを見れば一目瞭然です。 この変更には明確な理由があります。それはスマートフォンがどんどん大きくなる一方で、私たちの手の大きさが変わらないためです。 初期のiPhoneでは親指で画面左上の戻るボタンをタップすることができました。しかしPlusモデルでは画面が大型になり、同じ操作をすることがほぼ不可能となっています。 この問題に対処するため、画面の端からスワイプすることで前の画面に戻る機能が搭載されました。ただしこの操作は画面を見ただけでは発見できず、新機能に敏感なユーザーにしか届きません。 そのため、重要な要素を画面下部に配置するという親指にやさしいトレンドが生まれたのです。Windows Phoneのブラウザもアドレスバーは画面下部にあ

長らくWebサービスの受託開発を行ってきてたびたび思わされる「UIを考慮しないで思いつきで付け足されるデザイン」について。 開発当初は、UIを考慮してしっかりと作りこまれたデザインを頂くことが多い。 出来る限りしっかりとそのデザインを実現し、非常にいいサービスが出来たなんて思って保守を行うと、大体がシステム追加が起こる。 まあ、システム追加がサービスを運用していく中で行われるのは、当たり前なのでそれについては何も問題がない。 問題が起こるのはこのシステム追加でデザイナーが不在の場合が多いということ。 費用の面なのか、追加だから適当でよいと思っているのか、大抵のクライアントはシステム追加を行う際にUIの考慮やデザインの再検討せず、いきなり画面仕様をおくってきてこのとおりに実装して欲しいという。 こちらは「デザインはどうしますか？」と質問すると、適当に今のデザインにあわせてくれといわれる。 長