個人開発におけるデザイナーさんとの協業
+4

個人開発におけるデザイナーさんとの協業

昨日リリースしたアプリTOTOCについて、こういうコメントをいただいた: アプリ紹介画面のスクリーンショットから「プロ感」が伝わる感じ。デザイナーさんとの協業ってどうやってるんだろう。 そのスクショはこんな感じ。 (人やペットを認識して自動で動画を撮影開始/停止するアプリ。無料) 個人開発では Chopper, Somato, TOTOCとすべてDai Torii(@daitorii)さんにデザインをお願いしている。 というわけで本記事では、僕と鳥居さんがどんな感じ

スキ
54
エンジニア・コーダーに好かれる治安の良いデザイン
+9

エンジニア・コーダーに好かれる治安の良いデザイン

webデザインを作っていると、ここってどう作ったら実装しやすいんだろうって考えたりしますよね。 デザインシステムがきちんと整備されている会社ならともかく、まだUIに関しては発展途上で、デザイナー各人にお任せだよっていうところもまだまだ多いんじゃないかなって思います。 デザイン制作と実装者が同じ人なら問題ないかと思いますが、デザイナーとコーダー・フロントエンドが分業している場合だと、実装しづらいデザインを渡され、不要な工数が嵩んでしまいエンジニアにとってストレスに…なんてこと

スキ
9
【Figma】コンポーネントの命名規則とオススメ運用ルール①(Icon, Image編)
+11

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

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

スキ
22
【Figma】デザインファイルの整理方法を考える
+6

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

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

スキ
20
ユーザーに寄り添ったデザインで、次世代のコミュニケーション文化を創る――ミラティブデザイン部の今と未来
+7

ユーザーに寄り添ったデザインで、次世代のコミュニケーション文化を創る――ミラティブデザイン部の今と未来

「わかりあう願いをつなごう」をミッションに掲げ、スマホゲーム配信プラットフォーム『Mirrativ』の開発を続ける株式会社ミラティブ。アプリのUI/UXデザインと、3Dアバター機能エモモのデザインを担当するデザイン部は、ユーザー視点に立った体験の改善を目指し、日々試行錯誤を重ねています。デザイン部を率いる渋谷 英次と、CPO(最高プロダクト責任者)の大野知之が、ミラティブデザイン部の今と未来について語ります。 CPO 大野知之(おおの ともゆき) 2010年、株式会社ディー

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

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

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

スキ
15
STORES レジ リリースの舞台裏〜デザイナー編〜
+4

STORES レジ リリースの舞台裏〜デザイナー編〜

先日リリースを迎えたSTORES レジ。その舞台裏ではどのようなことが起きていたのでしょうか。全4本にわたるシリーズでSTORES レジのお話を聞いていきます。第一回目は、デザインを担当した氏原 諒子(うじはら・りょうこ)さん、加藤怜(かとう・れい)さんによる対談です。 初めてのアプリ開発 ──STORES レジのデザインのなかで、お二人がそれぞれ何を担当されていたのかを教えてください。 氏原:今回デザインしたものはアプリとダッシュボードに分けられるのですが、私はアプリ

スキ
23
[iOSアプリ]個人開発でSNSアプリ作ったよ
+15

[iOSアプリ]個人開発でSNSアプリ作ったよ

先日個人開発したwebサービスをリリースしました。 私はデザイナーとして入っているので、UIについての内容がメインになります。(エンジニアの旦那さんとの夫婦での共同開発です) ビジュアルデザインやUI設計については、かなりこだわりを持って作ったので、どのような意図でデザインを作ったか、個人的な備忘録も兼ねて書いていこうと思います。 ▼AppStoreリンク どんなアプリなの?ざっくり説明すると、完全匿名の疑問解消系SNSです。 Twitterのように自分の思っていること

スキ
25
iOS とAndroid の違い クロスプラットフォームのアプリデザインで特に気をつけるべき点

iOS とAndroid の違い クロスプラットフォームのアプリデザインで特に気をつけるべき点

私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォーム

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

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

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

スキ
4