シェアする
更新日：2024年06月27日
デザインシステム
- 目次
レイアウトについて
デバイスに合わせてサイズを最適化しています。
Breakpointsを参考にしています。
ナビゲーションメニューをlgで活性化しています。
一覧画面については、xsで1列、smで2列、mdで3列、lgで4列、表示しています。
下にmargin:2、左にpadding:1で整形しています。
画像について
OGP画像については、1200×630pxで最適化しています。
ポスター画像については、1:1の正方形としています。
ボタンについて
| ボタン | 説明 |
|---|---|
| 押下すると表示領域がページ上部へ動きます | |
| 押下するとリンク先に遷移します | |
| 押下するとリンク先を新しいタブで開きます | |
| 押下すると折りたたみが開きます | |
| 押下すると折りたたみが閉じます | |
| 押下すると閉じます | |
| 押下するとクリップボードにテキストをコピーします | |
| 押下するとファイルを選択します | |
| 押下するとファイルをアップロードします | |
| 押下するとファイルをダウンロードします | |
| 情報を登録します | |
| 情報を編集します | |
| 情報を削除します | |
| 情報を検索します |
アイコンについて
| アイコン | 説明 |
|---|---|
| 課金コンテンツです | |
| 無料コンテンツです | |
| 必須入力です | |
| 任意入力です | |
| 動物種別：いぬです | |
| 動物種別：ねこです | |
| 動物種別：うさぎです | |
| 動物種別：とりです | |
| 動物種別：その他です |
パンくずリストについて
ページタイトルより上部に表示最大数2として設置しています。
下記はサンプル
ステップインジケータについて
下記はサンプル
STEP3
primary
secondary
モーダルについて
widthは320,640をベースとしています。
テキスト入力について
下記はサンプル
helperText
1文字超過
helperText
ラジオボタンについて
下記はサンプル