BRIK｜クリエイター支援メディア転職・求人サイトBRIK JOB デザイナー・ディレクター・エンジニア・プロデューサーなどクリエイターのお仕事・転職お役立ちガイドデザイナー向けお仕事・転職コラム[2024年版] Webデザイン・UIデザインの注目最新トレンド36選！デザイン制作時に参考になる人気の手法やアレンジを総まとめ
IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態で状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プ
2022年、もっとも注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 興味がある方は、過去分もどうぞ。 2021年、最も注目されたUIデザインのテクニックのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な
Goodpatch新卒UIデザイン研修の設計—ソフトウェアデザイン概論と基礎理論—｜Goodpatch Blog グッドパッチブログ
Goodpatchでは職種ごとにさまざまな新人研修プログラムを用意しています。2020年の新卒UIデザイナー向けには、4月から6月にかけてUIデザインに関する基礎的な講義や演習、課題制作といった集中的な研修を行い、UIデザイナーとして必要な基礎知識を身につけてもらいました。 UIデザイン研修といってもいくつかにコースが分かれており、今回私が講師として担当した部分では「ソフトウェアデザイン」をテーマに講義を行いました。 以下の講義のうち私が担当した、ソフトウェアデザイン概論、インタラクションデザイン基礎、モードレスデザイン基礎、UIモデリング基礎について簡単にご紹介いたします。 UIデザイン研修—ソフトウェアデザイン編—講義シラバス ソフトウェアデザイン講義の設計 UIデザイン新人研修は全体構成を「ビジュアルデザイン編」「ソフトウェアデザイン編」と二分し、それぞれの専門性を深堀りできる形を採
管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
pixivのUIを迅速にアップデートする UIUXチームのフロントエンドモダン化の歴史 - pixiv inside
こんにちは。pixiv事業本部のUIUXチームでプロダクトマネージャーを担当しているdo7beです。ピクシブにエンジニアとして入社して5年弱ほどで、1年前からプロダクトマネージャーとして活動しています。 今回は僕が所属しているUIUXチームの歴史とフロントエンド技術のモダン化についてご紹介していきたいと思います。 UIUXチームとは UIUXチームとは、その名の通りUIに関する問題解決・改修・新機能開発を行うチームです。その他にも海外ユーザーに向けたSEO・ローカライズやフロントエンドエンジニアの教育を行っています。 UIUXチームでは意図・目的に合ったUIを目指すためデザイナーとエンジニアが密にやりとりしています。これは学生アルバイトエンジニアも同様で、新規機能をリリースするなどの大きな成果を挙げています。 イラストを魅力的に紹介！ pixivでAMP Storiesを実装しました @s
5種類57デバイス対応UIデザインの裏側——U-NEXTブランドリニューアル｜U-NEXT コーポレート
U-NEXTは、2020年4月にブランドリニューアルを行いました。新ブランドは、ブランドデザインを担当するNicolas Goninを中心に構築していきましたが、そのブランドをあらゆるタッチポイントに反映するに当たっては、さまざまなメンバーが活躍しました。 今回は、ユーザーのU-NEXT体験に最も影響を与えるアプリ等のUIデザインを担当した源田みどり、Livioに話を聞きました。 源田 翠 UIデザイナー / Web制作会社を経てアプリのデザインに関心を持ち、ゲーム会社へ転職。家庭用ゲームやオンラインゲームのUIデザイン、新規タイトルの立ち上げなどを経験した後、よりUIを突き詰めようと考え2017年2月U-NEXTに入社。Product Design Team所属。担当タイトルに、モンスターハンターストーリーズ、ブラウザ三国志など。 Livio UIデザイナー / 3年間グラフィックデザイ
UI演出の重要性 注目させる
UI演出という言葉はブログタイトルにもありますが、表現をUIアニメーションでもなく、UIモーションでもなく、UI演出と表現しているのは、「演出」は様々な効果を加え、ユーザー（見ている人）を楽しませるためのものだと思っているからです。 ゲームではUIに動きを入れるだけでなく、エフェクトやSE、表現方法で楽しさと快適さ、没入感を提供しているため、総合してUI演出と自分は呼んでいます。 演出はユーザーの体験をより良くするために必要ですが、使い方を間違えると「演出はいらない」「スキップさせて」とユーザーは思ってしまいます。 演出がもっさりしていたり、長かったり、作り手側が無駄に意味のない演出を取り入れた、または気持ちの良い動きを追求しなかった結果、ユーザーに演出は必要ないと思われてしまうことになります。 今回はそんな演出がもたらす役割を記事として書きました。 UI演出の役割として6つ挙げてみました
中川政七商店が｢楽天撤退｣1年でEC売上を急回復できた理由
楽天市場での販売を止めて1年と経たずに、自社ECサイトで売り上げをすぐに取り戻せそう——。そんなSPA（製造小売り）を勇気づけるツイートが、2カ月前に話題になった。 つぶやいたのは、1716年創業の老舗企業｢中川政七商店｣（奈良県奈良市）で、取締役兼コミュニケーション本部本部長を務める緒方恵氏。同社は日本の伝統工芸を生かした生活雑貨を企画・製造・販売する。どのように実現したのか、奈良の本社で緒方氏に話を聞いた。 ブランドコントロールについて長期で考えた結果、昨年の8月に楽天市場店を閉じた。 EC全体の4割を担っていた楽天を閉じるのは肝が冷えた。 が、1年かからずに本店サイトで楽天分をカバーできるように成長させることができそう。 勝因はひとえにメンバーの成長。これに尽きる。感慨深い。 — 緒方 恵 / 中川政七商店 取締役 (@notmegumi) June 23, 2019 ブランドコント
１年間ひたすらUI設計に関わって、情報に向き合った話と2018年振り返り｜Satoru MURAKOSH - Ubie / root
自分の2018年は振り返ると、「ひたすら現場で汗をかいた」1年だったと思います。もともと現在の会社に移ってきたのも「自分自身の知識、スキルをつねにアップデートし続けられる圧倒的に成長できる課題がある場所」を求めてのことだったので、そういう意味でこの1年は自分にとって「現場で体感できる“生きた”知見を多く吸収できた」年になりました。 個人的にデザイン界隈の軽い振り返り2018デザイン業界にも大きな動きがありました。2018年5月23日、経済産業省・特許庁が「産業競争力とデザインを考える研究会」の一環として、「デザイン経営宣言」を発表、「デザインと経営」について、明言したのは印象的でした。 また、デザイナーの情報発信も活発になった一年だったと思います。Basecampの坪田さんが主催するCXO nightや、Designshipのような大規模なデザインカンファレンス、Designscrambl
任天堂のUI/UXデザイナーが語るデザイン思想。UI Crunch #13 娯楽のUI【書き起こし前編】｜Goodpatch Blog グッドパッチブログ
イベントレポート 任天堂のUI/UXデザイナーが語るデザイン思想。UI Crunch #13 娯楽のUI【書き起こし前編】 私たちが利用するサービスやプロダクトには、毎日使う実用品もあれば、娯楽品もあります。目的は異なっても、どちらも生活に欠かせないものです。技術が進化し、新しいものが生まれ続ける現代において選ばれるサービスやプロダクトには、人に寄り添ったデザインが求められることは想像に難くないでしょう。では、娯楽品のデザインに潜むロジックや哲学はどのようなものなのでしょうか。 2018年4月27日、DeNAとGoodpatchが主催するUI Crunchは、任天堂株式会社さまをゲストに迎え「UI Crunch #13 娯楽のUI – by Nintendo –」を開催しました！告知開始直後からたくさんの反響をいただき、最終的には4200人以上の方々にご応募いただきました。伝説の回となった
スターからハートに変更するのはなぜか？｜深津 貴之 (fladdict)
小さいですが、重要な変更のお知らせ。 noteの「スキ」アイコンが、スターからハートに変更されました。 これはnote全体のマナーを、モバイルの標準に合わせていく方針の一環です。 一般的なモバイルアプリでのマナー スター = 評価 ハート = ライク, お気に入り, リコメンド なぜ標準マナーに合わせる必要があるのか？ サービスが標準マナーに従うことで、ユーザーは直感的に操作できるようになります。学習することが少なくなるので、認知的な負担が軽減されるわけです。結果、ユーザーはスムーズにサービスを使えるようになり、継続率の上昇が期待されます。 今回の変更は、そのための小さな一歩です。今後、noteの中で変にオリジナリティが必要のない部分は、積極的にスタンダードに寄せていきます（その分、真に重要な部分にオリジナリティをつぎ込みます）。 短期的には軽微な混乱が発生するかもしれません。すぐになれる
UXデザイナー深津貴之が語る身も蓋もない組織論!? 「ユーザー目線のない会社からは逃げるしかない」「それでもそこでがんばりたいなら……」 | HRナビ by リクルート
PCやスマートフォンを開けば、そこには不愉快なUIが至るところにあふれている。さして文章が長くもないのにページが4分割されているニュース記事（腹立たしいことに4ページ目はたった1行だったりする）、サッカーのハイライト動画でシュートの行方をカメラが追い始めた瞬間に始まる動画広告、場面転換をするたびにCMが挟み込まれ、もはやCMを見ているのかゲームをしているのかわからなくなるアドベンチャーゲームアプリなど……。 さらに不幸なことは、ウェブメディアの編集部や動画配信者、ゲーム制作会社の制作現場にいる人たちにとっても、これは決して愉快な状況ではないということだ。罵詈雑言混じりの苦情が書かれたユーザー評価欄やSNSを見ながら彼らは言うだろう。「誰が好き好んでこんなUIを作るものか」と。 関わる誰から見てもおかしなUIは、それでもなぜ量産され世の中のストレスを増幅させ続けているのだろうか？ その負のス
Sketch公式のUI Kit「Elements」を解剖してみる | よりデザイン
今やUIデザインの定番となったSketchの使い方や便利なプラグインについてhttps://www.sketchapp.com/Facebookグループ「Sketch Japan」もぜひ。https://www.facebook.com/groups/1403075229952941/ 公式のサンプルデータということで、これを紐解くことによりSketchを作っている会社がSketchをどのように使っているのかの一端が見えてくるのではと思い、中身を覗いてみることにしました。 全体像 DLした.sketchファイルを開くとApps Pageに各テーマの画面が並んでいます。 解像度のベースはiPhone Xです。5種類のテーマ x 7画面 = 35画面が並んでおり、ある程度のシチュエーションに耐えられるように作られたことが伺えます。 それでは手始めに最上段の「Food」アプリのレイヤー構造を眺め
デザインシステムにあるヒトとコトの課題
今なぜデザインシステムなのか 4月16日 Webridge Kagawa 主催で「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法（#wmsp20）」というワークショップを開催しました。昨年はコンテンツ戦略やペルソナなど企画・設計寄りのワークショップを実施していましたが、パターンラボは少し実装に寄り添ったカリキュラムにしました。ポッドキャストでも話したことがありますが、「考える」と「作る」の間にはちょっとした溝があると思います。ペルソナやカスタマージャーニーマップで利用者像や彼らのもつ課題を視覚化すれば、現実的な実装ができるというわけではありません。実装へ近づけるためには、考える人と作る人が一緒に課題共有するための場が必要と考えています。 例えば Web デザインでは数年前から、パソコンではなくスマートフォンやタブレットをはじめとしたモバイル機器での使いやすさを優先するモバイルファ
大規模デザインシステムを作る：いかにしてアメリカ連邦政府のデザインシステムを作り上げたか - カタパルトスープレックス
原文："Building a large-scale design system: How we created a design system for the U.S. government" by Maya Benari, October 3, 2017 現在、ほぼ30,000の米国連邦政府のウェブサイトがありますが、それらウェブサイトの間に一貫性はほとんどありません。テクノロジーの分野で働く数十万人の政府機関の職員がいますが、彼らの携わるウェブサイトの構築や管理方法に共通点はありません。 その結果、政府はユーザーが十分に満足できないサービスに多くのリソースを費やしています。連邦政府のウェブサイトは行政が提供するサービスの正面玄関です。アメリカ政府と何らかの接触をはかるときユーザーが最初に出会う場所です。米連邦政府一般調達局のFederal Front Doorイニシアチブの調査からウ
Crash Course: UI Design
UI vs. UXIf you’ve done any kind of research about software design, you’ve probably heard of the terms “UI” and “UX”. But what separates UI from UX? At their most simple forms, UX design is what makes an interface useful, and UI design is what makes an interface beautiful. For UI, this includes a blend of visual hierarchy and interface elements. To understand what separates a great interface from
Hamburger menu alternatives for mobile navigation
If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.) Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChatGPTを活用したUI勉強会のススメ
UIデザイナーはダウンロードしておこう！iOS 14のデザインテンプレート・UI要素が揃ったAdobe XD用の素材がApple公式からリリース
