もっと気軽に！デザイン言語化ワークに取り組めるアプリを公開しました 🎉

こんにちは！12月から新カリキュラムモニターとして参加している『くろ』です 🐣

Web・UI・グラフィックに幅広く興味があり、NOT では日々刺激をもらっています。ovice の端の方でもくもくしていることが多いです。

先日、デザイン言語化シートのアプリ版を公開しました 🎉

デザイン ( 画像 ) を選んで、ステップに沿って記入していくだけで、今まで Figma で作っていたデザイン言語化シートが簡単に完成します。

入力したデータはすべてアプリ内に保存されて、PDF にまとめて書き出すこともできます。使い続けていくうちに、自分専用のデザインのネタ帳が自然とできあがっていくようになっています（ この機能はひろきさんからのリクエストがきっかけで生まれました ）。

PC でもスマホでも使えて、インストールもログインも不要です。ブラウザからアクセスするだけで、すぐに使い始められます。

▼ アプリはこちら

この記事では、まずアプリを作った理由と大切にしていることを紹介します。そのあと各機能の使い方を簡単に解説して、最後に制作プロセスにも触れます。

このアプリができた理由

言語化ワークに取り組むには、PC で Figma を開いて画像を貼り付けて、テキストの位置を調整して……という細々とした作業が必要で、それがワークに向かうハードルになっていると感じていました 💭

やろうと思っても、つい後回しにしてしまう。その小さな摩擦をなくしたくて、Figma を開かなくてもブラウザやスマホだけで言語化シートを作れるようにしました。

このアプリで大切にしている３つのこと

1. プライバシーへの配慮 🔒

入力したデータはすべて、アプリを使っている端末にのみ保存されます。外部のサーバーに送信されたり、誰かに見られることはないので、安心してお使いください。

言語化ワークのうち、特に『5. 原体験との接続』はパーソナリティの根幹に関わることも少なくないと思っています。もし外部にデータを保存する設計にしてしまうと、原理的に開発者は全ユーザーの入力データを閲覧できる状態になってしまいます。そうならないよう、ユーザーが入力したデータが端末の外に出ない設計にしました。

言語化ワークは課題としてだけでなく、視覚表現と言語や身体感覚をつなげるための汎用的なフレームとしても役立つものだと思っています。課題の提出時だけでなく、個人的に取り組む場面でも安心して使ってもらえるアプリを目指しました。

2. 気になるデザインを見つけたら、すぐ取り組める 📝

インストールもログインも不要で、PC でもスマホでも使えるようにしました。

外出先でふと気になるデザインを見つけたとき、その場でスマホからワークに取り組めます。隙間時間にさっと始められるよう、開いてから入力を始めるまでの手数をできるだけ減らしました。

3. 使い心地にこだわった UI 📱

どんなに機能が便利でも、使っているうちに感じる小さな違和感が積み重なると、「日々の生活の中で使ってみよう」とはなかなか思えないものです（少なくとも自分はそうです）。

UI の細かい動きや、OS やブラウザごとに異なる挙動をできる限り制御して、触っていて気持ちのよいアプリにすることを目指しました。特に macOS + Chrome、iOS + Safari での利用を想定して動作を調整しています（ 他にも Windows, iPadOS, Android での動作検証も行っています ）。

言語化シート作成機能

PC 版 🖥️

PC 版では、馴染みのある言語化シートのレイアウトをそのまま UI に落とし込みました。左側に画像、右側に4つのセクションが並ぶ構成です。

❶に画像をドラッグ&ドロップするかクリックして選択したら、右側のセクションを順番に記入していきます。各項目には例文も表示されるので、参考にしながらワークを進められると思います。

すべての項目を入力すると『シートをダウンロードする』ボタンが緑色になり、シート画像をダウンロードできます ✅

すべての項目を自分の言葉で埋めることがワークの大切なポイントだと思うので、あえてこの設計にしています。とはいえ、どうしても思いつかないときは何か仮で入力して先に進めることもできます。

スマホ版 📱

iOS の Safari では、しばらくアプリにアクセスしない期間が続くと保存されているすべてのデータが自動的に削除されることがあります。ホーム画面に追加しておくとデータが別枠で管理されるようになり、勝手に削除される心配がなくなります。さらに、普通のアプリのように画面を広く使えるようになるうえ、オフラインでも使えるようになります。使い勝手がぐっと良くなるので、ぜひホーム画面に追加してお使いください。

スマホ版は、小さい画面でもデザイン全体を確認しながらワークに取り組めるよう、PC 版とは異なる UI にしています。
まずステップ❶で画像を選択します（その場で撮影することもできます）。

画像を選択すると画面下部に入力欄が表示されます。左右スワイプで項目を切り替えながら順番に記入していきます。スワイプしても入力状態が維持されるので、テンポよくワークを進められると思います。

ステップ❸以降では、ひとつ前のステップで入力した内容と例文がガイドとして表示されるので、流れに沿って進めやすくなっています。

すべての項目を入力すると『シートを保存する』ボタンが表示されます。iOS では保存ボタンを押すと共有メニューが開き、画像の保存はもちろん、そのまま Slack に共有することもできます。

あつめたデザイン（ストック機能）

『あつめたデザイン』をクリック / タップすると、これまでに言語化したデザインが一覧で表示されます。

プライバシーを考慮した設計上、データは端末内にのみ保存しているため、複数端末での同期には対応していません。

ただし、保存データを一括でエクスポート / インポートできる機能があるので、スマホにデータが溜まってきたら PC に移すといった使い方が可能です。ワークがひと段落したら、PC にまとめておくのがおすすめです。

右下のボタンからは、これまでに作成したシートをひとつの PDF にまとめて出力することもできます。振り返りや自分専用のデザインのネタ帳としてお使いください。

隠し機能：Markdown 形式で書き出し（ PC 版限定 ）

PC 版で「zip」とタイプすると、入力データを Markdown 形式に変換し、画像データとまとめて zip でダウンロードできるボタンが出現します（「あつめたデザイン」の一覧画面でも同様です）。

Notion にコピペする、Obsidian で管理する、NotebookLM や RAG に組み込んで自分専用のデザイン言語化データベースを作る……など、ぜひ自由に活用してみてください。

その他のイースターエッグ 🥚

PC 版では左下、スマホ版では最初の画面の最下部にある小さなハートをクリック / タップすると、数字が表示されます ❣️

これは全ユーザーがこれまでにこのアプリで作成したデザイン言語化シートの合計枚数です（この数値のみ外部のサーバーに記録しています）。ときどきチェックしてみて、数字が増えていたら「みんなも頑張ってるんだな〜」とちょっとした励みにしてもらえたらうれしいです。

他にも、PC版のシートの右下にある I'm Hopping のロゴをクリックすると軽快に跳ねたり、クリックできない灰色の「シートをダウンロードする」ボタンを押すと震えたり（ 押しすぎに注意 ）、ちょっとした遊び心も散りばめています。ぜひ日々の言語化ワークで使ってもらえたら、とてもうれしく思います ☺️

制作プロセスについて

詳しく書き始めるととても長くなるので、ここでは簡単に紹介します。もし詳しく知りたい方がいたら気軽に教えてください。また別の記事にまとめようかなとも思っています。

• 制作期間：約 20 日

• 使用したツール：Figma、Claude Code（ Opus 4.6 ）、Codex app（ GPT-5.3-Codex Extra High ）

• かかった費用：約 400 ドル ( 相当のトークンを使用 )

仕様の検討・デザイン・実装をいったりきたりしながら、試行錯誤して作りました。体感としては、0→90 を作る時間と 90→100 に仕上げる時間が同じくらいでした ( OS やブラウザごとに異なる挙動への対応や、まれに起きる特殊なケースへの対処に特に時間がかかりました ) 。

コードの 99% は AI を使って書いています。作りたい機能や仕様を自然言語で AI に伝えて、細かいレイアウトやアニメーションの調整のみ手作業で行いました。実装の詳細はほとんど見ていません。

コーディングの知識がほとんどなくても、AI を使えば Web サイトや簡単なアプリが作れる時代になったと実感しています。何かアイデアを思いついたら、AI と一緒に形にしてみると面白いかもしれません。

自分なりに悩みながら作りましたが、デザインもコーディングもまだまだ勉強中の身なので、プロの方から見ると至らない点も多いかと思います。使ってみて気づいたことやフィードバックなど、どんなことでもお気軽にお声がけいただけるとうれしいです（ ovice や Slack の DM 等 ）。

最後に、アプリのテストにご協力いただいた皆さん（ azuさん, nahoさん, Rioさん, Yuiさん / アルファベット順 ）、そしてアプリの公開を快く許諾してくださったひろきさん、本当にありがとうございました。

▼ アプリはこちら

ここまで目を通してくださった方もありがとうございます 🖊️