体験公開版 · BETA

学びたいことを、
ここから。

Webの基礎からFigma・Adobeの操作、デザインの考え方、実務での伝え方まで。読むだけで終わらない、あなたのための学習ライブラリ。

はじめての方はこちら 教材を探す
18 本の教材5 カテゴリ0円 体験公開中
EXPLORE TOPICS

カテゴリから学ぶ

今の自分に必要なテーマを選びましょう。

WEB FUNDAMENTALSWebの基礎Webサイトが動く仕組みから、HTML・CSS・スマホ対応まで。3教材 FIGMA BASICSFigmaの使い方基本操作から崩れにくいレイアウト設計まで。4教材 DESIGN THINKINGデザイン思考見た目だけでなく、目的から考え意図を伝える力。3教材 PRACTICAL SKILLS実践・キャリア制作意図・ワイヤーフレーム・就職準備につなげる。4教材 ADOBE BASICSAdobeの基本操作Illustrator・Photoshopの基本を実際に手を動かして学ぶ。4教材
START HERE

最初の3ステップ

何から始めればよいか迷ったら、この順で進めてみましょう。

01Webの仕組みを知る

Webページがどこから届き、どう表示されるか理解する。

02Figmaを触ってみる

フレームとテキストで小さなバナーを作ってみる。

03目的から考える

誰に何を届けるかを決め、制作の理由を言語化する。

ALL LESSONS

公開中の教材

気になるテーマから自由に学べます。順番通りでなくても大丈夫です。

教材を検索する
はじめて Webの基礎Webサイトが表示される仕組みを知ろう Web制作に入る前に、そもそもWebページがどこから届くのか整理しましょう。 6分教材を見る はじめて Webの基礎HTMLとCSSの役割を分けて考える 見た目を作る前に、情報の意味と順番を整理すると実装も改善しやすくなります。 8分教材を見る 初級 Webの基礎レスポンシブデザインの基本 スマホの小さな画面でも、大切な情報を迷わず受け取れる設計を考えます。 7分教材を見る はじめて Figmaの使い方Figmaを使い始める最初の一歩 まずは小さなバナーを作りながら、Figmaのキャンバス・レイヤー・プロパティに慣れましょう。 8分教材を見る 初級 Figmaの使い方フレームとグループの違い 「まとめるためのグループ」と「レイアウトの器になるフレーム」の違いを理解します。 7分教材を見る 初級 Figmaの使い方Auto Layoutで崩れにくいカードを作ろう 数値を暗記するより、どのような並び方にしたいかを考えて設定しましょう。 10分教材を見る 初級 Figmaの使い方コンポーネントを使ってデザインを揃える 同じ見た目の部品を毎回作り直さず、修正しやすいデザインを目指します。 7分教材を見る はじめて デザイン思考デザインは「目的」から考える 何を作るかの前に、誰に何を届け、どの行動につなげたいかを決めます。 8分教材を見る 初級 デザイン思考情報の優先順位と視線誘導 全部を目立たせず、読んでほしい順番をデザインしましょう。 8分教材を見る 初級 デザイン思考制作意図を自分の言葉で説明する 「なぜこの表現なのか」を説明できると、提案・添削・実務での改善が進めやすくなります。 9分教材を見る 実践 実践・キャリアプロモーションマップを描いてみよう 施策をただ並べず、「お客様がどう移動するか」を線でつないで考えます。 12分教材を見る 実践 実践・キャリアワイヤーフレームは何のために作る？ 白黒の箱を並べることより、どんな順番で情報を届けるかが大切です。 8分教材を見る 実践 実践・キャリア伝わるポートフォリオの基本設計 作品を並べるだけでなく、何ができて、どう考えて制作したかを伝えましょう。 11分教材を見る 実践 実践・キャリア添削後の再提出で伝えるべきこと 作品を直す力に加えて、修正内容を相手に分かりやすく報告する力も身につけます。 7分教材を見る 初級 Adobeの基本操作Illustratorで図形を作る・整える基本 「四角が描ける」から、余白と揃え方まで意識した図形制作へ。 10分教材を見る 初級 Adobeの基本操作Illustratorのペンツールとパスの基本 ベジェ曲線は点の数より「置く位置」と「方向」を意識しよう。 12分教材を見る 初級 Adobeの基本操作Photoshopのレイヤーを理解しよう 後から修正できるように「要素ごとに分ける」考え方を身につけよう。 10分教材を見る 初級 Adobeの基本操作Photoshopのレイヤーマスクで非破壊編集 消しゴムで削る前に、マスクで隠せないか考えてみよう。 12分教材を見る
LEARN WITH SFIMA

考える力を、実務の力へ。

SFIMA COLLEGEでは「操作できる」で終わらず、目的を理解し、伝えられる力を大切にしています。

SFIMA COLLEGEを知る SFIMA公式LINEで受講相談 ↗この教材へのご意見はこちら →