Webデザインにおいて学習したいキーワードを入力。またはカテゴリー・タグを選択して検索
Webデザインにおいて
学習したいキーワードを入力。
FukuokamiyakoのPCSchoolでは、未来のWebデザイナー・フロントエンドエンジニアを目指す方に向けて、解説動画を提供しています！デザインの世界に踏み込み、フロントエンドエンジニアとしてのスキルを磨くための手段として、私たちの専門的な解説動画がお役に立てれば・・・技術の基礎から実践的なテクニックまで、わかりやすい形で学べるコンテンツをご用意しています。YouTubeチャンネルが変わりました！>>
HTML/CSS
HTML/CSSを使ってWebサイト（ホームページ）が作成できるようになるためには、コーディング力を上げる必要があります。まずはコードを模写コーディングしながら、目でコードに慣れましょう。コードに慣れてからコードの内容を覚えて、どんなコードも書けるように練習しましょう！
中級講座では、全体のコードを外部スタイルシートに記述[中級者向け]
Photoshop・Illustratorを使って、バナー作成からデザインを学ぼう
Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法
ピンタレストなどでもよく見かける「よくある分割バナー」をPhotoshopで作成する動画講座です。クリッピングマスクを使います。
Photoshopでアイキャッチ画像の作成。中央を意識した6分割バナー -応用-
OGPを意識した中央に文字列を配置するアイキャッチバナーの作成から書き出し方法。Photoshopのパス選択・切り抜きツールを使用。
仕事で使えるバナーを作成したいけれど、どのツールを使えば良いのか迷ったことはありませんか？Photoshop、Illustrator、そしてFigmaを使ったバナー作成講座
Figma講座
Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操作について詳しく解説します。これからFigmaを始める方に向けた内容です！
Figmaを使ってスマートフォン対応のワイヤーフレームを作成します。一般的なネットショップをモデルにし、基本的な手順で作成していきます。オートレイアウトや制約なども解説しています。
再利用可能なデザイン要素であるコンポーネントの解説です。デザインにおいて、同じパーツを繰り返し使用する場合に便利。効率よくサイトを作成するためには必須の要素です。
プロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、どのように反応するかを再現することが可能です
新着・更新記事一覧
-
Webデザイン唯一の国家資格 ウェブデザイン技能検定とは?
Webデザイン業界で、唯一の国家資格と呼ばれる、ウェブデザイン技能検定とは、どう… -
VPSとは？初心者にもわかる仕組みとレンタルサーバーとの違い・活用例を解説
「VPSって聞いたことはあるけど、なんとなく難しそう…」そんなイメージを持ってい… -
まだ画像がない？そんなときに便利なダミー画像生成ツールの紹介
Webサイトの制作を進めていると、まだ写真素材や本番用の画像が揃っていないという… -
Part4：CSSで見た目を整えよう ポートフォリオコーディング
Part3ではHTMLでポートフォリオの基本構造を作成しました。今回はそのHTMLにCSSを… -
Part3：HTMLで基本の構造を作ろうポートフォリオコーディング+Bootstrap
デザインカンプの作成が終わったら、いよいよコーディングを始めましょう。最初の… -
Part2:ポートフォリオ用1ページ構成カンプをFigmaで作る手順
ポートフォリオのデザインカンプとは？ ポートフォリオは、自分のスキルや実績を伝… -
metaタグの正しい使い方 SEOとSNSシェアを最適化する設定方法
Webページを作成する際に欠かせないのが meta要素 です。meta 要素は、ページの情… -
SEO初心者必見！よく使う基本用語とその活用術
「SEOって難しそう…」と感じていませんか？実は、基本的な用語を理解すれば、SEO対… -
初心者でも簡単！JSON構造化データジェネレーターとリッチリザルトテストの使い方
「構造化データ」とは、検索エンジンがウェブサイトの内容をより正確に理解できる… -
WordPressのプラグイン更新でサイトが落ちた！トラブル解決の手順まとめ
ある2月の朝、何気なくWordPressのプラグインを更新したところ、突然以下のエラー… -
CSSの便利な関数まとめ！デザインやレイアウトを自在に操る
CSSには、デザインやレイアウトを柔軟に調整できる 「関数」 が数多く用意されてい… -
JavaScript入門: クリックイベントで学ぶハンバーガーメニューの作り方
ウェブサイトでよく見かける 3本線のアイコン= ハンバーガーメニュー。スマホサイ… -
JavaScript03: スクロールイベントでWebを動かそう
Webサイトに動きをつけるための技術の一つとして、スクロールイベントがあります。… -
リセットCSSってなんですか？必要なの？モダンリセット最新版！
Webサイトを作っていると、ブラウザ間でスタイルの見た目がずれることがあります。… -
JavaScript02 自作スライドショーで動きの基礎を段階的に学ぶ(入門編）
JavaScriptを使った動きのあるWebサイトは、より魅力的で印象に残るものです。ここ… -
知らずに損してる？CSS記述のよくあるミス30選と対処法
CSSを使ったWebデザインでは、初心者から中級者まで陥りやすい多くの記述ミスがあ… -
JavaScript01 : クリックで実現する基本的な動き
Webページでよく使われるクリックイベント（クリックをしたら）を活用して、Javasc… -
Illustrator ロゴデザイン。企業のロゴから学ぶ。シンプルなロゴが作れるようになろう！
ロゴデザインは、企業やブランドのアイデンティティを視覚的に表現する重要な要素… -
JavaScript超入門: ゼロからはじめるWebプログラミング
JavaScriptとは？まずはJavaScriptを知ろう JavaScriptの基本 JavaScriptは、Webペ… -
もう迷わないHTML/CSSのクラス名の付け方完全ガイド！
Web制作において、HTML/CSSのクラス名をどう付けるべきか悩む方は少なくありません… -
使い方を知っておくと便利なフレームワークBootstrap。基礎知識と使い方
WEBサイトの作成には、HTML・CSS・JavaScript・PHPなど、さまざまな言語を組み合わ… -
Webデザイナーがオススメする「ブランドロゴにも使われている」超ド定番フォント 欧文・日本語
デザインのクオリティを左右する要素の一つにフォント選びがあります。フォントは… -
PHP初心者が挑戦できる！WordPressオリジナルテーマを作る！必要最小限編
WordPressのテーマは、サイトのデザインや機能を決める重要な要素です。デザイン通… -
誰もが最初はわからない。独特のWebデザイン用語。どういう意味ですか？が聞けない時。
デザインの現場やチームでの会話で、ふと「それって何のことだろう？」と思う瞬間…