WebデザイナーがGitを使うべき！な理由

そもそもGitってなに？

Gitとはコードなどを記録し、変更した履歴を残して管理するバージョン管理ツールです。

➡️Git公式サイト(英語)

バージョン管理という言葉が難しく聞こえるかもしれませんが、いつ・誰が・どこの部分を・どう変更したのかという履歴を残せる仕組みのことなんです。

例えばcssで『display:block;』を『display:none;』に変更したとき。

• いつ
• 誰が
• どのcssファイルの何行目か
• どのコードを→display:block;
• どう変更したか→display:none;

を記録してくれるんです。

個人はもちろん、複数人での管理にもとても便利ですね。

サイト製作でこんな悩み、ありませんか？

HTMLやCSSはとにかく細かい修正を重ねて製作・運営されます。　

そのため、最新のファイルがわかりにくい場合やファイル管理がずさんな場合、以下のようなトラブルが起きやすくなります。

• 1.チームメンバーでの共有がうまくいかずミスが起こる
• 2.前のバージョンに戻すときにファイルを探す手間がかかり効率が悪い
• 3.バックアップファイルがどんどん溜まっていく

個人で製作をしているWebデザイナーの方も、2と3は心当たりがあるのではないでしょうか。　

作業前にバックアップに日付を入れて保存している人が多いかと思いますが、修正ごとにファイルを保存し続けるとデータ量がどんどん膨らんでいきます。

そしていつでもすぐにすべてのバックアップにアクセスできるというわけではないため、効率も悪いですよね。

Git Hubで解決しよう

そんなトラブルを、GitHubで解決できます！

➡️ GitHub

Gitと混同されることが多いのですが、実はGitとGithHubは別物なんです。

• Git→バージョン管理の仕組み
• GitHub→Gitをオンライン上で管理するサービス

GitHubは世界中のユーザーが編集したコードを保存・共有しているサービスです。　

コードは公開・非公開の設定ができるので安心。　

そしてGitHubの嬉しいポイントは、デザイナーでもわかりやすく画面上でマウスを使って操作するだけも管理できる点です。

チームではなく個人のみで使う場合は、オンラインではなく自分のパソコンの中だけで使用することもできます。　

デザイナーはまずここからスタートするとわかりやすくておすすめなんです！

デザイナーのわたしがGitを使ってみて感動したポイント

なぜわたしがデザイナーにもGitを使ってほしいとおすすめするかといいますと、実際に使ってみて効率の良さに感動したからなんです。　

その中からいくつかご紹介しますね。

「一部分だけ昔の状態に戻したい」にすぐ対応できる

サイトの修正をした後、一部分だけ昔の状態にしたいという依頼はよくあります。　

1年前の状態に戻して！という希望をもらうことだってあります。　

そんなときも、さっと該当のファイルを見つけてコード修正ができるんです！

それまでのように、過去のバックアップファイルを出してきて戻したい状態のものかどうかをチェックして…という手間がかからなくなったことに感動！　

作業時間が大幅に短縮できます。

お客様が修正した後のエラーの原因をすぐに発見

納品後にお客様から「HTMLを修正したらサイトにエラーが出てしまった」という連絡をいただいたことがありました。

そこで納品時のバックアップと現在のファイルの差分をGitで確認したところ、エラーの原因となる箇所が一瞬で見つかったんです！　

検証に時間をかけることなく、無事に正常な表示に戻ってお客様もわたしも幸せな案件でした。

外付けHDDを買い込まなくていい！

必要になるかどうかもわからない保存用のファイルをいくつも溜め込む必要がなくなり、データ保存用の外付けHDDを毎年大量に購入する必要がなくなりました！　

実がこれが一番感動したポイントでもあります。

サイトによっては画像データが非常に重く、サイト全体のデータが膨大なケースもあります。　

そんなサイトのバックアップを作業前・作業後といったように何度も保管していると、数年たつとかなりなデータ量になっていたんです…。

Gitを使い始めてからはサイト１つにつきリポジトリ１つ分だけで済むため、データ保管がストレスフリーになりました！

お客様の大事なデータですし、ストレスなくきちんと管理できる環境にしたいですよね。

デザイナーも最低限覚えたいGitHub入門

わたしのように黒い画面(ターミナル)に拒否反応が出るような方には、アプリを使った方法をおすすめしています。

ちなみにわたしは『GitHub Desktop』を使っています。

マウスでクリックしていくだけで大体のことができる便利なアプリなので、ぜひお試しください！

➡️ GitHub Desktop

Gitを使う上で最低限覚えて欲しい言葉は以下の6つです。

• 1.「リモートリポジトリ」と「ローカルリポジトリ」
• 2.クローン
• 3.コミット
• 4.プッシュ
• 5.プル

GitHub Desktopのような便利なアプリを使えば、感覚的に作業できるものばかりです！　

では、それぞれを簡単にご説明します。

1.「リモートリポジトリ」と「ローカルリポジトリ」

Gitにおいて「リポジトリ」とは、倉庫や収納場所と考えるとわかりやすいと思います。

• リモートリポジトリ：サーバー上に置いている収納場所
• ローカルリポジトリ：ローカル(オフラインで編集できる場所)に置いている収納場所

どちらもファイルの更新履歴と最新のファイルがすべて保存されます。

リモートリポジトリはオンラインで接続できるので、複数人で管理できるのが最大のポイント。

ローカルリポジトリは、わかりやすく言えば自分のパソコンの中で管理する収納場所ですね。

2.クローン

リモートリポジトリに置いているものを変更履歴も含めて丸っとすべて自分のパソコンにダウンロードすることを、クローンと言います。

そして手元にあるファイルで作業するという流れです。

まだリモートリポジトリを作っていないときや、ローカルのファイル管理だけで完結するときは使わない操作でもあります。

3.コミット

HTMLやCSSなど作業をして変更したものを記録することを、コミットといいます。 ファイルを追加や削除、コードを変更したあとはコミットして変更の記録をする、いわゆるデータセーブですね。

そしてコミット時にそのデータが一体どういったものなのか、というメッセージを入力します。　

ここに変更の概要や修正の詳細、注意点などがあれば入れておくと見返すときにとても便利です。

4.プッシュ

ローカルリポジトリでコミットして記録したものをリモートリポジトリにアップロードすることを、プッシュといいます。　

変更したファイルも履歴もまとめてアップロードしてくれるので、これで他のメンバーと最新状態が共有できるというわけです。

5.プル

リモートリポジトリからローカルリポジトリに、他のメンバーによって変更された履歴をダウンロードすることをプルといいます。

リモートリポジトリを利用している場合は、作業前にプルをするようにしておくと安心ですね。

Git初心者はまずローカルからスタートしてみよう

個人利用でもサーバー上で管理する方が、万が一自分のパソコンが壊れてしまったというときでも安心です。　

しかし、Gitはよくわからないし使いこなせないという方は、まずローカルリポジトリでバージョン管理をするところからスタートしてみましょう！

先述したパソコンアプリのGitHub Desktopなら、ローカルでの管理は簡単にできます。 ➡️ GitHub Desktop

• 1.パソコンの中にリポジトリを作る
• 2.その中に通常通りHTMLなどのファイルを保存する
• 3.コミットする　１回目
• 4.コードを修正してみる
• 5.コミットする　２回目
• 6.１回目と２回目の差分のチェックする
• 7.１回目のバージョンに戻してみる

ここまでできれば、デザイナーとしては十分です！　

自分のパソコン内でのコードの管理がとても楽になります。

画像の差し替えもきちんと記録されるので、バナー画像の変更なども後からチェックできてとっても便利。　

これはパソコン(外付けHDDでもOK)内での作業なので、オフラインでも問題ありません。　

難しいことはわからないという人でも、ここまでならチャレンジしやすいのではないでしょうか。

最初にリポジトリを作る方法は以下のリンクで説明されていますので、ぜひ参考にしてください。　

GitHub Desktop を使った最初のリポジトリ作成方法 - GitHub Docs

ちなみに前のバージョンに戻す作業は、GitHub Desktopならワンクリックでお手軽ですよ！

Git初心者の方への注意点

デザイナーの方でもプログラムに強いなら問題ないのですが、もしそうでないなら注意してほしい点はいくつかあります。

• 慣れていないうちに他のメンバーと一緒に作業する
• よくわからないエラーメッセージに自分で対応する
• 作業前に自分のローカルリポジトリの状態を確認しない

まずはローカルでのバージョン管理に慣れましょう！　

Git独特の言葉や流れに慣れたら、リモートリポジトリでのバージョン管理に進んでみてくだいね。

複数人での管理に参加するのは、それからのほうが全体像を理解しやすいと思います。

そして、エラーメッセージが出てきてその意味がわからないときは無理に対処するのはやめましょう！　

もちろん、エラーの意味が理解できて自分で解決できるなら問題ありません。　

もし意味がわからずやみくもにあちこちクリックしてしまうと、意図せずデータを削除してしまう可能性もあるため要注意です。

GitHubのフォーラムもありますので、自分の手に負えない！と感じたときはプロに助けを求めましょう。

まずはローカルでバージョン管理してみませんか？

専門用語がたくさん出てきて、やっぱりハードルが高い・・・と感じたデザイナーの方。　

まずはローカルでのバージョン管理だけ、やってみませんか？

難しいところまで使わなくていいんです！

自分のパソコン内だけでのデータ保存用の仕組みとして、試しに使ってみてください。

慣れてくるとコーディングデータの管理のしやすさに感動するかもしれません！

最初は気持ちのハードルが高いかもしれませんが、仕事を効率化できるとても便利なツールです。　

パソコンアプリを上手に使って手軽にスタートしてみましょう！

「Gitが使えます」　

というだけで、あなたのデザイナーとしての価値がアップするかもしれません！