Webデザイン学習で使っているツールと環境まとめ
学習を始めたばかりの頃は、「何のツールが必要なのかもわからない」という状態でした。今は自分なりの環境が落ち着いてきたので、使っているツールと、選ぶときに考えていることを整理しておこうと思います。
コーディングは、VSCodeとブラウザがあれば始められます。ほかのツールは、必要になったら少しずつ足していけば十分だと感じています。
この記事でわかること
- 学び始めに必要な道具
- お金をかけてよかったもの・かけなくてよかったもの
- 使うのをやめた道具
- 道具を選ぶときの考え方
結論
学び始めに必要なのはVSCode（コードを書くための無料ソフト）とブラウザだけで、ほかの道具は困ってから足せば十分でした。お金はモニターなど毎日使うものからかけ、迷ったら「ないと今困るか」で決めています。
Photo by Domenico Loia on Unsplash
メモ・資料管理
学習環境の中で一番手放せないのは、OneNoteです。思いついたことをどんどんメモでき、タブレットでは手書きもできるので、記録がしやすいと個人的に感じています。
iPadとWindowsを併用しているため、インターネット上の保存場所（クラウド）に保存するのを前提にしています。データはGoogleドライブを中心に保存し、どの端末からでも見られるようにしています。iPadで手書きしたい資料だけはOneDriveを使う形です。
ノートアプリは、メモを取ることそのものより、あとで見返せることが大切だと思います。調べたことやつまずいたことを一か所にまとめておくと、同じところで迷ったときに、自分のメモが一番の参考書になるかもしれません。検索できるアプリなら、キーワードで過去のメモを探せるのも便利です。メモが増えるほど、その良さを感じやすくなります。
※クラウドを複数併用すると同期トラブルが起きることもあるため、実際に使う場合は注意が必要です。
ノートの整理のしかたは「図で覚えるのが得意な人の勉強法｜情報が多すぎて混乱しないための整理術」でくわしく書いています。
Photo by Paper Textures on Unsplash
コーディング環境（VSCode）
Visual Studio Codeでは、見やすさを重視して拡張機能を選んでいます。タグの色分けやアイコンの変更、コード整形など、視覚的に理解しやすくなるものが中心です。
コードが単なる文字列ではなく「意味のかたまり」として見えるようになると、作業効率がかなり変わりました。
VSCodeを使った最初のページ作りは「HTMLとは？ゼロからWebページを作る基本と、私が最初に作ったページ」でくわしく書いています。
PC環境
メインはWindowsのデスクトップです。外出時は、ノートPCから離れた場所のパソコンを操作すること（リモート操作）が多いです。
こうしておくと、どこにいても同じ作業環境を再現できます。
有料・無料ツールの考え方
基本的には、無料ツールを中心に学習してきました。Webデザインの専門校の方針もあり、「お金をかけずにできる範囲」でまず試すスタイルです。
最近になって有料のAIツール（Claude）を導入しましたが、これも「必要になってから追加する」という流れでした。最初から課金するより、まず無料で試してから判断する方が、自分には合っていました。
お金をかけてよかったもの・かけなくてよかったもの
お金をかけてよかったと感じているのは、モニターと外出用のノートパソコンです。作業のしやすさや、場所を選ばずに学習を続けられることにつながりました。
一方で、液晶タブレット（画面に直接描けるタブレット）は、今思うと板タブレット（手元の板で操作するタイプ）でも十分だったかもしれません。
板タブレットは手頃な価格のものも多いので、まずは板タブで慣れてから、必要を感じたら買い替えるという順番でもよかったのかもしれません。モニターのように毎日使うものから優先してお金をかけると、満足度は高くなりやすいと感じています。
使うのをやめたツール
実際に使うのをやめたツールもあります。たとえばFigma（完成見本の画像＝デザインカンプを作るツール）は、使いこなすには新しく覚えることが多く、今の自分には無理にこだわらなくてもいいかと考えて手放しました。
学習の初期は、一つのツールに慣れることを優先し、必要になったときに改めて覚えるという考え方でもいいと思います。専門校で学んだ内容の全体像は、Webデザインの専門校で学んだことの全体像｜6か月で学べたことにまとめています。
これから揃えたいもの
今後は、デザインカンプを管理しやすいツールや、複数の案件を並行して管理できる、やることの管理ツールを検討しています。
ツールは増やせば便利になりますが、そのぶん管理も複雑になります。本当に必要なものだけを厳選していきたいと考えています。
ツール選びで意識していること
新しいツールを試すときは、まず無料のお試しや無料プランで、自分の作業の流れに合うかを確認しています。
便利そうに見えても、実際の作業と噛み合わなければ使わなくなることが多いので、「使う前提」で選びすぎないようにしています。
判断に迷ったときの基準は、「それがないと今困っているか」です。困っていなければ、すぐに導入しなくてもいいと考えています。好奇心と実用性のバランスを取ることが、長く学習を続けるうえで大切だと感じています。
環境構築での失敗
過去に複数のクラウドサービスを同時に使い、データの保存場所が分からなくなったことがあります。便利さを求めて広げすぎると、かえって管理が複雑になるという学びになりました。今は、できるだけシンプルな構成を意識しています。
また、最初の頃は環境構築に時間をかけすぎてしまい、なかなか制作に入れない時期もありました。今振り返ると、最低限の環境でまず手を動かし、必要に応じて後から整える方が効率的でした。
ツールより大事なこと
Photo by Bench Accounting on Unsplash
良いツールを使えば良い作品が作れるわけではない、ということも実感しました。
大切なのは「何を作るか」「誰に届けるか」という目的の方で、ツールはそれを支える手段です。シンプルな環境でも、目的がはっきりしていれば制作は十分に進められます。
この記事のまとめ
Webデザインの学習環境は、最初から完璧に整える必要はありません。最低限の構成から始めて、少しずつ自分に合う形にしていくのが現実的でした。
一方で、環境を広げすぎると管理が複雑になったり、制作より設定に時間を使ってしまったりすることもありました。その経験から、今は次のような考え方に落ち着いています。
- ツールは「困ってから追加」で十分
- お金は毎日使うものから優先してかける
- 環境構築よりも制作開始を優先する
- 目的があいまいなツールは増やさない
結局のところ、ツールそのものよりも「何を作るか」という目的の方が重要で、環境はそれを支える存在だと感じています。
よくある質問
Q. Webデザイン初心者はまずどのツールを揃えればいいですか？
A. VSCodeとブラウザさえあればコーディングは始められます。有料ツールは「困ってから追加する」で十分だと感じています。
Q. クラウドサービスはどれを使うのがおすすめですか？
A. 私はGoogleドライブを中心に、iPadでの手書き資料だけOneDriveを使っています。複数のクラウドを併用しすぎると同期トラブルの原因になるので、できるだけ絞ることをおすすめします。
Q. AIツールはいつから導入すればいいですか？
A. 私は最初から使わず、必要性を感じてからClaudeを導入しました。無料の範囲で試してから判断するのが失敗しにくいと思います。
Q. ペンタブレットは液晶タブと板タブのどちらがいいですか？
A. 私は液晶タブレットを買いましたが、今思うと板タブレットでも十分だったかもしれません。まずは手頃な板タブで慣れて、必要を感じてから検討するのも一つの方法です。
参考・引用
関連記事
