私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
Contents Command Line Interface Guidelines An open-source guide to help you write better command-line programs, taking traditional UNIX principles and updating them for the modern day. Authors Aanand Prasad Engineer at Squarespace, co-creator of Docker Compose. @aanandprasad Ben Firshman Co-creator Replicate, co-creator of Docker Compose. @bfirsh Carl Tashian Offroad Engineer at Smallstep, first e
2020年のフロントエンドエンジニアの技術スタックの一例
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr
Macaron | Visual component editor for Web development
Macaron is an open-source UI design tool to create and maintain Web Components.
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを おすすめ度 サイト内検索の可否 いいね/保存機能の有無 ランキング機能の有無 掲載サイト数 を基準にランクづけし、おすすめできるサイト順に載せているので忙しいという方は、とりあえず上から順にチェックしていただければ大丈夫です！みなさんのデザイン制作に活かしていただけると嬉しいです。 【全サイト徹底比較】超参考になるおすすめギャラリーサイトTOP38 ちょう
個人開発・ポートフォリオ作成をする方に贈る いくらプロダクトが素晴らしいとしても、一見してダサいデザインだと、ユーザーは使う気がなくなってしまう。 でも、今からデザインの勉強をするのは面倒だし、そこまでこだわりがあるわけでもない。 Q. 簡単に及第点のデザインにできるサービスとかないんですか？ A. あります。 ということで、デザインのことはよくわからなくても、簡単にそれっぽくできるサービスをまとめました。 個人的には、「それっぽさ」の大部分はページレイアウトと画像、「こなれ感」は配色とフォントによって構成されていると思っています。 また、私はケチなのでここで紹介しているものは、すべて無料で使えるサービスです（課金プランはある）。 書かないこと 細かい使い方 大体有名なので、使い方はggれば出てきます。 ライセンスなどの情報 特に素材系は規約などを確認の上で使ってください。 あくまでも、こ
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォー
人工知能（AI）は、ウェブサイト制作を、根本から変えてしまうでしょう。 今のところ、AI画像生成ツールは、呪文（プロンプト）を唱える、ちょっとしたコツを覚えることで、以下のようなWebレイアウトを作成できます。 beautiful landing for spiderman website, design, ux/ui, ux, ui --ar 3:2 --v 4 --q 2 「花屋、フラワーショップ」をテーマにすると、一発でWebサイト向けレイアウトを錬成できます。 「日本」をテーマにすると、こんな美しいUIデザインに。 実際にAI画像生成ツールを使いこむうちに、少しずつわかってきた、AIツールでウェブサイトやUIデザイン画像を生成するコツを、メモ的にご紹介。 アップデート、継続していきます。 コンテンツ目次 ✨ AI画像生成ツールとは？ ✨ 唱える呪文（プロンプト）って何？ ✨ 画像を
私が「Web制作にはMacが適している」と思う理由
先日 iMac 2019のレビュー記事 に「Web制作にMacが適していると思っている理由は別の記事に書きます」と書いたところ結構反応があったため、この記事にまとめることにしました。 先に、Web制作のためにWindows PCを買った方のために説明しておきますが、Windows PCでもWeb制作はできますのでご安心ください。 ただ、私はいくつかの理由でWeb制作にはMacの方がメリットが多いと感じています。 私がMacでWeb制作するようになったきっかけ 私はWindows 95の頃からWindows PCをずっと使用していました。 Windows 95や98の頃はMacでWeb制作するメリットを感じておらず、多くのWebサイトを問題なく閲覧できるWindows PCがベストだと思っていました。 その後Windows XPやWindows Vistaが搭載されたPCをメインで使用してい
こんにちは！ドイツに住んでるUIデザイナーのいまがわ (@i_magawa)です。 この記事は「GameGraphicDesign AdventCalendar 2019」の23日目の記事になります。 自己紹介 現在はフリーでUIの仕事をやりつつ、夫婦や育児に関するマンガを描いたりしています。以前は東京でスマホゲームの開発やってました。 こういう記事も書いてます（宣伝）↓ 何の記事書くの…！？ スマホゲームUIのローカライズ対応について今回は書きたいと思います。 いくつか案件関わった気がしたりしなかったりするのでまとめてみました。あくまで日本っぽいゲームを海外対応するときの注意点です！ また今回参考として「ポケモンマスターズ」のUIをよく載せています。 ポケモンマスターズはなんと驚異の8言語対応…！殺す気か！ちなみに私は一切運営と関係ないただのファンです。 海外対応の目標 英語ネイティブの
NewsPicks UIデザイナーのFigma利用フロー大公開！｜つづく（ひらい）ともこ | mokataaan
自己紹介NewsPicksでUIデザイナーをしております。つづく（ひらい） ともこと申します！ 初note投稿なので、本題に入る前に軽く自己紹介をさせていただきますm 2016年に武蔵野美術大学デザイン情報学科卒業後、ヤフー株式会社に新卒デザイナーとして入社しました。 ヤフーでは広告管理ツールのUIデザインやCtoCサービスアプリのデザインなどに携わりました。 そして今年の6月末でヤフーを退職し、株式会社ニューズピックスにUIデザイナーとして転職しました。 現職ではNewsPicksアプリやWeb、その他関連サービスのUIデザイナーとして関わっております。 仕事の話はそこそこに…。なにより一番に覚えて帰っていただきたいのは、「女性アイドルが好きです！」ということです！！ ハロプロ、日向坂46などの日本の女性アイドルグループが物心ついたときから今までずっと好きでして、最近だと「Girls P
UX/UI Design: Growing List of Top Resources (last update 02/2023)
A list of my favourite design resources. Everything that makes your life easier, from UX research to the perfect mockup. Instead of hiding it in the usual Google Doc, from now on it will live here on Medium and will be updated every time I find another little gem. So make sure to subscribe! By the way, this is not about quantity but quality. This list is from my personal point of view and everyday
2023年1月に、Adobeの公式Webページの「Adobeのすべての製品一覧」からAdobe XDが消えたことでWeb制作者の間で大きな騒ぎになっています。 Adobeのすべての製品一覧ページで「XD」で検索した結果 というのもAdobeは事前に「Adobe XDは今後どうなるのか」についての発表をおこなっておらず、ある日突然製品一覧から消したため、利用者が混乱しているというのが現状です。 このブログや私のTwitterでは過去に「Adobe XDのアップデートは止まっており、今にも消えそう」であることを書いていますが、そのことを知らず、突然何が起きたのか分からずに騒いでいる方もいらっしゃるようです。 そこでこの記事では、これまでに何があったかと、「XDについてAdobeに問い合わせた結果」についてまとめています。 追記: 2023年5月に再度確認したところ、Adobeのすべての製品一覧
はじめてのUIデザイン 改訂版
無料で利用できるFigmaは、はじめての人にもオススメのUI作成ツールです。 ブラウザ上で利用できたり、他の人とリアルタイムで同時編集、プラグインによるカスタマイズなど、Figmaの基本的な使い方を押さえておけば、すぐに美しいUIデザインを作成できるのも人気の理由でしょう。 この記事では、Figmaで利用できる無料UIキット＆テンプレート素材をまとめています。 ウェブサイトやスマホアプリの作成に必要なパーツを揃えた、UIキットを使えば、より素早く効率的にWebサイトやスマホアプリのデザインを作成できます。 各素材はカテゴリ別に分けています、今後も随時アップデート予定です。 コンテンツ目次 1. Webデザイン便利ツール 2. 配色ツール 3. デザインツール 4. プロトタイプ・アイコンツール 5. フォント・書体ツール 6. クリエイティブ・面白ツール Figma 無料UIキット Car
この記事では、絵を描くのが苦手という非デザイナーのひとにも役立つ、商用利用可能な無料イラスト素材を公開しているサイトをまとめてご紹介します。 最近のウェブサイトのランディングページやスマホアプリなどでよく見かける、キャラクターをつかったイラストスタイルに対応した、比較的新しい素材ライブラリが中心に揃います。 日本生まれのイラスト素材をダウンロードしたいときは、以下の記事でまとめているので、一緒に確認してみてはいかがでしょう。 全て無料、本当は教えたくないフリーイラスト素材サイト83個まとめ【商用OK】 商用OK！今どきのおしゃれイラスト素材を無料ダウンロードできる優良サイトまとめ Scale 高品質なイラストが毎日アップデートされており、カラーピッカーでお好みの配色に変更することも可能。クレジット表記不要で、商用利用にもばっちり対応しています。 DrawKit 毎週アップデートが行われてい
アプリやウェブサイトをデザインする上で「ユーザーが直感的に操作を理解できるようにすること」は、リピーターや購入者を増加させる上で非常に重要です。ユーザーエクスペリエンス(UX)の専門家でない開発者やグラフィックデザイナーが制作の上で理解しておくべき最低限のポイントを、UX・UIデザイナーのErik D. Kennedyさんが具体的な事例つきでわかりやすく解説しています。 4 Rules for Intuitive UX – Learn UI Design https://learnui.design/blog/4-rules-intuitive-ux.html ◆1：ボタンは関連要素の近くに置く インターフェースに何か要素を置く場合、その要素が影響するものの近くに配置することが重要です。 例えば音楽再生アプリで以下のようにプレイリストが並んでいる場合、「曲を追加する」ボタンをどこに置けばい
無料で学べる！チュートリアル系のYouTube動画を網羅した「Channels Stack」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は多彩なジャンルのチュートリアル系YouTube動画を網羅的にまとめたWebサービスをご紹介します。 CG・動画編集・音楽制作・Web開発・デザイン・ゲーム作り・NoCode…など、非常に幅広い学習コンテンツを無料で学べるのが大きな魅力となっています。 いずれもクオリティの高いチュートリアル動画ばかりなので、ご興味ある方はぜひ参考にしてみてください！ 【 Channels Stack 】 ■「Channels Stack」の使い方 それでは最初に「Channels Stack」の基本的な使い方について紹介しておきます。 面倒なユーザー登録や初期設定などは一切不要で、サイトにアクセスしたらすぐにでも利用できるのが特徴です。 トップ画面にある【Browse categories】ボタンをクリックしてみましょう。 細かいカテゴリ別に学習系のYou
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
この記事はGoodpatch UI Design Advent Calendar 2019の18日目の記事です。 こんにちは。UIデザイナーのnaoです。僕は今こうやって仕事としてUIデザインについて接していますが、同時にいちユーザーとして数々の素晴らしいUIデザインに触れてきました。初めて触れたiPhone3GSが発売された2009年から約10年間数々のiOSアプリケーションをインストールしては削除し、中でも特に機能性に長け優れた外観を持つアプリケーションは僕の愛でるUIとして使わない物でも保持してきました。 この10年間、僕のポケットには無限の可能性を秘めたアプリケーション達が入っていてそれらは、晴れの日でも雨の日でも、楽しい時も悲しい時も僕を支えてくれました。はい、こんなエモい文章ではないのでご安心ください。 このAdvent Calendarの記事ではそんな愛してやまなかったiOS
WebサイトやスマホアプリのUIに使用されているボタンをデザインするときに気をつけるポイント、より使いやすくするためのポイントを紹介します。 UIのボタンは色だけに頼らない明確な視覚的階層が必要で、同じスタイルの場合は区別できるようにデザインすることが重要です。 Button design tips to avoid common mistakes by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに UIのボタンで見かけるよくある間違い ボタンをデザインするときに重要なこと より良いボタンにする方法 より実践的なUIデザインのガイドライン はじめに 私はデザイナーになって20年が過ぎ、多くのプロジェクトでボタンを使用してきましたが、ボタンのデザインについて深く考察する時間を取っていなかっ
Subscribe to our newsletterJoin 19000+ subscribers getting UI resources straight to their inbox
2017年にリリースされて以来、UIデザインをはじめ、ロゴやグラフィックデザインなど幅広い用途向けに設計されたフリーフォント「Inter」が2年振りにバージョンアップされて、最新版「Inter 4」が公開されました。 Inter 4は文字サイズが小さくてもくっきりと美しく、綺麗に表示されるようデザインされているのが大きな特徴で、字形にはコントラストを強調するディテールが備わっています。また、大きいサイズでもその美しいラインと滑らかな曲線、繊細なディテールは優れたリズムを実現します。 「0」と「O」を区別する必要がある場合のスラッシュゼロ、下付き数字の化学式（H2Oなど）、文字幅が揃った数字など、多くのOpenType機能も利用できます。 Inter font family Inter -GitHub Inter 4の特徴 Inter 4のダウンロード Inter 4のウェイトとグリフ In
非デザイナーは「生成AI」でどこまでUIデザインを作れるのか？ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Technology部の永松です。 私が在籍しているTechnology部ではさまざまなシステム・アプリ開発を手がけています。 しかし、部内にはデザインやUIUXの知見がまだ足りていないのが実情です。 実際にデザインをするときは、他部署のデザイナーに力を借りることがほとんど。 ……近年こんなに生成AIが進化しているのであれば、これらを使って自分でデザインを作成することはできないものでしょうか？ WF（ワイヤーフレーム）の作成だけでもいいんです。これらが誰でもできるようになれば、もっとお引き受けできる案件も増えるはず。 というわけで、今回はクライアント提案に耐えうるデザインを生成AIでどう作るのか、試行錯誤した結果を紹介します。以下のツールについて感想をまとめていますので、ぜひ参考にしてください。 今回試したサービス ChatGPT Midjourney(+Vary Region) Fram
ゲームUIデザインにも、その年によって流行りがあるような気がします。そこで、個人的に記憶に残ったゲームUIデザインのトレンドを年表でまとめてみました。 2018年までは、すでにまとめているので、気になった方は、先にそちらを見てくださいね！ あわせて読みたい ゲームUIデザインのトレンドを年表にまとめてみた ゲーム系UIデザインのトレンド年表まとめ ゲーム系UIデザインのトレンド年表【2022年】を作成しました。2018年以前は前回作成した年表です。今回、追加で2018年以降を作成しましたので、追加分についてご紹介していきたいと思います。 主観的なカテゴライズなので、優しい目で見てください（笑）。2018年以降で追加作成したカテゴリについては、下記のように分類しました。 カラフルポップ系（2018-） コミックドット系（2018-） 奥行き黒フラット系（2019-） 透明感フラット系（202
これでもうUIデザイン用のSVGアイコンに困らない！ 2,000種類以上が揃った商用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。2,452種類のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォーマッ
Hi, I’m Ryoichi Sekiguchi. ( @ryopeko ) I’m working as a Backend Engineer in Shippio. Today I will talk about our decision to choose Auth0 over AWS Cognito. Japanese follows English. What did we consider important?As a startup development team, we wanted to reduce our concerns about authentication. We then began to consider transferring the authentication infrastructure to an external service at t
サイトを制作する際にちょっとしたワンポイントとして、ボックスやボタンの背景にパターンを使いたい場面があるかと思います。 そんな時、わざわざフォトショやイラレで画像を作るのは結構面倒ですよね。 そこで今回はCSSをコピペするだけで使える51種類以上の背景パターンをご紹介します。 種類豊富で色々なシーンで使いどころがあるかと思いますので、気に入った背景があればぜひお気に入りに登録しておきましょう！ ギンガムチェック風CSS背景パターンSee the Pen texture by Miriam (@karaWhiteDragon) on CodePen. 28種類のグラデーションストライプCSS背景パターンSee the Pen Cards with simple stripe backgrounds by Ana Tudor (@thebabydino) on CodePen. ハーフトーンC
Webサイトやスマホアプリをはじめ、最近ではテレビのCMなどでも背景として使用されている、グラデーション・グラデーションメッシュ素材をダウンロードできるサイトを紹介します。 UIデザインやグラフィック用の高解像度の画像ファイル（.ai, .jpg, .png）から、グラデーションを生成できるオンラインツール、グラデーションのCSSを生成できるツールなど、デザイナーからコーダーまで役立ちます。 まずは、グラデーションメッシュ素材から。 グラデーションメッシュとは、複数のポイントからグラデーションをさまざまな方向に流し込んだものです。有機的で美しく、最近のデザインでよく見かけます。 Free Mesh Gradient Collection レインボー、パステム、ナチュラルをテーマにした、グラデーションメッシュ素材。各グラデーションメッシュの右上「↓」から高解像度の.jpgがダウンロードできま
UIデザインのための10のヒューリスティクスについて改めて考えてみた｜i3DESIGN Designers
はじめにこんにちは。i3DESIGNデザイナーチームです。 「ユーザーインタフェースデザインのための10のユーザビリティヒューリスティクス（10 Usability Heuristics for User Interface Design）」をご存知ですか？ https://www.nngroup.com/articles/ten-usability-heuristics/ 1994年にヤコブ・ニールセンによって提唱され、現在も多くのデザイナーが使用している、良いUIデザインの原則をまとめたリストのようなものです。 ヒューリスティック（heuristic）は、日本語では「発見的手法」と訳されます。これは、経験や先入観によって直感的に正解に近い答えを得ることができる、という思考法のことです。 ニールセン自身も、これは“経験則”であり、“ユーザビリティガイドライン”ではないとしています(上記U
by Mike Mozart 世界有数の銀行大手シティバンクが巨額の現金を誤って送金し、その返還の要否をめぐって争っていた裁判で、シティバンク側が敗訴しました。誤送金した総額9億ドル(約951億円)のうち約5億ドル(約528億円)の回収はできないとの判決に対し、シティバンクは控訴する意向を示しています。 Citibank can't get back $500 million it wired by mistake, judge rules - CNN https://edition.cnn.com/2021/02/16/business/citibank-revlon-lawsuit-ruling/index.html Citibank just got a $500 million lesson in the importance of UI design | Ars Technica
UIデザイナーを目指す人に最初に読んでほしい「はじめてのUIデザイン 改訂版」をご紹介いたします。モバイルアプリのデザインについての必要な知識が、UIの歴史からコンポーネントの解説、情報設計の考え方など網羅的に書いてあります！ UIデザイン勉強中のアシスタントデザイナーのくぼです！ 今回はUIデザインを学びたい人に絶対最初に読んでほしい一冊「はじめてのUIデザイン 改訂版」をご紹介します！ なんとこちらから、EPUB版は無料でダウンロードできます！Kindle版でも100円で読むことができます！すごい！(2023年1月現在) この本について 「UIデザイナーを目指している人に渡せる最初の1冊を作りたい。」この本は、そんな想いから作られているそうです。 その言葉の通り、UIデザインにおける基礎的に必要となる知識や考え方が網羅的に書いてあります。 UIデザインの重要性から始まり、UIデザインの
Rust: state of GUI, December 2022 There was a recent call for blogs about Rust GUI. So, Are we GUI yet? Contents: Categorised listing of toolkits State of KAS State of GUI Categorised listing of toolkits Lets start by categorising entries from Are we GUI yet, ignoring those which appear abandoned or not very functional. Bindings Wrappers around platform-specific toolkits: Mac OS / iOS - cacao - Ru
見栄えの良い4色または5色を組み合わせる配色ツールはいろいろありますが、WebサイトやスマホアプリのUIデザインだとうまく機能しないことがあります。 カラーブランディングに成功しているWebサイトを見ると、そんなに数多くの色は使用されていません。デザインの一貫性を保つには、プライマリーカラーを1つ、アクセントカラーを1つ、あとはニュートラルトーンのベースカラーを使用しています。 この3つのカラーに9つの色合いを組み合わせたカラーパレットを生成する配色ツールを紹介します。 Goodpalette GoodpaletteはUIデザインに特化されたオンラインの配色ツールで、無料で使用できます。登録など面倒なことは一切不要。 使い方は簡単で、上部の「Generate」ボタンをクリックするだけです。生成した配色は、WebサイトやSlackやダッシュボードでどんな感じになるか確認できます。
「ウェブの制作コストと時間を節約したい」 「デザインを統一して、一貫性をもたせたい」 「制作に必要なものだけまとめたい」 「シェアしたときのデザインのずれを防ぎたい」 プロジェクトを続けているうちに、ページによってボタンや文字サイズ、余白スペースの幅などがばらばらで、統一感がなくなってしまった、なんて経験があるかもしれません。 さらに、複数のチームによる開発では、デザインのズレだけでなく、同じ作業を繰り返すなど非効率さが目立ち、全体のモチベーションもだだ下がりなんてことに。 一貫したデザイン設計により、技術的な問題を防ぐことができるデザインシステムを作成しようと思いつつ、最初に作るのが時間もかかって大変だから、と導入をあきらめていませんか。 今回は、デザインシステムとしてそのまま使えるFigma用おすすめUIキットをまとめてご紹介します。 プロトタイプ作成に必要なパーツが一式すべて揃い、プ
MEFILASのWebサイトの制作方法を事例から紹介する「Webサイトのつくりかた」シリーズも第五弾となりました！今回はクリエイティブスタジオ「HUG」のWebサイトがどのようにしてつくられたのかをご紹介します。 01. 案件概要クリエイティブスタジオ「HUG」代表のharu.さん率いる「HUG」は、習慣・常識・社会通念を新しい視点で見つめ直し、クライアントの課題に向き合うクリエイティブスタジオです。 EDのオンライン診療を提供する「Oops」のブランドディレクションや、”ムダかどうかは自分で決める。”のキャッチコピーが印象的な貝印「Pretty」のイメージビジュアル制作などを手がけています。 ブランドディレクションを担当された「Oops（ウープス）」また、クライアントワークの企画・制作だけでなく、アーティストのマネジメントや、「HIGH(er)magazine」「シアバター」を始めとする
WWDC22 Recap in Goodpatch WWDC22の発表内容とHIGの更新内容の振り返りつつ、AppleプラットフォームにおけるHIGの位置付けとソフトウェアUIデザインへの向き合い方を考えます。
OOUIからユーザビリティテストまで、スキル横断的にUIデザインを見る！Designer's MTG #10 UI Design編 レポート！ - Pepabo Tech Portal
こんにちは。 コーポレートデザインチームのmewmo(@mewmoppel)です。 ペパボではテレワークを基本とする働き方に移行することが決定され、社内デザイナーのナレッジシェアの場として開催されている「Designer’s MTG（通称 デザミ）」のフルリモート開催も当たり前の風景となってきました。 今回は「UI Design」のエキスパートスキルエリアのデザイナーにナレッジシェアしていただきましたので、その様子をお届けしていきたいと思います〜 これまでのデザミのレポートはこちら Designer's MTG #9 Information Architecture編 レポート！ 40人のデザイナーがフルリモートで集合！ Designer's MTG #8 レポート！ 「デザミとは？」「エキスパートスキルエリアとは？」については、前回の記事で紹介していますので、気になった方はあわせてご覧く
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
Command Line Interface Guidelines
これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
私がWEBデザイン制作の参考になりそうだと思うサイトを61個挙げてみた。
【個人開発・ポートフォリオに】無料で簡単にいい感じのデザインにできるサービスまとめ - Qiita
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
画像生成AIでウェブサイトやUIデザインを生成するコツ
多言語対応のゲームUI注意点覚え書き - デザイナー脂肪
Adobe XDは利用できなくなるのか、Adobeに問い合わせました | Stocker.jp / diary
全部無料！Figmaで使える良質UIテンプレート50選（ウェブ＆アプリ素材）
商用OK！今どきのおしゃれイラスト素材を無料ダウンロードできる優良サイト19個まとめ
アプリやウェブサイトをデザインする上で最低限押さえるべき4つのポイント
僕が今まで愛してやまなかったUI達について語る｜Goodpatch Blog グッドパッチブログ
最近のUIデザインのテクニックを解説！ より使いやすいボタンをデザインするときのポイント
UI Design Daily | Open Source UI Resources
UIデザインに最適！ 文字サイズが小さくてもくっきりと美しいフリーフォント「Inter」が待望のバージョンアップ
ゲームUIデザインのトレンドを年表でまとめてみた【2022年版】
Why we decided to use Auth0 and not AWS Cognito
CSSで表現する背景パターン51種＋【コピペで簡単！/アニメーション有】
商用利用無料！美しいグラデーション素材・グラデーションメッシュ素材をダウンロードできるサイトのまとめ
950億円以上を誤送金したシティバンクが敗訴、約530億円が回収不能に
UIデザイナーを目指す人は「はじめてのUIデザイン」を最初に読んでほしい | DevelopersIO
State of GUI 2022 - KAS blog
UIデザインに特化された配色ツール！ Webサイトやスマホアプリで使用する色に悩んだときに便利 -Goodpalette
デザインシステムの作成に便利すぎるFigmaおすすめUIキット【2022年版】
クリエイティブスタジオ「HUG」のWebサイトのつくりかた｜MEFILAS
The HIG & Software UI Design