なつまる(nastsumaru)

UI designer

なつまる(nastsumaru)

UI designer

  • アプリ開発マガジン

    • 107本

    株式会社Pentagonでは、「アプリを駆使した事業を立ち上げたい」方のために、アプリの設計・デザイン・開発までまるっとサポートしています。当社では、日々の学びをnoteに執筆することにしています。自ら学び・学びを共有し・共有することで皆が成長することを目指しています🙌

【Figma】コンポーネントの命名規則とオススメ運用ルール①（Icon, Image編）

こんにちは。株式会社Pentagon でアプリデザインをしている natsumaru です。 Component の命名規則について、何回かに分けて note を執筆しようと思います。 プロダクトの内容やデザインチームの運用方法によって、各チームでやりやすい方法を決めていくのが良いと思いますが、今回は私のやり方をまとめることでがどなたかのヒントになればと思いまとめます。 今回は、アイコン、イメージ編です。 ベースとなるルールまず、命名する際のベースとなるルールについて。

なつまる(nastsu…

    • 【Figma】デザインファイルの整理方法を考える

      こんにちは。株式会社Pentagon でアプリデザインをしている natsumaru です。 Figma のデザインファイルの整理はどのようにされていますか？ 画面一覧、条件分岐、遷移の整理…。これまで案件ごとにどんな整理が良いのか模索してきたのですが、ようやく「この整理ならイケるのでは？」と落ち着いてきたのでその整理方法を考えてみたいと思います。 まだ完全な運用までには至っておらず、お試し状態ではありますがご了承ください。 ページ構成Master（1つ） と Bra

      なつまる(nastsu…

      • 各ステータスの UI デザイン。チェックリストにまとめてみました

        こんにちは。株式会社Pentagon でアプリデザインをしている natsumaru です。 UI 設計時には、「理想形」だけではなく各ステータスに応じたデザインが必要です。これまで Pentagon で4つのスマホアプリ・1つの Web アプリに携わらせていただきましたが、その中でも共通して頻出する「考慮すべき UI」がありました。それと同時に、この考慮漏れをしてしまうことでエンジニアチームに「このデザインありますか？」と毎回確認させてしまうことがあったため、自戒を込めて

        なつまる(nastsu…

        • Figma の Variants 機能で効率的に UI を作る②

          こんにちは。株式会社Pentagon でアプリデザインをしている natsumaru です。 前回の記事で、Figmaの機能「Variants」を利用した UI の作成方法についてまとめました。今回は、Variants 機能を用いて、テンプレート、ならびに画面を制作してみようと思います。 ①テンプレートをつくる前回の記事ではリストを作成しました。今回は、そのリストを複数並べ、状態に応じて表示が変わるパターンを作成します。 左を「Default」右を「Edit Mode」

          なつまる(nastsu…

        【Figma】コンポーネントの命名規則とオススメ運用ルール①（Icon, Image編）

        なつまる(nastsumaru)

        マガジン

        • アプリ開発マガジン
          107本

        記事

          Figma の Variants 機能で効率的に UI を作る①

          こんにちは。株式会社Pentagon でアプリデザインをしている natsumaru です。 Figma の機能に、コンポーネントの状態管理ができる「Variants」があります。 今回はこの Variants を使って効率的に UI を作る方法を模索してみようと思います。 ①まずはラベルをつくってみるまずは小さなパーツから Variants 機能に触れてみようと思います。今回は「ラベル」のコンポーネント作成から始めてみます。 こちらの記事を拝見して、Variants

          なつまる(nastsu…

          Figma の Variants 機能で効率的に UI を作る①

          なつまる(nastsumaru)

          Figma の色が鮮やかに見える？と感じたときに設定する「Color Space(色空間)」

          こんにちは。株式会社Pentagon でアプリデザインをしている natsumaru です。 https://pentagon.tokyo/ Figma ユーザーの皆さん、「Figma で見る色がやたら鮮やかだなあ」と思ったことはないでしょうか。 Web やアプリに反映させた実際のデザインを見た際、Figma で設定した色との違いを感じつつも、私はてっきり「モニターの設定の影響だろうか？」と思っていました。が、どうやらそうではなく Figma 自体の色設定が影響している

          なつまる(nastsu…

          Figma の色が鮮やかに見える？と感じたときに設定する「Color Space(色空間)」

          なつまる(nastsumaru)

          【エンジニア・閲覧権限者向け】Figmaの画像エクスポート方法

          こんにちは。株式会社Pentagon でアプリデザインをしている natsumaru です。 https://pentagon.tokyo/ 今回は、Figma での画像エクスポート方法について、【Figma の閲覧権限者向け】にまとめてみました。特に、チーム内で閲覧権限者として Figma を触る方、エンジニアの方にとって役立てば嬉しいです。 デザイナー（編集権限者）向けの画像エクスポート方法はよく見かけるのですが、閲覧権限者向けの説明記事はあまり見かけません。業務で

          なつまる(nastsu…

          【エンジニア・閲覧権限者向け】Figmaの画像エクスポート方法

          なつまる(nastsumaru)

          Figma のプロトタイプ設定 Tips

          こんにちは。株式会社Pentagon でアプリデザインをしている natsumaru です。 https://pentagon.tokyo/ 普段、デザインツールに「Figma」を利用しています。Figma で作成したプロトタイプは、スマホアプリ「Figma Mirror」を使えば実機で確認することが可能です。今回は、Figma でプロトタイプを作成する場合の設定について、私が普段気をつけている2点をまとめました。 Figma Mirror とは？Figma Mirro

          なつまる(nastsu…

          Figma のプロトタイプ設定 Tips

          なつまる(nastsumaru)

          ユーザビリティテストをやってみよう！③【当日意識するポイント編】

          ユーザビリティテストをやってみようシリーズ第3弾です。 本日は「テスト当日に意識するポイント」をまとめていきます！🌼 第1弾【事前準備編】はこちら↓ 第2弾はこちら↓ はじめに - 思考発話法ユーザビリティテストでは、「思考発話法」という、「モニター（ユーザー）が感じたこと、考えていること話してもらう」というやり方をとります。ただ、日常ではまずやらないことなので、モニターが無言になってしまう時間が生まれるなど、進行時にちょっとコツがいります。 私が進行時に最も意識して

          なつまる(nastsu…

          ユーザビリティテストをやってみよう！③【当日意識するポイント編】

          なつまる(nastsumaru)

          ユーザビリティテストをやってみよう！②【スクリプト作成編】 - テンプレートも配布！

          ユーザビリティテストをやってみようシリーズ第2弾です！ 今回は事前準備の続き、「タスク・シナリオ設計 & テスト当日のスクリプト」について書きます。 記事の最後にスクリプトのテンプレートも配布もしております。よかったら使ってみてください😊 前回の ①【事前準備編】はこちらからご覧ください✨ 事前準備④ - シナリオを設定しよう 前回の ①【事前準備編】 の中で、ユーザビリティテスト内でモニターさんに操作してもらいたいタスクをざっくりと設定しました。 タスクの例： ・ア

          なつまる(nastsu…

          ユーザビリティテストをやってみよう！②【スクリプト作成編】 - テンプレートも配布！

          なつまる(nastsumaru)

          ユーザビリティテストをやってみよう！①【事前準備編】

          本記事では私が普段行っているユーザビリティテスト（ユーザーテスト）のやり方をまとめています！ とりあえずミニマムに導入してみたい方向けに書いてみます。「もっとこうしたらいいよ」もご意見いただければ幸いです。どうぞよろしくお願いいたします。 本記事は、下記の状況を前提としています。 ・プロトタイピングツール：Figmaを利用 ・ユーザビリティテスト当日：ハングアウトを使いリモートで実践 まずはじめに - 必要なものを整理しよう！ ユーザビリティテストは作成したプロダクトが

          なつまる(nastsu…

          ユーザビリティテストをやってみよう！①【事前準備編】

          なつまる(nastsumaru)

          GAS備忘録

          今後も利用することがありそうなGASを残しておく。 特定の列に特定の文字列が入ったときに、入力日時を別の列に記入するfunction onEdit() { var edit_sheet_name = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getSheetName(); switch(edit_sheet_name) { case 'シート1': //該当するシート名を記入 g

          なつまる(nastsu…

          GAS備忘録

          なつまる(nastsumaru)

          SVG書き出しの際に注意するポイント3つ

          こんにちは。なつきち（@72kichi00）です！ UI制作には普段 Figma を愛用しています。 イラレで SVG データを作った際は、まとめて Figma に上げて「ここに全部置いておきます！」とメンバーに共有しています。 イラレで作っているときは「よし！できた！」と思っていても、Figma で見てみたら「あれ、思っていたのと違う…！」と、やらかすことが多かったです。今回はその「やらかし」と、解決方法を書いてみます。 イラレ ⇔ Figma の往復をしながら説明し

          なつまる(nastsu…

          SVG書き出しの際に注意するポイント3つ

          なつまる(nastsumaru)

          人生が豊かになった便利なもの3選

          2019年の7割が終わりつつあります。あっという間ですね。個人的に、2019年は身近な生活に色々導入したことで「これは…便利だ…」と実感することが多かった年でした。人生が豊かになった、と言っても、過言ではない。 日々「これは助かる、作ってくれた人ありがとう」と思っているものを3つ紹介します。 1. モバイルSuica交通インフラと繋がっているモバイルSuicaは最強だと思います。「やばいあと1分で乗らなきゃ、うわ、改札引っかかった、チャージしなきゃ…な、並んでる〜〜〜オワ

          なつまる(nastsu…

          人生が豊かになった便利なもの3選

          なつまる(nastsumaru)

          ！マークについて

          なんだか危険そうなびっくりマーク。 「！マーク」のアイコンの使い分けをする際のメモです。 この2つの違いってなんでしょう？？ 答えは・・・ それぞれ、「警告（まだエラーが起こっていない状態）」と「エラー（もうエラーが起こった状態）」という意味があります。 マテリアルデザインのアイコンにも、きちんと名前がつけられています。 https://material.io/resources/icons/ 例えばMacの「ゴミ箱を空にする」動作。 「ほんとに大丈夫？やり直せない

          なつまる(nastsu…

          ！マークについて

          なつまる(nastsumaru)