TechAcademy（テックアカデミー） プログラミング Git 【初心者向け！】Gitを入門から学べる学習サイト10選
Git

【初心者向け！】Gitを入門から学べる学習サイト10選

Git初心者向けにおすすめの学習サイトを紹介。入門から独学でかつ、無料で学べるのでこれから学習し始める人に最適でしょう。GitやGithubの知識は開発現場で必ず役立つので、これを機会にぜひ学習し始めてみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

初心者向けにGitを入門から始められる学習サイトを集めてみました。

Git(ギット)はとても便利なバージョン管理システムです。実際の現場でも必ずと言っていいほど使用するので、覚えておいて損はないでしょう。

どのサイトも動画やイラストなど特徴が違うので、自分の理解しやすいタイプのサイトを見つけてみてください。

 

なお本記事はTechAcademyのオンライン完結のGitHub講座のカリキュラムをもとに執筆しています。

 

ドットインストール

学習タイプ：動画

プログラミングを学ぶならここドットインストールでしょう。

もちろんgitも対応しています。全22回に分けて動画で説明してくれているので分かりやすくておすすめです。

ドットインストール

 

サルでもわかるGit入門

nm_08_02

学習タイプ：テキスト/イラスト

このサイトのGit入門は本当にわかりやすいと思います。

入門編から入ってスムーズに発展編などもうちょっと上級なことにストレスなく移れるのでおすすめです。サルの可愛いイラストもほっこりしていいですね。

サルでもわかるGit入門

 

[PR] 無料で現役エンジニアから学べる

LIG

nm_08_03

学習タイプ：テキスト

本当の初心者向けです。Git入門のための概念から基本用語までこちらの記事では一ページのコラムでGitについて全く初めからかなり細かい使い方まで説明してくれています。

LIG

 

GitHub

nm_08_04

学習タイプ：テキスト

本家Gitの解説サイトです。

正確に間違いない情報、最新の情報が載っているので、たとえ他でうまくいかなかったとしてもここにもどってこれば問題は解決するでしょう。

もちろん全く初めての人にも書いているので安心して読み始めてください！

Github

Githubの使い方も初心者向けに詳しく解説しているので、合わせてご覧ください。

 

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

Asial

nm_08_05

学習タイプ：テキスト/イラスト

イラストでわかる！git入門の入門。

イラストでgitについて説明してくれています。なんでも視覚的に勉強すると身に付きやすいですよね。

Asial

 

Developers.IO

nm_08_06

学習タイプ：テキスト

全18チャプターに渡って事細かにGitについて説明してくれています。

ぱっと初心者向けには見えませんが、下にスクロールして一から順に行っていくといつの間にか高みにいるかもしれません。

Developers.IO

 

1時間でできる無料体験！

PAYFORWARD〜Git初学習者のための効率的な学習方法を考えてみた〜

nm_08_07

学習タイプ：テキスト

こちらは直接プログラミングではありませんが、どうやったらGitを効率的に学習できるか考察したものです。Gitを始める前に一読しておくのもいいかもしれません。

PAYFORWARD

 

Learn Git Branching

nm_08_08

学習タイプ：ハンズオン(実際にコマンドを打ちながら学習)

ややこしいGitブランチの概念を図を用いてクイズ形式で学べるものです。非常にわかりやすいですね！

Learn Git Branching

 

SDNMagazine〜Gitを使いこなすための20のコマンド〜

nm_08_09

学習タイプ：テキスト

こちらはGitを使うためによく使うおもなコマンド20個説明してくれています。とりあえずややこしい概念よりもコマンドを！という人にとって一番の近道かもしれません。

SDNMagazine

 

SourceTree

nm_08_10

学習タイプ：ハンズオン

こちらは英語サイトで、しかも初心者のためのGit解説サイトではないのですが、Gitのコマンドなど覚えなくてもサクサク使えるアプリなのです。

視覚的に分かりやすく使えるデザインも優れたユーザーインターフェイスなのでまずはここから始めるのはあながち間違いではないかもしれません。

SourceTree

 

以上、Gitの入門向け学習サイトをまとめて紹介しました。

見たことあるサイトもあれば、初めて見るサイトもあるでしょう。それぞれ特色があり学習タイプもバラバラなので、ぜひ自分のスタイルに合った学習をしていきましょう。

無料でできるので、誰でも気軽に進められるはずです。

[お知らせ]TechAcademyでは自宅で学べるオンライン完結のGitHub講座を開催しています。わからないことをチャットで質問すると、現役エンジニアのメンターが毎日すぐに回答します。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

誰でもすぐ分かる！git branchでブランチを作成する方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit branchの使い方を紹介していきたいと思います。...
Git

git mergeを使ってブランチをマージする方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit mergeの使い方を紹介していきたいと思います。 ...
Git

git remoteを使ってリモートリポジトリの追加と削除を行う方法【初心者向け】現役エンジニアが解説

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit remoteの使い方を紹介していきたいと思います。...
Git

git diffを使って変更されたファイルの差分を表示する方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit diffの使い方を紹介していきたいと思います。 ...
Git

git ignoreを使ってファイルを無視する方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit ignoreの使い方を紹介していきたいと思います。...
Git

git statusで変更されたファイルを確認する方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 しかし、使用方法をきっちりわかっていないと、便利なツールも宝の持ち腐れとなってしまいます。 ...
Git

あわせてよく読まれている記事

独学でゲームが作れる！入門に最適なUnityの学習サイト20選

現在ゲームを作るためのゲームエンジンはたくさんの種類があります。 その中でも世界で一番使われているのがUnityです。ただUnityの勉強を始めたいと思っても何から始めれば良いのかわからない方もいらっしゃるかと思います。 今回はそんな方のために、Unityの勉強を始める際にオススメの入門サイトを紹介していきたいと思います。   なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。   Udemy 学習タイプ：動画 初心者から上級者まで様々なレベルの人が使えるUnity学習サービスです。 もちろんUnity以外にもありますが、実践的に学習が行えるので、本格的なゲームを作りながらUnityの知識を身につけることが可能です。 スマホでもPCからでも自分のペースで学習することができるはずです。 Udemyの特徴としては、最新技術をいち早く有料コースとして学習することが可能です。 Udemyのコースは、Udemyが提供しているコースだけでなく、Udemyという学習教材をオンラインで公開するサービスに、専門家が各自で作成した教材を公開しています。 そのため、ある技術に関する講座として様々な角度から様々な価格と言語で学習をすることができます。 また、その多くが動画テキストを採用しているため、文字を読むのが苦痛な受講生にも人気です。 スマホからも学習可能ということで、いつどこでも自分の好きなときにアカウントにログインして、簡単にコースにアクセスできます。 この機能のおかげで学習の機会が無限に開かれています。 そして、一度コースを購入すれば、アカウントが有効で、かつUdemyがコースのライセンスを所有し続ける限り、いつまでもコースへのアクセスが可能です。 Udemy   ドットインストール(Unity入門) 学習タイプ：動画 プログラミング初学者の味方「ドットインストール」です。 Unityのバージョンが少し古い物になっていますが、基礎操作や基礎知識を覚えるのには最適なサイトであると言えます。ここからUnity学習の第一歩を踏み出しましょう。 2017年現在はUnity4.2のみサポートしています。 また、このレッスンはサポート終了しています。 ドットインストール(Unity入門) また、ドットインストールの体験記事もございます。 プログラミング学習の超定番！「ドットインストール」をやってみた [PR] 無料で現役エンジニアから学べる OpenBook(Unity入門) 学習タイプ：テキスト OpenBookは誰でもオンライン上で本を作成できるサービスです。 そのサービス上で公開されているUnity入門です。基礎的な物理演算や摩擦、アプリの書き出しなど様々な技術を覚えることができます。 東京大学出身の著者を中心とした教材ですので、東京大学というキーワードに興味がある方には、心くすぐられる教材です。 OpenBook(Unity入門)   はじめてのUnity 学習タイプ：テキスト はじめてのUnityとなっていますが、前述の二つのサイトと比べるとレベルは少し高めとなっています。特に2Dシューティングのチュートリアルは骨のある内容となっており、これを完了すればUnityの基礎は理解したと言っても過言ではないでしょう。 Unity公式ページで解説されているテキストですので、公式ページとして安心して受講することが可能です。 はじめてのUnity   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
Unity

【入門向け！】独学に最適なHTMLを学べる学習サイト20選

Web開発やデザインをやってみたいけれど、何から手をつければ良いか分からないという方もいらっしゃるかもしれませんね。 Web関連の学習に当たってまず必要な知識はHTML（HyperText Markup Language）です。 ここでは、HTML学習に役立つサイトをご紹介したいと思います。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。     Udemy 学習タイプ：動画 HTMLの基礎やHTML5を使ったゲーム作成など、初めてHTMLを学ぶ方におすすめの動画が多くあります。 何か作りながらHTMLやCSSを学ぶことができるので、実践的に楽しく身につけられるはずです。 Udemy   ドットインストール 学習タイプ：動画 3分動画で学べる初心者向けのプログラミング学習サイトです。HTMLだけでなく、CSS、JavaScriptも学べるので便利です。実際にウェブサイトを作る講座もあるので発展的に学習することができます。 初めてHTMLに触れるという方におすすめです。 ドットインストール    [PR] 無料で現役エンジニアから学べるSchoo 学習タイプ：動画 IT系の講座がメインのサービスで、WEB業界のプロがデザインやWEB開発について教えてくれます。現場の知識も教えてくれるので実践でも役立ちます。授業中に質問できるという点がポイントです。 Schoo   ShareWIS 学習タイプ：動画 HTMLを短い動画で学ぶことができるので、隙間時間を利用した学習が可能です。動画の最後にはミニクイズがあるので1つ1つの動画をしっかり理解してから先に進むことができます。 ShareWIS   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
HTML

独学で身につく！入門向けのJavaScript学習サイト20選

JavaScriptをこれから学習したいという人におすすめのサイトをまとめて紹介しています。 独学で学習できますし、無料で進められるので手軽に始められるでしょう。HTMLとCSSを学習してみて次のステップに進みたいという方やJavaScriptを身につけてWebサイトの表現方法を増やしたいという方にはおすすめです。 各サイト動画やテキストなど学習タイプも載せているので、ぜひ自分に合ったサイトを見つけてみてください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   1. Udemy 学習タイプ：動画 JavaScriptを初めて学ぶ人、ちょっと触ったことがある人など様々なターゲットに合わせて動画があります。 本格的に学べる講座は、有料になっていますが、かなり実践的に学べるので、深い知識を身につけたい人にもおすすめです。 Udemy   2. ドットインストール 学習タイプ：動画 プログラミングを学ぶならもはやスタンダードなドットインストールです。 動画で分かりやすく解説してくれており文字を読むのが苦手！！というひとでも入りやすいのが特徴です。とりあえずここから始めれば間違いないでしょう！ ドットインストール   [PR] 無料で現役エンジニアから学べる3. とほほのWWW入門 学習タイプ：テキスト いきなりコードのサンプルを用いて学習していくので全くの初心者向きではないのかもしれませんが、それでもサンプルを実際に動かしながら楽しんで学習できる点は素晴らしいです。 とほほのWWW入門   4. WEB+DB PRESS plus 学習タイプ：テキスト ノンプログラマのためのJavaScriptはじめの一歩。 プログラミング自体が初めての人から対象にしてくれているのでいきなりJavaScriptという一番重要な言語が学べてこのサイトに出会った人はラッキーです。 その他プログラミング言語を学んでいくにあたって大切なことも語られているのでしっかり肝に銘じて学習しましょう。 WEB+DB PRESS plus   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、
JavaScript

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。   プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。 最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。   昔のデモディスクを覚えていますか？ 機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。 プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。   最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。 最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。   今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。 このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。   ワイヤーフレーム＆モックアップ VS. プロトタイプ デザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。 ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。 ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。 例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。 それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。   いつプロトタイプが必要になるのか？ 何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。 わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。 シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。 また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。 加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。   [PR] 無料で現役エンジニアから学べる4種類のプロトタイプ プロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。   1. 概念的プロトタイプ このプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。 全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。 この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。 概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。   2. ローファイプロトタイプ ローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。 ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。 「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。 アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。 概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。   3. ミディアムファイプロトタイプ 段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。 ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。 有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。 ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。 リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。   4. ハイファイプロトタイプ この段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。 ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。 アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。   プロトタイピングのメソッド プロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。 あなた自身とクライアント双方にとって適合するメソッドを選びましょう。   ビデオまたはプレゼンテーションのプロトタイプ これらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。 クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。 ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。 聴き手が共感できる問題を提示する。 あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。 これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。 ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画より   ワイヤーフレーム ワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。 ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。 しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。   紙のプロトタイプ これはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。 インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。 ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。 またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。 誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。   アプリで作成するミディアムファイおよびハイファイプロトタイプ これらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。 異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。 また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。   コード もちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。 あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。 作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。 製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。 インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。 あなたがキーを押すのが好きで、クリックするのは嫌いである。 ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。 すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。   フレームワークによるプロトタイピング フレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。 補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。 または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
アプリデザイン

【学習タイプ別】入門向け！Pythonの学習サイト10選

今回は入門向けのPython学習サイトを10サイト紹介したいと思います。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   Udemy 学習タイプ：動画 無料と有料のコースが存在するオンライン学習サイトです。 Pythonに関するコースも多数あります。 有料コースは9600円程度からありますが、度々セールを行っています。 初回は特に安いので、初回登録時にまとめて購入するのがおすすめです。 Udemy   ドットインストール 学習タイプ：動画 ドットインストールではPython3を31回に分けて学習することができます。有料会員は月額980円です。 説明に使用しているPythonはPython 3.5.2です。 無料公開されている部分は2017年現在、次の5回講座分です #01 Pythonを使ってみよう 概要 公式サイト 必要となる知識 レッスンにおける環境 #02 はじめてのPythonプログラム myapp.pyの作成 実行方法 コメントの書き方 #03 変数を使ってみよう 変数の使い方 定数の概念 #04 さまざまなデータを扱ってみよう 文字列 数値 論理値 #05 データの演算をしてみよう データの演算 ドットインストール   [PR] 無料で現役エンジニアから学べるCheck.io 学習タイプ：ハンズオン check.ioはPythonのコードを勉強しながらゲームをクリアしていくというコンセプトの学習サイトで、基本無料で学習できます。 facebookやGoogleアカウントでログイン登録が可能です。 最初は英語中心の画面表記ですが、日本語での説明テキストがあります。 無料公開されている内容も多く、モチベーションを保ちながらゲームをクリアしていく感覚で学習が可能です。 また、随時有料コースが追加されているため、学習し続けることが可能です。 有料コースも数百円（支払いはドル）から追加が可能です。 checkiO   paiza.io 学習タイプ：ハンズオン paizaは、オンラインですぐに無料でプログラミングが始められる、 オンライン実行環境です。 現在は、Java、C、C++、C#、Ruby、PHP、Python、Perl、JavaScriptと言ったメジャーな言語からGo言語やScala、Haskellなど24言語以上の実行環境として利用することが可能です。 学習初心者にとって、実行環境を整えることが大きなハードルですので、paiza.ioのような実行環境サービスを利用することで、初心者の学習が簡単になります。 また、他の人が書いたコードも公開されているので、プログラミングを学習する上での基本的なコードから実践的なコードまで、参考にすることができます。 paiza   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由
Python

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。 エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。 そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。 本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。 目次ドットインストールサルでもわかるGit入門LIGGitHubAsialDevelopers.IOPAYFORWARD〜Git初学習者のための効率的な学習方法を考えてみた〜Learn Git BranchingSDNMagazine〜Gitを使いこなすための20のコマンド〜SourceTree Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     大石ゆかり 田島メンター！！GitHubってなんですか〜？ 田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。 大石ゆかり もう少し詳しく教えてもらえますか〜？   GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。 ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。 また、GitHubを使ってソースコードの管理を行っている企業も多数あります。   GitHubが人気な理由と類似サービスとの違い GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。 それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。 理由1：無料のプライベートリポジトリ ソースコードを管理する単位をリポジトリと呼びます。 リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。 ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。 しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。 これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。   理由2：オープンソースコミュニティに育まれたSNS機能 オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。 また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。 このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。 コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度） 開発メンバーの知見を共有する機能（Wiki、GitHub Pages） ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動） 単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。 しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。   理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。 このような環境の中から、以下のような先進的な機能が次々と誕生しています。 世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」 オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能 ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」 これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。   GitHubのアカウント登録 それではさっそくGitHubに登録してみましょう。 まずは、GitHubのトップページにアクセスします。 ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。   次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。 下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。 クイズになっており渦巻状の銀河の絵を数回選択します。 なお、このクイズは定期的に変わるようです。   決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。 ボタンを押して次に進みましょう。   このような画面になります。   登録したメールアドレスに認証のメールが届きます。 メールの内容に従いユーザー認証を行ってください。 以上でGitHubのアカウント登録は完了です。   大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？ 田島悠介 その前にいくつか知っておいたほうがいいことがあるから、教えておくね。 大石ゆかり はい、お願いします♪   [PR] 無料で現役エンジニアから学べるGitHubを使う上で知っておきたい事前知識 早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。 ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。 事前知識1：ローカルリポジトリとリモートリポジトリ 事前知識2：コミットとプッシュとは 事前知識3：ブランチ（branch）とは 事前知識4：インデックス（index）とは   事前知識1：ローカルリポジトリとリモートリポジトリ リポジトリとは、ファイルやディレクトリの状態を保存する場所です。 変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。 リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。 基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。   事前知識2：コミットとプッシュとは 最低限この2つは知っておきましょう。 コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存すること プッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作   事前知識3：ブランチ（branch）とは ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。 このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。 ブランチは履歴の流れを分岐して記録していくものです。 分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。   事前知識4：インデックス（index）とは リポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。 そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。 逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。 忘れないようにしましょう。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
Git

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） プログラミング Git 【初心者向け！】Gitを入門から学べる学習サイト10選