2025/5/16 「UI/UXデザインツール概論【オンライン】」の記録です。
講師：アキヤ先生
Webデザイナーとしてのアピール力を高めるために
■ 就職・転職に向けたアピール作品とは？
● 一番わかりやすいアピール作品：バナー
- 目標：1作品60分以内
- 簡易的な制作力・バリエーションが重要
- Photoshopでの作成が理想
バナー制作はWebデザイナーとしての「基礎力」を見せるのに適しており、企業にも伝わりやすいアピール方法です。
● バナーよりさらに効果的なアピール：LP（ランディングページ）
- 制作には時間がかかるが、より高いスキルを証明できる
- 構成力・企画意図の理解力が問われる
バナーのリンク先にあるLPを一貫してデザインできれば、ワンランク上のデザイナーとしてアピール可能です。
■ 無料ソフトを活用した制作について
金銭的な理由で有料ソフトが使えない場合、以下の無料・体験版ツールを活用しましょう。
⚠ 無料ソフト使用の注意点
- ダウンロード・利用は自己責任で行ってください
- 操作方法は各自で調べるように（講師への質問は最低限に）
- 情報は2023年9月時点のものです
- 最新情報や参考サイトは、講義アジェンダ掲載のリンクをご確認ください
● 紹介された無料ソフト・体験版
- Adobe Express
オンラインで簡単にバナーが作成可能
https://www.adobe.com/jp/express/ - Canva
初心者にも使いやすいバナー作成ツール
https://www.canva.com/ja_jp/create/banners/ - Adobe XD（※現在は無料プラン廃止）
UI設計ツール。現在は7日間の無料体験のみ
※教室内で体験可能・別途動画案内あり - Figma
コラボ型インターフェースデザインツール
https://www.figma.com/ja/
■ 未来に向けた就職活動のステップ
- 何を作る？
今まで学んだ技術を活かし、楽しんで作品を制作する - 企業が求めるものは？
求人票を読み解き、必要とされるスキルを把握する - 自分が目指すものは？
自己理解を深め、理想の働き方・働く場所を考える - 未来の設計図を描く
自分の理想を、具体的な行動計画として描いていく
■ 最後に：ソフトの扱いと意識について
商用デザインを行う以上、無料ソフトでビジネスをすることは基本的には非推奨です。教室ではIllustrator・Photoshopを使用しており、無料ソフトは「やむを得ない場合の補助」として考えましょう。
最終的に企業が重視するのは、
- 作品の質
- 作品の内容
- 作品の目的
この3点を意識した作品作りを心がけてください。
ありがとう！PDFしっかり確認できました。
以下に、「LPの作り方 2024」講義内容の要約＋WordPress掲載向け構成案をまとめました👇
LPの作り方 ：XD・Figma・生成AI時代の基礎と展望
■ 今やXD・Figmaはスタンダード！
Webデザインの現場では、Adobe XD や Figma が主流のツールとなっています。今回はこれらのツールを活用した「LP（ランディングページ）の作り方」を学びました。
■ 使用ツールの注意点（2023年9月時点）
🛠 Adobe XD
- 無料の「スタータープラン」は現在提供終了
- 7日間の体験版のみ利用可能
- 教室での試用＆動画案内あり
🛠 Figma
- ブラウザベースのUIデザインツール
- 無料プランあり・共同作業も可能
👉 https://www.figma.com/ja/
■ LPを作る際のポイント
- バナーより制作に時間がかかる
- 企画の意図理解が求められる
- ページ構成力や技術力を可視化できる
バナーのリンク先となるLPを自分で作れることは、
「より高いレベルのデザインができる」証明になります。
■ Webページ制作は分業時代へ
2024年以降、Web制作では各アプリやツールの役割分担が明確化してきています：
| 種類 | 主なツール | 内容 |
|---|---|---|
| パーツ・素材作成 | IllustratorPhotoshop | ロゴ・イラスト・ピクトグラム・バナー・サムネなど |
| ページ構成・UI設計 | XDFigma | Webページの構成、情報設計、UIデザイン |
■ 生成AIの登場とこれからの流れ
現在はまだ「人が作る」前提で学びますが、将来的には：
- 素材生成AIで画像やパーツを作る
- コード生成AIでHTMLやCSSを記述する
- ページ丸ごとAI生成も当たり前になる可能性がある
そのため、今のうちから「AIと役割分担する視点」を持っておくことが重要です。
■ まとめ：未来に備えて今やるべきこと
- Illustrator → ロゴやピクトグラム素材制作
- Photoshop → 写真・バナー・サムネなどの加工
- XD/Figma → Webページ全体の構成デザイン
- 生成AI → 効率化・補助ツールとして活用
今後は「役割分担 × AI活用」が、Web制作のスタンダードになるかもしれません。
今のうちからその流れを意識して制作に取り組んでいきましょう！
