グッドデザイン賞2024を受賞した電力卸取引のオンラインマーケットプレイスのUIデザイン - enechain Tech Blog

2024/10/21 27 users オンラインマーケットプレイス enechain 近藤 電力

はじめに 背景 eSqaure LiveのUIデザイン デザイン基本方針 カスタマイズ性 モードレスな注文UI ダークモードの提供 グッドデザイン賞への応募と受賞 まとめ はじめに enechainプロダクトデザインデスクのマネージャーの近藤（@add_kk）です。 10月9日にenechainでは電力の卸取引をオンラインでリアルタイムに自動約定す... 続きを読む

「ちょっといいUI」を目指す努力 / Striving for Little Big Details

2024/10/17 14 users 努力 いいUI ライトニングトーク インタラクション 苦悩

ライトニングトーク ｢ちょっといいUI｣を目指す努力 インタラクションの観点から、UIデザインにおける細かな振る舞いやこだわり、苦悩、課題などについて考えます。ライトニングトークでは事例をいくつか紹介します。 （ディスカッションパートの情報は本講演資料には含まれませ… 続きを読む

【新連載・イカしたUIを見る】vol.1 こんなの見たことない！と感動したUI｜Goodpatch Blog グッドパッチブログ

2024/06/25 172 users Goodpatch Blog グッドパッチブログ 新連載

こんにちは！UIデザイナーのsugasoとharuです。UIデザインの面白さ（沼とも言う）にハマってしまった私たちは、定期的に「イカしたUIを見る会」（以下、イカ会）という課外活動を行っています。 イカ会では、最近触ったアプリや発見した魅力的なUIを共有し、普通なら見逃してしまうであろうデザインのこだわりや、ハート... 続きを読む

UIデザインで中央配置がずれてしまう理由と解決方法

2024/05/30 146 users 中央配置 デベロッパー 理由 解決方法 至る所

UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを... 続きを読む

UIデザインに最適！ トーンを合わせたカラーでカラーパレットを簡単に生成できる無料ツール -The good colors

2024/05/21 11 users ドーン カラーパレット カラー 彩度 明度

WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。 デバイスに依存しない、トーンを合わせたカラーパレットをOKLCH色空間で簡単に作成できる無料ツールを紹介します。RGBやHEX値もサポ... 続きを読む

デザインスキルを上げるならこれを読むべし！基本の人間工学記事 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デザインに関する専門的な分野として認識されることが多いかもしれませんが、“情報” に関することなので、情報があるところには基本的にどこにでも通用します。 情報設計の専門書を漁... 続きを読む