任天堂が新人研修で伝えている、あそび心のデザイン｜娯楽のUI 公式レポート #1 | キャリアハック（CAREER HACK）
任天堂の新人研修で語られているのは「あそび心を伝える」という大切さについて。『スーパーマリオメーカー』を例に、UI/UXデザインチーフである正木義文さんが語ってくれた。 [目次] ・「みなさんとクイズをしたいと思います」 ・任天堂流「伝え方」のこだわり ⅰ教えるよりも体験してもらう ⅱファーストインプレッションを大事にする ⅲ体験は面白く ・わかりやすさと高機能を兼ね備えた、UIのデザインプロセス ・「あそび心を伝えるUIデザイン」3つのポイント ⅰUI脳と娯楽脳の二人三脚 ⅱ短所を「娯楽脳」で長所へ変える ⅲ将棋3席 麻雀5席 「みなさんとクイズをしたいと思います」 ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「まずは、みなさんとクイズをしたいと思います」 そんな、あそび心溢れる一言で幕を開け
そのテンポ感はどこから？Pokémon LEGENDS アルセウスから学ぶ「モードレス」なゲームUI｜こにゃ
みなさん、「Pokémon LEGENDS アルセウス」プレイしてますか？ 私は今作を楽しみにするあまり発売日当日に有給をとり、食事・入浴・就寝以外のすべての時間を費やして丸2日でシナリオをクリアしました。その後もゆるゆるとポケモンを集める日々を送っています。つまりめちゃくちゃハマってます。 今日はそんなアルセウスについて、「UIデザイン」の観点からお話を広げていこうと思います。 たまにはUIデザイナーっぽい記事も書こうかと……。あ、普段はゲーム会社でUIデザイナーをやってます。よろしくお願いします。 アルセウスめっちゃ快適やんさて、シリーズ初のアクションRPGである今作。これまでのタイトルとは一線を画す操作感や、そこから生み出される快適かつ爽快なプレイ体験に驚かれた方も多いのではないでしょうか？ 自分自身、剣盾（ポケットモンスターソード・シールド）で初めてがっつりポケモンシリーズを遊び始
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
これはどうやって流すの？
こんにちは、UIデザイナーの今西です。 デザイナーは日々のトレンドなど情報収集が大事と言われます。私の場合、ついつい自分の趣味の情報収集に寄りがちですが、UIやUXのデザインに役立つ新たな視点見つかったりすることがあります。好きなこと興味のあることから見つけたデザインにまつわる発見や役立つものの見方について書きたいと思います。 今回考えたきっかけは5年以上前のことではあったのですが、最適な方法はなんだろうと今でも時々考えます。 レバーハンドルタイプだけじゃないから複雑…トイレはどうやって流すのか私はインスタグラムで海外の好きな俳優をフォローしています。ある時、ぼんやりインスタグラムを眺めていると、来日中のアメリカ人の女優がトイレのコントロールパネルの写真とともに「これはどうやって流すの？」と投稿していました。 なるほど、確かにそうなのです。 ウォシュレットなどの機能と流す機能がひとつのコン
今さら聞けないUI（ユーザーインターフェース) の基本 デザイン会社 ビートラックス: ブログ
ユーザーインターフェース（UI）- どこかで聞いたことはあるしなんとなく想像は出来る。”このアプリのUIはイケテル”や、”UIデザイナー募集”など、最近ではテクノロジー系の記事や、デザインに関する話の中に頻繁に出てくるこの言葉。 しかしちゃんと言葉で説明してみてと言われると意外と難しい。 興味はあるけどはっきりとはわからない・わかっているつもりだけどもう一度復習したい・現状はわかっているからこれからのUIついて知りたい。 そんな人たちに向けて ユーザーインターフェースの歴史良いUIと悪いUIの違いUIのこれからという3つのセクションに分け、インターフェースの本質をまとめた。 1. ユーザーインターフェースの歴史そもそもインターフェースってなに？そもそもユーザーインターフェースの「インターフェース」とはどういう意味なのだろうか。「境界面・接触面」などと訳されるこの「インターフェース」という言
PayPayモールサービスアイデンティティーができるまで｜Yahoo!ショッピング公式
こんにちは！ヤフーショッピングデザインチームの岡本、木村です。 厳選されたストアのみが集まる、 「PayPayモール」がこの秋リリースされましたが、みなさんお使いいただけましたでしょうか？ PayPayモール公式ストアはこちら リリースにあたり、デザインチームでは、ユーザーに一貫したサービス体験を届けるためのルールをまとめ、「サービスアイデンティティー」 というドキュメントを作成しました。 今回はそちらの内容や、作成にいたるまでの話、実際の展開例についてお届けしたいと思います。 目次・PayPayモールサービスアイデンティティーとは？ ・サービスアイデンティティーを作ろうと思った理由 ・作成までのステップ ・サービスアイデンティティーが適応された成果物の例 ・まとめ1.PayPayモールサービスアイデンティティーとは？ 「PayPayモールでサービスとして届けたいブランド価値」がまとまった
アプリのアップデート500本ノックから学ぶUI改善のヒント｜宮﨑 晃
「ザ・マイクロコピー」という本の中で次のような一説がでてきます。 何も考えずにこれしかないだろうと3回クリックするのと、これかなぁと迷いながら1回クリックするのとは同じ重みを持つ 。ちょっとした「？」がどれだけユーザーの集中力を邪魔しているか。 アプリの使い方に意識がさかれて、メインコンテンツへの集中がおざなりになっていたら勿体ない。アプリの運用者としては避けたい状況です。 そこで今回は「ユーザーに考えさせない工夫」を集めてみました。 それでは、いってみましょう！ ①補足はとにかくシンプルに 長い説明は読み飛ばされるもの。最低限の言葉におさえることでユーザーの心理的負荷を下げていきたい。■無印良品：初回起動画面のUI変更 繰り返しや補足は全て削除。「はじめてor復元」のシンプルな画面に進化。 ■アパホテル：クーポン画面のUI変更 挨拶/会員情報/長い注意書き…etcを全て削除。1番重要な｢
「トークシナリオ法」でUIを設計する｜TSUYOSHI KANEKO / GOGEN株式会社CXO
インターフェースの設計をユーザー視点で構築するのは、決して難しいことではありません。 ここでご紹介するのは、私がユーザーとUIの整合性を取るために使う、最も簡単な思考法です。 良いインターフェースは会話をするあなたがこれから設計するインターフェースは、あなたの代わりにユーザーと会話をしてくれる人間のような存在です。 何かを販売・広告するウェブサイトなら、あなたの代わりに24時間営業トークを行うセールスマンのようなものであり、 また、ライフスタイルのアプリ等であればそれを隣で説明する良き友人であり、それが業務ツールであれば使い方を教えるよきメンターになります。 良いインターフェースのデザインを設計したいのであれば、このような優秀な解説者のトークシナリオ（台本）を作成するかのようにUIを設計するのが一つの解決策です。 よく設計されたインターフェースは、ユーザーの一つひとつの思考に対して、一つひ
リングフィットアドベンチャーのUIここが好き｜Tani
❓これはなに ・リングフィットのいいなと感じたUIを書きました ・画面キャプチャがあるためネタバレ注意です 💪没入感を高めるリング💪ゲーム中は相棒の「リング」と行動します。ヒントやアドバイスをくれるリングは、ゼルダでいうナビィに近い存在です。 引用元: https://www.nintendo.co.jp/ring/adv/index.html 主人公とリングの関係＝ユーザーとリングコンの関係になっているため、没入感が高まります。 主人公を喋らせなくていいので、感情移入しやすくなるのもメリット。 👇リングとは別に、人型の動き見本（ミブリさん）もいます。リングが人型であれば、サポート役と見本を兼任できますが、あえて分けています。 💪自分とではなく、他者との戦いになるフィットネス💪リングと協力してステージを進み、魔物と戦う。 自分との戦いになりがちな筋トレを、他者との戦いにしているの
独学でUIデザインはじめた方へ。デザインガイドラインについて語ろう！｜ゆい
こんにちわ！はじめまして、ゆいです。 都内でデザイナーとして働きつつ、兼業で画家になりたいです。設計したりWEBデザインしたり、社内ではグラレコ風のなにかを描いたりしています。休日は絵を描いています。 日々の思考・メモなどはツイッターにあるので良かったら見てください ガイドラインについて、話したい。今回はナレッジの整理と共有です。2018年頃に社内展開用に作成したスライドをもとに文章化してみたいと思います。ここで話したいと思っているガイドラインとは、Appleが展開しているHuman Interface GuidelinesとGoogleが2014年に発表したデザインのフレームワークMaterial Designを指しています。当時在籍していたUIチームの知識を揃えたいと思い、自分なりに掘り下げて整理していました。 おそらくアプリに関わるUIデザイナーの方で上記２つのガイドラインを読んでい
新規登録 UI まとめてみた｜あき
シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録まわりで離脱の少ないデザインを勉強したかったので、いくつかアプリをスクショしました。自分用で作成しましたが、誰かの参考になればと思います。 また、まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです〜。 パターン一覧 1. 登録必須型 2. 登録先行型 3. 利用先行型 4. メリット先行型 目的別の参考事例 1. 不要な遷移を削る 2. 不要な操作を削る 3. わかりやすく伝える 4. 魅力的に伝える おわりに ・最適な新規登録のタイミング ・注意すべきデザインの視点 ・スクショの保管場所1. 登録必須型ユーザー登録なしではアプリが利用できないパターン。 傾向 母数としては一番多い形式。プロフィールが大切なフィットネス系では、利用前にかなりの入力を求
検索 UI まとめてみた。｜あき
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
そのWebサイトは「道具」ですか？それとも「広告」ですか？｜Goodpatch Blog グッドパッチブログ
突然ですが、みなさんがデザインしているWebサイトは「道具」ですか？それとも「広告」ですか？ 「Webサイト」と一口で言っても、ペライチのLPや、コーポレートサイト、ブランドサイト、また、Webブラウザ上でアプリケーションのような振る舞いをするものなど多岐に渡りますし、「EC機能を持つブランドサイト」のように「道具」でも「広告」でもあるようなWebサイトもたくさん存在しますよね。 そこで今回は、Webサイトが「道具」であるときと「広告」であるときの、その「境界線」がどこにあるのかについて考えていきたいと思います。 「道具」か「広告」か そもそも「道具」か「広告」かという考え方自体がどこから出てきたのか？という話から始めたいと思います。 筆者自身、キャンペーンサイトやコーポレートサイトのような、所謂「Webサイト」のデザインをすることもあれば、業務システムのような「Webアプリケーション」を
企画を元にゲームのUIを作るときの流れ｜tkm
「Game Graphic Design Advent Calendar 2019」の初日の記事です。 ゲーム制作に関する素敵な記事がたくさん公開されると思いますので、私自身もワクワクしてます。 言い出しっぺとして、初日としてまず何を書こうかなと思ってたんですが、以前Twitterでチラッとつぶやいた「普段ゲームUIを作るときってどういう工程があって、どういう流れで作っているか」をまとめてみたいと思います。 というのも、いろいろな方から「何から手を付けていいのか…」「デザインが上手くまとまらない」「デザイナーが社内外注みたいになってしまって…」みたいな話をよく聞きまして。 そのアンサーになるかは分かりませんが、自分の場合はこういうフローで、こういうことを意識してますよ。というのを書いてみたいと思います。 もちろん組織や人によってやり方は様々だと思いますので、こんな風にやってる人もいるんだ、
著書『はじめてのUIデザイン』第6章を無料公開します｜宇野雄 / note inc. CDO
平成最後の4月に共著で出版をした『はじめてのUIデザイン』が、おかげさまで2019/05/27時点で約3,800冊と。とてもうれしく思います。 発売記念イベント（応募は締め切ってしまいました🙇）も控えており、もっと多くの人に読んでもらいたいと思い、今回僕が本書で担当をした『第6章 UIデザインができたら』を全文無料公開します！ 挿絵などを省略をした簡略版となりますため一部読みにくい部分もあるかもしれませんが、十分に全体の内容はつかめるものです。 この本は時代に流されず長く愛してもらえる本として書いていますので、もしこの章を読んで興味を持たれた方はぜひ購入して全章を読んでいただければと思います。 第7章を書かれた坪田さんもnoteで一部有料での全文公開をしていますので、ぜひこちらも合わせて読んでみてください。 ✂=================== 6章 UIデザインができたら
デザイン初学者がUIトレースを１ヶ月続けてみた｜きなこ
こんにちは、今回がはじめてのnote投稿になります！ タイトルにもある通り、今日はTwitterにて8月に行なっていたUIトレースについて感じたことをまとめていきます。 デザインの勉強を始めたばかりで、どうやって勉強しよう？と悩んでいる人や、最近だとCocoda!に登録してUIデザインの勉強をしてみようかな...と思っている人の参考のひとつにでもなれば嬉しいです。 あくまでも自分なりの見解であり初心者目線で書きますので、どうぞ暖かい目でご覧になってください...。(アドバイス随時受け付けてます！) そしてかなり迷ったのですが、この記事ではトレースしたものだけでなく、アウトプットしたものも全部載せます。プロのデザイナーさんが見たらツッコミどころ満載の作品ばかりだと思いますが、同じような境遇の方の励みになればと思って、、、、では目次です。 目次 1. UIトレースを始めたきっかけ 2. 最
GoodpatchのUIデザイナーがおすすめ UIデザインを理解するためのブックリスト【2021増補版】｜Goodpatch Blog グッドパッチブログ
今回は、GoodpatchのUIデザイナーにヒアリングし、UIデザインを理解するためのおすすめ本をまとめました。 次のような人に特におすすめです。 UIデザイナーになったばかりの人 もっとUIデザインについて勉強したい人 サービス、アプリ開発に携わるエンジニア・ディレクターの人 目的別に6つのカテゴリに分けてご紹介します。あなたの関心に沿ったトピックから、 気になる本を見つけていただけると嬉しいです。 1. UIデザインを基礎から理解する ユーザーインターフェース（UI）とは何なのか、どんなデザイン要素があるのか、UIが機能する環境とは？、どうやって作ってリリースするのか…UIデザインを始めるために、まずは基礎知識を網羅しましょう。 ■ はじめてのUIデザイン 改訂版 この本は、著者の1人である吉竹遼さんが「UIデザインを体系的に学ぶための本が少ない」という課題感から企画されました。そのた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイン講習会
高齢者UIプロトタイプ検証の学び
デザイン原則の実践｜dely design
