デザイン管理

  • GitLab 12.2で導入されました。
  • GitLab 12.4で導入されたSVGのサポート。
  • 13.0でGitLab PremiumからGitLab Freeに移行しました。
  • GitLab 13.2で導入されたイシューのデザイン管理セクションに、design_management_movedという機能フラグが追加されました。以前のバージョンでは、デザインは別のタブに表示されていました。
  • イシューのデザイン管理セクションの機能フラグは、GitLab 13.4の新しい表示のために削除されました。

デザイン管理を使えば、デザインアセット（ワイヤーフレームやモックアップを含む）をGitLabイシューにアップロードし、一箇所に保存しておくことができます。プロダクトデザイナー、プロダクトマネージャー、エンジニアは、単一のソースでデザインを共同作業できます。

デザインのモックアップをチームで共有したり、視覚的なリグレッションを確認してアドレスすることができます。

概要については、デザイン管理（GitLab 12.2）をご覧ください。

要件

  • Git Large File Storage(LFS)を有効にする必要があります：
    • GitLab.comでは、LFSはすでに有効になっています。
    • セルフマネージドインスタンスでは、GitLab管理者がグローバルにLFSを有効にする必要があります。
    • GitLab.comとセルフマネージドインスタンスの両方で、LFSはプロジェクト自体に対して有効にする必要があります。グローバルに有効にすると、LFSはデフォルトですべてのプロジェクトで有効になります。プロジェクトで無効にした場合は、再度有効にする必要があります。

    デザインは LFS オブジェクトとして保存されます。画像サムネイルは他のアップロードとして保存され、プロジェクトではなく、特定のデザイン モデルに関連付けられています。

  • プロジェクトはハッシュ化されたストレージを使用する必要があります。

    新しく作成されたプロジェクトはデフォルトでハッシュストレージを使用します。

    GitLab 管理者は、Admin Area > Projectsで該当プロジェクトを選択することで、プロジェクトのストレージタイプを確認することができます。相対パスフィールドの値に@hashedが含まれていれば、プロジェクトはハッシュドストレージであると識別できます。

条件を満たさない場合、Designsセクションで通知されます。

サポートされるファイルタイプ

以下の種類のファイルをデザインとしてアップロードできます：

  • BMP
  • GIF
  • ICO
  • JPEG
  • JPG
  • PNG
  • SVG
  • TIFF
  • WEBP

PDFファイルのサポートはイシュー32811で追跡されています。

既知のイシュー

デザインを見る

デザインのセクションはイシューの説明にあります。

前提条件：

  • 少なくともプロジェクトのゲストロールを持っている必要があります。

デザインを見るには

  1. イシューに移動します。
  2. デザインセクションで、表示したいデザイン画像を選択します。

選択したデザインが開きます。拡大したり、コメントを作成することができます。

Designs section

デザインを表示しているときに、他のデザインに移動することができます。移動するには、次のいずれかを実行します：

  • 右上隅で、前のデザインに移動({chevron-lg-left}) または次のデザインに移動({chevron-lg-right}) を選択します。
  • キーボードの左 または右 を押します。

イシュー・ビューに戻るには、次のいずれかを実行します：

  • 左上隅で、閉じるアイコン（{close}）を選択します。
  • キーボードのEsc を押します。

デザインが追加されると、画像のサムネイルに緑色のアイコン（{plus-square}）が表示されます。現在のバージョンでデザインが変更されると、青いアイコン（{file-modified-solid}）が表示されます。

デザインの拡大

  • GitLab 12.7から導入されました。
  • GitLab 12.10で導入された、ズームした画像をドラッグして移動する機能。

画像を拡大・縮小することで、デザインをより詳しく調べることができます：

  • ズーム量を調整するには、画像の下部にあるプラス (+) とマイナス (-) を選択します。
  • ズームレベルをリセットするには、やり直しアイコン（{redo}）を選択します。

画像を拡大したまま移動するには、画像をドラッグします。

イシューにデザインを追加

GitLab 16.1で導入された説明文の編集機能。

前提条件：

  • 少なくともプロジェクトの開発者ロールを持っている必要があります。
  • GitLab 13.1以降では、アップロードするファイル名は255文字以内でなければなりません。

イシューにデザインを追加するには

  1. イシューに移動します。
  2. どちらか：
    • デザインのアップロードを選択し、ファイルブラウザから画像を選択します。一度に10ファイルまで選択できます。

    • クリックしてアップロードを選択し、ファイルブラウザから画像を選択します。一度に10ファイルまで選択できます。

    • ファイルブラウザからファイルをドラッグし、デザインセクションのドロップゾーンにドロップします。

      Drag and drop design uploads

    • スクリーンショットを撮るか、ローカルの画像ファイルをクリップボードにコピーし、カーソルをドロップゾーンに合わせ、Control またはCmd +Vを押します。

      このように画像を貼り付ける場合は、以下の点に注意してください：

      • 一度に貼り付けられる画像は1つだけです。コピーしたファイルを複数貼り付けた場合、アップロードされるのは最初の1枚のみです。
      • スクリーンショットを貼り付ける場合、画像は PNG ファイルとして、design_<timestamp>.pngという生成名で追加されます。
      • Internet Explorerではサポートされていません。

デザインの新バージョンを追加

デザインに関する議論が続くと、新しいバージョンのデザインをアップロードしたくなることがあります。

前提条件：

  • 少なくともプロジェクトの開発者ロールを持っている必要があります。

そのためには、同じファイル名のデザインを追加してください。

すべてのデザインバージョンを閲覧するには、デザインセクションの上部にあるドロップダウンリストを使用します。

スキップされたデザイン

アップロード済みのデザインと同じファイル名の画像をアップロードした場合_、_そのデザインはスキップされます。これは、デザインの新しいバージョンが作成されないことを意味します。デザインがスキップされると、警告メッセージが表示されます。

デザインをアーカイブ

個々のデザインをアーカイブすることも、いくつかのデザインを選択して一度にアーカイブすることもできます。

前提条件：

  • 少なくともプロジェクトの開発者ロールを持っている必要があります。

1つのデザインをアーカイブするには

  1. デザインを選択して拡大表示します。
  2. 右上の [デザインをアーカイブ({archive})] を選択します。
  3. アーカイブデザインを選択します。

複数のデザインを一度にアーカイブするには

  1. アーカイブしたいデザインのチェックボックスを選択します。
  2. 選択したアーカイブを選択します。
note
アーカイブできるのは最新バージョンのデザインのみです。アーカイブされたデザインは永久に失われません。以前のバージョンを閲覧することができます。

説明用のマークダウンおよびリッチテキストエディタ

フラグ: セルフマネージドGitLabでは、デフォルトでリッチテキストエディタが利用可能です。非表示にするには、管理者がcontent_editor_on_issuesという機能フラグを無効にします。GitLab.comでは、この機能は利用可能です。

この機能を有効にすると、デザイン記述でMarkdownやリッチテキストエディタを使うことができます。これは、GitLab全体でコメントに使うのと同じエディタです。

デザインの並び替え

GitLab 13.3 で導入されました。

ドラッグすることでデザインの順番を変更できます。

デザインにコメントを追加

GitLab 12.8で導入されたピンの位置調整。

アップロードされたデザインについてディスカッションを始めることができます。そのためには

  1. イシューに移動します。
  2. デザインを選択します。
  3. 画像をクリックまたはタップします。その場所にピンが作成され、ディスカッションの場所が特定されます。
  4. メッセージを入力してください。
  5. コメント］を選択します。

画像をドラッグしてピンの位置を調整できます。デザインのレイアウトが変更された場合や、ピンを移動して新しいピンを追加する場合に使用できます。

新しいスレッドには異なるピンナンバーが付けられます。

GitLab 12.5以降では、新しいディスカッションはイシューアクティビティに出力され、関係者全員がディスカッションに参加できるようになります。

デザインからコメントを削除

GitLab 15.9 で導入されました。

前提条件：

  • 少なくともプロジェクトのレポーターロールを持っている必要があります。

デザインからコメントを削除するには

  1. 削除したいコメントで、その他のアクション > コメントの削除を選択します。
  2. 確認ダイアログで「コメントを削除」を選択します。

デザインに関するディスカッションスレッドの解決

GitLab 13.1で導入されました。

デザインの一部についての議論が終わったら、ディスカッションスレッドを解決することができます。

スレッドを解決済みまたは未解決としてマークするには、次のいずれかを実行します：

  • ディスカッションの最初のコメントの右上隅で、[スレッドを解決] または [スレッドを未解決]を選択します（{チェックマーク}）。
  • スレッドに新しいコメントを追加し、スレッドを解決するチェックボックスを選択またはオフにします。

ディスカッション スレッドを解決すると、スレッド内のノートに関連する保留中のTo-Do アイテムも完了としてマークされます。アクションをトリガーしたユーザーの To-Do アイテムのみが影響を受けます。

解決したコメントのピンはデザインから消え、新しいディスカッションのためのスペースが空きます。解決したディスカッションを再度表示するには、表示されているスレッドの下にある [解決したコメント] を展開します。

デザインに To-Do アイテムを追加します。

デザインにTo-Do アイテムを追加するには、デザインのサイドバーでAdd a to doを選択します。

Markdownでデザインを参照

GitLabのMarkdownテキストボックス、例えばコメントや説明文の中でデザインを参照するには、そのURLを貼り付けてください。短い参照として表示されます。

たとえば、あるデザインをどこかで参照するときに

See https://gitlab.com/gitlab-org/gitlab/-/issues/13195/designs/Group_view.png.

としてレンダリングされます：

#13195[Group_view.png]を参照してください。

デザインアクティビティ記録

デザインに関するユーザーのアクティビティイベント（作成、削除、更新）はGitLabによって追跡され、ユーザープロファイル、グループ、プロジェクトのアクティビティページに表示されます。

GitLab-Figma プラグイン

GitLab 13.2 で導入されました。

GitLab-Figmaプラグインを使って、FigmaからGitLabのイシューに直接デザインをアップロードすることができます。

Figma でプラグインを使用するには、Figma ディレクトリからインストールし、個人アクセストークンを使って GitLab に接続します。

詳細については、プラグインのドキュメントをご覧ください。