UIデザイン確認まとめ - Paku-Soba/Svelte-example-app GitHub Wiki

  • SCRIBE ASSIST_UIデザイン案
  • 必要なUIデザイン洗い出し。
    • Layout,Table,Dialog,Button,Lodingなど。
    • すぐに実装できそうなUIデザインと検証が必要なデザイン有り。
      • すぐに実装できそうなデザインの大枠を実装する。
      • UIデザイン機能として、モード変換機能は現段階で優先度低い為、検証及び実装しない方針にする。
        • ニーズがある場合、対応が発生する可能性がある旨、「議事録システム」チームに連携予定。

→ 大枠実装しつつ、検証が必要なデザインを洗い出しする。

  • 画像、アイコンの取り扱い考える必要あり。
    • デザインの大枠を優先する。
    • TailwindCSS,daisyUIライブラリでデザイン実装を進める。
      • 対応できるデザインと調査が必要なデザインを区別する為
        • 必要に応じて、ライブラリ調査する。

UIデザインレビュー

MEMO

◾️ 2/27(火)時点_阿久津さんとMTG

  • 今までの流れ
  • デザインの現時点での仕様
  • これから変更する予定
    • プロジェクト状況
      • 全体UI/UX仕様及び機能はまだ固まっていない。
      • デザイン仕様含む機能の変更点も発生する。
    • 画面遷移確認
      • ロゴは確定、ロゴの横文字はペンディング。
      • テキスト（UX文字表現）修正は、全画面発生する。
    • 議事録作成画面
      • 左上、ボタンクリック
        • Step1,2,3が表示される
        • 画面上にて議事録作成できる
          • (UI案）真ん中の画面上でもStep選択して作成できるように考える予定
    • プロンプトについて
      • 2,3,4,5 基本機能
      • 6,7,8 ユーザーがオリジナルで作成できるプロンプト、タイトル含む。
        • 機能は、「議事録システム」側で実装
    • Step1.
      • タイトル入力できるスペースを作る予定
    • Step2. グレーと表示
      • チェックマーク
      • アップロードする機能
        • ローディング中（ピンク_動くアシストくん）→ アップロード中
      • 時間は、入力すると濃くなる
        • 時間指定ミスった時のエラー表示（赤色、ダイアログ）
        • → イラストは阿久津さんが作成予定
      • 右側の「作成中」
        • 右側上、ステータスが表示される。
          • 順番待ち
        • 更新ボタン
          • クリックするとステータス状態が更新させる。
          • ユーザーが選択したプロンプトが表示される。
            • アコディオンUI
    • Step3.
      • 不要との意見あり。
      • アップロード完了表示で良いとのこと（UI検討中）
        • 右側_作成済み
        • ステータス完了状態
          • ステータス非表示
    • プレービューボタン
      • クリックすると画面上、一覧が表示される。
    • プレビュー画面
      • 井上さん意見
        • プロンプトで議事録内容も載せる？
          • 表示させる内容が変わる可能性あり
        • 現段階では、文字起こしのみ表示させる
        • 再作成できる機能（ボタン）
          • どのプロンプトを選択したのか
          • 吹き出しで表示してユーザー側がわかるようにする
        • 要約の変更アイコン
          • クリックするとダイアログ表示
          • 「再作成」に変更（テキスト変更）、プロンプト選択するselect
          • UI変わる
          • 時間指定もできるようにする
          • 入力の量が多い場合、スクロールバーを表示させる
          • 再作成するボタンをクリックすると
          • 右側に作成中に表示
          • 再作成すると、もともとファイルに上書きとなる為
          • 作成中にステータス表示
    • 履歴一覧画面
      • 学習データの提供（リセットされるため
        • 削除確定
          • どうするかは、「議事録システム」チームで検討中
      • 検索機能は削除
        • 実現不可の為
      • プロンプト表示は、一覧（Table UI）
        • 再作成画面(ダイアログ)
          • 仕様は同じである
        • 再作成仕様について、コメント確認
        • 26page 存在しない履歴一覧画面となる。
          • ステータス完了すると
          • アイコンがアクティブになる
          • Newのマーク
          • 不明な点は、コメント内容を確認する
          • 確認が必要な部分は阿久津さんへ問い合わせ
          • コメント欄活用OK
    • プロンプト一覧画面
      • ユーザー側が一覧追加できる機能あり
        • オリジナルプロンプト表示
          • 編集機能について、直接するのか、ダイアログ表示なのか
          • UI統一するのか（検討中）
    • ご利用にあたって画面
      • ユーザー側への注意点をまとめて表示
        • テキスト内容は、井上さん検討中
        • 議事録保存期間2~3ヶ月

UIデザインレビュー実施後、進め方

TODO

  • XD開発者用リンクでUIデザイン確認。
    • デザインスペック共有について確認する。
    • マージン、色、フォント、アイコンなどSVG状態でダウンロードを試す。
    • 活用方法確認する。
      • コード便利に書く方法模索する。
      • 開発者リンクを活用すれば、コードを効率よく書けると考えた為、試してみる。
  • 画面上の機能を理解する必要あり。
    • UIデザインだけ考えるには実装に限界がある。
    • 実装する時は、議事録システムの機能も合わせて考える。
      • 各画面上のUIデザイン仕様含む、機能が定まってない為、現段階でのデザインでできることを考える。
        • わかる範囲で各画面の機能を洗い出す。 ※ 阿久津さんとのMTG及びXDリングのコメント参考にする。
        • 変更点が生じる部分は除く。

→ 画面上の機能の仕様は、固まってない為、現段階でのUIデザインのみ実装を進める。

  • 部品の取り扱い等はPJ方針で決めた方が効率的であると判断。デザインをソースコードで起こすことを優先にする。
  • 3月末までに、サンプルコードとして「議事録システム」チームへ連携できる状態にする。（ドキュメント含む。）
    • 目処感は、3月末。但し、あくまでもサンプルコード連携の為、画面一覧を洗い出しし、早めに連携できそうだったら出来上がった段階で連携する。
    • 環境構築したリポジトリは、新人の方々が検証する場として使用しても良さそう。
    • mainブランチでフロント側の動くものに実装する。