• キーワード

  • カテゴリー

  • タグ

Webデザインにおいて
学習したいキーワードを入力。

FukuokamiyakoのPCSchoolでは、未来のWebデザイナーフロントエンドエンジニアを目指す方に向けて、解説動画を提供しています!デザインの世界に踏み込み、フロントエンドエンジニアとしてのスキルを磨くための手段として、私たちの専門的な解説動画がお役に立てれば・・・技術の基礎から実践的なテクニックまで、わかりやすい形で学べるコンテンツをご用意しています。

Figma講座スタートしました!

Figmaを知ろう!入門講座 基本操作と概要

Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操作について詳しく解説します。これからFigmaを始める方に向けた内容です!

Figm基礎 スマートフォン対応ワイヤーフレーム

Figmaを使ってスマートフォン対応のワイヤーフレームを作成します。一般的なネットショップをモデルにし、基本的な手順で作成していきます。オートレイアウトや制約なども解説しています。

Figm基礎 コンポーネントとインスタンス

再利用可能なデザイン要素であるコンポーネントの解説です。デザインにおいて、同じパーツを繰り返し使用する場合に便利。効率よくサイトを作成するためには必須の要素です。

Figm基礎 インタラクティブに!プロトタイプ設定

プロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作=インタラクティブ設定(タップ、クリック、ホバー、ドラッグなど)に応じて、どのように反応するかを再現することが可能です

Photoshop・Illustratorを使って、バナー作成からデザインを学ぼう

Photoshopのオブジェクト選択を使って、商品を並べたバナーを簡単に作成しよう!

文字を中心にあちこちに背景を取り除いた写真が配置されているバナーの作成をPhotoshopで行います。

Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法

ピンタレストなどでもよく見かける「よくある分割バナー」をPhotoshopで作成する動画講座です。クリッピングマスクを使います。

Photoshopでアイキャッチ画像の作成。中央を意識した6分割バナー -応用-

OGPを意識した中央に文字列を配置するアイキャッチバナーの作成から書き出し方法。Photoshopのパス選択・切り抜きツールを使用。

バナー作成講座 まずは基本のサイズとフォント設定

仕事で使えるバナーを作成したいけれど、どのツールを使えば良いのか迷ったことはありませんか?Photoshop、Illustrator、そしてFigmaを使ったバナー作成講座

フロントエンドのためのHTML/CSS/レスポンシブウェブサイト講座

HTML/CSSを使ってWebサイト(ホームページ)が作成できるようになるためには、コーディング力を上げる必要があります。まずはコードを模写コーディングしながら、目でコードに慣れましょう。コードに慣れてからコードの内容を覚えて、どんなコードも書けるように練習しましょう!

ホームページ中級講座(HTMLとCSS)

中級講座では、全体のコードを外部スタイルシートに記述[中級者向け]

レスポンシブウェブサイトの練習

レスポンシブなWebサイト練習では、デベロッパーツールを使って、メディアクエリを理解します。

ポートフォリオとは?作成するための手順

ポートフォリオとは?必要なコンテンツを載せて作成していきましょう

Webデザイナーに必要な資格 – ウェブデザイン技能検定-

ウェブデザイン技能検定を受験しよ

Webデザイン業界で、唯一の国家資格と呼ばれる、ウェブデザイン技能検定とは?学科と実技の受験概要から理解しよう

この講座をマスターすれば実技は合格可能!

ウェブデザイン技能検定では学科と実技を受験します。実技と学科をこの動画からしっかりと傾向と対策をおさえよう!

学科の過去問をひたすら繰り返して学習!要点解説

ウェブデザイン技能検定 学科 令和5年度の2回目(3級)の過去問解

新着・更新記事一覧