画像
概要
システムやWEBサイトに掲載する画像で注意する点を共有します。
ルール
画像形式
掲載する画像形式は以下の通りとします。
- .jpg: 写真は基本的にJPGの高画質を採用します。（※メインビジュアルの場合は要件等です。）
- .png: 背景を透過させたい画像に使用しますが、サイズが大きくなる場合は極力使用を避けてください。
- .gif: べた塗のイラストを掲載する際に使用します。
- .svg: サイズを変更するケースが多い画像（例えばアイコンなど）や、ロゴで使用します。
画像サイズ
ページ全体で2MB以内に収まるように意識してください。メインビジュアルなど、画像で魅せるページの場合は全体容量をやむなく超える場合もあるかと思いますが、ユーザー離脱を考慮に入れつつ検討してください。
魅せる画像サイズとしては 1920px×1080px 程度を参考値としてください。（※一般的なパソコンの画面サイズ）
権利について
著作権の所在が明確ではない画像に関しての使用は一切禁止します。また、画像の中に写りこむ人物や建物の扱いについては十二分に注意してください。特にフリーのダウンロードサイトから素材を入手する際は、利用規約などを必ず確認の上使用してください。
改変対象ファイル
- CSS:
- title.scss 内に改変対象箇所があります。
画像配置
画像が重要な場合は文章の左側、挿絵で入れる場合は文章の右側に配置してください。また、余白が埋まらないなど、理由が曖昧な状態での写真の掲載は容量の無駄遣いになるので控えてください。
画像の表示サイズは、画像を包括する要素の幅 100% サイズで表示されます。レスポンシブウェブデザインに適しています。
右画像
テキストサンプル
（画像が重要な場合は文章の左側、挿絵で入れる場合は文章の右側に配置してください。また、余白が埋まらないなど、理由が曖昧な状態での写真の掲載は容量の無駄遣いになるので控えてください。）
左画像
テキストサンプル
（画像が重要な場合は文章の左側、挿絵で入れる場合は文章の右側に配置してください。また、余白が埋まらないなど、理由が曖昧な状態での写真の掲載は容量の無駄遣いになるので控えてください。）
画像配置のレイアウトにつきましては、グリッドをご覧ください。