Gitの使い方を初心者向けに解説！Webデザイナーが最低限覚えたい操作と手順

Web制作の求人票や案件募集を眺めていると、「Gitが使えること」という条件をやたらと見かけないでしょうか。デザインはある程度描けるようになったのに、Gitという言葉が出てきた瞬間に手が止まってしまう、という声は初心者から本当によく聞かれます。

Gitは「ファイルの変更履歴を記録して、いつでも過去の状態に戻せるようにする仕組み」であり、Webデザイナーが覚えるべきコマンドは実質10個ほどです。全機能を理解する必要はまったくありません。

この記事では、Gitをこれから触る方に向けて、インストールから初期設定、日常的に使うコマンド、ブランチの考え方、つまずきやすいポイントまでを順番に整理します。読み終わるころには、自分の作業フォルダをGitで管理してGitHubに上げるところまでのイメージがつかめるはずです。

Gitは黒い画面で操作するから怖く見えるだけで、やってることは「保存」と「巻き戻し」だよ。仕組みから順番に見ていこう。

そもそもGitとは何なのか

バージョン管理という考え方

Gitは「バージョン管理システム」と呼ばれるツールです。ファイルをいつ・誰が・どこを変更したかを記録し、必要になれば過去のどの時点にも戻せるようにします。

Gitを使わない現場では、こんなフォルダ構成を見かけることがあります。

• index_最新.html
• index_最新2.html
• index_最新_修正版.html
• index_最新_修正版_これで確定.html

笑えない話ですが、この方式は数日経つと自分でもどれが本物かわからなくなります。Gitを使えばファイルは1つのまま、履歴だけが積み上がっていく形になるので、フォルダが散らかりません。

GitとGitHubは別物

初心者が最初に混乱するのがこの2つの違いです。名前が似ているので同じものだと思われがちですが、役割はまったく異なります。

つまりGitが履歴を作る道具で、GitHubはその履歴の置き場所という関係です。GitHub以外にもGitLabやBitbucketといった置き場所がありますが、個人の学習であればGitHubを選んでおけば情報量の面で困りません。

Webデザイナーがなぜ求められるのか

コーディングまで担当するデザイナーはもちろん、デザインデータだけを扱う立場でもGitの知識は役立ちます。制作会社やチーム開発では、エンジニアとのやり取りがGitHub上で行われることが当たり前になっているためです。

「デザインの修正指示がGitHubのIssueで飛んでくる」「この画像を差し替えてプルリクエストを出してほしいと言われる」といった場面で、まったく触れないと会話に入れません。操作を完璧にこなせなくても、用語と流れを理解しているだけで仕事の進めやすさが大きく変わります。

Gitの用語や全体の流れは、イラスト付きの入門書で先にイメージをつかんでおくと理解が早くなります。

Gitを使い始めるための準備

Gitをインストールする

まずは自分のパソコンにGit本体を入れます。Git公式サイトからOSに合わせたインストーラーを入手できます。macOSの場合は最初から入っていることも多く、ターミナルで次のコマンドを打つと確認できます。

git --version

バージョン番号が返ってくれば導入済みです。「command not found」と表示された場合はインストールが必要になります。

最初に一度だけやる初期設定

インストール後、名前とメールアドレスを登録します。これは変更履歴に「誰が記録したか」を残すための情報です。

git config --global user.name "your-name"
git config --global user.email "your@example.com"

あわせて設定しておきたいのが、新しく作るリポジトリの初期ブランチ名です。

git config --global init.defaultBranch main

かつては初期ブランチ名がmasterでしたが、現在の実務ではmainが標準的に使われています。この一行を設定しておくと、以降に作るリポジトリのブランチ名が自動でmainになり、チームの環境と揃えやすくなります。

GitHubの認証はパスワードでは通らない

ここは初心者がつまずきやすいポイントです。GitHubはHTTPS経由でのIDとパスワードによる認証を廃止しており、現在はパスワードを入力しても弾かれます。認証には次のいずれかを使います。

• パーソナルアクセストークン（PAT）：GitHubの設定画面で発行する長い文字列。パスワードの代わりに入力する
• SSHキー：手元で鍵を作り、公開鍵をGitHubに登録しておく方式
• GitHub CLI／Git Credential Manager：ブラウザ経由で認証を通してくれる補助ツール

手順はGitHub公式ドキュメント（日本語）に画面つきで載っています。認証まわりは仕様変更が起きやすい領域なので、古い個人ブログではなく公式を見るのが結局いちばん早い方法です。

最初の設定でつまずく人はすごく多いんだ。ここを抜ければ、あとの操作はだいぶ単純だよ。

初心者が最低限覚えたいGitの操作

Gitには膨大なコマンドがありますが、日常的に使うのはごく一部です。まずは次の表にあるものを押さえれば、個人での制作は回せます。

作業フォルダをGit管理下に置く

制作用フォルダに移動して、次のコマンドを実行します。

git init

これでフォルダの中に隠しフォルダ「.git」が作られ、履歴の記録が始まります。見た目は何も変わりませんが、この瞬間からGitが変更を見張ってくれる状態になります。

変更を記録する3ステップ

Gitの保存は「選ぶ→確定する→送る」の3段階です。ここが独特で、最初は回りくどく感じるかもしれません。

git add index.html
git commit -m "トップページの見出しを修正"
git push origin main

addで記録対象を選び、commitで履歴として確定し、pushでGitHubへ送ります。すべての変更をまとめて記録したい場合は「git add .」と書けば、変更されたファイル全部が対象になります。

Gitに慣れてくると、コマンドを打つ時間が一気に増えます。長時間でも打ちやすいキーボードを選んでおくと、作業が快適になります。

コミットメッセージの書き方

commitの後ろに書く文章がコミットメッセージです。これは未来の自分やチームメンバーへのメモになります。

今の状態がわからなくなったら

操作の途中で混乱したら、まずこのコマンドです。

git status

変更されたファイル、addされているファイル、まだ管理されていないファイルが一覧で表示されます。Gitでわからなくなったときの最初の一手はgit status、これだけ覚えておけば大きな事故はかなり防げます。

ブランチの考え方をつかむ

ブランチは作業用の分身

ブランチは、本流とは別に作業用の枝を伸ばす仕組みです。「デザインの色違いパターンを試したいけれど、今動いている本番用は壊したくない」というときに使います。

git switch -c feature/color-change

このコマンドで新しいブランチを作り、同時にそちらへ移動します。以前はgit checkoutが使われていましたが、現在は用途がわかりやすいswitchとrestoreに分かれています。

作業が終わったら本流に合流させる

枝で試した内容が問題なければ、mainブランチに戻して合流（マージ）させます。

git switch main
git merge feature/color-change

チーム開発では、この合流をGitHub上の「プルリクエスト」という機能で行い、他のメンバーにレビューしてもらってから取り込むのが一般的な流れです。

ブランチは「セーブしてから別ルートを試すゲーム」に近い感覚だよ。失敗しても本編は無傷なんだ。

コマンドが苦手ならGUIツールという選択肢

黒い画面がどうしても好きになれない場合、マウス操作でGitを扱えるツールがあります。どれも無料で使えます。

GitHub Desktop

GitHubが公式に提供しているツールです。クローン・コミット・プッシュ・プルリクエスト作成といった基本操作に機能が絞られており、初めてGitに触る方には扱いやすい構成になっています。

Sourcetree

Atlassianが提供するツールで、日本語表示に対応しています。ブランチの分岐と合流が図で表示されるため、履歴の流れを視覚的に理解したい方に向いています。

VS Codeの内蔵機能

コードエディタのVS Codeには、Gitの機能が最初から組み込まれています。変更箇所が行単位で色分けされ、そのままコミットまで進められるため、エディタから離れずに作業を完結させたい方にはこの方法がいちばん手数が少なくなります。

初心者がつまずきやすいポイント

コミットしたくないファイルまで記録してしまう

Macが自動生成する.DS_Storeや、パスワードを書いた設定ファイル、容量の大きい元データなど、GitHubに上げたくないファイルは何かしら出てきます。これらは「.gitignore」というファイルに書いておくと、Gitが無視してくれます。

.DS_Store
node_modules/
*.psd

APIキーやパスワードを一度コミットしてGitHubに公開してしまうと、履歴に残るため単純に消しただけでは取り消せません。作業を始める前に.gitignoreを用意する癖をつけてください。

コンフリクト（衝突）が起きる

同じファイルの同じ行を、自分と別のメンバーが同時に書き換えるとコンフリクトが発生します。エラーが出ると焦りますが、Gitが壊れたわけではありません。ファイルを開くと両者の変更が記号つきで並記されているので、どちらを残すか決めて記号ごと消せば解決します。

Photoshopの元データが重くて上げられない

デザイナーが一度は直面しやすい問題です。GitHubには1ファイルあたりの容量制限があり、大きなPSDやAI形式のファイルはそのままでは扱いにくくなります。デザインの元データはクラウドストレージ側で管理し、Gitでは書き出した画像とコードだけを扱うという分業が現実的です。

学習に使える教材

手を動かしながら学べるサービス

読むだけでは身につきにくいのがGitです。ブラウザ上で操作しながら学べるProgateにはGitのコースが用意されており、コマンドを打ちながら流れを体験できます。無料で触れる範囲から始めて、続けられそうなら有料プランを検討する形で十分です。

手元に置いておきたい書籍

コマンドを調べるたびに検索するのは意外と時間を食います。机の横に1冊置いておくと、詰まったときの復帰が明らかに速くなります。イラストで概念から解説してくれる『わかばちゃんと学ぶ Git使い方入門』は、専門用語に慣れていない方でも読み進めやすい構成です。もう少し体系的に学びたい場合は『独習Git』のような技術書が向いています。

環境まわりで用意しておくと楽なもの

Gitの学習ではターミナルとブラウザとエディタを行き来し続けるため、画面の狭さがそのまま作業効率に響きます。ノートPC1台だけで進めていると、ウィンドウの切り替えだけで集中が途切れがちです。24インチ前後のフルHDモニターを1枚追加するだけで、手順書を見ながらコマンドを打つという基本動作がかなり楽になります。長時間タイピングするなら、テンキーレスのメカニカルキーボードのような打鍵しやすい入力環境も検討する価値があります。

よくある質問

Q. Webデザイナーもコマンドを覚える必要がありますか

職場によります。デザイン専任でエンジニアが実装を担当する体制であれば、GUIツールでコミットとプッシュができれば足りるケースもあります。ただし、コーディングまで担当する場合や、フリーランスで案件を受ける場合は、基本コマンドを扱えたほうが選べる仕事の幅が広がります。

Q. GitHubに上げたものは他人に見られますか

リポジトリの公開設定によります。パブリックにするとどなたでも閲覧でき、プライベートにすると自分と許可した相手だけがアクセスできます。クライアントの案件データを扱う場合は、プライベート設定になっているかを作成時に必ず確認してください。

Q. 間違ってコミットした内容は取り消せますか

取り消せます。直前のコミットをやり直すgit commit –amend、変更を打ち消す新しいコミットを作るgit revertなど、目的に応じた方法が用意されています。ただしすでにGitHubへプッシュ済みの履歴を書き換えるとチームに影響が出るため、共有済みの履歴はrevertで対応するのが安全です。

Q. 学習にどれくらい時間がかかりますか

個人差はありますが、この記事で紹介した範囲であれば数日から2週間ほど手を動かせば、日常操作には困らない状態になる方が多いようです。一度に全部覚えようとせず、使う場面で調べながら少しずつ身体に入れていくほうが定着しやすくなります。

Q. ひとりで制作するのにGitは必要ですか

必要というより、あると便利という位置づけです。ひとりでも「昨日の状態に戻したい」「どこを変えたか確認したい」という場面は頻繁に訪れます。ポートフォリオをGitHubに置いておけば、採用担当者に制作の過程を見てもらえるという副次的なメリットもあります。

まとめ

Gitは変更履歴を記録して過去に戻せるようにする仕組みで、Webデザイナーが実務で使うコマンドはinit・clone・status・add・commit・push・pull・logとブランチ操作程度に収まります。最初の関門はインストールと初期設定、そしてGitHubの認証まわりです。ここを越えれば、あとは同じ操作の繰り返しになります。

コマンドに抵抗があるならGitHub DesktopやVS Codeの内蔵機能から始めても構いません。大切なのは、完璧に理解してから使い始めるのではなく、自分の練習用フォルダで実際にコミットを積んでみることです。壊しても困らない場所で失敗を経験しておけば、実務で慌てずに済みます。

まずは練習用フォルダをひとつ作って、git initから始めてみよう。3回コミットすれば手が覚えてくるよ。