←BACK TO WORKS一覧へ戻る
CORPORATE
AKASHIKI WORKS FINDER
制作会社・BtoB / Webツール
制作実績を条件から探す検索ツール。React + TypeScript で構築した4軸フィルタ・検索・比較のダークUI。
このプレビューは実サイトを埋め込み表示しています。レイアウトは実際の閲覧環境と異なる場合があります。
CONCEPT
制作実績を条件から探すための検索ツール。ジャンル・サイト種別・制作目的・技術要素の4軸フィルタ、キーワード検索、6種のソート、3種の表示切替、最大3件の比較パネルを React + TypeScript で実装し、探索状態をURLに永続化して「この条件の実績」をそのまま共有できるようにした。
背景・課題
「作品を並べる」ではなく「条件から見つける」ツールとして、24件の実績に対する4軸の絞り込みと検索・ソート・比較を1画面で完結させた。探索状態をURLとローカルストレージの双方に持たせ、リロードしても共有しても同じ結果に戻る設計にしている。
DESIGN PERSPECTIVE
TECHNOLOGIES & FEATURES
主な機能
フィルタリングキーワード検索ソート表示切替作品比較URL永続化PDF出力
使用技術
ReactTypeScriptViteCSSframer-motion
CMSなし
フォームなし
アニメーションなし