ふじけん / kenshir0f UIデザインとフロントエンドをやっていってます。Figmaの記事多め / HOKUTO Inc. ← フリーランス ← Cookpad Inc. / https:kenshir0f.com / https://clan.club https://note.com/fjkn ふじけん / kenshir0f https://d2l930y2yx77uc.cloudfront.net/assets/default/default_note_logo_202212-f2394a9e5b60c49f48650eee13f6e75987c8c4f1cfa7555629a9697dc6015cd9.png https://d2l930y2yx77uc.cloudfront.net/assets/default/default_note_logo_202212-f2394a9e5b60c49f48650eee13f6e75987c8c4f1cfa7555629a9697dc6015cd9.png 249F80 ja Mon, 15 Jun 2026 05:42:05 +0900 Figma の Dev Mode で UI の確認を楽にする https://assets.st-note.com/production/uploads/images/108950033/rectangle_large_type_2_8838b6c0d3571b19e948624bec75753a.png?width=800 こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2023 で Developer Mode (Dev Mode) が追加され、エンジニアなど実装を担当する人目線でのデザインの確認がより便利になりました。
この Dev Mode はいったい何が便利なのか、どうやって既存のファイルで活用するのかを紹介したいと思います。

公式のチュートリアルはこちら↓


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Fri, 23 Jun 2023 02:27:06 +0900 https://note.com/fjkn/n/n7ce8729696a5 https://note.com/fjkn/n/n7ce8729696a5 Figma の Component Properties を学ぶ https://assets.st-note.com/production/uploads/images/81154759/rectangle_large_type_2_57944d571420bfd9ced23d92912a39fd.png?width=800 こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可能になりました。

この記事では Figma の Component Properties を使った UI コンポーネントについて、使い方とメリットなどについてまとめたいと思います。
公式のチュートリアルはこちら↓


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Tue, 21 Jun 2022 22:18:37 +0900 https://note.com/fjkn/n/n7ead486b7a9b https://note.com/fjkn/n/n7ead486b7a9b Figma Config 2022 で便利になった機能のおさらい https://assets.st-note.com/production/uploads/images/78340010/rectangle_large_type_2_3de1a9e4076ae0657f668c8d69fa5f83.png?width=800 こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2022 で大きめのアップデートが来て、何がどう機能が変わったのか追いきれなかったのでざっくりまとめたいと思います。

ダークモードの切り替え


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Wed, 11 May 2022 22:35:41 +0900 https://note.com/fjkn/n/n76fcb21eb7b1 https://note.com/fjkn/n/n76fcb21eb7b1 クックパッド株式会社を退職しました https://assets.st-note.com/production/uploads/images/68472879/rectangle_large_type_2_f4f05a89ea0e3dfe37edbca7b4c07ae8.png?width=800

12/24付でクックパッド株式会社を退職しました。
新卒でデザイナーとして入社して約4年半、大規模なサービス開発から新規サービスの立ち上げ、インターンの講師や採用周り、社内横断したデザイン支援など多くの業務に携わり経験を積めたのはとても恵まれていたと思います。
(ちなみにトップの写真は2018年の夏インターンのまかないのお寿司です)


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Sat, 25 Dec 2021 18:10:12 +0900 https://note.com/fjkn/n/n3c7a2a1cfbb2 https://note.com/fjkn/n/n3c7a2a1cfbb2 クックパッドのデザイン品質を支える Apron Design System の構築 https://assets.st-note.com/production/uploads/images/56170444/rectangle_large_type_2_2317d52bbbd97a4ba6f248972695bd51.png?width=800 こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。
デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。

大規模サービスにおけるデザインガイドラインの世代交代


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Tue, 06 Jul 2021 13:07:46 +0900 https://note.com/fjkn/n/nf73742ec925a https://note.com/fjkn/n/nf73742ec925a デザイン基盤を整えるため、サービス開発から少し離れた話 https://assets.st-note.com/production/uploads/images/39145084/rectangle_large_type_2_6af4d9639781a815eff428dfd5c99d1c.png?width=800 こんにちは、ふじけん(@kenshir0f)です。
約2年半、KomercoでモバイルアプリやWebのUIデザインを担当していましたが、今年の7月からデザイン戦略部に異動したので、その経緯と目的について話したいと思います。

なぜ異動したのか


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Fri, 20 Nov 2020 10:37:14 +0900 https://note.com/fjkn/n/nc8f5498e5e69 https://note.com/fjkn/n/nc8f5498e5e69 FigmaのコンポーネントをVariantsで状態管理する https://assets.st-note.com/production/uploads/images/37653246/rectangle_large_type_2_e18e3cca88c64c4ca5cdd62e8a46d361.png?width=800 こんにちは、ふじけん(@kenshir0f)です。
Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。

Variantsとは？


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Thu, 29 Oct 2020 03:32:48 +0900 https://note.com/fjkn/n/nfa218f39413e https://note.com/fjkn/n/nfa218f39413e 事業の方向性をデザインの力で支える https://assets.st-note.com/production/uploads/images/27331174/rectangle_large_type_2_7c26a93f439d0eb691837932a5e9e838.png?width=800 こんにちは、ふじけん(@kenshir0f)です。
普段はモバイルアプリやWebのUIデザインをメインで担当しています。

ユーザーの体験設計にフォーカスしてUIデザインしていると、ふと目先の目標に追われていることが多くなっていると感じたため、自分自身の振り返りも兼ねて事業の方向性を整理しました。その結果、自分だけでなくチーム全体を巻き込んで事業成長について考えることになったので、今回はその時の取り組みについてご紹介します。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Wed, 03 Jun 2020 10:51:12 +0900 https://note.com/fjkn/n/n69be8d34c07d https://note.com/fjkn/n/n69be8d34c07d Figmaが目指すデザインのあり方 https://assets.st-note.com/production/uploads/images/18884667/rectangle_large_type_2_a37240e98d882dfcbe0f7d178a7e8306.png?width=800 2020年1月に行われた Design Matters Tokyo のセッションでデザインの変化について、Figmaの発表を聞いたのでまとめます。
時代とともにデザインがどう変化してきたのか、とても分かりやすく解説されていたので共有したいと思います。

画像20


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Thu, 06 Feb 2020 14:29:08 +0900 https://note.com/fjkn/n/n096f77d3c057 https://note.com/fjkn/n/n096f77d3c057 SlackのUXライティングの考え方 https://assets.st-note.com/production/uploads/images/18552558/rectangle_large_type_2_ec29f7d964dd2f50b0085693f085a687.png?width=800 2020年1月に行われた Design Matters Tokyo のセッションでUXライティングについて学んだので記事にまとめます。
Slack社でUXライティングに取り組んでいるアンドリューさんのお話で、実際にUXライティングするワークショップも体験したので共有したいと思います。

画像20


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Wed, 29 Jan 2020 21:33:36 +0900 https://note.com/fjkn/n/n39ebfbaf0332 https://note.com/fjkn/n/n39ebfbaf0332 個人開発でやらかした失敗と、そこから学んだ実装の難しさ https://assets.st-note.com/production/uploads/images/17139740/rectangle_large_type_2_a1c00087616eeb8689132fe26b5ce4de.png?width=800 この記事は Firebase Advent Calendar 2019 の 23日目の記事です。

こんにちは、ふじけん(@kenshir0f)です。
2019年ももうすぐ終わりなので、今年いろいろと挑戦してきたなかでも個人で開発している日報サービス Stella の開発中にやらかした失敗をご紹介します。来年はきっと忘れているので戒めに...


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Mon, 23 Dec 2019 02:59:41 +0900 https://note.com/fjkn/n/n94b1eefa73df https://note.com/fjkn/n/n94b1eefa73df FigmaにAuto Layoutが来た！ https://assets.st-note.com/production/uploads/images/16622969/rectangle_large_type_2_88918041d066fd8e9fca05435051b093.png?width=800 こんにちは、ふじけん(@kenshir0f)です。
FigmaにAuto Layoutが来て早速触ってみたので、その機能をご紹介します。
今回は、チュートリアル読む前にさっと機能だけを知りたい方向けに書きました。

Auto Layoutとは？


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Fri, 06 Dec 2019 09:19:26 +0900 https://note.com/fjkn/n/n851a8c59b5a9 https://note.com/fjkn/n/n851a8c59b5a9 エンジニアから信頼されるデザイナーになる https://assets.st-note.com/production/uploads/images/16015743/rectangle_large_type_2_10341c575cc29c100c5569cfea504727.jpeg?width=800 こんにちは、デザイナー兼エンジニアのふじけん(@kenshir0f)です。
普段はKomercoのUIデザインと実装を担当しております。

チームやプロダクトの状態に合わせて、デザインしたり実装したりと役割を変えながらサービス開発に携わっていますが、Komercoに参加した当初から実装に入っていたわけではありませんでした。
デザイナーとしてアウトプットしつつも、エンジニアの実装負担を下げる取り組みを行うことで少しずつ信頼を得て、そこから開発スピードを上げるため徐々に実装を担当するようになりました。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Fri, 15 Nov 2019 07:04:12 +0900 https://note.com/fjkn/n/n424e58e030a1 https://note.com/fjkn/n/n424e58e030a1 FigmaにPluginがついに来たのでよさそうなものをご紹介 https://assets.st-note.com/production/uploads/images/13348377/rectangle_large_type_2_52c864d0e718c7e604ac3d57020bf038.jpeg?width=800 こんにちは。
Figma plugin の beta版の開発の招待が来なくて悲しんでいましたが、日本時間の2019年8月2日(金)に公式でリリースされました🎉

これを書いているのはプラグインローンチ時刻の深夜2時なので、朝起きて仕事でちょっと触ってみたいという方に向けて、いくつか良さそうなプラグインを紹介したいと思います。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Fri, 02 Aug 2019 02:54:18 +0900 https://note.com/fjkn/n/n125c25962ba6 https://note.com/fjkn/n/n125c25962ba6 Chapter 6: 開発フローに組み込む https://assets.st-note.com/production/uploads/images/13277460/rectangle_large_type_2_dd5018dce4d6a19303b8acc4a5187297.jpeg?width=800 はじめに

この記事は、UIデザインツール「Figma」の解説記事の第6章になります。
概要や過去の解説記事は下のマガジンからどうぞ。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Thu, 01 Aug 2019 08:03:06 +0900 https://note.com/fjkn/n/nc733d59beb05 https://note.com/fjkn/n/nc733d59beb05 Chapter 5: プロトタイピング https://assets.st-note.com/production/uploads/images/13103759/rectangle_large_type_2_5478ec5f01c6622ebdb94076a5fa5a42.jpeg?width=800 はじめに

この記事は、UIデザインツール「Figma」の解説記事の第5章になります。
概要や過去の解説記事は下のマガジンからどうぞ。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Mon, 22 Jul 2019 07:27:38 +0900 https://note.com/fjkn/n/nbd6ff28c4b5a https://note.com/fjkn/n/nbd6ff28c4b5a Chapter 4: コンポーネントとスタイル https://assets.st-note.com/production/uploads/images/12983427/rectangle_large_type_2_96923c2277c05a0196efaee0bf4b478a.jpeg?width=800 はじめに

この記事は、UIデザインツール「Figma」の解説記事の第4章になります。
概要や過去の解説記事は下のマガジンからどうぞ。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Fri, 19 Jul 2019 07:28:10 +0900 https://note.com/fjkn/n/ne50d8b5f59d3 https://note.com/fjkn/n/ne50d8b5f59d3 Chapter 3: Figmaのレイヤーを扱う https://assets.st-note.com/production/uploads/images/12954942/rectangle_large_type_2_b108913cced606d4000409bbfd3d6728.jpeg?width=800 はじめに

この記事は、UIデザインツール「Figma」の解説記事の第3章になります。
概要や過去の解説記事は下のマガジンからどうぞ。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Tue, 16 Jul 2019 07:41:31 +0900 https://note.com/fjkn/n/n38a2a8a71d99 https://note.com/fjkn/n/n38a2a8a71d99 Chapter 2: Figmaの基本操作 https://assets.st-note.com/production/uploads/images/12830193/rectangle_large_type_2_bd05b0c38160d2d1e6d5b3cb8184e183.jpeg?width=800 はじめに

この記事は、これからFigmaを使おうと思っている方や効果的な使い方を知りたい方に向けた、Figmaの使い方の解説記事になります。
前回の記事では概要とセットアップの仕方を書きましたが、今回の第2章では「Figmaの基本操作」についてご紹介します。
noteをマガジンにまとめているので、よろしければこちらもどうぞ。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Thu, 11 Jul 2019 07:32:43 +0900 https://note.com/fjkn/n/n6f5da638cb1f https://note.com/fjkn/n/n6f5da638cb1f Chapter 1: Figmaの概要とセットアップ https://assets.st-note.com/production/uploads/images/12811300/rectangle_large_type_2_7af7faf1a331e822f86898395978a697.jpeg?width=800 はじめに

SketchやAdobeXDなど、様々なUIデザインツールが業務の中に取り入れられている中で、Figmaの登場によってデザイン環境がガラッと変わりつつあります。
従来のデザイン製作フローとは異なる同期的なスピード感のある開発環境へと変化し、ディレクターやエンジニアによるUIデザインレビュー、デザインスプリントでの複数人によるプロトタイプ作成など、デザイナー以外の方や様々な状況で大きなメリットがあり、他のツールと一線を画する存在となっています。

この記事では、これからFigmaを使おうと思っている方やFigmaの効果的な使い方を知りたい方に向けて、アカウント登録から基本的な操作方法、コンポーネントの作り方やコミュニケーションでの工夫など、基本から応用まで幅広い内容をまとめてマガジンにしてお届けします。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Mon, 08 Jul 2019 07:37:27 +0900 https://note.com/fjkn/n/nbcc54fd737f7 https://note.com/fjkn/n/nbcc54fd737f7 HTML5プロフェッショナル認定試験に合格した話 https://assets.st-note.com/production/uploads/images/11536005/rectangle_large_type_2_f1ee53ded7fc41fea55cacb2907c8dde.jpeg?width=800 こんにちは、ふじけん(@kenshir0f)です。
GW中にふと思いつきHTML5プロフェッショナル認定試験(レベル1)を受けて合格したのでその経緯と流れをまとめたいと思います。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Wed, 08 May 2019 00:32:19 +0900 https://note.com/fjkn/n/n92507505883e https://note.com/fjkn/n/n92507505883e 手戻りが少ないアトミックデザインの導入 https://assets.st-note.com/production/uploads/images/8877508/rectangle_large_type_2_1300b70764b243012d9b31a6b8251668.jpg?width=800

こんにちは、クックパッド株式会社デザイナーの藤井(@kenshir0f)です。
業務では主にKomercoというサービスのデザインを担当しています。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Mon, 10 Dec 2018 18:30:05 +0900 https://note.com/fjkn/n/n9c8f8921b13c https://note.com/fjkn/n/n9c8f8921b13c Figmaを半年使って分かった便利なところ https://assets.st-note.com/production/uploads/images/8815380/rectangle_large_type_2_96c3bb5de4537b6b39c5e59ba24a9ffe.jpg?width=800 こんにちは、ふじけん(@kenshir0f)です。
この記事はDesign Tools Advent Calendar 2018の6日目の記事になります。忙しい年末ということで気軽に読める記事にしてみました。

さて、以前ブログでsketchからFigmaに移行した話をしたのですが、思っていたよりも反響が多く各所から参考にしましたと声をいただきました。
完全に予想外でしたが誰かの参考になったのなら嬉しい限りでございます...ともあれ、あれから時間も経ったので実際どうだったのか？運用してからの知見をご紹介したいと思います。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Thu, 06 Dec 2018 08:00:04 +0900 https://note.com/fjkn/n/n9bc5b6ec9fc2 https://note.com/fjkn/n/n9bc5b6ec9fc2 開発スピードを上げるため、Sketchを辞めてFigmaに移行した話 https://assets.st-note.com/production/uploads/images/7131909/rectangle_large_type_2_1c4700c57ae4d9717549439378d8e5da.jpg?width=800 はじめまして、ふじけん(@kenshir0f)と申します。
普段はモバイルアプリを主としたサービス開発のデザイナーを担当しております。

業務ではSketchを使ってアプリのUIを組んでいるのですが、
先日チームの開発体制を見直すときにFigmaというデザインツールに移行しました。
Figmaに乗り換えるに至った経緯やプロコンなど、ざっくりまとめてみます。


続きをみる]]> https://assets.st-note.com/production/uploads/images/6229405/profile_9415895e79b7b76ca173fdeceab4f180.jpg?fit=bounds&format=jpeg&quality=85&width=330 ふじけん / kenshir0f Fri, 13 Jul 2018 09:27:33 +0900 https://note.com/fjkn/n/nbcd22ef41170 https://note.com/fjkn/n/nbcd22ef41170