こんにちは。 今回はProjectStepUPでUIデザインをやってきた自分が、独学で勉強する方法を考えてみました。これをやりきれば、『自力で綺麗なUIが作れる状態』にはなるはず。 内容は初心者にわかりやすいというのを大事に、かなり簡素化して書いております。とりあえず4STEPにわけてみました。そういや高校時代に4STEPとかいう数学問題集あったなあ... STEP1：UIデザインに関係する一般知識を得る ◎目的 このステップはUIデザインに関する前提を知るためにあります。STEP2以降と平行してやってOKです。というよりちゃんと学ぼうと思ったら無限に続きそう。 主なトピックとしては、UIUXとはなにか・人間中心設計・デザインの4原則・デザインガイドラインの4つでしょうか。 ・UIUXとはなにか UIデザインはUX（顧客体験）大きな流れの一部なので、そこを理解しているかどうかは本質的なUI
ユーザーが「使いやすい」と感じるアプリケーションは、良いUIデザインで設計されているともいえます。良いUIデザインでは、ユーザーの認知負荷を下げる工夫がされています。認知負荷を下げる仕組みを知るには、心理学とUIデザインの密接な関係を理解することが重要です。 行動心理学や認知心理学の発展により、人間の感情や行動は、脳の仕組みに基づいて様々な法則に当てはめられることが分かってきました。UIデザインでも、心理学を活用したアプローチでより良いユーザー体験を生み出すことができます。特に業務システムのような複雑なアプリケーションでは、メニューや画面レイアウトなど幅広く活用できます。 今まで心理学はマーケティング領域で応用されることが多く、ウェブサイトやアプリケーションのUIデザインで語られることはそれほど多くありませんでした。そこで本記事では、人の様々な心理現象や認知の法則を、UIデザインに活用する
ゲームのUIデザインまとめサイト「Game UI Database」公開。ゲーム開発者向けのUI事例集/データベースを目指す - AUTOMATON
英国のゲームスタジオDouble Elevenに所属するシニアUIデザイナーEdd Coates氏は12月5日、ゲームのUIデザインをまとめるサイト「Game UI Database」を公開した。現時点で325作品・1万1569枚のスクリーンショットがデータベース化されており、画面用途・ジャンル・アートスタイル・操作デバイス・レイアウトなど、豊富なフィルター機能によって、ゲーム/スクリーンショットを検索できる。扱っているタイトルは『Apex Legends』『エースコンバット7 スカイズ・アンノウン』『ブラッドボーン』『Call of Duty: Warzone』『DOOM』『ゴースト・オブ・ツシマ』など幅広い。 Proud to present the Game UI Database! A whopping 11569 screenshots, 325 games, and filte
習慣は力なり！「Daily UI」でUIの引き出しを増やそう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ マーケティングチーム所属のシエロです。 桜も散って、令和になり、だんだんと夏に近づいてきましたね。新しい季節になると新しいことにチャレンジしたくなりませんか？ Web制作やWebメディアにいると、どのポジションでも避けては通れなくなっているのが「UI（ユーザーインターフェース）」。 ただ、どうやってイケてるUIを作れるようになるのかしら…そのために何をすれば良いのかしら… 制作に関わる人なら悩んだことがきっとあるはず！ そんな中、最近見つけた「Daily UI」がUIの引き出しを増やすのによいかも！と思ったのでご紹介させていただきます。 Daily UIとは? https://www.dailyui.co/ ひとことでお伝えするとUIデザインの100本ノックです。 「UIに関する100個のお題に対してUIデザインを作り、「#DailyUI」をつけてTwitterなどのSNSに
株式会社RabeeでUI/UXデザインをしているmayukiです 0→1を生み出す瞬間、プロジェクトのエンジンとなれるようなばちイケデザイナーを目指しています。 突然ですが…こんなお困りごとありませんか？💭 「デザイナーとしてクライアントの要望をうかがう際に、何を聞いたらいいかわからない」 「ヒアリングしてきたものの、いざ手を動かし始めたらわからないことがポロポロ…」 「クライアントに聞きたいことがたくさん出てきてしまった…」 今回は、webサイトやアプリのデザインの制作を受注する想定で、クライアントへの初回ヒアリングをする際にデザイナーとして聞くべき最低限のことをまとめました。 ※保存版のためなかなか長い記事となっています。 この文章はこんな方におすすめです ・デザイナーになりたてのジュニアクラスの方 ・スクールに通ったり独学で勉強したのでそろそろクラウドソーシングでお仕事を受けたい方
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回は、日本時間の今日（2024.3.7）発表されたばかりのFigma新機能、マルチ編集機能について、その機能概要や使いどころを公式解説をもとにまとめました。 はじめに現在、Figma Community上ではこちらの公式解説が公開されています。 Figmaの公式解説は、実際に手を動かしてみる用の作業場も準備されていて作りが丁寧なので、こちらを読めば内容は理解できるのですが、この機能に関わらず、原則英語のFigmaデータしかない！ ということで、こちらの公式解説を和訳しながら噛み砕いた内容をまとめましたので、「機能の概要が知りたいけど、英語の解説を読むのに抵抗があって止まっている」という方の参考になると嬉しいです！ 機能概要｜ざっくり何ができるのかマルチ編集機能は、複数フレーム内の共通レイヤーを一気に選択し、それ
良いデザインを作るには、見た目だけでなく使いやすさ・見易さを考慮しないといけないですよね。 その中で、最近よく耳にする「UIデザイン」という言葉をご存知でしょうか？ 今回は、ユーザーが自然と目を向けるような、視覚誘導を利用した「UIデザイン」についてご紹介したいと思います。 そもそも、UIデザインとは？UI（ユーアイ）とはUser Interface（ユーザー・インターフェイス）の略です。インターフェイスは英語では界面や接触面という意味なので、コンピュータ用語ではUSBやHDMIなど、機器と機器をつなぐ仕組みを指す言葉として使われています。 UIデザインで言う「つなぐ」は、USBのような物理的な接続だけはなく、もっと抽象的、概念的な意味合いを持っています。 機器（PC・スマホといった製品やシステム、サービス全般）とそれを使うユーザーとの”つながり”を指します。 簡単にいえば「ユーザーがwe
普段からAppを大量にインストールして見てるけど… UIデザインを生業としている方やこれからUIデザイナーになりたいと思っている学生の方々の中には、普段からインプットのためにAppを大量にインストールして触っている方も多くいると思います。 ですが、Appを含めたソフトウェアのUIは、良くも悪くも我々の生活のすぐ近くに、かつ大量に存在しているため、もしかしたら意識的にインターフェイスを批評するという行為はそれほど充実してできていないのではないでしょうか。 インターフェイスが融けた生活の中で、インプットのために多くのAppに触れていても、ただ闇雲に触っているだけではインターフェイスの良さを理解することはできません。ですから、必要なのはより多くの批評する観点を自身の中に持つことであり、それと照らし合わせてインターフェイスに触れる習慣を身に着けることだと思います。 観点を増やせばもっと面白くUIを
イギリスのゲームデベロッパーであり、Minecraft Dungeonsを開発したDouble ElevenのシニアUIデザイナーであるEdd Coates氏が、さまざまなゲームのUIを集めた「Game UI Database」を公開しています。 Game UI Database | Welcome https://www.gameuidatabase.com/ Proud to present the Game UI Database! A whopping 11569 screenshots, 325 games, and filterable by screen type, genre, art style, control scheme, layout, patterns, textures and more! ENJOY! https://t.co/EoevmzX3y7#game
WebデザイナーやUIデザイナー、クリエイターのみなさんは、日々デザイン作業に追われています。 アイデア出し、レイアウト、アニメーションなど、さまざまな作業に時間と労力を割かなければなりません。 さらに常に変化するデザインの流行や新しい知識、技術を身につける時間も必要。 「できるだけ効率よく作業時間を短縮したい」と思っている人も多いでしょう。 そんな悩みを解決するのが、AIを活用したFigmaプラグインです。 今回紹介するAIプラグインを使えば、以下のようないままで時間のかかっていた作業を自動化、一瞬で作成できます。 デザインのアイデア出し レイアウトの自動生成 デザインをコードに変換 アニメーションの自動生成 デザインの品質チェック AIプラグインは、デザイン作業の「自動化」と「効率化」を実現できます。 これにより、デザイナーは、インスピレーションやアイデアを考える時間や、新しい知識や技
デザイナーMTGにて枌谷さんからウェブUIにおける「シンプル」についてお話いただいた。今日は3つ特に心に残ったことを振り返りたい。 シンプルの定義 ウェブUIにおける「シンプル」とは迷わない、使いやすい、目的に早くたどり着けるなどの「脳内負荷が軽くなるUI」のことを指す。単に要素を削ぎ落としたり、情報を隠してスッキリさせることではない。 このシンプル＝スッキリという誤解はデザイナーでも意外と多いのではないだろうか。実際ベイジに入社する前の自分がそうで、深く考えず情報を隠したり削ぎ落としていた。 シンプル=スッキリさせること という認識を持っているとユーザーにとって必要な情報まで隠したり削ってしまい、逆に使いづらいものになってしまう。 例えば「できるだけ情報を削ることでシンプルに見せ、簡単そうに感じてもらう」と考え、電話番号の受付時間を消してしまうとする。ユーザーが電話をかけて「本日の受付は
【初心者向け】デザインは「感覚」ではなく「理論」。今日からできる！UIデザイナーになるための作法 | 株式会社ニジボックス
神田 智哉（かんだ ともや） 株式会社ニジボックス クリエイティブ室 マネジャー 株式会社ニジボックスに入社後、イラストレーターからWEBデザイナーに転身。 リクルートグループのメディア(SUUMO/ホットペッパーグルメ等)を中心に、多数のWEBデザイン案件に携わる。 現在はクリエイティブ室マネジャーとしてメンバーマネジメントと品質管理を担当。 自身もデザイナーとして、デザインを通した課題解決型のクリエイティブ提供と制作に日々従事している。 トップバッターとして登壇を行ったのは、ニジボックスWEBデザイナーの神田です。 2012年にニジボックスにイラストレーターとして入社。 その後、WEBデザイナーへと転身し、現在はメンバーのマネジメントと品質管理を担当しています。 そんな神田が、組織で働くインハウスのデザイナーならではの話をしました。 すぐに始められる！UIデザイナーになるための方法 ま
ユーザーが「使いやすい」と感じるアプリケーションは、良いUIデザインで設計されているともいえます。良いUIデザインでは、ユーザーの認知負荷を下げる工夫がされています。認知負荷を下げる仕組みを知るには、心理学とUIデザインの密接な関係を理解することが重要です。 行動心理学や認知心理学の発展により、人間の感情や行動は、脳の仕組みに基づいて様々な法則に当てはめられることが分かってきました。UIデザインでも、心理学を活用したアプローチでより良いユーザー体験を生み出すことができます。特に業務システムのような複雑なアプリケーションでは、メニューや画面レイアウトなど幅広く活用できます。 今まで心理学はマーケティング領域で応用されることが多く、ウェブサイトやアプリケーションのUIデザインで語られることはそれほど多くありませんでした。そこで本記事では、人の様々な心理現象や認知の法則を、UIデザインに活用する
「UIデザイナーになりたい！」 「制作したUIデザインをポートフォリオにまとめたい！」 ……だけど魅力的な見せ方がいまいちよく分からない。 そんな風に悩んでいる人はいませんか？ 今回はそんな悩みを解消すべく、現役UIデザイナーや内定者のポートフォリオとともにUIデザイン作品の魅せ方テクニックをご紹介します！ 就職活動とはいえ、自分の作品をまとめるポートフォリオは細部までこだわりたいですよね。適切な見せ方をして、自信作の魅力をしっかり伝えましょう！編集・執筆 ／ MINAMI KUSUNOKI,YOSHIKO INOUE 1.第一印象が肝心！ UI作品をポートフォリオに載せるときに入れたい要素 始めに、UI作品のポートフォリオを作る際に入れるべきポイントをご紹介します。 必ずしも全て入れなければいけないというわけではありませんが、以下のポイントを押さえておくと作品の要点が明確になり、わかりや
どうも、サトリクです。 最近、仕事でAndroidの生年月日入力フォームを修正する機会があったのですが、UIデザインについて面白い話があったので、記事にしていこうと思います。
ソーシャルゲーム開発ではスマホの画面デザインしかしないので ただひたすらスマホアプリの開発ばかりしていると、基本的なデザインの知識から取り残されていくなぁーと感じることが結構あります。 今一度、確認のために「アプリの画面デザインの基礎知識」をまとめておこうと思います。 基本的にはWEBに関係する知識なので、デジタルデザイン全般の知識として覚えておくと良いでしょう。 デザインサイズは倍サイズ なんか気づけばまるで合言葉のようにスマホの画面デザインは倍サイズってみんな言うけど、 何を基準に倍って言ってるのかよくわからない。 WEBデザインしている人はPCとスマホ両方をデザインしているから、この辺りのルールは熟知していると思うので、なにを今更当たり前なことを？ と思うかもしれませんが、 ゲーム業界のデザイナーで なんで倍なのか？ ってことにちゃんと答えられる人は少数派な気がします。 現実世界の端
順番に効果が期待できる根拠と対策方法を説明します。 SEO対策その１：サイトの構成（階層を深くしない） 階層を深くするとダメな理由は、目的のコンテンツが探しずらいということです。 Googleの基本思想はユーザーファストです。 コンテンツにたどり着くまでの階層を深くしてしまうと、ユーザーは「どうやってあの記事まで行くんだっけ？」となります。 クローラー（Googleの検索順位をつけいているプログラム）も「このサイトは構造が複雑だからユーザーファーストな設計になっていないぞ」という判断をしてしまいます。 サイトの構成の階層を深くしないポイントトップページ（フロントページ）から2～3クリックでコンテンツにたどり着けるようにサイト設計します。 必ず「2～3クリックで」ということではなく、あくまで目標値です。 できるだけ2～3クリックでサイト構成を考えましょう。 SEO対策その２：グローバルナビゲ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
独学でUIデザインを勉強する方法を自分の経験をもとに考えてみた｜Aoi Sano | デザイナー
UIデザインのための心理学：33の法則・原則（実例つき） | ベイジのUIラボ
【2024年版】デザイナーが初回ヒアリングで聞くこと&聞き方まとめ｜mayuki@Rabee
Figma新機能｜マルチ編集機能の概要と使いどころ｜nanami
覚えておきたいUIデザインの基本！【８つの視覚誘導編】 | Webマーケティングメディア「Grab」
UIデザイナーに聞いた！Appをいつもの100倍面白くみる観点｜Goodpatch Blog グッドパッチブログ
325タイトル分のゲームUIをまとめたデータベース「Game UI Database」
デザイナー必見！AIで作業が「10倍」速くなる！Figmaプラグインまとめ
ウェブUIにおけるシンプル=スッキリという誤解 | ベイジの日報
UIデザインのための心理学：33の法則・原則（実例つき） | ベイジのUIラボ
先輩ポートフォリオから学ぶ。UIデザイン作品の見せ方特集
【ダメなUIについて】Androidの生年月日の入力フォームで使ってはいけないUIデザイン
アプリの画面デザインで最低限知っておかないと恥ずかしい基礎知識 | 化猫の生態
SEOに強いWebサイトの構成とUIデザインを作る方法