PRO 🍚 ギット飯 リポジトリ紹介 · 公開サンプル
oil-oil / oil-ui ↗AI デザインスキル
「きれいにして」の次に、 どの方向かを一緒に選ぶツール
Oil UI は、AI コーディングツールにデザインの進め方を加えるスキルです。異なる案を並べて比べ、選んだ方向を実際の画面で磨く作業を支えます。
67秒の動画3案の比較公式資料にもとづく手描き解説
デザインの方向を一緒に選ぶ6段階
韓国語音声・字幕の動画です。異なる案の比較、選択、実画面の確認を手描きで説明します。ギット飯の説明図で、Oil UIを実行した録画ではありません。
01 · 公式の画面を読み解く
同じ内容でも、最初に伝わるものは変わる
作者は架空のモナ・リザ複製画展を3つの方向で表現しています。展覧会の紹介と来場予約という目的は同じでも、作品・物語・余白の何を先に見るかが変わります。
01 / Thirty Centimeters
代表的な一枚を印象に残したいなら
- 画面から分かること
- 暗い背景に作品の顔を大きく拡大し、大きな見出しを重ねています。
- ギット飯の活用提案
- 代表する製品や作品そのものが選ぶ理由になる紹介ページに参考になります。中心となる画像に視線を集める方向です。
- この方向を選ぶ前に
- 価格・仕様・日程を素早く比較する画面なら、必要な情報が後回しになりすぎないか確認してください。
作者の比較画面をすべて見る
元画像の中国語とデザインはそのまま残しています。活用提案はギット飯の解釈で、コンバージョン率や使いやすさを測定した結果ではありません。
ギット飯が仮定した状況と提案
展示をすでに知っていて、予約が目的なら？
3案目の Sfumato を出発点にします。一つの行動に絞った構成を生かし、日程と料金を予約ボタンの近くに補う方法です。一方、背景の物語を知ることで見に行きたくなる展示なら、2案目の Extra! 1911 を先に検討します。
02 · 自分の作業に当てはめる
何を任せて、どこを自分で選ぶ？
例えば、新しい展覧会の予約案内ページを作ると仮定します。
- 01
自分で用意
目的を伝える
来場者に展示を理解し、予約してもらいたい。作品写真・日程・料金と、必ず載せる内容を渡します。
- 02
Oil UI + AI コーディングツール
異なる方向を比べる
構成・書体・色・主要画像が異なる案を比べます。好きな部分と合わない部分を具体的に選びます。
- 03
一緒に確認
選んだ方向を磨く
選んだ画面を実装し、PCとモバイルの実際のスクリーンショットで確認します。主役が伝わるか、文字を読めるか、ボタンを押せるかを見て、不要な装飾を減らします。
予約を受け付ける機能は別途つなぐ必要があります
デザインに予約ボタンがあっても、予約・決済・会員機能まで完成したわけではありません。業務ルールとデータ接続はプロジェクトで実装・検証する必要があります。
こんな依頼から始められます · ギット飯の例
Oil UI で展示予約の案内ページを3つの異なるデザイン方向で比較して。初めて見る展示なので、作品写真、日程、料金を理解してから予約できるようにしたい。必須情報は3案でそろえ、モバイルでも比較できるようにして。
03 · 自分に必要かを考える
今、どこで困っていますか？
デザインは決まり、ボタンやチャートが欲しい
まずコンポーネントを確認React のプロジェクトなら、Arc Library のように部品と例がそろったツールの方が今の作業に直接役立つかもしれません。
Arc Library の例 ↗3つのツールは組み合わせることもできます。ここでは今解決したい仕事を基準に、最初の選択を分けています。
導入前に確認する3点
- AI コーディングツールはありますか？ スキルで使うモデルやツールの費用は別途確認してください。
- 必要なのは新しい画面の方向探索ですか？ 既存サービスの複雑な導線修正、専用カードコードや特殊効果など、Oil UI Proの範囲と区別してください。
- 案を選ぶ基準はありますか？ ブランド、必須情報、モバイルで行う操作を先に書き出しましょう。