
Color Atlas
APP | TypeScript
視界に入る見た目は本質を表しているとは限りません。この瞬間この場所ではない、街全体、朝昼晩を1つのデザインに仕上げるにはどうしたら良いか、私は抽象化が有効ではないかと考えています。単純化してまとめ、再構築する。それは部品をまとめるReactの思想にも近いものです。モダンアートとモダンフロントエンドの視点と着想からこのアプリを開発しました。 ぜひ『ゲストユーザーでログイン』よりご利用ください。
https://color-atlas-rose.vercel.app使用技術詳細:
GitHubDesign
開発意図

このWebアプリの着想は、画家オットー・ネーベルの『イタリアのカラーアトラス(色彩地図帳)』です。ネーベルが色彩に着目したのは同時代の画家カンディンスキーの著書『芸術における精神的なものについて』に基づく「地上の物質に縛り付けられていない色彩」という考えを支持していた理由があります。時代は具象絵画から抽象絵画への変革期でした。色や形を外観から切り離したことで本質的なものを探る現代のデザインへと繋がっています。 景観から色彩の印象のみを採取するという取り組みに私は興味を抱きました。ただ、色鉛筆やスケッチブックを持って出かけるのは少し億劫に感じることがあります。そこで、このアプリを考えてみました。ネーベルの色彩地図帳のような多くの色を採取することはできませんが(アプリでは最大6色です)、意図は反映できたと考えています。ネーベルが色彩地図をもとに新たなアートを制作したように、デザイナーやその他の人たちがデザイン制作を行う上でこのアプリが役立てればと思い開発しました。
アプリの詳細




オットー・ネーベルのカラーアトラスでは、風景の中である色彩の量が多ければ多いほど、またある「響き」が際立てば際立つほど、幾何学的な形や色彩は大きく描かれました。全体の印象で重要度の低い色彩は小さく描かれ、支配的な色彩は大きく描かれました。場所だけでなく時間帯や、その響きの「肖像」を描いた対象物—家の壁や漁船、オリーブや松の林、山脈や海岸など—の名を記していました。 このアプリでは、これに倣って写真に占める色の比率によってカラーパレット内の色の範囲が変わるようになっています。写真の持つ印象によってパレットの形を5つの基本図形から選べます。パレットと共に日付、時間、メモを登録できるようにしています。また、検索で条件に合ったものだけを表示させることもできます。
利用方法と工夫点



ホーム画面で写真をアップロードすると下に写真から作成されたカラーパレットが表示されるので確認しながら5つの図形から好きな形を選択します。決定ボタンをクリックすると登録ページに移行し、場所名(カテゴリー名)を作成、またはドロップダウンから選びます。新規作成した場合はドロップダウンに新たに追加されるのでそこから選択します。必要であれば日付、時間、メモも登録できます。場所名のみ必須です。作成したパレットはマイページで確認できます。パレットをクリックすると編集ページに移行でき、パレットの形、場所、日付、時間、メモを変更できます。カラーパレット削除もできます。必要に応じて画面上部の検索アイコンから希望のパレットを絞れます。 工夫点は、マイページのレイアウトを3段階に変更できることです。上部の3つのタブで変更できます。そうすることで、他のカラーパレットと比較して見ることや俯瞰して見ることが可能になります。これはアートやデザインを見るときに近くで見たり離れて見たりすることをアプリで取り入れています。
Figmaで0からデザインを作成


アプリのデザインはFigmaで0からデザインしています。ユーザビリティを考慮し、他のアプリと仕様や見た目が似たUIも意識しています。色彩は統一感や開発しやすさのため、Tailwind CSSを選択しました。バリアントやプロパティを使用し、開発時のコンポーネント構成を意識したデザインを作成しています。 パレットの図形のアイコンはFigmaで作成しましたが、その他のナビゲーションなどのアイコンはライブラリのMaterialSymbolsを利用しています。フォントは視認性やweightのバリエーションを考慮し、robotoとnotoSansJPを選択しました。サイズとweightはTailwind CSSを使用しています。マージンなどもTailwind CSSを使用しています。コンポーネントごとのアクセシビリティはStorybookでチェックしています。Storybookを使用した開発のし易さから、コンポーネントはなるべくUIとロジック部分に分けて作成するようにしています。Figmaデザイン時はAtomic Designも意識し、コンポーネントの債務が小さくて済むようにして再利用性の高いコンポーネント作りを目指してデザインしています。
Coding
難しかった点 | ページの持つ状態の復元


クライアント側の状態をログイン画面への遷移後も保持する必要があるページの実装を行いました。 画像のcreateページではホームで作成したカラーパレット情報をJotaiで管理し、createページで利用しています。新しい場所をクリックするとDialogが開かれ値を入力して追加をすると、DBに保存、成功時にinvalidateQueriesでクライアントに即時反映、react-hook-formのsetValueで、Dropdownに追加という流れですが、未ログイン時の場合、追加ボタンクリック時に認証ページに移行するのでページがアンマウントされクライアントの状態が失われてしまいました。 そこで、sessionStorageにカラーパレットと場所の状態を認証ページ移行直前に保存し、createページに戻ってきた時に復元、削除する処理を取り入れることで、ユーザーが作成または入力したページのデータ情報を保つことができるようになりました。このページの実装はDialogを含めフォームが2つあり、認証チェックが重なるなど複雑なため難しいものとなりましたが、sessionStorageを利用して状態を保持することの勉強になりました。