はじめに若手のUIデザイナーから「使いやすいアプリをデザインするために認知心理学を勉強したい。どんな本を読んだらいいですか？」と相談を受けたので、いくつか紹介してみます。ちょうど、大学入試センター試験（国語）で「デザイン」や「アフォーダンス」が取り上げられたこともあり、このタイミングで書いてみることにしました。 認知心理学の学問分野は広大ですし、僕は認知心理学者ではありませんので、あくまでも、１）デザイナー向けに、２）仕事に役に立つ、３）入門書、 という観点で選びました（前半の入門編）。 （僕自身は、多摩美術大学の大学院生の時に、須永剛司教授（現・東京藝大）の研究室で、インタフェース・デザインの実践研究をしながら、文献や論文、ゼミの輪読、学会や勉強会などを通じて、認知科学／認知心理学を学び、それがその後のインタラクション研究に続いていきます。） 後半の中級〜上級編には名前がよく出てくる有名

「Game Graphic Design Advent Calendar 2019」の初日の記事です。 ゲーム制作に関する素敵な記事がたくさん公開されると思いますので、私自身もワクワクしてます。 言い出しっぺとして、初日としてまず何を書こうかなと思ってたんですが、以前Twitterでチラッとつぶやいた「普段ゲームUIを作るときってどういう工程があって、どういう流れで作っているか」をまとめてみたいと思います。 というのも、いろいろな方から「何から手を付けていいのか…」「デザインが上手くまとまらない」「デザイナーが社内外注みたいになってしまって…」みたいな話をよく聞きまして。 そのアンサーになるかは分かりませんが、自分の場合はこういうフローで、こういうことを意識してますよ。というのを書いてみたいと思います。 もちろん組織や人によってやり方は様々だと思いますので、こんな風にやってる人もいるんだ、

サービス開始からの6年間で変わったことと変わらないこと 『グランブルーファンタジー』の世界観を支えるUIデザイン＜前編＞ サイゲームスを代表するタイトルである『グランブルーファンタジー（以下、グラブル）』。ユーザーのみなさまに支えられ、先日、サービス開始から6周年を迎えることができました。 その『グラブル』の世界観を支えている重要な要素の１つが、「統一感のあるUIデザイン」です。6年という月日が経ち、少しずつ変化しながらも“ぶれることのない『グラブル』らしさ”を提供し続ける……その裏側にはUIデザイナーたちのクオリティーに対する徹底したこだわりがあります。今回は「サイ技（わざ）」企画として、『グラブル』のUIデザイナー陣に、『グラブル』のUIへのこだわり、そしてUIのこれまでとこれからを聞きました。 インタラクションデザイナ―チーム　UIデザイナーノゾミ ソーシャルゲームのデザイナーを経て

UX Movementの著者および創設者です。UXのベストプラクティスとスタンダード、さまざまなテクニックに関する知識を共有することで、よりよいデジタルの世界をつくり出しています。 すべてのインターフェイスにはユーザーが存在し、そのユーザーはつねに多数派と少数派によって構成されています。たとえば、大半のユーザーは正常な視力をもっていますが、少数派となるユーザーは何らかの視覚障害をもっています。 正常な視力をもっているユーザーが見るものと、色覚異常および低視力のユーザーが見るものとの間には大きな隔たりがあります。何らかの視覚障害をもっているユーザーはテキストが小さすぎたり色のコントラストが低すぎると、文字がぼやけて見えたり、要素がよく見えなかったりする傾向にあります。 アクセシビリティの目標は、多くの場合忘れられがちな少数派のニーズを満たすことです。しかし、少数派のニーズを満たした結果、多数

イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの

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

現役のデザイナーが語る！優秀なUI/UXデザイナーに不可欠なスキルとは UI/UXデザイナーと聞くと、UIデザイナーとUXデザイナーはそれぞれ使えるツールが違い、求められることも違うことがあるでしょう。それでも優秀なデザイナーとして活躍するために必要な要素を紹介しています。これから目指す上でぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になりま

300種類以上のコンテンツ、カード・ライン・アローなど、フローチャートで使用する形もベクターで収録された、サイトマップ・ワイヤーフレームを作成できる無料素材を紹介します。 商用レベルの美しいフローチャートを簡単に作成できる素材セットです。

Google I/O2018でMaterial Designが大きくアップデートされました。Material Designのサイトの更新量が大きすぎて全量を把握するのも大変ですが、要点だけまとめました。 目次 ・Material Themingで多様なスタイルが可能に ・コンポーネントの更新 - App Bars：Bottom - Backdrop - Extended FAB - Sheets : Side - Text Fields - ButtonsMaterial Themingで多様なスタイルが可能に今回のアップデートで一番インパクトがあったのがMaterial Themingでした。これまでMaterial Designではどのアプリも画一的なスタイルに制限されていましたが、Material Themingによって多様なスタイルが可能になりました。これにより、ブランドイメージに

こんにちは。デザイナーのohsです。 私がSwiftを学ぼうと思ったのは、元々webデザイナーでコーディングもやっていた事もあり、4,5年前ぐらいから、モバイルアプリの言語に興味を持ち、本を買ったのが最初のキッカケです。 最初は、分厚い本を読みきれず掲載されてるiosのバージョンも変わり成果が見えないまま終わってしまいました😇 去年の冬ごろから、また再開。今回は理解も深まり継続して学び続ける事ができ、成果物としてStyleGuideを一覧できるアプリを作ることができました。 そこで、本は買ったけど同じように挫折してしまったデザイナーの方向けに、Swiftを勉強するために利用したサイトや本など何回かに分けて紹介します。 📘目次 ・そもそもなぜSwiftを学ぼうと思ったか ・目標にしたゴール ・実際にSwiftを書いていく前にやってみた事Swiftを学ぶ目的1. 開発効率アップのため ・

2018年版：おすすめの人気UIデザインツール徹底比較 日々新たなデザインに関するニュースが飛び交っていますが、それはUIデザインツールに関しても同様です。 Adobe XDの正式リリース、Figma3.0のリリース、InVision Studioのベータ... Web Design Trends UIデザインツールとは UIデザインツールは、WebサイトやiPhone、Androidアプリといったプロダクトののユーザーインターフェース(UI)のデザインを行うためのツールです。 プロダクト開発を行う際、いきなりコーディングを始めるわけにはいかないため、まずは画面や機能の設計を行います。その設計の際に、画面デザインを作成する時にUIデザインツールを取り入れるというのが一般的な使われ方です。 UIデザインツールと一言で言っても、それぞれのツールに特徴があり、使い勝手も異なります。UIデザインツ