デザインスキルを上げるならこれを読むべし！基本の人間工学記事 3選｜東芝 UIデザイン

2024/04/30 505 users 東芝 デザインスキル 基本 3選

こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって... 続きを読む

知識０から、ちょっとUIデザインに詳しくなるnote｜やました

2024/01/27 1040 users Note プロトタイピング 知識 施策 ユーザビリティ評価

前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについ... 続きを読む

UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro

2024/01/23 15 users SVGアイコン 一回り アイコン テキスト 高密度

テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計されたMicroサイズの16x16のSVGアイコンを紹介します。 Heroicons Micro Heroicons -GitHub Heroicons Microの特徴 Her... 続きを読む

『はじめよう！ 要件定義』（とそのシリーズ）を読んで、はじめよう！UIデザイン｜金 成奎

2023/11/06 409 users ビギナー ベテラン エンジニア 要件定義 ソフトウェア開発

『はじめよう！ 要件定義 ～ビギナーからベテランまで』はそのタイトル通り、ソフトウェア開発に携わるエンジニアやPM向けに、要件定義の進め方について優しく解説してくれる書籍です。かわいいイラストと平易な文章がとっつきやすく、するすると読めてしまいますが、要件定義って何をどうやったらいいの？とお悩みの方... 続きを読む

これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons

2023/10/25 475 users ソリッド SVGアイコン 太っ腹ライセンス 改変 アイコン

WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、ス... 続きを読む

全部、商用利用も無料！ Google Fontsの中でも可読性・判別性に優れたフォントのまとめ、UIデザインにも最適

2023/09/04 221 users フォント Google Fonts 判別性 全部 商用利用

Google Fontsには日本語フォントや英語フォントをはじめ、さまざまな言語のフォントをすべて無料で使用できます。いやー、いい時代ですね。 そんなGoogle Fontsの中からリーダビリティ、レジビリティに優れた、...記事の続きを読む 続きを読む

最近のUIデザインのテクニックを解説！ より使いやすいボタンをデザインするときのポイント

2023/08/24 12 users テクニック ボタン 解説 階層 ポイント

WebサイトやスマホアプリのUIに使用されているボタンをデザインするときに気をつけるポイント、より使いやすくするためのポイントを紹介します。 UIのボタンは色だけに頼らない明確な視覚的階層が必要で、同じスタイルの場合は区別できるようにデザインすることが重要です。 Button design tips to avoid common mistake... 続きを読む

エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法｜ShikiCheri/C-C-C

2023/07/31 13 users クックパッド UIUXデザイナー フリーランス 最適解 組織

こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの... 続きを読む

もっとも注目されたUIデザインのテクニックの総まとめ

2023/06/15 157 users テクニック 総まとめ UX Micro-Tips 知識 プロ

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 これまでの中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of the Best by Marc Andrew 下記は... 続きを読む

UIデザインに最適！ シンプルなSVGアイコン素材が7,000種類以上揃っていて、完全に商用利用無料 -Phosphor Icons

2023/05/18 125 users ソリッド SVGアイコン プレゼン SVGアイコン素材 成果物

WebサイトやスマホアプリのUIデザインをはじめ、プレゼンなどのさまざまな成果物に使用できるSVGアイコンのセットを紹介します。 アイコンのスタイルも豊富で、ソリッド・ベタ塗り・デュオトーンなども揃っており、さまざまなデザインに適用できると思います。 Phosphor Icons Phosphor Icons -GitHub Phosphor Iconsの... 続きを読む

マリオのUIがフラットデザインになった日を知っているか 〜 【視伝研】UIデザインの歴史を紐解く｜Yamashita Angelica｜note

2023/04/18 366 users 年表形式 考察 おことわり ご承知おき いちファン

※ おことわり ※ この記事内で取り扱っているゲーム作品について、私は開発上の関わりは一切ありません。あくまでいち個人・いちファンとしての考察であることをご承知おきください。今回の視伝研テーマは【UIデザインの歴史を紐解く】です。 年表形式でUIデザインの歴史を作りながらメンバーと意見を交換しました。PCや... 続きを読む

UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める

2023/04/13 374 users 細部 ルール 意思決定 デザイン 長い記事

UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dan... 続きを読む

UIデザインの「あれ」の名前を知ろう｜株式会社ドヴァ｜note

2023/03/24 205 users 名前

こんにちは。ドヴァ マーケティングサービス部所属デザイナーのマリコです。 WebのUI・UXデザインの仕事をしていると、デザイナー同士なら「ここのデザイン、コレをこうしたい（身振り手振り）」だけでほとんど伝わるけど……、クライアントに説明するときはそのイメージと一緒に、正式名称で正しく伝えるようにしよう、と... 続きを読む

UIデザインのアイコンにお勧め！ セリフフォントの特徴をデザインに取り入れた美しいアイコン素材 -Icons8

2023/03/06 11 users セリフフォント ストローク Icons8 アイコン 特徴

当ブログでもお馴染みのIcons8から実験的なアイコンとして、セリフフォントの特徴をデザインに取り入れたSerif iconsがリリースされたので紹介します。 アイコンはセリフフォントのようにストロークの端に飾りがついて...記事の続きを読む 続きを読む

UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方

2023/02/21 250 users グレースケール ダークモード コントラスト メカニズム カラー

ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを... 続きを読む

Figma上でUIデザインを考えてくれるAIデザインコンパニオン「Genius」発表 | gihyo.jp

2023/02/14 12 users Genius gihyo.jp Figma上 発表

デザインツールなどを開発しているDiagramは2月10日，Figma上でUIのデザインをユーザと共同で作成できるAIベースのデザインコンパニオンGeniusのプレビューを公開した。 Genius by Diagram URL：https://www.genius.design/ 🔅 Introducing Genius, your AI design companion in @figma It understands what you’re desi... 続きを読む

プログラミング用フォントとUIデザインのどちらにも使える！ 美しさと読みやすさを兼ね備えたフォント「Martian Mono」

2023/02/08 164 users フォント プログラミング用フォント MyFonts 美学 人目

Webデベロッパーとデザイナー向けに、Groteskの人目を引く美学と読みやすさと分かりやすさを追求したオープンソースのフォントを紹介します。 ボタン・フォーム・リストなど、限られたスペースのWebサイトやスマホアプリのUIデザインにも適しています。 Martian Mono -GitHub Martian Monoは、Martian Grotesk（myfonts.... 続きを読む

UIデザイン用のシンプルにデザインされた高品質なSVGアイコンが2000種類以上！ 改変・再配布も可の太っ腹ライセンス -Atlas Icons

2023/01/15 10 users 太っ腹ライセンス エコロジー 改変 ハンドジェスチャー アイ

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるAtlas Iconsを紹介します。 UIデザインをはじめ、ビジネス、ソーシャル、ハンドジェスチャー、ガジェット、エコロジー、フィットネス、食べ物・飲食物、医療など、33種類のカテゴリに2,000種類以上のアイ... 続きを読む

「鋼の錬金術師 MOBILE」報酬の溜まり具合によってキャラが進んだり休んだりするデザイン - ゲームアプリのUIデザイン

2023/01/06 10 users ゲームアプリ 報酬 線路 キャラ 具合

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「鋼の錬金術師 MOBILE」、（以下、ハガモバ）の時間経過で報酬が獲得できる機能のデザインを紹介します。 線路を歩いて旅をしている... 続きを読む

実例から考えるUIの情報設計｜usagimaru｜note

2022/12/24 207 users 混乱 usagimaru 分野 webデザイン Note

情報設計とは、端的に言うと「情報に関する混乱を整えて、理解しやすい形にする行い」です。情報設計というとなんとなくWebデザインやUIデザインに関する専門的な分野として認識されることが多いかもしれませんが、“情報” に関することなので、情報があるところには基本的にどこにでも通用します。 情報設計の専門書を漁... 続きを読む

画像生成AIでウェブサイトやUIデザインを生成するコツ

2022/12/23 212 users 画像生成AI ウェブサイト コツ プロンプト 呪文

人工知能（AI）は、ウェブサイト制作を、根本から変えてしまうでしょう。 今のところ、AI画像生成ツールは、呪文（プロンプト）を唱える、ちょっとしたコツを覚えることで、以下のようなWebレイアウトを作成できます。 beautiful landing for spiderman website, design, ux/ui, ux, ui --ar 3:2 --v 4 --q 2 「花屋、フ... 続きを読む

2022年、もっとも注目されたUIデザインのテクニックのまとめ

2022/12/13 170 users テクニック UX Micro-Tips まとめ スマホアプリ

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 興味... 続きを読む

UIデザインにおけるステートマシン - 弁護士ドットコム株式会社 Creators’ blog

2022/11/20 87 users ステートマシン 一気通貫 Creators’ blog 実装

はじめに 弁護士ドットコム デザイナーの林（@taka_piya）です。 弁護士ドットコム 案件管理システムでは、アプリケーションとUIの状態管理にXStateを用いたステートマシンでの管理を導入しています。 この記事では、UIデザインの考え方にステートマシンを導入し、実装まで一気通貫で行う方法と、そのメリットについて説... 続きを読む

こいつ、動くぞ！ UIデザインでよく使用されるSVG完備のアイコン素材、しかもオープンソースで商用無料 -Potlab Icons

2022/11/08 131 users SVG完備 Potlab Icons こいつ アイコン素材

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> <style> .send { animation: send 2s cubic-bezier(1, -0.47, 0.01, 1.37) infinite both; } @keyframes send { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(-20px) translateX(20... 続きを読む

商用でも完全に無料！ WebサイトやアプリのUIに適したシンプルデザインで、SVG完備のアイコン素材 -Sargam Icons

2022/10/19 16 users SVGアイコン SVG完備 ポートフォリオ 商用 アイコン

企業サイトやプロダクトページをはじめ、オンラインショップ、ポートフォリオ、ブログなど、WebサイトやアプリのUIデザインに適したSVGアイコンが無料で利用できるSargam Iconsを紹介します。 アイコンは下記のラインをはじめ、デュオトーン・塗りの3種類で、700個以上が揃っています。しかもオープンソースなのは、嬉し... 続きを読む