デザイン・マネジメント

概要

デザイン管理では、デザインアセット（ワイヤーフレーム、モックアップなど）を GitLab のイシューにアップロードし、ひとつの場所に保存しておくことができます。

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

概要については、ビデオ「Design Management (GitLab 12.2)」をご覧ください。

要件

Design Managementでは、Large File Storage(LFS)を有効にする必要があります：

  • GitLab.com では、LFS はすでに有効になっています。
  • セルフマネージドインスタンスでは、GitLab管理者がグローバルにLFSを有効にしている必要があります。
  • GitLab.comとセルフマネージドインスタンスの両方について：LFSはプロジェクト自体で有効にする必要があります。 グローバルに有効にすると、LFSはデフォルトですべてのプロジェクトで有効になります。 プロジェクトレベルでLFSを有効にするには、プロジェクトの設定 > 一般に移動し、可視性、プロジェクトの機能、権限を展開し、Git Large File Storageを有効にします。

また、Design Managementでは、プロジェクトがハッシュ化されたストレージを使用している必要があります。 GitLab 10.0以降、新規作成されたプロジェクトはデフォルトでハッシュ化されたストレージを使用します。 GitLab管理者は、Admin Area > Projectsに移動し、問題のプロジェクトを選択することで、プロジェクトのストレージタイプを確認することができます。 Gitaly相対パスに@hashedが含まれていれば、プロジェクトがハッシュ化されたストレージであることを確認できます。

要件が満たされていない場合は、[Designs]タブにユーザーへのメッセージが表示されます。

対応ファイル

アップロードされるファイルの拡張子はpng,jpg,jpeg,gif,bmp,tiff,icoのいずれかでなければなりません。

SVGファイルとPDFのサポートは将来のリリースを予定しています。

制限事項

  • デザインのアップロードは一度に10ファイルまでに制限されています。
  • GitLab 13.1から、デザインファイル名は255文字に制限されました。
  • プロジェクトが破棄されても、デザイン管理データは削除されません。
  • イシューの移動時にデザイン管理データが移動したり、イシューの削除時にデザイン管理データが削除されることはありません。
  • GitLab 12.7から、デザイン管理データはGeoで複製できますが、検証はできません。
  • 削除できるのは最新版のデザインのみです。
  • 削除されたデザインは復元できませんが、以前のデザインバージョンで見ることができます。

デザイン管理のページ

どのイシューからでも、[Designs]タブをクリックして[Design Management]ページに移動します：

Designs tab

デザインの追加

デザイン画像をアップロードするには、デザインのアップロードボタンをクリックし、アップロードする画像を選択します。

GitLabPremium 12.9から導入された、デザインを専用のドロップゾーンにドラッグ＆ドロップしてアップロードできます。

Drag and drop design uploads

GitLab 12.10から導入された機能で、ファイルシステムから画像をコピーし、GitLabのデザインページに新しいデザインとして直接貼り付けることもできます。

macOSでは、Control +Command +Shift +3を同時にクリックすることで、スクリーンショットを撮ってすぐにクリップボードにコピーし、デザインとして貼り付けることもできます。

コピー＆ペーストには制限があります：

  • 一度に貼り付けられる画像は1枚のみです。 複数のファイルをコピー/貼り付けした場合、最初の1枚のみがアップロードされます。
  • すべての画像は内部でpng フォーマットに変換されるため、gif ファイルをコピー/ペーストしようとすると、アニメーションが壊れてしまいます。
  • クリップボードからスクリーンショットを貼り付ける場合、その名前は次のように変更されます。design_<timestamp>.png
  • デザインのコピー＆ペーストはInternet Explorerではサポートされていません。

既存のアップロードされたデザインと同じファイル名のデザインは、新しいバージョンのデザインを作成し、以前のバージョンを置き換えます。GitLabPremium 12.9 で導入された、既存のアップロードされたデザインにデザインをドロップすると、ファイル名が同じであれば、新しいバージョンも作成されます。

イシューが移動されていたり、そのディスカッションがロックされている場合、デザインを追加することはできません。

スキップされたデザイン

アップロード済みのデザインと同じファイル名で_、_内容が変更されていないデザインはスキップされます。 つまり、新しいバージョンのデザインは作成されません。 デザインがスキップされると、イシューの警告メッセージで通知されます。

デザインを見る

デザイン管理ページ上の画像は、クリックすることで拡大することができます。 右上のナビゲーションボタンをクリックするか、Left/Right キーボードボタンでデザイン内を移動することができます。

デザインファイル名の右側には、デザインのディスカッション数（もしあれば）が表示されます。 この数をクリックすると、デザイン上の他の場所をクリックするのと同じように、デザインが拡大されます。 デザインが追加または変更されると、バージョン間の変更を要約するのに役立つアイコンがアイテムに表示されます。

インジケータ 例
ディスカッション Discussions Icon
変更されました（選択されたバージョンで） Design Modified
追加（選択されたバージョンで） Design Added

ズームによるデザインの探求

GitLab Premium12.7から導入されました。

画像を拡大・縮小することで、デザインをより詳細に見ることができます。 画像の下部にある+ と- ボタンを使って、ズームの量をコントロールします。 ズーム中でも、画像上で新しいディスカッションを開始したり、既存のディスカッションを見たりすることができます。 GitLab 12.10から導入された、ズーム中に画像をクリック＆ドラッグして移動することができます。

Design zooming

デザインの削除

GitLab Premium12.4から導入されました。

デザインを削除するには、以下のように手動で個別に削除する方法と、いくつかのデザインを選択して一度に削除する方法があります。

1つのデザインを削除するには、そのデザインをクリックして拡大表示した後、右上のゴミ箱アイコンをクリックし、モーダルウィンドウの削除ボタンをクリックして削除を確定します：

Confirm design deletion

複数のデザインを一度に削除するには、まずデザインのリストビューで削除したいデザインを選択します：

Select designs

選択したら、[選択した項目を削除] ボタンをクリックして削除を確定します：

Delete multiple designs

注意:削除できるのは最新バージョンのデザインのみです。 削除されたデザインは永久に失われるわけではなく、以前のバージョンを閲覧することができます。

デザインに関する議論の開始

デザインがアップロードされると、ディスカッションを行いたい場所の画像をクリックすることで、ディスカッションを開始することができます。 ディスカッションの場所を示すピンが画像に追加されます。

Starting a new discussion on design

GitLabPremium 12.8から導入されたこの機能は、ピンをドラッグして位置を調整することができます。 リビジョン間でデザインのレイアウトが変更された場合や、既存のピンを移動して新しいピンを追加する場合に便利です。

ディスカッションによってピン番号は異なります：

Discussions on designs

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

デザインスレッドの解決

GitLab 13.1で導入されました。

ディスカッションスレッドはDesigns上で解決できます。

デザインスレッドの解決/解決解除には 2 つの方法があります：

  1. ディスカッションの最初のコメントの右上にある「スレッドを解決する」のチェックマークをクリックすると、スレッドを解決済みまたは未解決にマークできます：

Resolve thread icon

  1. デザインスレッドは、チェックボックスを使用して、スレッド内で解決または未解決にすることもできます。 コメントに返信する際、チェックボックスが表示されますので、クリックすると、公開されたスレッドを解決または未解決にすることができます：

Resolve checkbox

解決したコメントのピンは、新しいディスカッションのためのスペースを確保するため、デザインから消えます。 しかし、解決したディスカッションを再確認したり、探したりする必要がある場合は、右サイドバーの下部にある「解決したコメント」エリアですべての解決済みスレッドを利用できます。

Markdownでのデザインの参照

  • GitLab 13.1で導入されました。
  • 機能フラグの後ろにデプロイされ、デフォルトでは無効になっています。
  • GitLab.comでは無効になっています。
  • 本番での使用はお勧めできません。
  • GitLabセルフマネージドインスタンスで使うには、GitLab管理者に頼んで有効にしてもらいましょう。

マージリクエストやイシューの説明、ディスカッションやコメント、Wikiページなど、アプリケーション全体で利用可能です。

現在のところ、完全なURL参照がサポートされています。 たとえば、どこかのデザインを： 

See https://gitlab.com/your-group/your-project/-/issues/123/designs/homescreen.png

と表示されます：

123[homescreen.png]を参照してください。

デザイン・リファレンスの有効化または無効化

デザインリファレンスの解析は開発中であり、本番環境ではまだ使用できません。デフォルトでは無効になっている機能フラグの後ろにデプロイされています。 GitLab RailsコンソールにアクセスできるGitLab管理者は、インスタンスでこれを有効にすることができます。

有効にするには: 

Feature.enable(:design_management_reference_filter_gfm_pipeline)

無効化するには: 

Feature.disable(:design_management_reference_filter_gfm_pipeline)

設計アクティビティ記録

  • GitLab 13.1 で導入されました。
  • フィーチャーフラグで有効・無効を切り替えることができ、デフォルトでは無効になっています。
  • GitLab.comで有効になっています。
  • GitLabセルフマネージドインスタンスで使うには、GitLab管理者に頼んで有効にしてもらいましょう。

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

デザインイベントの有効化または無効化

デザイン用のユーザーアクティビティは開発中であり、本番環境ではまだ使用できません。デフォルトでは無効になっている機能フラグの後ろにデプロイされています。 GitLab RailsコンソールにアクセスできるGitLab管理者は、インスタンスでこれを有効にすることができます。 テストするのは自由ですが、使用は自己責任でお願いします。

有効にするには: 

Feature.enable(:design_activity_events)

無効化するには: 

Feature.disable(:design_activity_events)