STEP5｜「どのツールから？」を解決～デザインツール入門～

ブログ

デザイン基礎

Sep. 01, 2026

Webデザインの学習を始めるとき、「どのツールから手をつけたらいいの？」と迷う方も多いでしょう。デザインカンプの作成から画像加工まで、実際に手を動かしてデザインを形にするために必要な「メインツール」と「サブツール」の基本操作を習得していきましょう！

STEP 5 で学ぶこと

メインツール（Figma）：Webデザイン制作の軸となる基本操作
サブツール（Illustrator／Photoshop）：素材制作と画像加工の基本

1.メインツール「Figma」の基本をマスターする

Webサイトのデザインカンプ（完成見本）を作成するメインツールとして、まずは「Figma」の基本操作を習得します。直感的でWebデザインに特化した機能が豊富なため、初心者の方でもスムーズに学習を進められます。

2.サブツール「Illustrator／Photoshop」で画像加工の基本を学ぶ

ロゴの作成や、Webサイトに使う写真の準備（サイズ調整、色味補正など）には、Adobe IllustratorやPhotoshopといったサブツールの知識が欠かせません。Webデザインにおいては、ツール全般の複雑な機能をすべて極める必要はありません。まずは「Webデザインに必要な画像加工の基本」に絞って効率よく習得することがポイントです。

ツール操作の基礎固めは、まず基本操作を「実際に手を動かして覚えること」が最重要です。操作に慣れてきたら、まずはLP（ランディングページ）などコンテンツが少なめの1ページ制作から挑戦してみましょう。全体の要素数が少ないため途中で挫折しにくく、レイアウト作成やパーツ配置の基本をしっかり掴むことができます。

STEP6｜プロの作業効率を実現〜デザインワークフローの基礎〜

ツール操作を覚えたら、次はプロとしての効率的な働き方を習得します。個人での制作はもちろん、将来的にチームで働く際にも「デザインガイドライン」や「整理されたファイル管理」の知識は不可欠です。作業時間を短縮し、品質のばらつきを防ぐための強力な土台を作りましょう。

https://shesdesign.jp/design-basics/basic-theory-and-mindset/

第2章　実践と効率化（2025年12月更新）
STEP5｜「どのツールから？」を解決～デザインツール入門～
STEP6｜プロの作業効率を実現〜デザインワークフローの基礎〜
STEP7｜Webデザイナーへの道～実践スキル習得とポートフォリオの核を作る～

第3章　実装とプロの実務
STEP8｜コーディングの深化～デザインを実現し公開する技術～
STEP9｜成果につながるデザインへ！ビジネス・実務スキルの基礎
 STEP10｜Webデザイナーの未来！トレンドキャッチアップと継続的な学習戦略

･:.｡｡.:･ﾟ✽.｡.:・ﾟ ✽.｡.:・ﾟ ✽.｡.:*・ﾟ

＜こんな方にオススメ＞
☑︎ デザインの仕事を始めたい方
☑︎ Webバナー制作を学びたい方
☑︎ デザイン系ソフトを初めて使う方

･:.｡｡.:･ﾟ✽.｡.:・ﾟ ✽.｡.:・ﾟ ✽.｡.:*・ﾟ

コース選択に迷われている方は「1時間体験」をお勧めしています。
お気軽にご連絡ください。