画像ガイドライン
このページの目的は、画像ファイル形式に関するガイドラインを提示することです。
これらのガイドラインから外れると、制作時間が増加することにご注意ください。
このページの目的は、画像ファイル形式に関するガイドラインを提示することです。想定される読者は、デザインツールに不慣れな方や、about.gitLab.com や印刷物などの項目に取り組む際の私たち独自の要件に詳しくない方です。
これらのガイドラインに従う画像を、パートナー/ベンダー/クライアントに依頼することを強く推奨します。例として以下のようなものがあります:
- パートナーページ
- イベントスポンサー
- ケーススタディ
- 比較ページ
- Trusted by セクション
ファイルサイズ制限
私たちのウェブサイトには 2MB のファイルサイズ制限があります。画像アセットを提供する際はそれに合わせて計画してください。
やるべきこと・やってはいけないこと
- Google ドキュメント、PowerPoint などの中に画像を入れて提供しないでください。zip ファイル、Google ドライブのフォルダー、または git リポジトリで画像ファイルに直接リンクしてください。
ロゴ
- すべてのロゴは .SVG、.EPS、.AI などのベクター形式で提供してください。SVG が望ましいです。
- SVG はウェブネイティブな形式で、現代のあらゆるウェブブラウザーが読み取れます。
- ベクター形式はあらゆるサイズのデバイスに対してきれいに拡大縮小できます。
- SVG は style 属性ではなく、presentation 属性 を使って保存する必要があります。
- Presentation 属性はウェブサイト構築時に扱いやすいです。
- すべてのフォントとタイポグラフィはアウトライン化 する必要があります
- ほとんどのユーザーは、ロゴで使われているフォントのコピーを持っていません。
- モノクロロゴとカラーロゴの両方を提供してください。
- 配色を制限することは、注意の集中を保つために色のコントラストを下げる方法です。
- モノクロロゴはほとんどの場所で使用されますが、特定の場所ではカラーロゴも使用します。両方あると役立ちます。
- 寸法は、幅が高さ以上である必要があります。
- 理想的には縦横比 1:1 から 2:1（幅:高さ）の範囲。
- これはロゴがウェブサイトの特定の場所に収まることを保証するために必要です。
- アートボードは適切なサイズにする必要があります。
- 例えばロゴが 400px x 200px であれば、それに合わせてアートボードをトリミングしてください。1800px x 2600px のアートボードにロゴを残さないでください。
- ロゴは ロックアップ（ロゴ + ワードマーク） であることが望ましいです（必須ではありません）。
- 例えば、円のアイコンだけや名前だけではなく、「Pepsi」という言葉とその円のアイコンの組み合わせ。
- レターマークはワードマークがないと認識されないかもしれません。ワードマーク単体は他の言語では理解できないかもしれません。レターマークは類似の頭字語と重なり、インターネット検索を複雑にする可能性があります。
- ロゴは小さなサイズでも読みやすいことが望ましいです（必須ではありません）。
- ロゴの一部の要素は小さなサイズでは読み取れなかったり判別できなかったりするほど細い・小さい場合があることに注意してください。
写真
- 写真は通常、最適化 する前の高品質ロスレス JPG として始まります。
- 私たちが写真を準備する場合、高品質ファイルを提供してください。
- ご自身で写真を準備する場合、上記のリンクに従って最適化されていることを確認し、マージ前にパフォーマンスのレビューを依頼してください。
- 画像のサイズが分からない場合は、お気軽にご連絡 ください。
- すべての写真には、私たちのウェブサイトでの使用について事前の同意またはライセンスが必要です。
- Unsplash のストック写真をよく使用します。
グラフィック
JPG や SVG が適用できない稀なケースでは、透明な背景のフルカラー PNG が好まれることがよくあります。
アニメーション
アニメーションは通常 GIF で提供されますが、特定の状況では SVG で提供される場合もあります。ブラウザーとツールのサポートが限定的なため、現時点では WebP ファイルを受け付けていません。アニメーションは 2MB のファイルサイズ制限に準拠する必要があります。2MB を超えるアニメーションは MP4 などの動画ファイルに変換する必要があるかもしれず、特別な調整と実装のための追加リードタイムが必要になります。
