Webデザインにおいて学習したいキーワードを入力。またはカテゴリー・タグを選択して検索
Webデザインにおいて
学習したいキーワードを入力。
FukuokamiyakoのPCSchoolでは、未来のWebデザイナー・フロントエンドエンジニアを目指す方に向けて、解説動画を提供しています！デザインの世界に踏み込み、フロントエンドエンジニアとしてのスキルを磨くための手段として、私たちの専門的な解説動画がお役に立てれば・・・技術の基礎から実践的なテクニックまで、わかりやすい形で学べるコンテンツをご用意しています。
Webデザイナーに必要な資格 – ウェブデザイン技能検定-
Webデザイン業界で、唯一の国家資格と呼ばれる、ウェブデザイン技能検定とは?学科と実技の受験概要から理解しよう
HTML/CSS/JavaScript/レスポンシブ/ポートフォリオ講座
HTML/CSSを使ってWebサイト（ホームページ）が作成できるようになるためには、コーディング力を上げる必要があります。まずはコードを模写コーディングしながら、目でコードに慣れましょう。コードに慣れてからコードの内容を覚えて、どんなコードも書けるように練習しましょう！
中級講座では、全体のコードを外部スタイルシートに記述[中級者向け]
レスポンシブなWebサイト練習では、デベロッパーツールを使って、メディアクエリを理解します。
ポートフォリオとは？必要なコンテンツを載せて作成していきましょう
Figma講座スタートしました！
Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操作について詳しく解説します。これからFigmaを始める方に向けた内容です！
Figmaを使ってスマートフォン対応のワイヤーフレームを作成します。一般的なネットショップをモデルにし、基本的な手順で作成していきます。オートレイアウトや制約なども解説しています。
再利用可能なデザイン要素であるコンポーネントの解説です。デザインにおいて、同じパーツを繰り返し使用する場合に便利。効率よくサイトを作成するためには必須の要素です。
プロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、どのように反応するかを再現することが可能です
Photoshop・Illustratorを使って、バナー作成からデザインを学ぼう
Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法
ピンタレストなどでもよく見かける「よくある分割バナー」をPhotoshopで作成する動画講座です。クリッピングマスクを使います。
Photoshopでアイキャッチ画像の作成。中央を意識した6分割バナー -応用-
OGPを意識した中央に文字列を配置するアイキャッチバナーの作成から書き出し方法。Photoshopのパス選択・切り抜きツールを使用。
仕事で使えるバナーを作成したいけれど、どのツールを使えば良いのか迷ったことはありませんか？Photoshop、Illustrator、そしてFigmaを使ったバナー作成講座
新着・更新記事一覧
-
JavaScript03: スクロールイベントでWebを動かそう
Webサイトに動きをつけるための技術の一つとして、スクロールイベントがあります。JavaScriptを使って、スクロールに応じた表示・非表示。getBoundingClientRect()関数を使っての画像の表示。IntersectionObserverを使ったスクロールの監視などを行います… -
リセットCSSってなんですか？必要なの？モダンリセット最新版！
Webサイトを作っていると、ブラウザ間でスタイルの見た目がずれることがあります。このずれを解決するために用いられるのが「リセットCSS」です。今回は、リセットCSSの解説やタイプ別の特徴、おすすめの使い方。さらに最新を取り入れた「2024年モダンリセ… -
JavaScript02 自作スライドショーで動きの基礎を段階的に学ぶ
JavaScriptを使った動きのあるWebサイトは、より魅力的で印象に残るものです。ここでは、初心者の方を対象に、Web制作で役立つ『スライドショー』をゼロから自作してみます。 最初はシンプルな構造から始め、フェード効果、操作ボタン、自動再生、インジケ… -
知らずに損してる？CSS記述のよくあるミス30選と対処法
CSSを使ったWebデザインでは、初心者から中級者まで陥りやすい多くの記述ミスがあります。これらのミスは、デザインの崩れやメンテナンスの難化を引き起こすことがあり、無意識のうちに時間と労力を浪費する原因にもなります。そんな”ありがちな30のCSSミ… -
JavaScript01 : クリックで実現する基本的な動き
Webページでよく使われるクリックイベント（クリックをしたら）を活用して、Javascript 基本的な動きを学びましょう。ここでは以下の4つを作成します ボタンをクリックしたらメッセージを表示しよう クリックでボタンのテキストやスタイルを変更しよう ボ… -
Illustrator ロゴデザイン。企業のロゴから学ぶ。シンプルなロゴが作れるようになろう！
ロゴデザインは、企業やブランドのアイデンティティを視覚的に表現する重要な要素です。Webデザインの仕事でも依頼される場面があります。ロゴデザインは、クライアント自信を表す形なので、ともすれば情報が多くなり、ロゴの中にたくさん要素が入り、反対… -
JavaScript超入門: ゼロからはじめるWebプログラミング
JavaScriptとは？まずはJavaScriptを知ろう JavaScriptの基本 JavaScriptは、Webページに「動き」や「反応」を加えるためのプログラミング言語です。例えば、ボタンを押したときに画面が変わる動きや、データを入力したときのチェックなどに使われます。 … -
ウェブデザイン技能検定 学科 令和５年度 4回目（3級）
ウェブデザイン技能検定は、ウェブ制作に関する知識やスキルを証明する国家資格です。3級は特に初心者向けの試験で、HTMLやCSS、ウェブデザインの基礎知識を問われます。ここでは、令和5年度第4回（3級）の学科試験の過去問をもとに、出題傾向や重要ポイン… -
もう迷わないHTML/CSSのクラス名の付け方完全ガイド！
Web制作において、HTML/CSSのクラス名をどう付けるべきか悩む方は少なくありません。HTML/CSSが初めての方にとっては、クラス名をどう付けるかが難しく感じられることが多いです。そこで、基本的なルールを解説し、具体例とサンプルコードを紹介しています… -
使い方を知っておくと便利なフレームワークBootstrap。基礎知識と使い方
Bootstrapとは？ Bootstrap（ブートストラップ）は、ウェブサイトやウェブアプリのデザインを簡単に作るためのフレームワークです。HTML、CSS、JavaScriptがパッケージ化されており、効率的でプロフェッショナルなデザインを誰でも手軽に構築できます。 そ… -
Webデザイナーがオススメする「ブランドロゴにも使われている」超ド定番フォント 欧文・日本語
デザインのクオリティを左右する要素の一つにフォント選びがあります。フォントは単なる文字のスタイルではなく、メッセージのトーンや印象を伝える重要なツールです。しかし、数多くのフォントからどれを選べば良いのか迷ってしまうことも少なくありませ… -
PHP初心者が挑戦できる！WordPressオリジナルテーマを作る！必要最小限編
WordPressのテーマは、サイトのデザインや機能を決める重要な要素です。デザイン通りのサイトにするには、既存のテーマでは出来ない場合もあり、オリジナルテーマを作成することで、完全にデザイン通りのサイトを構築することができます。しかし、「オリジ… -
ウェブデザイン技能検定 学科 令和５年度 ３回目（3級）
ウェブデザイン技能検定3級は、ウェブ制作に必要な基礎知識を問う国家資格で、これからウェブ業界を目指す方やスキルを証明したい初心者に人気の試験です。この記事では、令和5年度第3回試験の過去問をもとに、出題傾向や重要ポイントを詳しく解説します。… -
誰もが最初はわからない。独特のWebデザイン用語。どういう意味ですか？が聞けない時。
デザインの現場やチームでの会話で、ふと「それって何のことだろう？」と思う瞬間、ありませんか？Webデザイナーやウェブ担当者が日常的に使う専門用語の中には、初心者には馴染みが薄いものや、聞き慣れない言葉がたくさんあります。でも、「これってどう… -
Photoshop ぶっちゃけ範囲選択多すぎ！Webデザイナーは何を使っていますか？
Photoshopを使うとき、範囲選択ツールの多さに迷ったことはありませんか？矩形選択ツールやなげなわツール、AIを活用した被写体選択ツールなど、その種類は豊富で、それぞれに得意分野があります。 しかし、この多様性こそが、他のツールやサービスにはな… -
Phoroahop レイヤースタイルを使って「プロフェッショナルな見た目」を作成！
Photoshopのレイヤースタイルは、デザイン作業を効率化しながら、プロフェッショナルな見た目を作るための強力な機能です。文字や図形、画像などのレイヤーに、影をつけたり、光沢を追加したりといったエフェクトを簡単に適用できます。この機能をマスター… -
そもそもWordPressって何？覚える必要ってあるの？
「WordPress」という言葉を聞いたことはありますか？ウェブサイトを作るためのツールとして、多くの場面で名前が挙がるこのWordPress。一体何なのか、また本当に覚える価値があるのか疑問に思っている方も多いかもしれません。この記事では、WordPressの基… -
サイト作成時は必須！便利なアイコンサイトを集めました。人気ランキング一覧
サイトやアプリを作成するとき、欠かせないのが「アイコン」です。アイコンはデザインのアクセントになるだけでなく、ユーザーが直感的に操作できるデザインを作るための重要な要素です。しかし、数多くのアイコンサイトが存在し、どれを選べばいいのか迷… -
WordPressでフルサイトのテーマを使ってサイトを作成してみよう
WordPressの最新フルサイトテーマ『Twenty Twenty Four』を使って、理想のサイトをゼロから作成してみます！デザインカンプはFigmaで作成したもので、このカンプ通りにサイトをどこまで再現できるか挑戦します。初心者の方にもわかりやすく、デザインから… -
WordPress で「簡単にお引越し」が可能なプラグイン All-in-One WP Migration
Wordpressはお引越しが結構大変 WordPressサイトをサーバーからサーバーへのお引っ越し（移行）や、ローカルで作成したWordPressをサーバーへ移行は、一見シンプルに、ファイルだけ移動すればいいのかな？と思えるかもしれませんが、いくつかの理由で大変… -
ウェブデザイン技能検定 学科 令和５年度 ２回目（3級）
「ウェブデザイン技能検定3級（令和5年度第2回）」の学科試験を解説します。この試験は、ウェブデザインに関する基礎知識を問う国家資格で、初心者にも人気です。この記事では、過去問をもとに出題傾向や重要ポイントをわかりやすく解説し、合格に向けた学… -
Figma基礎 Figmaをインタラクティブに！プロトタイプ設定
Figmaのプロトタイピングとは？ Figmaのプロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、デザインがどのように反応するかを再現することが可能です… -
Figma基礎 コンポーネントとインスタンス
Figmaのコンポーネントは、Figmaで使われる再利用可能なデザイン要素です。デザインにおいて、同じパーツを繰り返し使用する場合に便利で、一括更新や統一感のあるデザインを実現するための機能です。 コンポーネントの特徴は、元となる「親コンポーネント… -
Figma基礎 スマートフォン対応のワイヤーフレームの作成
初心者さんでも大丈夫！ レイアウトグリッド、長方形ツール、テキストツール、プラグイン、オートレイアウトを使って、スマホで見やすいネットショップの骨組み＝ワイヤーフレームを作ってみましょう。使う機能は、 レイアウトグリッド: ページ全体のバラ…