Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は、ShakuroのRita Kind-Envy氏による「UI/UX Design Trends Of 2022 You Need To Catch Up To」（2021年11月15日公開）の和訳を、著者の許可を得て掲載しているものです。 【2022年】注目すべきUI/UXデザイントレンド はじめに 2021年は2020年よりも良い年でしたか？UI/UXデザインに限って言えば、そうです。新しい素晴らしいウェブサイトやアプリが生まれ、グラフィックデザイナー向けの新しいソフトウェアがリリースされ、創造性が泉のように湧き出ているようで
おひさしぶりです🔅 最近は週末プロジェクトでアプリを2つリリースしようと動いていたり、一人暮らしを始めたり、バタバタした日々を過ごしておりました.... （toCサービス好きな人、一緒に週末プロジェクトやりませんか・・笑 週末プロジェクトはなかなか難しい....） 先日こんなイベントがあり、他社のサービスのFigmaファイルを見る機会が...！そして、Twitterなどで各社、各サービスがFigmaデータやDesign Systemをオープンにしているのを最近ちらほら見かけますよね...！ 私がUIを勉強し始めた時は、Apple社が提唱するHuman Interface GuidelinesやGoogle社が提唱するMaterial designなどのUI設計の原則を定めたガイドラインを読んだり、本やnoteを読んだり、AppleやGoogle社が開発するアプリを中心にトレースしたり..
最近のスタートアップにおけるロゴトレンドでは、そのスタイルに多くの類似性があることがわかった。その中でも、特にスマホ向けのアプリの影響でアイコンの存在がそのブランドを強く印象づける役割を果たしている。 【トレンド分析】最近のロゴデザインが似通ってきている問題 – 第2弾 多くのアイコンがどんどんカラフルに 限られたスペースに複数のアイコンが並ぶスマホのホーム画面で存在感を出すためなのか、最近のアイコンはどんどんカラフルになってきている。これは、画面の解像度が上がってきている恩恵でもあるが、どんどん没個性にもつながっている。 カラフルアイコンの代表的なのがインスタグラム。インスタは2016年にそれまでのカメラ風のアイコンから、思い切ってカラフルなグラデーションを取り入れたアイコンにリデザインを行った。 Googleサービスの見分けをつけるのが難易度高め カラフルなカラースキームの代表といえば
モミー 【少年ジャンプ＋編集】 @momiyama2019 「少年ジャンプ＋」編集長（デジタル担当）です。ほか「ジャンプルーキー！」「MANGA Plus by SHUEISHA」など。 リプライやDMの返信は気まぐれです。 shonenjumpplus.com モミー 【少年ジャンプ＋編集】 @momiyama2019 先日、見知らぬ大学１年生から、漫画アプリのUIについて物申したい！というこんなDMが。 で、実際にお会いした。 話題はアプリの設計から、最終的には漫画表現の時代に合わせた進化など、広く漫画全体の課題や未来まで広がった。 結果、逆に僕の考えが整理されて意義深い時間に。学生氏に感謝！ pic.twitter.com/Q6XZUtPAEi 2020-06-14 01:11:49
「ザ・マイクロコピー」という本の中で次のような一説がでてきます。 何も考えずにこれしかないだろうと3回クリックするのと、これかなぁと迷いながら1回クリックするのとは同じ重みを持つ 。ちょっとした「？」がどれだけユーザーの集中力を邪魔しているか。 アプリの使い方に意識がさかれて、メインコンテンツへの集中がおざなりになっていたら勿体ない。アプリの運用者としては避けたい状況です。 そこで今回は「ユーザーに考えさせない工夫」を集めてみました。 それでは、いってみましょう！ ①補足はとにかくシンプルに 長い説明は読み飛ばされるもの。最低限の言葉におさえることでユーザーの心理的負荷を下げていきたい。■無印良品：初回起動画面のUI変更 繰り返しや補足は全て削除。「はじめてor復元」のシンプルな画面に進化。 ■アパホテル：クーポン画面のUI変更 挨拶/会員情報/長い注意書き…etcを全て削除。1番重要な｢
こんにちは、HR業界でアプリマーケティングをしている宮﨑です。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで投稿すること3ヶ月。300本以上のネタが溜まってきました。 今回のnoteでは「フォッグの消費者行動モデル」というフレームワークを使ってまとめていきます。 行動 = 動機 × 実行能力 × きっかけ ザックリいうとユーザーに何か行動を促す際に「動機/実行能力/きっかけ」の3要素をどう揃えるか？というモノ。 詳しくは深津さんの記事がとってもわかりやすいのでおススメです。 アプリノックがUI改善の勘所だけでなく、Growthの知識も一緒に学べるコンテンツになっていくと嬉しいです。 それではいってみましょう！ 【動機】がないと、やる気にならない①慣れない体験にはイメージ作りを よくわからない体験は
こんにちは！三井住友銀行 デザイナーの堀と申します。 前回の初投稿から、SNSなど多方面でたくさんの反応をいただきありがとうございました。予想以上の反響で銀行内でも話題となり、三井住友銀行のデザイナーの活動が少しでも広がったことにうれしく思います。 その中で「銀行アプリが変わった」とのコメントを多くいただき、自分たちが関わったプロジェクトがお客さまの手元に届いているんだなぁと感動しました。 今回はその「三井住友銀行アプリ」について書いていきたいと思います。 本題に入る前に…、お伝えしたいことがあります。 三井住友銀行初！2019年度グッドデザイン賞を取りました！！（ぱちぱちぱち） デザイナーだけでなく、たくさんの方々のご協力、お客さまの声から作られたアプリなので受賞したときは本当にうれしかったです。 それでは本題です。 アプリリニューアルの背景 様々な理由がありますが、まずはこれです。 キ
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
UXのベンチマークツール、プロトタイピングツール、VRを使ってデザインするツールなど、最新のデザインツールやリソースを紹介します。 最新のデザインツール、リソース、アプリ、参考書、トレンドなどを追いかけるだけでも大変なのに、そこから役に立っておもしろいものを探すのは、さらに大変です。そこで誰が見ても優れているデザインツールとリソースを紹介するProduct Hunt collectionを始めました。SitePointで使っているものもありますよ。 Product Huntのコレクションをフォローすれば、私たち（編集者Alex Walkerと私Daniel Schwarz）がチェックして価値があると判断したものをコレクションに加えたときに通知が届きます。また、もっともすぐれたツールを選んで月ごとに記事にしています。2017年8月の選りすぐりのデザインプロダクトを紹介します。 FullSto
集中できる時間が少ない現在 今の仕事で最も難しいのは、集中できる時間を作ること。作るためのツールは充実していますし、一緒に作ることができる優秀な人も周りにいます。いろいろなものに恵まれていたとしても時間を作ることは簡単なことではありません。1 日 24 時間が、突然 32 時間にはならないわけです。 時間は有限であるのはもちろんですが、その貴重な時間を有効に使うのは非常に難しいです。特に集中するのが難しい時代に生きています。誰かが声をかけるくらいなら良いですが、メール、チャット、ソーシャルメディアなど絶え間なく注意を引こうする通知が鳴り続けています。たとえ通知をオフにしたとしても「あれはどうなっているだろう？」と、ついついスマートフォンを開いて画面を再読み込みしたり、スクロールを続けている方は少なくないはずです。 The Telegraph が 2015 年に公開した記事によると、私たちは
UXデザイナーのiPad Proレビュー記事で、UIのスケッチにいいと。僕自身もスケッチが大好きなので、ものすごく欲しくなって。この記事に挙げられているのが『純正メモ』と『Adobe Comp』なんですけれども、Compは機能が中途半端で、僕はこれを使うならSketchでいいんじゃないか？と感じたので、純正メモでスケッチをしてみました。カメラでいちいち撮影したり消しカスに悩まされることがなくなり、確かに圧倒的に紙より捗るものの、幾つか問題がありました。 Notesアプリで描いたスケッチ毎回画面のスクウェアを描くのが面倒スクウェアは勘で描くので、サイズがiPhoneと同じにならないもちろん解像度もiPhoneと全く異なるアイコンなどを何回も描かなくてはならないMacに転送した場合、画像をトリミングしてからでないとInVisionなどのプロトタイピングサービスに配置できない1画面に2〜3個しか
Windows 10はPCとスマホで同じアプリがなぜ動く？――「UWP」の理想と現実：鈴木淳也の「Windowsフロントライン」（1/4 ページ） Windows 10成功の鍵を握る「UWP」 「Windows 10」の世界では、PCでもタブレットでもスマートフォンでも、さらにゲーム機の「Xbox One」やヘッドマウントディスプレイの「HoloLens」でも、果てはIoT（Internet of Things）の名称で呼ばれる小型の組み込み機器でも、同一のアプリパッケージが動作する。 これを「Universal Windows Platform（UWP）」と呼び、ここで動作するアプリ群を「Universal Windowsアプリ」や「UWPアプリ」などの名称で呼んでいる。言うまでもなく、UWPはWindows 10における重要な鍵だが、これはどのような仕組みで成り立っているのだろうか。今
渋谷オフィスを作り社会復帰して以来、チーム内でUI設計を標準化したいと、暇をみては色々なツールを試作している。その中の一部をとして、アプリケーション定義ステートメントの共有ツールをテスト公開。 アプリケーション定義ステートメントとは 聞き慣れない言葉ですが、大雑把にいうとアプリの本質を一言であらわしたコンセプト宣言。 家訓や社訓、電通鬼十則のアプリ開発版みたいなものであり、Appleは自社のヒューマンインターフェースガイドラインで、アプリ設計の最初にこのステートメント作成することを強く推奨しています。ステートメントがチーム全体で共有されていると、アプリがふらふらとブレずにしっかり芯が通ったものになる訳です。 アプリケーション定義ステートメントは、アプリケーションの主要な目的とその対象を、簡潔かつ具体的に宣言したものです。 アプリケーション定義ステートメントを開発作業の早い段階で作成しておく
Windows8をインストールするとデフォルトでインストールされているファイナンスというアプリがあります。MicrosoftさんのWindows ストア アプリの開発セミナーでファイナンスアプリを例にWindowsストアアプリのデザインのポイントを聞きました。当たり前のこともありますが、デザインの素人からするとわかりやすかったので纏めます。 【Windows ストア アプリのデザイン原則】 ・シンプルなデザインでコンテンツに集中させる ・統一された直感的なデザイン 【ライブタイル】 日経平均、ダウ、TOPIXと放っておくとタイルの内容が変わっていきます。アプリを開くことなく情報を見れるのが一つポイントです。 【画面端の見切れ】 画面端に故意に見切れを作ることで、「続きがある」ことをユーザに認識させる。 これとかも。 【統一的なUIデザイン】 プラスマーク・矢印マークなど標準コンテンツを利用
昨今アプリ開発を行う上でのUIアニメーションやデザインの重要性が非常に高まってきました。一方でアプリの質を保ちながら開発スピードを上げるためには、様々な工夫が必要です。 今回はDeNAの開発者である吉田正史さんに、開発事例をもとにどう現場の課題を解決し、効率を上げていったのかなどについて寄稿していただきました。 by 馬場美由紀 （CodeIQ中の人） 話に出てくるアプリの紹介 DeNA吉田です。 今回ご紹介するのは、実際に下記のアプリを開発する現場で直面した課題です。 RabbitCam RabbitCam Rabbit cam（ラビットカム）はアニメーションするスタンプやBGMを選び、合成して動画を作成するアプリです。 非常にかわいいスタンプをより、可愛くする細かい動きや、おしゃれに仕上げるための動画に対してのフィルタの色味など細かい調整を重ねました。 QuizNow QuizNow
本コーナーは、技術評論社発行の書籍『［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。 『［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門』の詳細や購入は技術評論社のサイトをご覧ください。 スマートフォン向けアプリケーション開発では，iOS，Androidの両プラットフォームへの対応が求められることが多い一方，それぞれに対応することは，Objective-C，Javaによる異なる開発スキルが必要です。そこで現在注目されているのが，HTML5によるハイブリッドアプリです。本書では，フレームワークApache Cordovaによるアプリ開発から，ストレージの使い分け，タッチ・ジェスチャなどの活用，マルチプラットフォーム特有の
ここ最近、モバイルWebコミュニティにて、Apptimize社のトップであるLynn Wang氏がポストした「7 Mobile UX Mistakes You’re Probably Making Right Now」が話題になっています。 www.sitepoint.com その内容とは、彼女自身が、A/Bテストを使い様々なモバイルアプリの改善を行い、その中で得られた知見をまとめたものです。若干、煽り気味なタイトルに見えますが、中身はしっかりしていて、多くの人がなんとなく感じていることをキレイに言語化しています。個人的にも、参考になると感じています。 本人の許可が頂けたので、日本語らしく読めるようざっくりと意訳し共有します。 1. 不必要にサインインをさせようとする 多くの人々は、ユーザのサインインが価値を持つものだと考えています。しかし、時にサインインは、ユーザに苦痛を与えます。たとえ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
