SNS的な活用法からリポジトリの作成まで徹底ガイド　デザイナーのためのGitHub入門

コーディングに関するスキルが必須ではなかったWebデザイナー職も、Webサイト制作の複雑化や生成AIの発達などにより、ソースコードを扱えるスキルや知識が以前よりまして重要になってきました。また、昨今では、Webデザインの現場でも、プログラマーとデザイナーの協働が求められるケースが増えており、両職種の境界線も曖昧になってきています。そんな流れの中で、これまではプログラマー向けと考えられていたツールをデザイナーが利用する機会も増えています。

こうしたツールの一つに今回紹介する「GitHub」があります。IT業界に近い現場で仕事をしていれば、「GitHub」というツールの名前を頻繁に耳にしているのではないでしょうか。すでにGitHubを使いこなしているデザイナーも存在する一方で、漠然と「プログラマーやエンジニア専用のツール」として捉えているデザイン初学者の方も少なくないはずです。

さらに、GitHub Copilotという新技術の登場によって、Webデザイン・アプリデザイン領域を含めたコーディング技術やソフトウェア開発の流れに大きな変化が起きています。このGitHub Copilotを理解する上でもGitHubの基本を押さえておくことは大変重要です。

そこで、今回は「デザイナーのためのGitHub入門」として、GitHubの概要を説明した上で、SNS的な活用法からリポジトリの作成までを徹底解説します。

目次

GitHubの基礎知識

1.GitHubとは

GitHubのロゴ　ロゴの提供ページ：https://github.com/logosGitHub（ギットハブ）とは、Gitという仕組みを利用してオンライン上でソースコードやデザインデータなどを保存・公開できるプラットフォームを提供するサービスです。

アメリカのエンジニアであるChris Wanstrath氏、P. J. Hyett氏、Tom Preston-Werner氏、Scott Chacon氏らによって開発され、2008年2月からサービスの提供をスタート。画期的なバージョン管理システムとしてGitHubは、公開されてからプログラマーの中で急速に人気が高まり、現在は開発プロジェクトにおけるソースコード管理に欠かせないツールとなっています。

また、GitHubは、2018年10月にMicrosoft社に75億USドルで買収され、同社の傘下に入りました。ここ最近は同じくMicrosoft社傘下であるOpenAIの技術を取り入れることで、後述するGitHub Copilotという新技術を開発し、Githubという企業の存在価値も高まっています（日本では、ギットハブ・ジャパン合同会社という日本法人がGitHubの提供するサービスの窓口になっています）。

2.Gitとは
GitHubというサービスを理解するには、そのベースとなるGitを理解する必要があります。Git（ギット）とは、プログラムのソースコードなどファイルの変更履歴を記録・追跡するための分散型バージョン管理システムの一種です。プログラムのソースコードやドキュメントなどの変更履歴を管理するために、主にソフトウェア開発やプロジェクト管理などで使用されています。

バージョン管理システムには、他にもSVNといった方式がよく知られています。GitとSVNの大きな違いは、リポジトリ（ソースコードやディレクトリ構造のメタデータを格納するデータ構造）の管理方法で、Gitが分散型のバージョン管理であるのに対し、SVNは集中型のバージョン管理となっています。

Gitがバージョン管理システムとして人気が高いのは、ローカル環境に完全なリポジトリを保持できる点、ブランチ機能や履歴管理機能が強力である点など、大規模なプロジェクトや、複雑な変更履歴を管理する必要があるプロジェクトに適しているからです。

このGitというバージョン管理システムを提供するサービスとして代表的なのが「GitHub」です。Gitを採用したバージョン管理システムとして「GitLab」という競合サービスもありますが、「GitHub」のシェア率は高く、多くの企業・プロジェクトでGitHubが導入されています。

3.Gitの専門用語

Gitの仕組み
GitHubを利用するには、Gitというバージョン管理システムの専門用語を覚えておく必要があります。以下に基本的なGitの専門用語をまとめましたので、上の図とあわせて、その意味を理解しておきましょう。

用語説明リポジトリGitで管理するファイルやフォルダの集合のこと。厳密にはソースコードやディレクトリ構造のメタデータを格納するデータ構造のことリモートリポジトリインターネット上に公開されているリポジトリローカルリポジトリ自分のPC端末に作成するリポジトリ作業ディレクトリ実際にコードを編集する作業領域コミットファイルやディレクトリの追加・変更をリポジトリに記録する操作クローンリモートリポジトリの複製をローカルマシンに作成する作業プッシュローカルリポジトリの変更内容をリモートリポジトリに反映する作業ブランチ開発の本流から分岐させた独立のコピーを作成することで、プロジェクト本体に影響を与えずに開発を実行できる機能3.GitHub Copilotとは

GitHub CopilotGitHub Copilotは、GitHubが提供するAI搭載の主にコード補完するプログラミング支援ツールです。2021年から開発がスタートし、最初はOpenAIのGPT-3言語モデルをベースにしていました。その後、2023年3月に、より高性能なGPT-4言語モデルにアップグレードされました。飛躍的にプログラミング作業を効率化させるGitHub Copilotの登場は、IT業界でも注目の的になっています （※GitHub Copilotは有料のサービスです）。

「Copilot（コパイロット）」とは、直訳すると「副操縦士」という意味です。この名称からも分かる通り、AIはあくまでサポート役で開発の主体は人間であるというコンセプトのもと機能が設計されていることが分かります。決してプログラマーの仕事を奪ってしまうAIツールではなく、専門家をサポートする優秀なアシスタントとしてのAI技術である点も魅力的な点でしょう。

このGitHub Copilotに端を発してMicrosoftは、Office系ソフトにAIサポート機能を搭載した「Microsoft Copilot for Microsoft 365」、Windows OSにAIサポート機能を搭載した「Copilot in Windows」といったサービスを立て続けにリリースしています。

4.Githubの料金（無料で使える範囲）
GitHubの料金プランについても確認しておきましょう。GitHubには、個人向けの基本プランである「Free」、個人および小規模プロジェクト用の高度なコラボレーション向けに提供されている「Team」、セキュリティ・コンプライアンス・柔軟な運用が強化された「Enterprise」の3つのプランがあります。
 

Githubの料金プラン
本記事で紹介するような、クリエイターが個人で利用する事例においては、無料で利用できる「Free」プランで十分に、そのサービス内容を享受できるでしょう。後で有料プランに切り替える場合も、アカウントは無料で作成できるので費用的に導入しやすいツールです。

5.公式マスコットとして人気のOctocat

Octocat（GitHub社員のお子さんのアイデアから名前は「モナリサ」で女の子といった設定がある）　画像引用：GitHubもう一つ、デザイナーやイラストレーターといったクリエイターに注目してほしいポイントは、GitHubの公式マスコットとして人気のOctocatの存在です。このタコのような足を持った猫のキャラクターであるOctocatはブランドのロゴマークにも採用されており、GitHubのコーポレートアイデンティティに欠かせないキャラクターになっています。

一時期、ノートパソコンにITツールのステッカーが貼っているプログラマーやエンジニアをよく見かけましたが、その中でも人気だったのがOctocatのステッカーです。ステッカー以外にも、さまざまな公式グッズがあり、プログラマーやエンジニアに愛されている企業キャラクターの代表格です。GitHubのスタッフにも愛されているキャラクターで、自分好みのOctocatをデザインできる「myOctocat」や、GitHub Designチームが運営する「octodex」など特設サイトもあります。

GitHub Designチームが運営するサイト「octodex」に公開されているOctcatのバリエーション　画像引用：GitHubOctocatのキャラクターデザインを手掛けたのは、旧TwitterのTwitter Bird（初代）のデザインも担当したイギリス人グラフィックデザイナーのSimon Oxley氏です。もともとはiStockで販売されていたロイヤリティフリー画像だったものを、独占権を得て商標登録化されたという経緯があるそうです。

私たち日本人にとっては、企業のブランディングとしてかわいらしいキャラクターを活用すること自体、それほどめずらしいことではないかもしれませんが、世界規模で展開するITソリューションツールの中では、特徴的なブランドデザインであるように思います。Octocatに障害が発生したときもエラーを告知する画面にはかわいいOctocatの存在があり、不思議とイライラを軽減する作用をもたらしています。Octocatというサービスに、遊び心や親しみやすさを感じるユーザーも多く、Octocatが果たしている役割は大きいと思われます。また、GitHub Copilotでは同じようにかわいいパイロットのキャラクターが採用されています。

Github Copilotのマスコットロゴ　画像引用：Githubこうしたキャラクターを使ったブランドデザインは、GitHubがMicrosoft傘下でありつつも独立した経営や独自の企業文化を保っていることの証左であるとも考えられます。

参照URL：GitHubのマスコット（Wikipedia）

GitHubでアカウントを作成する方法

ここからはGitHubの使い方を説明します。まずはアカウントの作成方法から確認していきましょう。

1.GitHubの公式ページへアクセスし「サインアップ」

GitHubの公式ページへアクセス 必要項目を入力・設定し「Create account」をクリックGitHubの公式ページへアクセスします。TOPページにある「GitHubに登録する」もしくは「サインアップ」というボタンをクリックします。画面が遷移すると、右上のような登録画面が表示されますので必要項目を入力・設定します。入力・設定が完了したら、登録画面下部にある「Create account」のボタンをクリックするとアカウントが解説されます。

2.認証コードを入力してログイン

確認しコードを入力して「Verify」をクリック GitHubのホーム画面「Create account」のボタンをクリックすると、左上の画像のような認証画面に切り替わります。登録したメールアドレスに認証コードが送付されていますので、これを確認しコードを入力します（しばらくサインインしていない場合も認証コードを求められる場合あり）。入力が完了し「Verify」というボタンをクリックすると、ログインが完了しGitHubのホーム画面に切り替わります。これで、アカウント作成は完了です。

Githubの基本的な使い方

次に、基本的な使い方を「プロフィールの編集」「SNSとしての機能」「リモートリポジトリの作成」「ローカルリポジトリの作成」に分けて説明します。

▶プロフィールの編集

1.IDのアイコンをクリックし「Your profile」を選択

IDのアイコンをクリック 「Your profile」を選択ホーム画面右上にあるIDのアイコンをクリックするとメニューが表示されます。このメニューの中から「Your profile」という項目を選択します。

2.「Edit profile」をクリックしてプロフィールを編集

「Edit profile」をクリック プロフィールの設定・入力遷移した画面の左側にある「Edit profile」のボタンをクリックするとプロフィールを編集できるようになります。プロフィールの設定・入力が完了したら画面下部にある「Save」をクリックすると変更内容が保存されます。

▶SNSとしての機能

1.アカウントのフォロー／アンフォロー

ページ右上にある「Follow」をクリック followers、followingという項目からフォロー／フォロワーを確認他のユーザーのページ右上にある「Follow」をクリックすると、そのユーザーをフォローできます。フォロー／フォロワーはプロフィール欄の「Edit profile」の下にあるfollowers、followingという項目をクリックすると確認できます。フォローを外したい場合は「Unfollow」をクリックします。

2.アカウントページの各要素

他のユーザーのアカウントページ上の画像は、他のユーザーのアカウントページです。左上にアカウントのアイコンとアカウント名、左下にフォロー／フォロワー数やフォロー／アンフォローボタンがあるフォロー情報と、SNSの「いいね」のようなアカウントの評価や実績が確認できる欄があります。右側上部には、公開されているリポジトリがあります。これらのリポジトリに、無料で利用できるアプリやコードを公開してくれているアカウントもあります。右側下部は更新情報で、活発に更新しているアカウントは、グリットの表に緑色のドッドが沢山あります。

プログラマーやエンジニアのウェブサイトには、SNSへのリンクとしてX（旧Twitter）やInstagramのアイコンなどと一緒に、GitHubのアカウントにつながるロゴアイコンも掲載してある場合があります。こうした利用法からも、GitHubはSNS的な側面をもったツールであるといえます。

▶リモートリポジトリの作成
プロフィールの設定が完了したら、リモートのリポジトリを新規作成してみましょう。

1.「New repository」を選択

ホーム画面右上にある＋マークのアイコンをクリック 「New repository」を選択ホーム画面右上にある＋マークのアイコンをクリックします。表示されるメニューの中から「New repository」を選択します。

2.各項目を設定し「Create repository」をクリック

各項目を設定して「Create repository」をクリック リポジトリの管理画面遷移した画面でリポジトリ名、公開設定、README fileの設定などを行います。リポジトリ名は、欧文の文字列であれば自由に設定できます。公開設定にはリポジトリを公開する「Public」とリポジトリを非公開にする「Private」があります。「Private」は以前は有料プランのみで使えた機能ですが、現在は無料版でも選択できます。README fileは、リポジトリを公開するにあたって、ユーザーに注意事項等を伝えるファイルです。チェックを入れておくと自動でREADME fileのフォーマットが作成されます。試しにリポジトリを作成する場合は、作成しなくても問題ありません。これら各項目を設定完了したら、画面右下にある「Create repository」をクリックするとリモートのリポジトリが作成されます。作成後は、右上の画像のようなリポジトリの管理画面ページに遷移します。

▶ローカルリポジトリの作成
ローカルリポジトリの作成が最大の難関です。MacOSにローカルリポジトリを作成する場合は、ローカル端末にGitをインストールする必要があるのですが、ターミナルを使ってのコマンド入力が必要なインストール作業になります。

本記事では、GitHubのアカウントを開設して、SNS的な利用を主目的に解説していますので、難解だと感じた場合は、この作業は保留しておいても良いかもしれません。私は今回の記事作成のために、ネットの記事を参照しながらインストールしてみました。もしかしたら間違っている部分や専門知識のある方から見たら気になる点もあるかもしれませんが、ノンプログラマーでもインストール可能であるという事例ということで大目に見ていただけると幸いです。

1.Homebrewをインストールする

Gitのインストール方法 HomebrewをインストールするスクリプトをコピーGitをインストールする方法は、App StoreからXcodeをインストール方法と、Homebrewというソフトウェアの管理を行うパッケージマネージャーをインストールしてからターミナル上でGitをインストールする方法があります。

両方チャレンジしてみましたが、Xcodeをインストール方法は英語でライセンスを契約するステップもあり不安を感じる、Xcode自体が非常にファイルサイズが大きい（約6GB）ソフトウェアであるといった懸念点もあり、インストール作業も完了できなかったので、ここではHomebrewを使う方法を解説します。

Homebrewの公式ページにある以下のスクリプトをコピーします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ターミナルを起動 ターミナルにコマンドを入力アプリケーションフォルダ内にあるユーティリティのフォルダにターミナルというツールがあります。このターミナルを起動し、コピーしたHomebrewのスクリプトをペーストして入力します。最初にパスワードを求められますので、macOSにログインするパスワードを入力します。パスワードを入力すると以下のようなコマンドが出力されます。

==> This script will install:/usr/local/bin/brew/usr/local/share/doc/homebrew/usr/local/share/man/man1/brew.1/usr/local/share/zsh/site-functions/_brew/usr/local/etc/bash_completion.d/brew/usr/local/Homebrew==> The Xcode Command Line Tools will be installed.Press RETURN/ENTER to continue or any other key to abort:このコマンドが出力されたらEnterキーを押すと、ターミナル上でインストールが開始されるので、終了するまで待ちます。インストールが完了したら、以下のコマンドを入力してインストールが成功したかを確認します。

brew help以下のようなコマンドが出力されたらインストール完了です。

Example usage: brew search TEXT|/REGEX/ brew info [FORMULA|CASK...] brew install FORMULA|CASK... brew update brew upgrade [FORMULA|CASK...] brew uninstall FORMULA|CASK... brew list [FORMULA|CASK...]Troubleshooting: brew config brew doctor brew install --verbose --debug FORMULA|CASKContributing: brew create URL [--no-fetch] brew edit [FORMULA|CASK...]Further help: brew commands brew help [COMMAND] man brew https://docs.brew.sh2.Gitをインストール
次に、Homebrewを使ってGitをインストールします。Gitを実行するためには、Command Line Tools（古いOSではコマンドディベロッパーツールと表記される場合も）が必要ですと警告される場合があるので、その場合はCommand Line Toolsをインストールします（Macの場合、機種によってはGitがデフォルトでインストールされているものもあるようです）。ターミナルで、以下のコマンドを入力すると、Homebrew経由でGitがインストールされます。インストールには、数十秒～数分かかる場合があります。

brew install gitGitがインストールされたかを確認するにはGitのバージョンを確認する以下のようなコマンドを入力します。

git --version以下のようなコマンドが出力されたらGitのインストールは成功しています。

git version 2.15.0このgit version 2.15.0は、古いバージョンのようです。HomebrewでGitをインストールした場合、古いバージョンと新しいバージョンが混在する場合があります。この場合、以下のコマンドで古いバージョンを削除して、最新バージョンにアップデートすることができます。

sudo rm -rf /usr/local/etc/gitconfigsudo rm -rf /usr/local/bin/gitbrew upgrade git再度、バージョンを確認する　git --version　を実行すると以下のコマンドが出力されました。

git version 2.39.3 (Apple Git-145)これで最新のバージョンのGitにアップグレードできたようです（※intel版のGitはgit 2.43.0が最新という情報もありましたが、実際にはM1以降のチップに合わせてintel版もダウングレードで適応されているようです）。

3.Gitにユーザー名とメールアドレスを割り当てる
Gitのインストールが完了したら、ローカル上のGit全体にユーザー名とメールアドレスを割り当てます。Gitにユーザー名とメールアドレスを割り当てるコマンドは以下になります。

git config --global user.name "ユーザー名"git config --global user.email "メールアドレス"Gitにユーザー名とメールアドレスをしっかりと割り当てられたかを確認するには以下のコマンドを入力します。

git config user.namegit config user.email先ほど設定したユーザー名とメールアドレスがコマンドで帰ってきたら、ユーザー名とメールアドレスを割り当てる作業は完了です。

4.ローカルのリポジトリを作成する
次に、ローカルのリポジトリを作成します。次のコマンドでローカルリポジトリ用のフォルダが自動的に作成されますので、フォルダ名を考えておきましょう。ここでは「sample」としておきます。コマンドは以下になります。

mkdir samplecd samplegit init以下のようなコマンドが出力されたらローカルリポジトリの作成が完了です。下記ディレクトリに、「sample」というgit用のフォルダが作成されているので確認しておきましょう。

/Users/ユーザー名/sample/.git/4.ローカルリポジトリとリモートリポジトリを連携させる
次に、リモートリポジトリとローカルリポジトリを連携します。リモートリポジトリのURLを確認する必要があるので、GitHubのリポジトリ管理画面を開きます。

 

「<>code」という緑色のボタンをクリック URLをコピーするリポジトリ管理画面にある「<>code」という緑色のボタンをクリックすると、「Local」というタブにURLが表示されています。このURLをコピーして以下のコマンドを入力します。

git remote add origin https://github.com/○○○○/sample.gitリモートリポジトリとの連携が実行できたかは以下のコマンドを入力します。

git remote -v以下のように、リモートリポジトリのURLがコマンド出力されたら、リモートとローカルのリポジトリの連携は完了です。

origin https://github.com/○○○○/sample.git (fetch)origin https://github.com/○○○○/sample.git (push)ここまで初期設定ができれば、Gitによるバージョン管理が実行できます。ただし、ローカルリポジトリの変更をリモートリポジトリに反映させるといったGitは、以下のような感じでターミナルでのコマンド入力によって作業することになります。

git add image.jpggit commit -m "image.jpgの変更"こうしたコマンド入力による作業を続けるのは、ノンエンジニアには現実的ではありません。この問題を解決するには、デスクトップ版のGitHubアプリを利用する、VS CodeでGitHubの拡張機能を追加するといった方法があります。これらの方法であれば、コマンド入力不要でソースコードのバージョン管理ができるようになります。

デスクトップ版のGitHubアプリ今回は入門編ですので、初期設定までの説明までとしておきます。ネット検索でわからない場合は、Chat GPTやGoogle Bardに尋ねると適切な回答を得られる場合もあるのでAIによるサポートも活用してましょう。

デザイナー向けGithubの活用方法（SNS的な使い方も）

最後に、デザイナー向けのGitHub活用法を紹介します。

▶Gitでデザインデータを管理する

1.Webデザインのバージョン管理に活用する
Webデザイン作業は、常に新しいアイデアや試行錯誤が発生するので、デザインの変更や修正を繰り返すケースは少なくないかと思います。そのため、変更履歴を管理することが重要です。GitHubを導入すれば、過去の状態への復元や変更履歴の共有が簡単になります。インハウスWebデザイナーには、すでにプロジェクトでGitHubを活用している方も多いかと思いますが、フリーランスのWebデザイナーがソースコードを管理するにも大変便利です（ただし、GitHub上でクライアントの機密情報を扱う場合は有料プランへの加入が推奨されます）。

▶SNSとして活用する

1.プログラマーやクリエイターとつながる
GitHubは、プログラマーやクリエイターが集まるSNSのようなプラットフォームとしての側面もあります。GitHubをSNS的に活用することで、プログラマーや他のクリエイターと交流や情報共有が可能になります。また、自身のソースコードを管理する用途でなくても、プログラマーやエンジニアが公開している素材や、コードサンプルを入手するのにもアカウントを持っていたほうが便利です。HTMLやCSSといったマークアップ言語の勉強に役立つ資料を提供してくれているプログラマーも多いので、フォローしておくと良いでしょう。

2.ポートフォリオとして実績を公開する
GitHubプロフィールを活用して、自身のスキルやプロジェクトをアピールすれば、ポートフォリオにもなります。プログラマーや他のクリエイターに自身の実績を見つけてもらいやすくなるので、IT系のサービスやプロダクトなどのプロジェクトに関わりたい場合などに役立ちます。

3.フリー素材やデザインのTipsを提供する
GitHubは、フリー素材やデザインのTipsを提供する場としても活用できます。自分の作成したアイコンやイラストといったフリー素材、テンプレートやウィジェットといったデザイン素材、デザインの技術やノウハウといったTipsを公開することで、他のクリエイターに役立ててもらえます。価値ある素材やテクニカルな情報を提供することで、デザイナーとしてのスキル向上にも繋げられるでしょう。また、リモートリポジトリに手動でファイルをアップすることも可能なので、データのやり取りなどオンラインストレージ的な使い方もできると思います。
 

まとめ

本記事では入門編としてGitHubの基本中の基本の部分を紹介しただけなので、「物足りない」とか「何を今更」といった感想もあるかと思います。一方で、プログラミングの専門知識が少ない人にとっては、インストールや初期設定の段階でなかなか難易度の高いステップも含まれており、GitHubを使いこなせるようになること自体が高度な専門スキルであることも伝わったのではないでしょうか。

GitHubには難しい設定作業もありますが、リモートリポジトリのみの運用でもGitというバージョン管理システムを利用していることになります。また、SNS的に活用するだけでも十分に利用価値のあるサービスです。私が今回お伝えしたかったのは、デザイナーをはじめとしたクリエイターの方にもぜひGitHubというサービスを一時情報として体感してほしいということです。本記事を参考にして、まずはアカウント開設からスタートしてみてください！