Git についてデザイナーが知っておくべきこと
デザイナーとしての最終目標は、エンドユーザーのために優れた製品を作ることなので、デベロッパーとの連携は、各製品の構築において最も重要です。
デザイナーが製品のコンセプトを考え、モックアップやプロトタイプを作成します。そして最終デザインをデベロッパーに引き渡し、プロジェクトが始動するのです。
この場合、最終的なデザインを開発チームに渡した時点でデザイナーの役割は終わることになっています。
ところが実際には、製品開発のライフサイクルにおいて、この「デザイナー → デベロッパー」という直線的なシステムはほとんど存在しません。以下がその理由です：
- プロジェクトを成功させるには、コンセプトから発売まで、デザイナーが製品開発の一翼を担う必要があるから
- 最初のプロトタイプが最終製品になることはほとんどないため、デザイナーはユーザーや他のチームメンバーからのレビューに基づいて変更を加えるフォローアップを行う必要があり、また、然るべきユーザー体験のために、特定のデザイン要素を実行する方法についてのガイダンスも出さないといけないから
そのため、立ち上げ時であっても、デザイナーとデベロッパーのリアルタイムでの連携は、あらゆるプロジェクトの成功に欠かせません。開発チームは、機能面でも、デザイン要素を変更したり、他のチームメンバーからレビューを受けたりと、何度もやりやりとりが必要なのです。
これは私たちデザイナーにとっては大したことではないのですが、もちろん、連携のためのツールや機能はたくさんあります。
ただ、デベロッパーとの連携が必要になったとき、以下が原因でちょっと困ったことが出てくるんです：
- デザイナーはコードを扱わないし、デベロッパーはデザインリソースを扱わない
- チームとしては、仕事を成し遂げるのに色々とツールを使用する
一緒に作業をしないといけないチームが、同じツールを使ってもいないのにどうやって連携できるのでしょうか。
つまるところ、共通の基盤である「信頼できる唯一の情報源（Single source of truth）」を見つけることが解決策となるのです。
UXPinにMergeテクノロジーを搭載すれば、デベロッパーとデザイナーが協力してプロジェクトを稼働させることができます。UXPin Mergeでは、gitの要素をUXPinデザインエディタに取り込むことができるので、サイトに既に存在するコンポーネントや他のチームが開発したコンポーネントを使って簡単にデザインすることができます。その上、これらのコンポーネントは生産準備完了なので、インタラクションを追加したり、標準に合っているかどうか心配したりする必要もありません。また、コンポーネントは視覚的に表示されるので、コーディングの方法やGitを調べる必要もありませんが、一方、デベロッパーにとっては、製品を作るために使える準備万端のコードなのです。Gitとの統合の他に、UXPinはStorybookライブラリと同期して、そこからすぐに使えるUIコンポーネントを提供することもできます。
Gitとは
Gitは、専門用語では「バージョン管理ソフトウェア」と呼ばれ、デベロッパーがコードに加えた変更を追跡し、将来参照できるように保存するプログラムのことをいいます。
Gitで、デベロッパーは以前の変更点を再検討することができます。ソースコード全体をいじることなく、コードの変更を取り消すことができ、要するに、問題を早く発見して修正できるのです。
Gitは、オープンソースの無料ソフトウェアで、個人のパソコンにダウンロードして使えます。 PC上でローカルに動作するため、一度インストールすれば、インターネットに接続しなくても使用可能です。
「Photoshopの［履歴パネル］がどのように動作するか」が、デザイナーにとって、Gitがどのように機能するかの最も近い例でしょうか。Photoshopでは、最終的な画像を得るために追加したすべての移動、追加、編集、効果、その他すべてが履歴パネルに一覧表示されますよね。これは、Gitがデベロッパーがチームに対して行うことと同じです。
Githubとは
Githubは、専門用語では「クラウドベースのレポジトリホスティングサービス」と呼ばれ、Gitリソースをすべて保存し、アクセスするためのオンラインインターフェイスのことをいいます。GitHubの代替品としては、BitBucketとGitLabがよく知られています。
デベロッパーが自分のコードに加えた編集は、すべてGitによって追跡・保存され、Githubの中に保存され、デベロッパーはオンラインになれば、このコードにアクセスできます。デベロッパーは、自分のコードを他のデベロッパーと共有し、フィードバックや編集を受けることができますし、他のデベロッパーが共有したコードを変更することも可能です。
デベロッパーは、Githubでシームレスに連携して互いのコードに取り組めるのです。Gitがウェブサイトの画像や文書、ファイルやページを表すとすれば、Githubはこういったリソース（Gitレポ）を保存するホスティングプロバイダーと言えるでしょう。
GitとGithubの違い：まとめ
- Gitは、他の人と共有することなく、変更の追跡をオフラインででき、デベロッパーがプロジェクトに加えたすべての変更のスナップショットや紙の証跡を作成し、その「変更」を保存します。一方、Githubはクラウドベースで、どちらかというと連携のためのプラットフォームであり、Gitで作成された「紙の痕跡やスナップショット」が保存され、他のデベロッパーが連携するためにアクセスできるようにする場所です。
- Gitは完全に無料のオープンソースであり、一方Githubは、個人や小規模な組織向けの無料プランと、大規模なチームや企業向けの有料プランがあります。
つまり、この2つのツールは、連携やソフトウェア構築、変更の記録や巻き戻しでエラーを素早く修正するのをサポートするための補完的なツールなのです。
デザイナーがGitを必要な時
Git は主にデベロッパーや IT チームのために作られたものかもしれませんが、最近ではデザイナーがデベロッパーと密接に仕事をする必要があるため、今やGit はデザイナーにとっても重要なツールになりました。
ただ、どの時点でGitがデザイナーにとって便利なものになるのでしょうか？
- モックアップやプロトタイプを作成し、最終的な作品をデベロッパーに出さないといけない時。
- すでに生産している製品や発売済みの製品に、特定のデザイン変更が必要な時。
- 優れたユーザー体験の実現のために、特定のデザイン要素をどのように実行するかについてデベロッパーに指導する必要がある時。
- デザインチームと開発チームの両方がアクセスできる、共有可能なワークフローの構築が必要な時。
デザイナーのためのGit：GitとGithubの使い分け
最近、誰もがGithubを使うようになりましたが、それはGitから始まるのです。Gitを使えば、デベロッパーと共有できるデザインワークフローの構築ができ、実行された変更や追加はすべて保存され、過去にさかのぼって変更することができます。
Gitではこのような紙の痕跡が残せ、Githubには他のデザイナーと連携してデベロッパーとデザインの共有ができます。
GitHubのデスクトップアプリを使ったGitHubの始め方
Github はブラウザから利用することもできますが、デスクトップアプリにも素晴らしい機能があるので、お使いのOSからでもプロジェクトに貢献することができるんです。ここでは、その始め方について説明します。
アカウントの開き方
まず、https://github.co.jp/ に行き、ホームページの右上にある “サインアップ “ボタンをクリックします。
画面の指示に従って、メールアドレスを入力し、以下のようにパスワードを作成してください。
次のステップでは、メールにアクセスして、次のウィンドウにGithubからのローンチコードを入力します。これで、最初のダッシュボードが表示されます。
ダッシュボードでは、プロフィール写真の横にある矢印をクリックすると表示される「設定」パネルで、2ファクタ認証の設定やプロフィールの経歴を追加できます。
Githubをパソコンにインストールする方法
Githubのデスクトップアプリを入手するには、https://desktop.github.com/に行き、オペレーティングシステムを選択してダウンロードする必要があります。
ダウンロード完了後、アプリケーションを起動し、画面の指示に従ってデスクトップにGithubをインストールします。
アプリのインストールが完了すると、ウェルカムページが表示されます。
インストールすると、デスクトップアプリをアカウントにリンクするための注意事項が表示されることがあります （GithubではこれをAuthenticationと呼んでいます。）
これらの注意事項が表示されない場合は、以下のデスクトップアプリケーションと、先ほど作成したGithubアカウントをリンクさせる方法をご覧ください：
ステップ1：デスクトップアプリの左上にある「ファイル」をクリックし、ドロップダウンリストより「オプション」を選択します。
ステップ2：「Github.co.jp」オプションの横にある「サインイン」をクリックします。その際、ブラウザを使ってサインインするよう表示されます。
ステップ3：「ブラウザで続ける」をクリックして続行します。ブラウザでGithub.co.jpにアクセスし、メール/ユーザー名とパスワードを入力します。
情報を入力すると、ブラウザがこのリンクをデスクトップアプリケーションで開くように表示されます。
ステップ4：ブラウザのプロンプトから「GitHubデスクトップを開く」をクリックします。
すると、デスクトップアプリケーションに戻り、以下のようにユーザー名が表示されます。
この時点で、レポジトリの作成や、Githubアカウント使用の準備ができました。ここでは、そのやり方を説明します。
Githubでレポジトリを作成する方法
まず、レポジトリとは何でしょうか？
平たく言えば、レポジトリとは、物を預ける、あるいは保管する受け皿や場所のことです。これは、Gitにおけるレポジトリも同じです。
Git レポジトリは、コードの保存場所です。このレポジトリには、コード化されたデザインのバージョンがあり、必要なときにいつでもアクセスできます。Git レポジトリは、プロジェクトに加えられた変更をすべて追跡し、プロジェクトのライフサイクル全体を通じて変更の履歴を構築します。
プロジェクトが始動したら、以下の方法でプロジェクト内にレポ/レポジトリを作成します。
デスクトップアプリケーションがまだ新しいので、トップページに何をするかのオプションのリストが表示されます。
ステップ1：「ハードディスクに新しいリポジトリを作成する 」をクリックします。
ステップ2：次にポップアップするウィンドウで、リポジトリ名と説明を入力し、「レポジトリ を作成する」をクリックします。
ステップ3：次のステップでは、作成したレポジトリは自身のPC上でのみ利用できることがわかり、自身でレポジトリの閲覧・編集ができます。
他のチームとの連携や、自身の作品を他の人に見てもらうには、このレポジトリの公開が必要です。
「レポジトリを公開する」をクリックして、公開します。
そうすると、Gitレポジトリが稼動します。
Github で変更をコミットする方法
Github で変更をコミットするということは、自身が実行した変更や編集をローカルレポジトリに保存するということです。
例えば、オンラインでGoogle Docに変更を加えた場合、その変更は自動的に保存されますが、Githubの場合はそのようにならないので、この変更の保存、つまり変更のコミットが必要になります。
変更をコミットする方法は次のとおりです。
ステップ1：Githubのデスクトップアプリで、「Github上のレポジトリページをブラウザで開く」ウィンドウの横にある「Githubで見る」をクリックします。
これにより、ブラウザ上でレポジトリのページが表示され、変更を行うことができます。
ステップ2：開いたブラウザウィンドウで、レポジトリウィンドウの右上にある「編集」のアイコンをクリックします。
次のウィンドウでレポジトリが開かれるので、希望する変更を全て行います。
ステップ3: すべての変更が終わったら、下にスクロールして 「変更をコミット」 をクリックします。
これで、すべての変更点がレポジトリに保存されました。
ブランチとは：統合の方法
ちょうど木の枝が幹から突き出ているように、Githubのブランチも同じです。ブランチは、レポジトリに加えるコードや変更のセットであり、独自の名前がついています。
デザイナーやデベロッパーは、メインのレポジトリを触ることなく、新しい機能やアイデアを試したり、特定の問題を修正したりするのにブランチを使います。
ブランチは、チームが行った他の変更に影響を与えたくない特定の事柄について作業する時に作られます。
ブランチの作成と統合の仕方
ブランチを作成した機能構築やバグ修正が完了したら、それを元のプロジェクトに追加する方法として、統合することが挙げられます。
Githubのデスクトップアプリのトップメニューにある「ブランチ」ボタンに移動します。それをクリックすると、ドロップダウンのオプションのリストが表示されます。
ブランチ作成は、「新規ブランチ」をクリックし、手順に従います。別々のブランチを統合する場合は、「現在のブランチに統合する」メニューを使います。
その他のデザイナー向けのGitライブラリdesigners?
Githubは、Gitレポジトリをホスティングするためのライブラリやデータベースであることは、もうお分かりでしょう。また、他の人と連携する場所でもありますね。
ただ、Gitリソースをホスティングするためのライブラリやデータベースのプラットフォームは、Githubだけではありません。ここでは、その他の利用可能なオプションをご紹介します。
Gitlab
インターフェースや使い勝手が Github に最も近く、オープンソースのツールであるGitlabは、多くのチームに利用されている優秀なGitライブラリです。課題追跡、コード管理、Wiki、とりわけ多くの開発ツールとの継続的な統合など、多くの機能を備えています。
Bitbucket
もう一つのよくできたたGitRepository・ホスティング・プラットフォームは、Bitbucketです。Windows、Mac、Android、iOS、Linuxで利用できるBitbucketは、コミット履歴、コード管理、ブランチ比較などの優れた機能を持ち、デベロッパーには最大５人に無料で無制限のプライベート・レポジトリが提供されます。
その他の著名なGit Repositoryホスティング・プラットフォーム
- SourceForge
- Launchpad
- Google Cloud Source Repositories
- AWS CodeCommit
- Apache Allura
まとめ
GitとGithubは、デベロッパーチームのために作られましたが、デザイナーにとっても、これらのツールはプロジェクトを作成・保存するだけでなく、デベロッパーチームとの連携においても威力を発揮するようになりました。もしあなたがデザイナーで、デベロッパーと一緒に仕事をしていたり、きれいなワークフローを保ちたいと思っているなら、GitとGithubはそういったことをするのにピッタリなツールです。UXPin Mergeの技術でGitリポジトリを活用し、デザインと開発のプロセスを一緒にして、信頼できる唯一の情報源（Single source of truth）を使えることを忘れないでください。
