isms.ad5.tech Open in urlscan Pro
162.43.121.34  Public Scan

Form analysis
2 forms found in the DOM

<form class="v-form" novalidate="">
  <div class="mt-5 w-25">
    <div class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-input--readonly v-text-field v-select v-select--single"><!---->
      <div class="v-input__control">
        <div class="v-field v-field--appended v-field--center-affix v-field--variant-outlined v-theme--light v-locale--is-ltr" role="textbox" aria-haspopup="menu" aria-expanded="false" aria-owns="v-menu-44">
          <div class="v-field__overlay"></div>
          <div class="v-field__loader">
            <div class="v-progress-linear v-theme--light v-locale--is-ltr" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100"
              style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"><!---->
              <div class="v-progress-linear__background" style="width: 100%;"></div>
              <div class="v-progress-linear__indeterminate">
                <div class="v-progress-linear__indeterminate long"></div>
                <div class="v-progress-linear__indeterminate short"></div>
              </div><!---->
            </div>
          </div><!---->
          <div class="v-field__field" data-no-activator=""><!----><label class="v-label v-field-label" for="input-42"><!---->選択項目</label><!---->
            <div class="v-field__input" data-no-activator=""><!----><input readonly="" size="1" type="text" id="input-42" aria-describedby="input-42-messages"></div><!---->
          </div><!---->
          <div class="v-field__append-inner"><!----><i class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon" aria-hidden="true"></i><!----></div>
          <div class="v-field__outline">
            <div class="v-field__outline__start"></div>
            <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-42"><!---->選択項目</label></div>
            <div class="v-field__outline__end"></div><!---->
          </div>
        </div>
      </div><!----><!---->
    </div>
  </div>
  <div class="mt-5 w-25">
    <div class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-text-field"><!---->
      <div class="v-input__control">
        <div class="v-field v-field--center-affix v-field--variant-outlined v-theme--light v-locale--is-ltr" role="textbox">
          <div class="v-field__overlay"></div>
          <div class="v-field__loader">
            <div class="v-progress-linear v-theme--light v-locale--is-ltr" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100"
              style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"><!---->
              <div class="v-progress-linear__background" style="width: 100%;"></div>
              <div class="v-progress-linear__indeterminate">
                <div class="v-progress-linear__indeterminate long"></div>
                <div class="v-progress-linear__indeterminate short"></div>
              </div><!---->
            </div>
          </div><!---->
          <div class="v-field__field" data-no-activator=""><!----><label class="v-label v-field-label" for="input-45"><!---->自由入力項目</label><!---->
            <div class="v-field__input" data-no-activator=""><input size="1" type="text" id="input-45" aria-describedby="input-45-messages"></div><!---->
          </div><!----><!---->
          <div class="v-field__outline">
            <div class="v-field__outline__start"></div>
            <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-45"><!---->自由入力項目</label></div>
            <div class="v-field__outline__end"></div><!---->
          </div>
        </div>
      </div><!----><!---->
    </div>
  </div>
</form>

<form class="v-form" novalidate="">
  <div class="v-row">
    <div class="v-col-md-3 v-col-9">
      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-text-field"><!---->
        <div class="v-input__control">
          <div class="v-field v-field--center-affix v-field--variant-outlined v-theme--light v-locale--is-ltr" role="textbox">
            <div class="v-field__overlay"></div>
            <div class="v-field__loader">
              <div class="v-progress-linear v-theme--light v-locale--is-ltr" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100"
                style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"><!---->
                <div class="v-progress-linear__background" style="width: 100%;"></div>
                <div class="v-progress-linear__indeterminate">
                  <div class="v-progress-linear__indeterminate long"></div>
                  <div class="v-progress-linear__indeterminate short"></div>
                </div><!---->
              </div>
            </div><!---->
            <div class="v-field__field" data-no-activator=""><!----><label class="v-label v-field-label" for="input-47"><!---->First name</label><!---->
              <div class="v-field__input" data-no-activator=""><input size="1" type="text" id="input-47" aria-describedby="input-47-messages" required=""></div><!---->
            </div><!----><!---->
            <div class="v-field__outline">
              <div class="v-field__outline__start"></div>
              <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-47"><!---->First name</label></div>
              <div class="v-field__outline__end"></div><!---->
            </div>
          </div>
        </div><!----><!---->
      </div>
    </div>
    <div class="v-col-md-3 v-col-9">
      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-text-field"><!---->
        <div class="v-input__control">
          <div class="v-field v-field--center-affix v-field--variant-outlined v-theme--light v-locale--is-ltr" role="textbox">
            <div class="v-field__overlay"></div>
            <div class="v-field__loader">
              <div class="v-progress-linear v-theme--light v-locale--is-ltr" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100"
                style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"><!---->
                <div class="v-progress-linear__background" style="width: 100%;"></div>
                <div class="v-progress-linear__indeterminate">
                  <div class="v-progress-linear__indeterminate long"></div>
                  <div class="v-progress-linear__indeterminate short"></div>
                </div><!---->
              </div>
            </div><!---->
            <div class="v-field__field" data-no-activator=""><!----><label class="v-label v-field-label" for="input-49"><!---->Last name</label><!---->
              <div class="v-field__input" data-no-activator=""><input size="1" type="text" id="input-49" aria-describedby="input-49-messages" required=""></div><!---->
            </div><!----><!---->
            <div class="v-field__outline">
              <div class="v-field__outline__start"></div>
              <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-49"><!---->Last name</label></div>
              <div class="v-field__outline__end"></div><!---->
            </div>
          </div>
        </div><!----><!---->
      </div>
    </div>
    <div class="v-col-md-3 v-col-9">
      <div class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-locale--is-ltr v-text-field"><!---->
        <div class="v-input__control">
          <div class="v-field v-field--center-affix v-field--variant-outlined v-theme--light v-locale--is-ltr" role="textbox">
            <div class="v-field__overlay"></div>
            <div class="v-field__loader">
              <div class="v-progress-linear v-theme--light v-locale--is-ltr" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100"
                style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);"><!---->
                <div class="v-progress-linear__background" style="width: 100%;"></div>
                <div class="v-progress-linear__indeterminate">
                  <div class="v-progress-linear__indeterminate long"></div>
                  <div class="v-progress-linear__indeterminate short"></div>
                </div><!---->
              </div>
            </div><!---->
            <div class="v-field__field" data-no-activator=""><!----><label class="v-label v-field-label" for="input-51"><!---->E-mail</label><!---->
              <div class="v-field__input" data-no-activator=""><input size="1" type="text" id="input-51" aria-describedby="input-51-messages" required=""></div><!---->
            </div><!----><!---->
            <div class="v-field__outline">
              <div class="v-field__outline__start"></div>
              <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-51"><!---->E-mail</label></div>
              <div class="v-field__outline__end"></div><!---->
            </div>
          </div>
        </div><!----><!---->
      </div>
    </div>
    <div class="v-col-md-3 v-col-9"><button type="button" class="v-btn v-theme--light bg-info v-btn--density-default v-btn--size-large v-btn--variant-flat ml-3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span
          class="v-btn__content" data-no-activator="">編集</span><!----><!----></button></div>
  </div>
</form>

Text Content

ISMSアシスト株式会社AD5様

ページ検索

ページ検索

江口悠斗さん（前回ログイン：2023/07/07 18:20:28）
ページリスト

--------------------------------------------------------------------------------

デザインガイド (ページタイトル)

ボタン


セクションタイトル




ブロックタイトル



ページはセクション (l-section) とブロック (l-block) の2階層でレイアウトします。


ブロックタイトル



セクション・ブロック間の余白や、タイトルの装飾を統一することで、複雑なページのブロッキングを明確にします。

これはタイトルなしのブロックです。

セクション・ブロックともタイトルを持つことができますが、必須ではありません。


セクションタイトル



ボタン ボタン


ブロックタイトル


ボタン ボタン

セクションタイトル、ブロックタイトルとも、アイコン (slot:append) やボタン (slot:button) を持つことができます。


ブロックタイトル


ボタン

ブロック内の各コンテンツの余白については、

このサイズ (mt-3) を基本とします。

ボタン


特殊ブロック



ブロック名

ステートブロック (state)

承認日時

2023/07/18 17:00

承認者

片岡 高志

コメント

承認状態やコメント等の表示に用いるブロックです。


説明ブロック (INFO)



要求事項の説明等、ユーザが読むことを目的とした (操作や承認の対象ではない) 情報であることを表すブロックです。

要求事項の確認

これは通常のブロックです。

選択項目選択項目



自由入力項目自由入力項目




決定ブロック (DECISION)



単なるデータの保存ではなく、承認依頼や承認など、Pマークの「運用上」重要なアクションを促す時に配置するブロックです。

承認 差し戻し


ボタン



用途に応じてボタンの色、文言、アイコンを統一することで、直感的な操作を促します。


遷移



次の画面へのリンクするためのボタンです。

一覧画面や詳細画面から、新規登録・編集画面に移動する場合を含みます。

詳細 編集 新規登録

前の画面に戻る場合のボタンです。

一覧に戻る 編集をやめる


保存



入力したデータをデータベースに反映することを意味します。

保存登録編集


削除



データをデータベースから削除することを意味します。

削除


非保存操作



検索や、ファイルのダウンロード等を表します。

検索 ダウンロード アップロード

画面上、行を追加したり削除したりするのみで、その時点ではデータベースに反映されない操作を表します。

行追加 削除


参照



要求事項の詳細を開く等、参照操作を目的とするボタンです

要求事項の確認


意思決定



申請・承認等の、「運用上」重要な操作に用います。

承認依頼 承認 差戻し


入力UI



ひとめで入力UIとわかるようなUIデザインを採用します。


縦並び


選択項目


選択項目

自由入力項目

自由入力項目



横並び


First name

First name

Last name

Last name

E-mail

E-mail

編集


複数行


First name

First name


Checkbox

Radio 1

Radio 2

Radio 3
選択項目


選択項目


行追加


表形式



No作成者作成日1

編集削除2

編集削除


状態の表示



状態をアイコン化して統一することにより、ひとめで状態がわかるようにします。


承認状態


下書き申請中承認済差戻し


表 (TODO)



表の基本スタイルは検討中です

No作成者作成日承認者承認日承認ステータス1片岡 高志2023/7/11友藤 美保作成中2友藤 美保2023/7/11奥村 明生申請中3奥村
明生2023/7/11山野 健一2023/07/15承認済