ふじけん / kenshir0f

UIデザインとフロントエンドをやっていってます。Figmaの記事多め / HOKUTO…

ふじけん / kenshir0f

UIデザインとフロントエンドをやっていってます。Figmaの記事多め / HOKUTO Inc. ← フリーランス ← Cookpad Inc. / https:kenshir0f.com / https://clan.club

マガジン

  • Figma 入門

    デザインツール Figma の基本的な使い方から、エンジニアと協力して開発に組み込む際の活用方法などをまとめています。

  • よく見直す深津さんの記事

記事一覧

Figma の Dev Mode で UI の確認を楽にする

こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2023 で Developer Mode (Dev Mode) が追加され、エンジニアなど実装を担当する人目線でのデザインの確認がより便利…

314

Figma の Component Properties を学ぶ

こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可…

Figma Config 2022 で便利になった機能のおさらい

こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2022 で大きめのアップデートが来て、何がどう機能が変わったのか追いきれなかったのでざっくりまとめたいと思いま…

クックパッド株式会社を退職しました

12/24付でクックパッド株式会社を退職しました。 新卒でデザイナーとして入社して約4年半、大規模なサービス開発から新規サービスの立ち上げ、インターンの講師や採用周り…

クックパッドのデザイン品質を支える Apron Design System の構築

こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。 デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当してい…

デザイン基盤を整えるため、サービス開発から少し離れた話

こんにちは、ふじけん(@kenshir0f)です。 約2年半、KomercoでモバイルアプリやWebのUIデザインを担当していましたが、今年の7月からデザイン戦略部に異動したので、その経…

FigmaのコンポーネントをVariantsで状態管理する

こんにちは、ふじけん(@kenshir0f)です。 Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何…

事業の方向性をデザインの力で支える

こんにちは、ふじけん(@kenshir0f)です。 普段はモバイルアプリやWebのUIデザインをメインで担当しています。 ユーザーの体験設計にフォーカスしてUIデザインしていると、…

Figmaが目指すデザインのあり方

2020年1月に行われた Design Matters Tokyo のセッションでデザインの変化について、Figmaの発表を聞いたのでまとめます。 時代とともにデザインがどう変化してきたのか、…

SlackのUXライティングの考え方

2020年1月に行われた Design Matters Tokyo のセッションでUXライティングについて学んだので記事にまとめます。 Slack社でUXライティングに取り組んでいるアンドリューさ…

個人開発でやらかした失敗と、そこから学んだ実装の難しさ

この記事は Firebase Advent Calendar 2019 の 23日目の記事です。 こんにちは、ふじけん(@kenshir0f)です。 2019年ももうすぐ終わりなので、今年いろいろと挑戦してきた…

FigmaにAuto Layoutが来た!

こんにちは、ふじけん(@kenshir0f)です。 FigmaにAuto Layoutが来て早速触ってみたので、その機能をご紹介します。 今回は、チュートリアル読む前にさっと機能だけを知りた…

エンジニアから信頼されるデザイナーになる

こんにちは、デザイナー兼エンジニアのふじけん(@kenshir0f)です。 普段はKomercoのUIデザインと実装を担当しております。 チームやプロダクトの状態に合わせて、デザイン…

FigmaにPluginがついに来たのでよさそうなものをご紹介

こんにちは。 Figma plugin の beta版の開発の招待が来なくて悲しんでいましたが、日本時間の2019年8月2日(金)に公式でリリースされました🎉 これを書いているのはプラグ…

Chapter 6: 開発フローに組み込む

はじめにこの記事は、UIデザインツール「Figma」の解説記事の第6章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回は作成したUIデザインをエンジニア…

Chapter 5: プロトタイピング

はじめにこの記事は、UIデザインツール「Figma」の解説記事の第5章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回はFigmaのプロトタイピングについて…

Figma の Dev Mode で UI の確認を楽にする

Figma の Dev Mode で UI の確認を楽にする

こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2023 で Developer Mode (Dev Mode) が追加され、エンジニアなど実装を担当する人目線でのデザインの確認がより便利になりました。
この Dev Mode はいったい何が便利なのか、どうやって既存のファイルで活用するのかを紹介したいと思います。

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

Dev Mode

もっとみる
Figma の Component Properties を学ぶ

Figma の Component Properties を学ぶ

こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可能になりました。

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

もっとみる
Figma Config 2022 で便利になった機能のおさらい

Figma Config 2022 で便利になった機能のおさらい

こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2022 で大きめのアップデートが来て、何がどう機能が変わったのか追いきれなかったのでざっくりまとめたいと思います。

ダークモードの切り替えFigma でデザインするときのサイドバーなど、画面全体をダークモードにする機能が追加されました。白い画面の面積が大きいと少し目がつらかったので普通に嬉しいですね。

画面左上のメ

もっとみる
クックパッド株式会社を退職しました

クックパッド株式会社を退職しました

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

なぜやめたのかクックパッドでは直近デザインシステムの構築を楽し

もっとみる
クックパッドのデザイン品質を支える Apron Design System の構築

クックパッドのデザイン品質を支える Apron Design System の構築

こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。
デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。

大規模サービスにおけるデザインガイドラインの世代交代クックパッドでは約10年前にクックパッドらしいUIを簡単に

もっとみる
デザイン基盤を整えるため、サービス開発から少し離れた話

デザイン基盤を整えるため、サービス開発から少し離れた話

こんにちは、ふじけん(@kenshir0f)です。
約2年半、KomercoでモバイルアプリやWebのUIデザインを担当していましたが、今年の7月からデザイン戦略部に異動したので、その経緯と目的について話したいと思います。

なぜ異動したのか一言でいうと「クックパッドのデザイン基盤をもっと良くするため」です。
デザイン戦略部にはもともと兼務で携わっていましたが、クックパッドマートやたのしいキッチン

もっとみる
FigmaのコンポーネントをVariantsで状態管理する

FigmaのコンポーネントをVariantsで状態管理する

こんにちは、ふじけん(@kenshir0f)です。
Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。

Variantsとは?複数のコンポーネントの状態をひとつにまとめて管理する機能です。
例えば、Buttonの[Default, Hover, Focus, Disabled

もっとみる
事業の方向性をデザインの力で支える

事業の方向性をデザインの力で支える

こんにちは、ふじけん(@kenshir0f)です。
普段はモバイルアプリやWebのUIデザインをメインで担当しています。

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

もっとみる
Figmaが目指すデザインのあり方

Figmaが目指すデザインのあり方

2020年1月に行われた Design Matters Tokyo のセッションでデザインの変化について、Figmaの発表を聞いたのでまとめます。
時代とともにデザインがどう変化してきたのか、とても分かりやすく解説されていたので共有したいと思います。

Figma社の Yuhki Yamashita さん

デザインの大きな3つの変化今まではデザインは基本デザイナーが取り組むものとして扱われていま

もっとみる
SlackのUXライティングの考え方

SlackのUXライティングの考え方

2020年1月に行われた Design Matters Tokyo のセッションでUXライティングについて学んだので記事にまとめます。
Slack社でUXライティングに取り組んでいるアンドリューさんのお話で、実際にUXライティングするワークショップも体験したので共有したいと思います。

Slack社のアンドリューさん

UXライティングとはUXライティングとは、ソフトウェアやインターフェースを言葉

もっとみる
個人開発でやらかした失敗と、そこから学んだ実装の難しさ

個人開発でやらかした失敗と、そこから学んだ実装の難しさ

この記事は Firebase Advent Calendar 2019 の 23日目の記事です。

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

日報サービスStellaとは?Stellaは、個人で

もっとみる
FigmaにAuto Layoutが来た!

FigmaにAuto Layoutが来た!

こんにちは、ふじけん(@kenshir0f)です。
FigmaにAuto Layoutが来て早速触ってみたので、その機能をご紹介します。
今回は、チュートリアル読む前にさっと機能だけを知りたい方向けに書きました。

Auto Layoutとは?テキストの長さや要素の数によって、自動的にそのオブジェクトのサイズが変わる便利な機能です。
テキストの長さを変えるたびに、その背景やボタンの位置を変えていた

もっとみる
エンジニアから信頼されるデザイナーになる

エンジニアから信頼されるデザイナーになる

こんにちは、デザイナー兼エンジニアのふじけん(@kenshir0f)です。
普段はKomercoのUIデザインと実装を担当しております。

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

もっとみる
FigmaにPluginがついに来たのでよさそうなものをご紹介

FigmaにPluginがついに来たのでよさそうなものをご紹介

こんにちは。
Figma plugin の beta版の開発の招待が来なくて悲しんでいましたが、日本時間の2019年8月2日(金)に公式でリリースされました🎉

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

Pluginのインストール方法Figmaのデスクトップアプリをアップ

もっとみる
Chapter 6: 開発フローに組み込む

Chapter 6: 開発フローに組み込む

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

今回は作成したUIデザインをエンジニアと共有し、実装に組み込む話について紹介します。
前回の記事はこちら。

UIデザインを共有するモバイルアプリやウェブのUIをデザインし、プロトタイプで価値の検証を行ったら、次は実際に動くものをユーザーさんに届けるため開発のフェー

もっとみる
Chapter 5: プロトタイピング

Chapter 5: プロトタイピング

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

今回はFigmaのプロトタイピングについて紹介します。
前回は記事はこちら

プロトタイピングとはアプリやWebなどのUIデザインではプロトタイピングは非常に重要です。
プロトタイプはUIを確認するだけでなく、さまざまなアイデアを試したり、インタラクションや画面遷移

もっとみる