はてなブックマーク

先日AWSから「Kiro」という新たなAIエディタがリリースされました。 しばらく使ってみて、デザイナー目線として見ても、とても良い設計コンセプトでしたので、Kiroの機能特徴はもちろん、設計思想を知ることでAIによる開発・設計力を底上げするであろう理由も含めてご紹介したいと思います。 プロトタイプからプロダクションへの移行における課題CursorやClaude Codeなど、昨今のAIエディタ（エージェントツール）によるコード生成は、継続的にプロンプトを入力するだけで動作するアプリケーションを迅速に構築できるため、既存コードの拡張はもちろん、プロトタイピングの初期段階において特に強力に機能します。 このプロセスは「Vibe Coding」と呼ばれ、直感的な実装構築ができる一方で、作成したプロトタイプを実際のプロダクション環境へ移行する際には、いくつかの重要な課題が生じます。 設計意図のブ

デジタルプロダクトやサービスが多様化し、複雑化する現代において、デザインの役割は、ビジネスの成長を牽引する戦略的な機能へと進化しています。 そのような状況下で、組織全体の効率的かつ高品質な「デザイン」を実現するための基盤として、「デザインシステム」がよく話題に上がります。 私の感想ですが、 2〜3年前と比較すると、事業会社のデザインシステム運用事例は、着実に多くなってきています。 デザインシステムは、UIコンポーネントライブラリやデザイン原則をまとめたもの、といった認識をお持ちの方もいるかもしれません。デザインシステムは単なるアセットの集合体ではありません。プロダクトに関わる全員が共通認識を持ち、効率的に、そしてより高い品質でデザイン・開発を進めるための「仕組み」そのものです。 日本における、代表的なデザインシステム（左上：デジタル庁デザインシステム、右上：SmartHR Design S

UIデザイン、画面設計する上で欠かせないものとして、UIコンポーネントが挙げられると思いますが、そのコンポーネントを選ぶ基準、選定の理由はどう決めていますか？ WebサービスやアプリケーションのUIを設計するとき、デザイナーにとってもUIコンポーネントの仕組みや、最新の技術潮流を理解しておくことは大切です。特にフロントエンドにおける現在の潮流は、UIデザインと実装の境界が以前よりも密接になってきています。 昨今、大企業は社内コミュニケーションの円滑化、生産性向上のもと、自社のデザインシステムに組み込まれたUIコンポーネント活用し、効率化を図っているケースが増えてきていますが、フルスクラッチでは作らず、既存のオープンソースなコンポーネントをオーバーラップして作成している事例が多いようです。 他方、デザインシステムを持たない中小企業や新規プロジェクトでは、UIコンポーネントの選定や実装に課題を

こんにちは、早くも酷暑が予想される初夏ですが、皆さまお元気でしょうか？エアコンの空調管理に悩まされるSmartHRのプロダクトデザイナーの@kgsiです。 つい先日「SmartHR AI活用ポリシー」策定のお知らせと、「従業員サーベイ」機能においてAIを利用した自由記述回答の要約機能が発表されました。これはSmartHR初の生成AIが使われた機能です。 今回自分が機能設計をデザイナーとして担当しましたが、この記事ではその開発過程で得られた、主にデザイン文脈におけるナレッジを紹介します。 生成AIに関連する記事はすでに多く出現していますが「プロダクトとしてAI機能をどう設計するべきか」「AI機能をどうやってデザインするか」といった観点での記事はまだ少ない印象なので、参考になれば幸いです。 何のデザインをしたのか？「従業員サーベイ」機能は従業員に送付したサーベイを通して回答データを収集し、収集

プロダクトデザイナーをやっている@kgsiです。 最近いわずもがなAIが熱いですよね。Stable Diffusionなどの画像生成モデル、GPT-3（GPT-4）やLaMDAといった大規模言語モデル（LLM）を使った生成系AIやツールが爆発的に増えてきており、個人向けアプリケーションはもちろんですが、業務用アプリケーションにもAIをベースとした機能が組み込まれ始めています。 昨今各社がリリースしてる「AIを下敷きとした機能・アプリケーション」は、ユーザーや業界が望んで生まれた待望の機能…というより、AIの可能性を探るためのPoC味が強い機能が多い印象です。UI（ユーザーインターフェース）においても旧来の延長線上のようなUIや、どうやって使うのかひと目ではわからない、極めて実験的なUIなど…多様なパターンが見かけられるようになりました。 この記事ではAIそのものの解説や実証ではなく、ジェネ

こんにちは、SmartHRプロダクトデザイングループの@kgsiです。 先日、弊社のVP of Product Designの@oujiがこんな記事を公開していました。 みなさん、これを読んでどう思われましたか？内部からみてもよくわからんのが本音だったりするのですが、何故か魂がザワザワしました。 さて、記事の中で繰り返し述べられている「ヘヴィメタル」と、今回ご紹介する内容がマッチするかはわかりませんが、プロダクトデザイナーが関わっている、プロセス改善活動をご紹介します。 プロダクトデザイナーの責任とは？VPはヘヴィメタルな記事の中でこう述べています。 SmartHR ではお前がお前の責任（インターフェース品質）を果たすためなら、お前はどんな成果の出し方を選んでもいい。弊社、特にプロダクトデザイングループにおいては、成果の出し方(＝プロセス)が限定されていません。つまり、プロダクトのインター

SmartHRプロダクトデザイングループ（プロデザ）所属のkgsiです。 先日、社内の他組織がプロデザに対してどのような印象を持っているかをヒアリングする機会を得ました。その中で「プロデザって凄そうだけど怖い」「活動実態がよくわからない」...といった声に歯がゆさを覚えました。 このような有り様は打ち壊していくぞ...！ということで、今年は積極的に情報を共有していこうと思います。 闇のベールに包まれた、我々プロデザが何をしているかという一端として、プロダクトデザインラボというカイゼン活動について説明しましょう。 我々は「UIの負債」に立ち向かうSmartHRでは多数のチームが機能単位の開発を同時に行うLeSS（大規模スクラム）を採用したり、アジャイルコーチを招聘してプロダクトのバリューストリームを見直したりと、サービス開発のアジリティを上げるための施策を次々と行っています。 サービスのスケ

これは SmartHR Advent Calendar 2020 の17日目の記事です。 @kgsiです。SmartHRという会社でプロダクトなデザイナーをしております。 今回の記事は、業務アプリケーションの闇に向き合って憤死している一人のデザイナーが、首を180度にねじっても答えが出ない、Webフォームにどれだけの説明と補助が必要かに悩んだ内容を結論無く語る記事です。 フォームのベストプラクティスは先人たちが世にゴロゴロ出しております。Form Design Patterns の和訳が出版されて久しいですが、あれはいい本ですね、何度も読み返してます。 この本の中では「インクルーシブデザインの原則」というものが紹介されています。 - 同等の体験を提供する - 状況を考慮する - 一貫性を保つ - 利用者に制御させる - 選択肢を提供する - コンテンツの優先順位を付ける - 価値を付加する

こんにちは、はじめまして。先日SmartHRにジョインした@kgsiです。 この記事はいわゆる入社エントリーになります。 プロダクトデザイングループの6人目のメンバー、初のデザインエンジニアとして2020年6月にリモート入社しました。 ジョインしてそろそろ1ヶ月半経ちましたが、今回私からはSmartHRのデザインエンジニアの働き方と役割を探したお話をします。 自己紹介自分のキャリアを鑑みると「開発もできるUIデザイナー」に分類されるのではないかと思っています。 元々出自はグラフィックデザイナーですが、大学時代にWebの世界に魅入られ転身、Webデザイナーから始めてマークアップ業務にも関わり、さらにはエンジニア（主にフロントエンド）を兼任し... そんなこんなで、かれこれ10年以上この界隈をさまよっています。 SmartHR入社前のキャリアとしては、大手サーバー事業会社でサーバーコントロール

2020年2月22日（土）にTypeScriptの祭典、TSConf JP 2020が開催される予定でしたが、新型コロナウィルス（COVID-19）問題が発生し、参加者の健康と社会的な影響を考慮した結果、残念ながら開催中止となりました。 しかし、今回メインのクリエイティブに携わったスタッフとして、せっかく協力して作った成果物が日の目を見ないのはもったいないなぁ...と考え、せめてもの供養として、TSConf JPのクリエイティブ周りのコンセプト、スタッフと自分が、どんなものを作っていたかを紹介しようと思います。 スタッフ参加の背景 去年開催されたTypeScript Meetupの延長線で、TSConf JPが開催されることとなり、元々のコアスタッフだったTakepepeさんが、でクリエイティブ周りを手伝ってくれる人をtwitterで募集されており、手を上げたのがきっかけです。 当時公開さ