学習環境の準備

ここでは、学習をスタートする前にそろえておくものを3つのSTEPにまとめました。
上から順番に進めていけば、準備は完了します。

この記事でやること

STEP1|学習に使うツールをそろえる
Photoshop・Figma・VS Code・Zoom・Notion

STEP2|PCと作業環境を整える
PCスペックの確認・周辺機器・PCの初期設定4つ

STEP3|学習の進め方を決める
タスク管理・アウトプットの習慣・SNSのルール

トリペン先生

時間がある時に、まとめて準備してしまうのがおすすめです!

記事の内容

STEP1|学習に使うツールをそろえる

使うツールは全部で5つです。有料はPhotoshopだけで、あとはすべて無料で使えます。

① Photoshop(デザイン用/有料)

デザインをするために、PCにインストールしてください。
Photoshopだけ使えれば十分なので、一番安い「フォトプラン」でも受講期間中は問題なく使えます。

プランはストレージ容量の違いで金額が変わります。
まずはコストを抑えたい方はフォトプランでOK。あとからコンプリートプランに変更もできます。
※料金は改定されることがあるため、最新の金額は公式サイトでご確認ください。

Illustratorはいらないの?

トリペン先生

紙デザインをスタートする時に用意しますので、今の段階では必須ではありません!
もし契約するなら、コンプリートプランのほうが割安になります。

② Figma(デザイン用/無料)

Figmaは、Webデザインやアプリデザインでよく使われるUIデザインツールです。
Webデザイナーが一番よく使うツールなので、先にアカウントを作成しておきましょう!

公式サイト(アカウント作成はこちら)
https://www.figma.com/ja/

アカウント登録だけで無料で使えます。ブラウザで動くので、インストールは不要です。
アプリで使いたい方は、こちらからダウンロードしてください。

Figmaのアプリインストール
https://www.figma.com/ja/downloads/

③ VS Code(コーディング用/無料)

コーディングに使うテキストエディターです。無料なのでご安心ください。

公式サイト
https://code.visualstudio.com/

④ Zoom(オンライン講座用/無料)

オンライン講座で使います。仕事でも一番使うツールになるので、アプリのインストールとアカウント作成をお願いします。
※すでにZoomを使っている方はスキップしてOKです。

公式サイト(こちらでアカウント作成)※無料です
https://zoom.us/

Zoomアプリのダウンロード
https://zoom.us/ja/download

⑤ Notion(学習メモ用/無料)

業界でもよく使われているツールです。学んだことをまとめるのに便利なので、アカウントを作っておきましょう。
難しい使い方をしなくても大丈夫です。

Notion公式サイト
https://www.notion.so/

使い方はこちらの記事にまとめています。

あわせて読みたい
notionを使おう!初心者向け講座 コードスニペット雛形https://startkit.notion.site/f69daf65568a4811ab0dde29d91063dd?pvs=25学習・アクションプランテンプレートhttps://startkit.notion.site/98fd86...
トリペン先生

YouTubeでも色々な人が使い方を紹介しているので、参考にしてみてください!
Notionの使い方をYouTubeで探す

STEP2|PCと作業環境を整える

トリペン先生

Webの学習で一番の落とし穴は、実はPCの基本操作です。
ここを先に整えておくと、あとでつまずかずに進められます!

PCはWindowsでもMacでもOK

結論、どちらでも大丈夫です!

しいて言えば、慣れている方がおすすめです。
PC操作でつまずいて、ツールの使い方どころではない…というところからスタートする人が多いためです。本来なら問題ないところで時間がかかりすぎて、挫折してしまうケースも珍しくありません。

PC操作に問題がない方には、Macをおすすめしています。操作感が抜群に良いからです。
※torikumuの動画教材は、基本的にMacの操作画面で解説しています。

最低限必要なPCスペック

メモリ:8GB以上/ストレージ:256GB以上

これくらいあれば問題なく作業できます。ストレージは外付けを活用してもOKです。

PhotoshopとZoomはどちらも動作が重いツールです。
メモリが足りないと同時起動でPCが落ちてしまい、作業どころではなくなります。

あると効率が上がる周辺機器

マウス(デザイン作業では必須)

コーディングではそこまで必要性を感じませんが、デザインのときはマウスが必要です。
理由は細かい操作がスムーズにできるから。デザインは繊細な作業が多いので、マウスなしだと手がつりそうになります。

トリペン先生

ショートカット(アクション)を登録できるマウスがおすすめです!
5,000円くらいと少し高めですが、作業がぐっと早くなりますよ。

外部モニター(デュアルディスプレイ)

ノートPCだけで作業している方は、外部ディスプレイを用意してください。
(もともと大きめの画面で作業している方は大丈夫です)

2画面にすると作業効率が大きく変わります。動画とお手本を見ながら作業できるので、学習スピードにもかなり影響します

モニターは1〜2万円ほど。数年使えると考えれば、投資する価値は高いです。
家に場所が取れない方は、薄型のタブレットモニターだと場所を取りません。予算に応じてご検討ください。

PCの初期設定【必ず対応してください】

① 拡張子を表示する
② Google日本語入力をインストールする
③ メインブラウザをGoogle Chromeにする
④ ZIPの圧縮・解凍の方法を知っておく
⑤【Windowsの方のみ】キーボードの違いを知っておく

トリペン先生

細かいことですが、この設定をしていないと後でつまずく原因になります。
必ず確認して対応しておきましょう!
↓の各項目をクリックすると、やり方(画像つき)が開きます。

① 拡張子を表示する(Windows/Macのやり方)

ファイル名の後ろに「.jpg」「.html」などが表示されるようにします。すでに表示されている方はOKです。

Windowsの場合

Windowsの初期設定では拡張子が非表示になっているため、以下の手順で表示させてください。

まずはエクスプローラーを開きます。(何かしらのフォルダーを開いていれば、その画面で大丈夫です)

① 上部メニューの「表示」をクリック
② 「ファイル名拡張子」にチェックを入れる
これでファイル名の後ろに「.拡張子」が表示されます。

Macの場合

Finder →「設定」でパネルを開きます。

歯車マークの「詳細」から、すべてのファイル名拡張子を表示にチェックを入れてください。これで表示されます。

② Google日本語入力をインストールする(Windows/Mac共通)

タイピングをスムーズにするために、Google日本語入力を入れておきましょう。
入力補完があるので、変換がかなり楽になります。WindowsもMacも両方あります。

Google日本語入力
https://www.google.co.jp/ime/

③ メインブラウザをGoogle Chromeにする

PCの既定のブラウザを、Google Chromeに変更してください。
まだインストールしていない場合は、こちらからお願いします。

Google Chrome
https://www.google.com/intl/ja_jp/chrome/

WindowsはEdge、Macはsafariが既定になっていることがあります。
この2つはWeb制作で表示のバグが出ることがあるため、開発しやすいChromeをメインで使い、SafariやEdgeは表示確認用にしましょう。
※動画教材でもChromeを使っています。

既定のブラウザを変更する方法
◎Windows:Microsoft公式の手順
◎Mac:Macで既定のブラウザを変更する手順

④ ZIPの圧縮・解凍の方法を知っておく

制作をしていくと、素材をダウンロードしたり送ったりすることが多くなります。
PCに不慣れな方はこの経験がないことも多いので、先に確認しておいてください。

Macの方は、特に準備は不要です。標準機能で圧縮・解凍ができます。
Windowsの方は、ご自身のPCに解凍ツールが入っているか確認をお願いします。

Windowsの解凍ツールについて
https://allabout.co.jp/gm/gc/476421/

⑤【Windowsの方のみ】MacとWindowsのキーボードの違い
トリペン先生

ここはWindowsの方だけ見てね!

torikumuの動画はMacの画面で解説しているため、ショートカットキーの読み替えが必要です。

Mac:command(コマンド)キー
Windows:Ctrl(コントロール)キー

動画で「commandキー」と言っていたら、「Ctrlキーのことだな」と読み替えてください。

そのほか、慣れておきたいこと

設定ではありませんが、以下は早めに慣れておくと学習がスムーズになります。

・ダウンロードしたデータがどこに保存されるか知っておく
・PC操作とタイピングに慣れておく
・最低限のショートカットを使えるようになっておく

PCの基本操作をもっと詳しく知りたい方は、こちらをご覧ください。

あわせて読みたい
最低限のPC作業環境を整えよう 今回は、PCの作業環境について解説していきます!そしてtorikumu内の動画は基本的に、Macの操作画面になります。 MacとWndowsと、画面と操作感の違いも少し解説しておき...

STEP3|学習の進め方を決める

ツールと環境が整ったら、最後に進め方を決めます。
ポイントは「日々のタスク管理」と「アウトプットの習慣」の2つです。

① 日々のタスクを管理する

スキルを身につけるには、日々のタスク管理が重要です。

学習タスク管理のポイント

① 1日ごとにやることは、なるべく前日に決めておく
② 1日で消化できる分量にしておく
③ タスクは「1日でできること」と「時間がかかること(1週間単位)」で分ける
④ 自分で決めたタスクは、必ず消化する

決めるだけでは、後回しにしたり忘れやすくなります。おすすめの方法はこちらです。

PCのデスクトップ画面にタスクを見えるようにする

鉄則は見える場所にタスクを置いておくこと。目に入るたびに「やらないと」と意識できるからです。
サイズも色も変更できるので、デスクトップの端に表示しておきましょう!

デスクトップに付箋を表示する方法(Windows/Mac)

Windowsの場合

スタートボタンを押して、アプリ一覧の「は行」にある付箋(Sticky Notes)を開きます。
色も変えられるので、好きなものを使ってください。

詳しい手順はこちら
https://www.stock-app.info/media/memo-desktop/

Macの場合

Finderのアイコンをクリックして「アプリケーション」を開き、スティッキーズを選択します。
すぐにアプリが開くので、あとは書き込んで使うだけです。

② 学んだことを外に出す(インプット+アウトプット)

トリペン先生

本格的に勉強をスタートする前に、外部にアウトプットできる状態の準備をしておきましょう!

Webの勉強は、インプット+アウトプットのセットで、はじめて「学習した」といえます

勉強を頑張っていると、勉強したつもりになりやすいです。
実は理解できていなくて、自分は向いていないと判断して挫折してしまう人も少なくありません。当たり前ですが、そんなに簡単にできるようにはなりません。繰り返し継続した先にできるようになります。

クリエイターの仕事は、人に見せることが基本です。外部発信を前提に学習を進めると、インプット+アウトプットの習慣が自然と身につきます
また、どれだけ勉強しても発信も完成もしていないと、外から見れば何もない人と同じ扱いになってしまいます。

① 新しいチャレンジをどんどんする
② 誰が見ても頑張っていると感じるくらいアウトプットする
③ SNSやnoteで、覚えたこと・経験したこと・感じたことをまとめる(情報のシェア)
④ 毎月、自分の行動を振り返る

初心者のうちは発信が苦手で、結局「何をしている人か分からない」状態になってしまう人が多くいます。
どうしても嫌な方に強制はしませんが、チャンスはどこから来るか分からないので、自分につながるドアは多いほうが良いと思っています。やってみて合わなければ、無理に続けなくて大丈夫です。

トリペン先生

・転職したい
・個人で仕事をしたい
この2つが目的の人は、100%やっておいた方がいいです!
積み重ねて損はないですよ。

③ noteを活用する

noteは、簡易的なブログや日記のようなものだと思ってください。SNSの延長線上で使うことが多いです。

学んだことややりたいことを、まとめて外部に発信するために使用します。
転職の際や、個人でお仕事をしたい方には、ポートフォリオ的に役立ちます。ブログのライト版なので始めやすいですよ。
アカウントは、できればXと連携しておくと便利です。

note公式サイト

受講生はこのような形で、学習をまとめています!

「個人で仕事をしたい」「転職したい」など明確な目標がない場合は、ブログは必須ではありません。
思考の整理にはおすすめですが、勉強時間がなくなってしまう場合はスルーしてください。

④ SNS・外部発信のルールを知っておく

いまはSNSを活用して就活をしたり、仕事を受発注するのが当たり前になりました。そのため当スクールでも、積極的な外部発信をおすすめしています。

ただし、ネット上のルールの中で成り立っており、初心者はここを見落としているケースが多々あります
また当スクールは有料コンテンツのため、内部情報の発信は控えていただくようお願いしています。良い・悪いの線引きは、このあと具体的にお伝えします。
※SNSだけでなく、noteやブログなどのメディアも含まれます。

自分の投稿は、不特定多数の方が見ます。いいねやシェアで拡散されると、まったくフォロー外の方にも表示されます。これは良い点でもありますが、内容によっては炎上したり攻撃されることもあります。

「SNSは怖いからやめよう」ではなく、正しく運用して活用しましょう。実際にお仕事につながったケースもあるので、有効活用していくべきだと感じています。

実際にあった過去の事例

過去に受講生がオリジナルバナーを作成してアップしていましたが、使用していた題材が韓国の某アイドルグループだったため、SNS上でご指摘を受けて削除することになりました。
これは著作権法違反にあたります。

ルールを知らないと、こういったことが起こり得ます。次の項目を必ず確認してください。

やってはいけない投稿

一般的なNGと、スクールとして控えていただきたいことをまとめました。
こちらに書いてある内容を見つけた場合は、立場上、個別に注意させていただきますのでご了承ください。

SNS投稿の一般的なNG

・著作権に違反している(アイドルや芸能人の写真を使うなど)
・個人を特定できるような投稿をしている
・誰かを誹謗中傷すること
・名誉毀損行為
・DMを送りまくって勧誘すること
・ネットストーカー
・「ピー」が入るような言葉

スクールで控えていただきたいこと

制作物の発信は基本的にOKです。
ただし発信内容が教材の中身に踏み込んだ詳細なものになると、サービスを有料で提供しているため、他の受講生さんからクレームが来る可能性があります。以下は控えていただけると助かります。

スクールでのNG

・教材の詳細情報やURLを第三者に共有すること
・課題の仕様書の中身や、依頼内容の全文を転載・スクショでアップすること
・課題フィードバックをそのまま転載・スクショでアップすること
・共有資料やデータを第三者に共有、スクショでアップすること
・使ってはいけない写真や素材を使用して課題をアップすること(有料素材を右クリックでコピーするのはNG)

トリペン先生

スクールの項目は、意外とnoteに書いちゃいそうなので、あんまり内部の詳細な中身は載せないでね!
一応規約に書いてあるので、注意しましょうね😊

公式アカウントで受講生さんの日々の頑張り投稿は見させていただいていますが、すべてを追いきれないため、各自が責任を持って運用いただけると嬉しいです
よりよい学習ライフを維持するために、ルールを守っていただけると大変助かります。

【おまけ】Instagramを使う場合

Xとは違い、デザイン系はInstagramと相性がいいです。
フォロワー数に左右されにくく、ハッシュタグを活用すれば個人での仕事獲得にも使えます。

以前に当スクールで開催したインスタ講座も、参考にご覧ください。

どちらにせよ、目的に合わせてコツコツ継続することが大事ですね!

⑤ 過去のイベントアーカイブを見る

これから仕事にしていきたい方は、必ず見てください!
記録や発信の大事さがわかります。

準備おわりチェックリスト

ここまで終わったらOK!

STEP1|ツール
□ Photoshopをインストールした
□ Figmaのアカウントを作った
□ VS Codeをインストールした
□ Zoomのアプリとアカウントを用意した
□ Notionのアカウントを作った

STEP2|PC環境
□ PCのスペックを確認した
□ 拡張子を表示した
□ Google日本語入力を入れた
□ 既定のブラウザをChromeにした
□ ZIPの圧縮・解凍ができる

STEP3|学習の進め方
□ デスクトップに付箋でタスクを表示した
□ noteなど発信の場を用意した
□ SNS投稿のNG項目を確認した

トリペン先生

準備ができたら、いよいよ学習スタートです!
分からないところがあれば、遠慮なく質問してくださいね。

講座を完了したらクリックしてね!

記事の内容