正式なドキュメントは英語版であり、この日本語訳はAI支援翻訳により作成された参考用のものです。日本語訳の一部の内容は人間によるレビューがまだ行われていないため、翻訳のタイミングにより英語版との間に差異が生じることがあります。最新かつ正確な情報については、英語版をご参照ください。

設計管理

  • プラン: Free、Premium、Ultimate
  • 提供形態: GitLab.com、GitLab Self-Managed、GitLab Dedicated

設計管理を使用すると、デザインアセット（ワイヤーフレームやモックアップなど）をGitLabイシューにアップロードして、一箇所にまとめて保存できます。製品デザイナー、製品マネージャー、エンジニアは、信頼できる唯一の情報源を使用して設計に関する共同作業ができます。

設計のモックアップをチームで共有したり、視覚的なリグレッションを表示して対応したりできます。

ビデオの概要については、設計管理を参照してください。

前提要件

  • Git Large File Storage (LFS)を有効にする必要があります:

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

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

    GitLab管理者は、管理者エリア > プロジェクトに移動し、問題のプロジェクトを選択することで、ハッシュストレージプロジェクトの相対パスを確認できます。Relative pathフィールドには、値に@hashedが含まれています。

要件が満たされていない場合は、デザインセクションで通知されます。

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

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

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

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

デザインを表示

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

前提要件:

  • プロジェクトのゲストロール以上が必要です。

デザインを表示するには:

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

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

アップロードされたデザインモックアップを表示するGitLabイシューの「デザイン」セクション。

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

  • 右上隅で、前のデザインへ（ chevron-lg-left ）または次のデザインへ（ chevron-lg-right ）を選択します。
  • キーボードの左または右を押します。

イシュービューに戻るには、次のいずれかの操作を行います:

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

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

デザインを拡大表示

画像を拡大または縮小して、デザインをより詳細に調査できます:

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

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

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

前提要件:

  • プロジェクトのプランナーロール以上が必要です。
  • アップロードするファイルの名前は255文字以下にする必要があります。

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

  1. イシューに移動します。

  2. 次のいずれかの操作を行います:

    • デザインをアップロードを選択し、ファイルブラウザから画像を選択します。一度に最大10個のファイルを選択できます。
    • click to upload（クリックしてアップロード）を選択し、ファイルブラウザから画像を選択します。一度に最大10個のファイルを選択できます。

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

      デザインをドラッグアンドドロップしてイシューページにアップロードすると、新しいデザインがアップロードされます。

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

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

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

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

デザインに関するディスカッションが続くと、デザインの新しいバージョンをアップロードしたくなる場合があります。

前提要件:

  • プロジェクトのプランナーロール以上が必要です。

これを行うには、同じファイル名でデザインを追加します。

すべてのデザインバージョンを参照するには、デザインセクションの上部にあるドロップダウンリストを使用します。最新バージョンを表示またはShowing version #N（バージョン#Nを表示）のいずれかとして表示されます。

スキップされたデザイン

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

デザインをアーカイブ

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

アーカイブされたデザインが完全に失われることはありません。以前のバージョンを参照できます。

デザインをアーカイブすると、そのURLが変更されます。デザインが最新バージョンで利用できない場合は、URL内のバージョンでのみリンクできます。

前提要件:

  • プロジェクトのプランナーロール以上が必要です。
  • デザインの最新バージョンのみをアーカイブできます。

単一のデザインをアーカイブするには:

  1. デザインを選択して拡大表示します。
  2. 右上隅で、デザインをアーカイブ（ archive ）を選択します。
  3. デザインをアーカイブを選択します。

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

  1. アーカイブするデザインのチェックボックスをオンにします。
  2. 選択したものをアーカイブを選択します。

設計管理のデータ永続性

設計管理データのレプリケート

設計管理データはレプリケートできます 。GitLab 16.1以降では、Geoでもレプリケートできるか検証できます。

説明用のMarkdownおよびリッチテキストエディタ

デザインの説明では、Markdownおよびリッチテキストエディタを使用できます。GitLab全体のコメントに使用するエディタと同じです。

デザインの並べ替え

デザインの順序を変更するには、デザインを新しい位置にドラッグします。

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

アップロードされたデザインに関するディスカッションを開始できます。これを行うには、次の手順に従います:

  1. イシューに移動します。
  2. デザインを選択します。
  1. 画像を選択します。その場所にピンが作成され、ディスカッションの場所が識別されます。
  1. メッセージを入力します。
  2. コメントを選択します。

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

新しいディスカッションスレッドには異なるピン番号が付けられ、それらを参照するために使用できます。

新しいディスカッションはイシューアクティビティーに出力されるため、関係するすべての人がディスカッションに参加できます。

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

前提要件:

  • プロジェクトのプランナーロール以上が必要です。

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

  1. 削除するコメントで、追加のアクション ellipsis_v > コメントを削除を選択します。
  2. 確認ダイアログで、コメントを削除を選択します。

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

デザインの一部についてディスカッションが完了したら、ディスカッションスレッドを解決できます。

スレッドを解決済みにするか、開くには、次のいずれかの操作を行います:

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

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

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

デザインにTo-Doアイテムを追加

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

Markdownでデザインを参照

Markdownテキストボックスでデザインを参照できます。コメントまたは説明にデザインのrawURLを貼り付けます。次に、短い参照として表示されます。

たとえば、デザインを次のように参照する場合:

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

GitLabはrawURLを省略形の参照として自動的にレンダリングします:

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

画像へのリンクは、コメントまたは説明に画像を埋め込むのとは異なります。この方法でデザインを埋め込むことはできません。

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

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

GitLab-Figmaプラグイン

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

Figmaでプラグインを使用するには、Figma Directoryからインストールし、パーソナルアクセストークンを介してGitLabに接続します。

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

トラブルシューティング

設計管理を使用する場合、次の問題が発生する可能性があります。

デザインが見つかりません

Could not find designというエラーが表示されることがあります。

この問題は、デザインがアーカイブされた場合に発生するため、最新バージョンでは利用できず、フォローしたリンクではバージョンが指定されていません。

デザインをアーカイブすると、そのURLが変更されます。デザインが最新バージョンで利用できない場合は、URL内のバージョンでのみリンクできます。

たとえばhttps://gitlab.example.com/mygroup/myproject/-/issues/123456/designs/menu.png?version=503554などです。menu.pngにhttps://gitlab.example.com/mygroup/myproject/-/issues/123456/designs/menu.pngでアクセスできなくなりました。

回避策は、デザインセクションの上部にあるドロップダウンリストから以前のバージョンのいずれかを選択することです。最新バージョンを表示またはShowing version #N（バージョン#Nを表示）のいずれかとして表示されます。

イシュー392540により、この動作の改善を追跡しています。