ふじけん / kenshir0f

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

ふじけん / kenshir0f

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

    • Figma 入門

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

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

    Figma の Component Properties を学ぶ

    こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可能になりました。 この記事では Figma の Component Properties を使った UI コンポーネントについて、使い方とメリットなどについてまとめたいと思います。 公式のチュートリアルはこちら↓ Component Properties とは

    ふじけん / kens…

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

        こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2022 で大きめのアップデートが来て、何がどう機能が変わったのか追いきれなかったのでざっくりまとめたいと思います。 ダークモードの切り替えFigma でデザインするときのサイドバーなど、画面全体をダークモードにする機能が追加されました。白い画面の面積が大きいと少し目がつらかったので普通に嬉しいですね。 画面左上のメニューからダークモードとライトモードに切り替えることができます。 僕は Sla

        ふじけん / kens…

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

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

          ふじけん / kens…

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

            こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。 デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。 大規模サービスにおけるデザインガイドラインの世代交代クックパッドでは約10年前にクックパッドらしいUIを簡単に実現することができる Sara という CSS ベースのUIフレームワークが生ま

            ふじけん / kens…

          マガジン

          マガジンをすべて見る すべて見る
          • Figma 入門
            ふじけん / kenshir0f
          • よく見直す深津さんの記事
            ふじけん / kenshir0f

          記事

          記事をすべて見る すべて見る

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

            こんにちは、ふじけん(@kenshir0f)です。 約2年半、KomercoでモバイルアプリやWebのUIデザインを担当していましたが、今年の7月からデザイン戦略部に異動したので、その経緯と目的について話したいと思います。 なぜ異動したのか一言でいうと「クックパッドのデザイン基盤をもっと良くするため」です。 デザイン戦略部にはもともと兼務で携わっていましたが、クックパッドマートやたのしいキッチン不動産など新しいサービスが増え、多くのデザイナーが在籍するようになりました。 そ

            ふじけん / kens…

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

            こんにちは、ふじけん(@kenshir0f)です。 Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。 Variantsとは？複数のコンポーネントの状態をひとつにまとめて管理する機能です。 例えば、Buttonの[Default, Hover, Focus, Disabled]といった状態をそれぞれコンポーネントで作っていましたが、Variantsを使う

            ふじけん / kens…

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

            こんにちは、ふじけん(@kenshir0f)です。 普段はモバイルアプリやWebのUIデザインをメインで担当しています。 ユーザーの体験設計にフォーカスしてUIデザインしていると、ふと目先の目標に追われていることが多くなっていると感じたため、自分自身の振り返りも兼ねて事業の方向性を整理しました。その結果、自分だけでなくチーム全体を巻き込んで事業成長について考えることになったので、今回はその時の取り組みについてご紹介します。 事業責任者の頭の中を理解する 僕が開発に携わって

            ふじけん / kens…

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

            2020年1月に行われた Design Matters Tokyo のセッションでデザインの変化について、Figmaの発表を聞いたのでまとめます。 時代とともにデザインがどう変化してきたのか、とても分かりやすく解説されていたので共有したいと思います。 Figma社の Yuhki Yamashita さん デザインの大きな3つの変化今まではデザインは基本デザイナーが取り組むものとして扱われていましたが、インターネットや技術の発展とともにデザインの取り組み方は大きく変化してき

            ふじけん / kens…

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

            2020年1月に行われた Design Matters Tokyo のセッションでUXライティングについて学んだので記事にまとめます。 Slack社でUXライティングに取り組んでいるアンドリューさんのお話で、実際にUXライティングするワークショップも体験したので共有したいと思います。 Slack社のアンドリューさん UXライティングとはUXライティングとは、ソフトウェアやインターフェースを言葉で対話可能にすることを目的としたコピーです。 ユーザーの行動フローを理解し、専門

            ふじけん / kens…

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

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

            ふじけん / kens…

            FigmaにAuto Layoutが来た！

            こんにちは、ふじけん(@kenshir0f)です。 FigmaにAuto Layoutが来て早速触ってみたので、その機能をご紹介します。 今回は、チュートリアル読む前にさっと機能だけを知りたい方向けに書きました。 Auto Layoutとは？テキストの長さや要素の数によって、自動的にそのオブジェクトのサイズが変わる便利な機能です。 テキストの長さを変えるたびに、その背景やボタンの位置を変えていた作業がこれによって解消されます。 チュートリアルFigmaをアップデート後に起

            ふじけん / kens…

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

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

            ふじけん / kens…

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

            こんにちは。 Figma plugin の beta版の開発の招待が来なくて悲しんでいましたが、日本時間の2019年8月2日(金)に公式でリリースされました🎉 これを書いているのはプラグインローンチ時刻の深夜2時なので、朝起きて仕事でちょっと触ってみたいという方に向けて、いくつか良さそうなプラグインを紹介したいと思います。 Pluginのインストール方法Figmaのデスクトップアプリをアップデートし、画面左上のPluginsを選択します。 あとはPlugin一覧から入れ

            ふじけん / kens…

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

            はじめにこの記事は、UIデザインツール「Figma」の解説記事の第6章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回は作成したUIデザインをエンジニアと共有し、実装に組み込む話について紹介します。 前回の記事はこちら。 UIデザインを共有するモバイルアプリやウェブのUIをデザインし、プロトタイプで価値の検証を行ったら、次は実際に動くものをユーザーさんに届けるため開発のフェーズに移ります。 ご自身でプログラムを書く場合はデザインデータをそのまま使えばよ

            ふじけん / kens…

            Chapter 5: プロトタイピング

            はじめにこの記事は、UIデザインツール「Figma」の解説記事の第5章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回はFigmaのプロトタイピングについて紹介します。 前回は記事はこちら プロトタイピングとはアプリやWebなどのUIデザインではプロトタイピングは非常に重要です。 プロトタイプはUIを確認するだけでなく、さまざまなアイデアを試したり、インタラクションや画面遷移を体験したり、周りの人にデザインを共有してデザインを練り直したりするための素晴ら

            ふじけん / kens…

            Chapter 4: コンポーネントとスタイル

            はじめにこの記事は、UIデザインツール「Figma」の解説記事の第4章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回はコンポーネントとスタイルについて紹介します。 前回はこちら コンポーネントとはUIデザインにおけるコンポーネントとは、デザイン全体で再利用できるUIの要素のことをいいます。ボタンやアイコン、ヘッダー、フッターなど、同じデザインの要素を各ページで毎回つくるのではなく、再利用することで作業時間の短縮、プロジェクトで一貫したデザインの作成、ま

            ふじけん / kens…