Components
Grid
グリッドを使用することで、ユーザビリティが高く、整ったデザインを簡単に再現することができます。
また、効率的にデザインできるようになります。
For PC
1490pxのデザイン幅に対して10pxピッチのグリッドがベース。
コーポレート、IRサイトでは左右に70pxずつのマージンを設けています。
Example of Use
コーポレートサイトトップページ
IRサイトトップページ
コーポレートサイトニュースページ
コーポレートサイト会社概要ページ
For Mobile
375pxのデザイン幅に対して10pxピッチのグリッドがベース。
左右は40px、中央に30px分のグリッドを設けています。
Example of Use
IRサイトトップページ
コーポレートサイトPotalページ
コーポレートサイトニュースページ
コーポレートサイト会社概要ページ
Button
背景色や機能に合わせて複数のボタンを使い分けます。
Filled Button
基本のボタン。幅は可変です。
アクションを強調したい場合にLabelの後ろに任意のアイコンを付けることができます。幅は可変です。
前のページに戻るアクションの場合のみ、Labelの前にアイコンをつけることができます。幅は可変です。
スペースが限られている場合や機能がわかりやすい場合は、アイコンのみのボタンを使用できます。
States
Default
Hover
Ghost Button
基本のボタン。幅は可変です。
アクションを強調したい場合にLabelの後ろに任意のアイコンを付けることができます。幅は可変です。
前のページに戻るアクションの場合のみ、Labelの前にアイコンをつけることができます。幅は可変です。
スペースが限られている場合や機能がわかりやすい場合は、アイコンのみのボタンを使用できます。
States
Default
Hover
Confirm Button
主にお問い合わせページで使用します。
States
Default
Disabled
Checkbox
States
Active
Inactive
Disabled
Radio Button
States
Active
Inactive
Disabled
Table
Table Header
テーブルの見出しに使用します。
Table Data
テーブル内のテキストや数字を表示するために使用します。
Example of Use
Table HeaderとTable Dataを組み合わせてテーブルを作成します。
以下は一例です。
Tag
記事などのカテゴリを明示するためにタグを使用します。
用途に合わせて以下3種類のタグを用意しています。
For News Release
Default
Hover
For Solution
Default
For DG Portal
Default
Hover
Navigation
Header
常に画面の上部に表示させ、他のページへのアクセスをしやすくします。
For Corporate Site PC
For IR Site PC
For Corporate Site PC Expanded
For Corporate Site Mobile
For IR Site Mobile
For Corporate Site Mobile Expanded
Footer
すべてのページ、関連サイトへの導線を配置し、サイトマップとしての役割を果たします。
For Corporate Site PC
For IR Site PC
For Corporate Site Mobile
For IR Site Mobile
Side Navigation
情報を取得しやすくするため、情報の多いページにはアンカーリンクナビゲーションを設置します。
Active
Inactive
Example
For Group Company/Service Web Site
デジタルガレージグループに関連する企業サイト・サービスサイトは、フッターの最下部に以下のコンポーネントを配置してください。
For PC
For Mobile
Example of Use
Exceptions
以下の場合を例外とし、コンポーネント配置の対象外とします。
- すでにグループロゴを配置せず公開しているもの
- 他企業との協業により成立している企業・サービス
- その他、社内で例外として認められたもの
Breakpoints
コーポレート・IRサイトは以下の設定を推奨します。
- 〜359px: 360pxの時の見た目で縮小される
- 360〜999px: Mobile Designが反映され、幅のみ変わる
- 1000〜1279px: 1280pxの時の見た目で縮小される
- 1280〜1800px: PC Designが反映され、幅のみ変わる
- 1801px〜: 左右の余白が広がる