グッドデザイン賞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を共有し、普通なら見逃してしまうであろうデザインのこだわりや、ハート... 続きを読む

｢iOS 18｣ ｢iPadOS 18｣ ｢macOS 15 Sequoia｣の壁紙が入手可能に ｰ ｢macOS 15 Sequoia｣には初期MacintoshのアイコンやUIデザインの壁紙も | 気になる、記になる…

2024/06/11 5 users 壁紙 Apple アイコン 入手 ダークモード用

本日、Appleが「iOS 18」「iPadOS 18」「macOS 15 Sequoia」を正式に発表しましたが、その各最新OSに搭載されている新しい壁紙が公開されダウンロード可能になりました。 「iOS 18」では全部で4色の壁紙が追加され、ダークモード用とライトモード用の計8枚がダウンロード可能。 「iPadOS 18」の壁紙も4色が用意されてお... 続きを読む

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です。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって... 続きを読む

TikTokのUIとインタラクションの観察｜鈴木慎吾 / TSUMIKI INC.

2024/02/05 6 users TikTok Tsumiki インタラクション 鈴木慎吾 観察

今までちゃんと使ったことがなかったTikTokを最近がっつり触ったところ、UIやインタラクションの細かな作り込みに気づくことが多く、発見の連続でした。今後の機能開発やUIデザインの参考にもできそうなので記事にまとめます。 調査期間：2024/1/22 - 1/29 使用環境：iPhone 15、iOS17 1. アクションなしの没入体験TikTo... 続きを読む

知識０から、ちょっと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... 続きを読む

DALL-E×ChatGPTでUIデザインを作成して実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

2023/12/26 9 users リク OpenAI chatgpt ジョシュ 株式会社LIG

こんにちは、Technology部のジョシュです。 今回は、OpenAIのDALL-EとChatGPTを使用して、UIデザインからコーディングまで行う方法を紹介します。 DALL-Eはテキストからリアルな画像を生成できるAIツールですが、添付された画像を分析し、それをもとにコードを生成することもできます。 本記事ではDALL-Eを使ってUIデザ... 続きを読む

UIデザインに最適！ 文字サイズが小さくてもくっきりと美しいフリーフォント「Intrer」が待望のバージョンアップ

2023/11/30 9 users Inter フリーフォント 美しいフリーフォント 待望 最新版

2017年にリリースされて以来、UIデザインをはじめ、ロゴやグラフィックデザインなど幅広い用途向けに設計されたフリーフォント「Inter」が2年振りにバージョンアップされて、最新版「Inter 4」が公開されました。 Inter 4は文字サイズが小さくてもくっきりと美しく、綺麗に表示されるようデザインされているのが大きな特... 続きを読む

推しフォントを語る「Inter」｜nanammeon

2023/11/23 6 users Inter LOVEFONT 欧文フォント うえ フォント

昔この時期にAdvent Calendarのひとつのシリーズとして#LOVEFONTというものがあったなあと思ったのでいい機会なので語ります。 シリーズ化したいので第一弾と銘打ち、今回は「Inter」を推しフォントとしてご紹介させてください。 UIデザインに特化したような欧文フォント「Inter」はGoogle Fontなどで利用可能です。ウェ... 続きを読む

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

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

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

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

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

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

MisskeyのUI設計 | gihyo.jp

2023/10/24 6 users Misskey gihyo.jp 意匠 各種コンポーネント

本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説しています。 今回はMisskeyのWebクライアント（Misskey Web）におけるUIデザインの工夫や各種コンポーネントについて紹介します。 なお、「⁠デザイン」という語は設計という意味と、見た目・意匠という意味があり... 続きを読む

UIデザインにも最適！ アナログ印刷のインクと紙からインスピレーションを得たカラースキーム -Flexoki

2023/10/18 6 users 読み書き エディタ 温かみ スクリーン 色合い

デジタルのスクリーンで文章やコードの読み書きのためにデザインされた、アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキームを紹介します。 WebサイトやスマホアプリのUIデザインに使用したり、VS Codeなどのエディタに使用したり、ライトモードでもダークモードでも読みやすさと... 続きを読む

全部、商用利用も無料！ 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の... 続きを読む

Kindle本のゴールデンウィーク特大セールが開催！ UIデザイン、Web制作、イラストの良書が半額でお買い得です

2023/04/24 9 users 良書 ディレクション CSS Kindle本 半額

Amazonで、Kindle本ゴールデンウイークセールが開催しています！ Webや紙のデザイン、HTML/CSSなどWeb制作の解説書、ディレクションやマーケティング、同人誌・絵師さん向けのイラストの良書がたくさんセール...記事の続きを読む 続きを読む

マリオの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... 続きを読む