necco Note
田口 冬菜
necco Note
Figmaでのコミュニケーションをスムーズにする「necco memo」を作りました。
- Design
Figmaでのメンバーとのやりとりをスムーズにする「necco memo」を作りました。
だれが何を伝えたくて書いたメモか、自分が見るべきメモはどれかなどがすぐにわかるようになっているので、社内でも「わかりやすい！」「使いやすい！」と好評です。
この記事では、necco memoを作った理由、作り方、実際の使用例などを紹介します。
🐈
追記：2022.5.18
この記事で紹介しているnecco memoをFigma Communityに公開しました！🎉
「necco memo – Sticky notes」をFigma Communityに公開しました。
necco memoとは？
necco memoは、Figmaのワークスペース上で使うメモです。メンバーに伝えたいことがあるとき、メモを残したいとき、参考サイト・DropboxのURLを記載したいときなどに使うために作りました。
メモには作成者のアイコン、タイトル、本文を記載する場所があり、内容に合わせて背景色を変えられます。メモの色によって「デザイン」「仕様」「修正」などカテゴリーがわかり、だれが、何について書いたメモなのかがすぐにわかります。
メモのフォーマットはFigmaのコミュニティからお借りしたもので、今回はnecco用にカスタマイズしたものを紹介します。（オリジナル：Sticky notes）
necco memoを作った理由
necco memoを作ったのは、メンバー間での情報共有をもっとわかりやすく、もっとスムーズにしたかったからです。
neccoではウェブサイト制作や資料作成などにFigmaを使っていて、社内外のいろんなメンバーがワークスペースを見たり、内容を編集したりします。
メモを作るまでは仕様やデザインに関するメモ、伝言、雑談などがフレームのそばに書かれている状況で、文字の色や大きさ、日付の記載などで多少の区別はついたものの、瞬時に時系列や内容を理解することができませんでした。
課題として具体的にあげると、
- だれが、いつ、どんな内容を、だれに向けて書いたか瞬時に伝わらない → 確認の手間がかかる
- ワークスペースが雑然とする → 作業中の集中力低下
- 雑談や個人のメモなのか、伝言なのかがわからない → 見る人が混乱する、エラーのもと
この状況をどうにかできないかと考えて作ったのが「necco memo」でした。
necco memoの作成方法
necco memoの作成には、Figmaの機能「バリアント（コンポーネント）」「オートレイアウト」「チームライブラリー」を使っています。
はじめにも書きましたが、もととなるメモのフォーマットはFigmaコミュニティから拝借し、そこにカスタマイズをする形で作っていきました。
タイトル＋本文はオートレイアウトで自動改行
タイトルと本文はオートレイアウトを使って自動改行するようにしています。どれだけ長文を入力してもメモの横幅が変わらないので、見た目をきれいに保ちつつ、入力に集中できます。
作成者アイコン・メモの色はバリアントでかんたん選択
メモの色と作成者のアイコンは、コンポーネント化してバリアント機能を適用しています。
メニューから自分の名前を選択すればアイコンが変わり、「デザイン」「仕様」「修正」など何についてのメモかも選択すれば、簡単に背景色が変わります。
メモの色は、デザインがきいろ、仕様がうすむらさき、修正があかです。そのほかに予備（デフォルトで作成されていた色）が2つあります。
コンポーネントはまとめて管理。メモはメンバーのアイコンがないパターンも用意しています。
チームライブラリーでどのプロジェクトでも使える
necco memoはアセットとしてチームライブラリーに登録し、どのプロジェクトページからでもドラッグ&ドロップして一発でワークスペースに貼りつけられます。
社内のメンバーといっしょに「ここはこうした方が使いやすいかな？」「この方がよくないですか？」とわいわい話しながら necco memo が完成しました。
ペアデザインが浸透しているneccoらしく、業務改善もペアデザインです。
実際の使用例
necco memoが実際にどうやって使われているのか、最後に少しご紹介します。
複数の要素が連動するUIについてのメモ。エンジニアさんに伝えたい仕様と、デザインについての希望を書いてます。「これを見てこうして！」というものではなく、「こうしたいと考えてますがどうでしょう？」という思いで書いてます。
DropboxファイルのURLを貼ることも多いです。実装時にはFigmaを見てもらうので、デザインのフレーム付近に貼っておけばSlack、Finder、Figma…などアプリケーションを行き来する必要がありません。
もちろん「URLを貼ったら私の作業完了！」ではなく、Slackでメンションをつけて「ここに動画（画像）URL貼っておきました！」とエンジニアさんにお伝えします。
まとめ
Figmaでのコミュニケーションをスムーズにするために「necco memo」を作ったお話しでした。メンバーのメモや制作に関する会話がワークスペースで繰り広げられているのはにぎやかで楽しい面もありますが、重要な情報、最新の情報を見逃してしまう可能性もあります。
necco memoはチームのコミュニケーションをわかりやすくし、話をするきっかけにもなってくれるので、今後もどんどん活用していきたいです。
2022.5.18 追記：Figma Communityに公開
necco memoをFigma Communityに公開しました！🎉
「necco memo – Sticky notes」をFigma Communityに公開しました。
だれにでも使えるようになったので、よければご活用ください。
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
（2024年11月時点）
田口 冬菜
Fuyuna Taguchi
三重県伊勢市生まれ。地元の二次救急病院で約6年間理学療法士として約6年働き、趣味ではじめたデザインにハマってデザイナーへ転職。転職のタイミングでより成長できる環境を求めて東京に引っ越し。都内のデザイン会社1社を経て、2020年からneccoに入社した。入社後にはモーションデザインのスキルを身につけ、現在デザイナー・モーションデザイナーとして働いている。個人ではブログを書いたり、たまに動画・映像関連のメディア出演をしたりしている。著書に『これからはじめるFigma Web・UIデザイン入門』（マイナビ出版、2022）がある。インテリア、本、コーヒー、あまいもの、散歩、人の姿勢・動作観察が好き。
