サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
はじめに 「動けばいい」で済ませがちなUI。でもそれ、ユーザーには伝わってないかもしれません。エンジニアの皆さん、機能開発に集中するあまり、UIが後回しになっていませんか？ コードとして正しく動いていても、ユーザーが使いにくいと感じたら、それは失敗です。どれだけロジックがスマートでも、UIが原因で「なんか使いづらい」と思われてしまうと、全体の評価も下がってしまいます。 この記事では、エンジニアがついやりがちなUIデザインのミスとその回避法を紹介します。共感あり、学びありで、読後すぐに「ちょっとUI直してみようかな」と思える構成を目指しました！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。UIデザインにおける「やりが
アジャイルな開発チームで仕事をするデザイナーには、どういったマインドセットが求められるのでしょうか。アウトプットへのこだわりを抑えて、チームのメンバーとして果たすべき役割があります。またAIによるUIの生成が可能になってきた現在、その役割も大きく変化し始めています。 同じ美術大学に1学年違いで学んだ平野友視（@hiranotomoki）さんと大輪俊行（@ohwatoshiyuki）さんは、現在それぞれ法人向けSaaSを展開する事業会社でアジャイルな開発組織に所属しています。アジャイルな現場におけるデザイナーに必要な姿勢や考え方、そしてこれからの在り方について語り合いました。アジャイルでは完成品ではなく価値を届けるアジャイルに馴染めるデザイナーとそうでないデザイナー 影響の少ないところから始めて4年で8割をリプレイス デザイナーとAIだけで実現するプロトタイプやデモシステム この先生き残
こんにちは。tebiki現場分析のプロダクトデザイナーをしている畔地（あぜち）です。 BtoBプロダクトのデザインって、少しハードルが高そうに感じませんか？「業界が遠いと、業務を理解するのが難しそう…」とか、「課題が複雑すぎて、なかなか共感できないかも…」なんて思われるかもしれません。 実は、私も最初はそう思っていました。 私は前職で、toC向けの転職サイトのデザインを担当していました。私自身も転職経験があったので、プロダクトを使う場面や流れは理解できていましたし、「きっと顧客はこんな気持ちだろう」と想像しながらデザインを進めることができました。 ところが、tebiki現場分析は製造現場向けのプロダクト。工場に行ったこともなければ、製造業の知識もほとんどない私にとって、顧客の置かれた環境や課題を深く理解することは、大きな課題でした。 しかし、顧客理解こそが優れたプロダクトを生む鍵であること
Across the worldcreative people are making high quality things of all kinds and sharing their work freely with all of humanity. Makeit Yourself is a digital book that showcases this incredible talent, bringing together over 1000 usefulDIY projects to demonstratejust what is possible when you make things yourself. Each featureditem links directly to their original project websites, where you’l
高品質なスライドのデザインのギャラリーサイト。現役デザイナーが完成度の高いスライドだけをピックアップしているので、営業資料、採用ピッチ資料、プレゼン資料のデザインの参考にご利用ください 。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS
読了後の狙い ・デザインリサーチの基本的な要素を学べる。 ・デザインリサーチの実施シーンがイメージができる。 ・普遍的な営みとして デザインリサーチに親近感が持てる。 はじめに パーソルキャリア株式会社UXリサーチャーの @ono_yah と申します。 今回は現場UXリサーチャーの立場から ・UXリサーチという単語を知っている ・デザインリサーチをまったく知らない ・近いことはやっているので、自分の業務をより深く理解したい 上記のような 業務において専門的に実践していなくとも新しい学びがある、今後デザインリサーチと心理的な距離が縮まるような内容になればと思います。 そのようなコンテンツを執筆したいと思った動機は、2年前にUXリサーチャーとしてパーソルキャリアに入社してから1年半程「UXリサーチャー」という職能の掴みどころのなさに戸惑う日々を送っていた経験からです。 参加プロジェクトにおけ
「どうすればAIをWebデザインに活用できるだろう」人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストやゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを１年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何？」というひとは、基本の使い方をまとめた以下のガイドを参考にど
『はじめよう！ 要件定義 ～ビギナーからベテランまで』はそのタイトル通り、ソフトウェア開発に携わるエンジニアやPM向けに、要件定義の進め方について優しく解説してくれる書籍です。かわいいイラストと平易な文章がとっつきやすく、するすると読めてしまいますが、要件定義って何をどうやったらいいの？とお悩みの方に対して、まずはこれだけやっておくべき基礎知識を得ることができる、とてもわかりやすい内容になっています。 そしてそして、ここからが本noteの主な趣旨ですが、この3部作はデザイナー目線で読み解くと、極めて明瞭で本質的で実践的な、ユーザー体験設計とUI設計の進め方について学べるデザイン教則本と言えるのです。 以下、その理由と、本シリーズを使ってUIデザインを進めていく方法を実例を踏まえて解説していきます。 要件定義とはUI・機能・データを決めることいきなり『はじめよう！ 要件定義 』のキモ・コンセ
「デザイナーこそ、スプレッドシートに強くなれ」とずっと言い続けています。先日、とあるセミナー（#D2デザインダンジョン）で発したところ、「具体的にはどういうことでしょうか？」と質問いただきました。 よい機会なのでまとめてみました。重要なのは、スプレッドシートは数字はもちろんだけど、数字以外でも使いますよね、ということです。 なお、この記事では、次をまとめて「スプレッドシート」と記します。Excel（デスクトップ版、オンライン版）Google スプレッドシート スプシ 表計算Apple Numbers 「スプシ」という言葉には、なかなか慣れません… スプレッドシートは「思考の道具」である私自身、「マインドマップ」はよく使います。 マインドマップは思考を“発散”するには向いていますが、“収束”には不向き。たとえば、異なる“枝”のアイテムの関係性を表現できません。 詳しくは、こちらの記事に
本書はFigma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、BrandGuidelineに則った内容となっております。(BrandGuideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
こんにちは、freee会計チームでWebエンジニアをしているe-mohaです。4月に入社しました。 この記事では、先日プレスリリースが発表されたきっぷUIの開発についてご紹介します。 燕駅から大崎駅までの交通経路のスクリーンショット まだプレスリリースをご覧になっていない方は以下のリンクをご確認ください。 prtimes.jp 今回は、freeeのプロダクトのデザイン方針である「Design Philosophy」を意識してUI開発をしました。 Design Philosophyの4つのキーワードに沿って、解説していきます。 brand.freee.co.jp 爽快でシンプルな見た目にする "かろやかシンプル" 「かろやかシンプル」というキーワードでは、業務の面倒な事務作業のストレスから開放するためにシンプルでわかりやすいデザインを心がけることを定義しています。 きっぷUIでは、右上のつば
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 これまでの中で最も注目されたUIデザインのテクニックをまとめました。UI &UX Micro-Tips: Best of the Best by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 細いフォントは暗いカラーにする 2. 長いフォームは常にラベルを上部に配置する 3. ボタンのラベルは一貫性を保つ 4. 不要なテキストでフォームのUIを乱雑にしない 5. フォームはインタラクションの後、すぐにフィードバックを提供 6. 次のステップの情報を提供する 7. CTA用にカラーを1つ確保しておく 8.
デザイン思考が生んだ、問題解決というデザインの「誤解」 イノベーションを促進する方法として、2000年代のビジネス界に瞬く間に広まった「デザイン思考」。しかし、そのなかで「デザインは問題を解決するためのもの」という誤った意識が強まってしまったと、あるデザイナーは警告する。2023.06.01 アップルの台頭とともに高まった企業のデザインへの関心。 その流れを追い風に広まったのが「デザイン思考」ではないだろうか。 しかし、そのなかで「デザインはアップルの成功を追随させてくれるもの」「デザイナーは問題を解決する人」という認識も強まってしまい、デザイナーの役割を窮屈にしててしまった——ノースカロライナ州立大学グラフィックデザイン学科助教授で、自身もデザイナーのジャレット・フラーは言う。 では、デザイナーの真の力を発揮するためにもつべきマインドセットとは何か？ フラーはスウェーデン政府イノベーシ
本連載では、SmartBankのデザイナーが「デザイナーの業務効率化」をテーマに、FigmaやNotionを活用した「業務効率改善のTips」を紹介していきます。今回焦点を当てるのは「Figmaを活用し、職種を超えて全員でデザインするための工夫」についてです。 こんにちは！SmartBankでデザイナーをしている福嶋（putchom）です。2022年9月にふたりめのデザイナーとしてSmartBankに入社し、現在はおもにプロダクトのUIをデザインしたり、デザインシステムを設計したりしています。私たちは、「B/43」というVisaプリペイドカードと家計簿アプリがひとつになった新ジャンルのサービス「家計簿プリカ」を運営しているのですが、チームメンバー全員でサービスをデザインできるように、デザインを透明化し目線を揃えた上で有意義な議論ができるようにしています。 第6回ではプロトタイピングや詳細
繰り返しますが、センスは必要ありません！ デザインのコツをひとつずつ確認しながら、ご自身の資料をレベルアップさせていきましょう。ちょっとした工夫でグッとよくなるはずです。 1. 位置・大きさ・形などを揃えるまずは要素の位置・大きさ・形などを「揃える」ことを意識します。 文字を揃える最初は文字の揃え方から見ていきましょう。 箇条書きや文章が長いスライドは「左揃え」が読みやすく、情報がきちんと整理されているように見えます。文字の先頭が揃っていると、見た目もキレイです。 また、強調したいメッセージのスライドでは「中央揃え」にするとインパクトが出せます。ただし文字の量が多いと読みにくくなってしまうため、本当に伝えたいことだけを書くようにしましょう。 さらに中央揃えのスライドは「メリハリ」をつけることで、よりインパクトが出ます。 どうでしょう？ほかのスライドと背景色を変えたり、文字のサイズに差をつけ
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 littleUI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
