プロダクトの品質向上施策の一環でテスト戦略を考え一からテストを書くことになったので、そこで学んだことを整理していきます。概ね整理できたので公開してFBもらおうと思っています。（TODO: 年内かけて整理予定）
プロダクトの品質向上施策の一環でテスト戦略を考え一からテストを書くことになったので、そこで学んだことを整理していきます。概ね整理できたので公開してFBもらおうと思っています。（TODO: 年内かけて整理予定）
これからUXデザイン(やその他のデザイン)をやりたいと思っている人、デザイン思考をやってみたがうまくいかなかった人、組織や経営にデザインを取り入れていきたい人、デザインが重要といわれ困惑する人、「誰もがデザイナーになれる」と言われ「その必要ある？」と思った人、もがき苦しむデザイナー、そのほか全てのデザイン関係者に向けて。 昨今、多くの組織で「デザイン思考」や「UXデザイン」の導入が試みられていますが、その多くは表面的な取り組みに終わってしまい、本当の役には立たない実態があります。 なぜでしょうか。 それは、デザインを「手法やプロセス」として捉えすぎているからです。 本記事では「デザインの民主化」に焦点を当てながら、多くの人が誤解している「デザイン」と言う単語や、デザインの力について考えます。 この視点は、組織でデザインに関わる全ての人—デザイナーはもちろん、マネージャーやステークホルダーに
Webサイトのデザインやアプリデザインを考える際、どうデザインすべきか悩んでしまいがちなのが「UI UX」ではないでしょうか。「どう設計すれば良いUI UXになるのか分からない」「イメージはあるけどうまくデザインに落とし込めない」という方も少なくないでしょう。 そこで今回は、UI UXデザインやWebデザインの参考になるおすすめのサイトを38選紹介します。 ぜひ、自身の作りたいWebサイトやアプリデザインの参考にしてみてください。 なお、UI UXデザインに悩んだ際は「UX専門家の支援」を受けるのもおすすめです！ ニジボックスでは、UX改善への第一歩を踏み出せるサービス「Begin UX!」をご提供しています。 自社サイトやアプリのUI UXデザインに課題感をお持ちの方は、ぜひ気軽にご相談ください！ UI UXデザインとは そもそも、「UI UXとは何なのか」「聞いたことはあるけど、詳しい
この記事はNuco Advent Calendar 2024の12日目の記事です。 はじめに エンジニアとして、開発を効率化しながらクオリティの高い成果物を生み出すには、優れたツールやリソースを活用することが欠かせません。 苦労して自分で作ったものの、実は便利なツールが既にあって、車輪の再発明をしてしまっていた、、ということも日常茶飯事です。 しかし、インターネット上には無数の選択肢があり、「どのサイトを使えばいいのか迷ってしまう」という声もよく聞かれます。 本記事では、そんなエンジニアの方々のために、日常的な開発やデザイン業務で役立つ便利なサイトを16個厳選しました。 UIデザインの参考になるサイトから、日々の業務を効率化するツールまで、多岐にわたるリソースをご紹介します。これらを活用することで、業務のスピードアップだけでなく、新たなインスピレーションを得るきっかけになれば幸いです。 1
デジタル時代において、ユーザーインターフェース（UI）デザインは製品やアプリケーションの成功を左右する鍵となりました。しかし、UIデザインは見た目だけでなく、ユーザー体験、使いやすさ、情報の伝達など、多くの要素を考慮した総合的なアプローチが求められます。 にも関わらず、専門知識を持つUIデザイナーは希少で、WEBデザイナーやWEBエンジニアが見よう見まねでこなしているという事が多いのではないでしょうか。 本コラムでは、UIデザインの基本を極力簡素に示し、エンジニアにも役立つデザインスキルを磨くための道しるべを提供したいと思います。 UIデザインの三原則について 最初にお伝えしておきますが、この三原則はUIデザインの基本的なスキルを抽象化したもので、私のオリジナルです。なので、「UIデザインには三原則がある！」というような理解はしないでくださいね。 UIデザインには、多くの原則とテクニックが
実装がわかる=「簡単なフローチャートをイメージできる」ジュニアのUIデザイナーが上に上がるための大きな壁が、実装がわかるかどうかです。実装がわかるとは、「プログラミングできる」ことではありません。 プログラミングはできなくていいけど、「ユーザーがアクションした時と結果画面の間に、どんな情報のやり取りがされたのかをイメージできること」をUIデザイナーは求められます。（正確には「フローチャート」と呼びます） しかし、そのイメージができない場合、ユーザー体験のラストワンマイルまでブラッシュアップすることは難しくなります。 ラストワンマイルとは「顧客にモノ・サービスが到達する最後の接点」。 UIデザイナーはデザインして終わりではありません。ひとつのプロジェクトは実装してリリースされることで、はじめて顧客に価値を提供できます。 問題は中途半端なユーザー体験しか提供できないこと具体例として、デザイナー
先週、久しぶりに15年以上の付き合いになるエンジニアと話をした。 彼は、今でもプロダクト開発の第一線で活躍していて、大規模な開発案件を多数こなしている。そんな彼に聞きたかったことが、タイトルにもあるデザインシステムについて。 昨今のデザインシステムの潮流、その整備のあり方について、僕（主にIAとして担当）が感じていることを伝えた上で、エンジニア視点で見た時に思惑の違いがあれば指摘して！ということをお願いした。 実は、ここ数年のデザインシステムを取り巻く動向について、個人的に気になっていた。僕らのような設計者（もしくはディレクター）が、どのように向き合い、何を考慮すべきかを理解する必要があるわけで、それを社内のディレクター陣に共有しようと考えていた。そこで勉強会用の資料を作ったが、せっかくなのでnoteでも全部公開する。 デザインシステムの概要デザインシステムとは、企業が自社プロダクトの開発
グッドパッチでは社員向けにさまざまな研修を実施しています。定期的な新入社員向けの基礎研修のほか、専門性と難度をより深めた「専門研修」を実施することがあります。この記事では、筆者usagimaruがグッドパッチのデザイナー支援組織であるDesignOpsとして2024年に実施した社内研修 「UIデザイントレーニング」 の内容を一部ご紹介します。 UIデザインの新卒研修についてはこちらの記事でご紹介しています。 https://goodpatch.com/blog/ui-training-softwaredesign 【関連記事】デザイン思考の研修おすすめ10選！ 期待できる効果や選ぶポイントは？ ## 研修の概要 この研修は、社内の若手UIデザイナー7名を対象に、情報設計の考え方や方法論を駆使した実践的なUIデザインに取り組むプログラムとして設計しました。主な企画をDesignOps部署中心
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン｜TOKYO CREATIVE COLLECTION
WebアプリケーションのUIの表現はどんどんリッチになってきています。しかしその一方でブラウザ上での描画の負荷は増大し、時としてスムーズに動かず体験を損ねることもあります。ユーザーにとって使い心地の良いUI体験はフロントエンドのパフォーマンスチューニングに大きく委ねられていると言えるでしょう。 スタートアップ開発を支援する株式会社Gaji-Laboでは、サービスの価値に直結するエンドユーザーの体験向上のため、快適なUIを提供する事をとても大切にしています。 この記事では、快適に動くUIを作るため、フロントエンドフレームワークのマジョリティであるReactとどう付き合っていくべきかを考えていきましょう。 Reactの仕事を理解するまず、Reactがどんな仕事をしているのかを理解するところからはじめましょう。Reactの主な仕事はUIを描画すること、そして必要に応じてそれを再描画することです。
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 なお、こちらの記事の内容は順次YouTube
ChatGPTの普及が進むなか、UXライターの存在意義はいつ消滅するともしれない。直近の知見を放出しておこうと思う。かつてUXライターと呼ばれるものたちが存在したことを覚えておいてほしい。 ここでは、①トーン＆ボイス（プロダクトとしてユーザーに語りかける際の文体）、②品詞の使い分け、③機能名の決めかた、の3点について記しておく。 トーン＆ボイス｜マトリクスで検討するトーン＆ボイスについては、「Material's Communication Principles」で言われているように、さまざまなシーンを想定しながら考えることが重要だ。 ひとりの人間でもシチュエーションによって喋りかたが変わるように、ひとつのプロダクト内でも語りはさまざまに変化する。ユーザーとの関係性に合わせて言葉をチューニングする必要がある。以下のマトリクスは、そうしたパターン出しの一例だ。 出典：Material's C
2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
こんにちは！Goodpatch UIデザイナーのharuです。突然ですが、皆さんはUIデザインの超基本となる「コンポーネント」についてどれぐらい知っていますか？ ユーザーインターフェースを構成するパーツのことを「コンポーネント」といいます。分かりやすい例としては、アクションや遷移のトリガーとなるボタンなどがあります。UIデザイナーは日々、ありとあらゆるUIコンポーネントを「用法用量（原則的な使い方）」に沿って使いこなしながら、デザインに取り組んでいます。 そこでこの記事では、UIデザインを学んだり興味を持っているみなさんに向けて、バラエティに富んだUIコンポーネントをクイズ形式で紹介します。用意した数はなんと100種類（！）。初級・中級・上級に分けて全3回でお届けしていきます。 まずは初級編。ソフトウェアデザインに関わる人たちの共通言語ともいえる、最も基本的なコンポーネントを集めました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
