Webデザインにおいて学習したいキーワードを入力。またはカテゴリー・タグを選択して検索
FukuokamiyakoのPCSchoolでは、未来のWebデザイナー・フロントエンドエンジニアを目指す方に向けて、解説動画を提供しています！デザインの世界に踏み込み、フロントエンドエンジニアとしてのスキルを磨くための手段として、私たちの専門的な解説動画がお役に立てれば・・・技術の基礎から実践的なテクニックまで、わかりやすい形で学べるコンテンツをご用意しています。
フロントエンドのためのHTML/CSS/レスポンシブウェブサイト講座
HTML/CSSを使ってWebサイト（ホームページ）が作成できるようになるためには、コーディング力を上げる必要があります。まずはコードを模写コーディングしながら、目でコードに慣れましょう。コードに慣れてからコードの内容を覚えて、どんなコードも書けるように練習しましょう！
基礎講座では、HTMLマークアップを中心にコードを模写していきます。[初心者向け] まずは１回目から>>>
中級講座では、全体のコードを外部スタイルシートに記述[中級者向け] まずは、01 ホームページ中級講座 ナビゲーションの作成(HTML)
レスポンシブなWebサイト練習では、デベロッパーツールを使って、メディアクエリを理解します。
ポートフォリオとは？必要なコンテンツを載せて作成していきましょう
Photoshop・Illustratorを使って、バナー作成からデザインを学ぼう
OGPを意識した中央に文字列を配置するアイキャッチバナーの作成から書き出し方法。Photoshopのパス選択・切り抜きツールを使用。
ピンタレストなどでもよく見かける「よくある分割バナー」をPhotoshopで作成する動画講座です。クリッピングマスクを使います。
Photoshopを使ったバナー作成講座。作成の際に必要なサイズ設定から、ガイド線を使った作成。書き出しまで１回から４回まで
５回目からはIllustratorを使ったバナー作成。サイズ設定から書き出しまで。
WordPress基礎講座がスタート！
Webデザイナーに必要な資格 – ウェブデザイン技能検定-
Webデザイン業界で、唯一の国家資格と呼ばれる、ウェブデザイン技能検定とは?学科と実技の受験概要から理解しよう
ウェブデザイン技能検定では学科と実技を受験します。実技と学科をこの動画からしっかりと傾向と対策をおさえよう！
新着・更新記事一覧
-
意外と読めない・・・HTML/CSSのコードの読み方
生徒さんによく質問されるHTMLやCSSの読み方をまとめてみました。意外と特殊な読み方をするHTML要素や属性、そしてCSSのプロパティや値があります。「え？こんな読み方？」と思うものも少なくありません。授業で間違った読み方をしないように調べて説明す… -
Adobe Illustrator 誰もが苦手な「ペンツール」の基本的な操作練習
Illustratorの中でも苦手な方が多い、ペンツール。直線を書くのは難しくはありませんが、曲線となると羽のような方向線が出てくるので、方向線と曲線が、どちらを見ていいか、わからない。使い方に苦戦する・・・とう方が多く見られます。今回はpracticeフ… -
Photoshopでアイキャッチ画像の作成。中央を意識した6分割バナー -応用-
中央に正方形を意識した分割バナーの作成 今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。 まずは出来上がりを確認します。 サイズはアイキャッチ画像になりますので、最初は1200px*630pxで作成します… -
Photoshopを使用。知っておくと超便利「よくある分割バナー」の作成方法
ピンタレストなどでもよく見かける「よくある分割バナー」をPhotoshopで作成する動画講座です。 まずは出来上がりから確認 横幅1000px 高さ500px 解像度72ppiのバナーです。Photoshopの長方形ツールを使って幅500px 高さ250pxのシェイプを作成し、そのシェ… -
現役Webデザイナーがここは使える！写真素材サイトを紹介
Webサイト制作において、必要な写真素材サイトを紹介します。 Webサイト制作をおこなう際に、良質の写真を使うことは、本当に大変です。写真素材の良し悪しで、Webサイトの魅力が半減することも多々あります。 写真素材の選び方はとてもとても重要です。 … -
WordPress 最小限入れておきたい「おすすめのプラグイン」
WordPressを初めて利用する際、最小限の必要な設定から始めることはウェブサイトの効率的な構築において重要ですが、基本的なワードプレスの機能だけでは、足りない部分があります。そういった時に、いくつかの必須のプラグインを導入することで、使い勝手… -
ウェブデザイン技能検定を受検した方に聞いてみました！
職業訓練校などでウェブデザイン技能検定に受検された方のお話しを少しまとめてみました。 ウェブデザイン技能検定ー実技編 ウェブデザイン技能検定は、当日 実技問題を最初に行なってから、休憩後学科となります。パソコンはWindowsで10や11のOSが多いよ… -
WordPress[初心者向け] ダッシュボードの設定と使い方 -1-
このセクションでは、WordPressの管理画面、つまりダッシュボードについて詳しく解説し、基本的な設定方法をご紹介しております。ローカル環境で、Wordpressを起動しますので、WordPressローカル環境構築 の準備が必要です。下記のページよりご確認くださ… -
ウェブデザイン技能検定 学科 令和５年度 １回目（3級）
ウェブデザイン技能検定 学科 令和５年度の１回目（3級）の過去問解説を行っています。 今回の課題では、GIF画像の形式についてや、Table要素や、HTML/CSSに関する問題が多く出ていました。少しレガシーさも感じる学科試験でしたので、下記のリンク先よ… -
Webデザイナーだったら、IllustratorとPhotoshopどちらでバナーを作りますか？
IllustratorとPhotoshopどちらで作りますか？ バナーを作成する際、よく聞かれる質問に「バナーを作成する依頼が来ました。AdobeのPhotoshopとIllustrator、どちらで作成した方がいいのでしょうか？」といった内容です。 私はIllustratorの方が操作に慣れ… -
ポートフォリオ・制作実績講座[0]ゼロ Canvaを使って作成してみよう！
ポートフォリオとは？ 分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブな業種の採用には、必ずと言っていいほど求められるでしょう。履歴書や職務経歴書よりも重… -
現役ウェブデザイナーおすすめのフォント！15選！オススメのGoogleフォント
ウェブデザインにおけるフォントの重要性 まずは、視認性（読みやすさ）が第一に挙げられます。Webサイトを閲覧したユーザーが内容をストレスなく、スムーズ理解できるようにするためにはとても重要です。読みやすいフォントを使用することで、UX（ユーザ… -
WebデザイナーがおすすめするWordPress 無料＆有料テーマ
Webデザイン会社や多くのユーザーに人気の高いCMS「Wordpress 」そのWordPressにはデザイン性の高い「テーマ」（テンプレート）が数多く用意されており、テーマは管理画面（ダッシュボード）の外観から選択して簡単にセッティングすることができます。 ま… -
01 レスポンシブホームページ基本講座
レスポンシブホームページ基本講座1回目の講座です。前回レスポンシブで必要なデベロッパーツールを解説していますので、こちらの回がまだの場合は、初回講座をご覧ください。 meta viewportビューポートの設定は必須 meta viewport？メタビューポート？っ… -
00 レスポンシブホームページ講座 (検証ツール)
レスポンシブホームページ制作講座の初回講座です。 レスポンシブとは、スマートフォン・タブレット・パソコン画面をHTMLはひとつで、CSSで見た目を可変するデザインのことです。 今回のレスポンシブホームページ基礎講座は、その概念と考え方を行います。… -
ウェブデザイン技能検定 学科 令和３年度 ２回目（3級）
ウェブデザイン技能検定 学科 令和３年度の２回目（3級）の過去問解説を行っています。 「学科令和３年度の２回目（3級）」の課題では、通常通りアクセシビリティやユーザービリティに関する問題や、新しいところでは、progress要素についての問題が出て… -
ウェブデザイン技能検定 学科 令和３年度 1回目（3級）
ウェブデザイン技能検定 学科 令和３年度の１回目（3級）の過去問解説を行っています。 前回に引き続き令和３年度の過去問のトライです！ 今回の課題では、通常通りアクセシビリティやユーザービリティに関する問題や、新しいところでは、progress要素に… -
ウェブデザイン技能検定 学科 令和2年度 2回目（3級）
ウェブデザイン技能検定 学科 令和2年度の2回目（3級）の過去問解説を行っています。 令和２年度の２回目は、ユーザビリティやアクセシビリティ、知的財産権なども出てきます。よく出てくる傾向にある非可逆圧縮や透過などもありますので、ぜひ動画を確… -
ウェブデザイン技能検定 学科 令和4年度 4回目（3級）
ウェブデザイン技能検定 学科 令和4年度の4回目（3級）の過去問解説を行っています。 今回の課題では、GIF画像の形式についてや、Table要素や、HTML/CSSに関する問題が多く出ていました。少しレガシーさも感じる学科試験でしたので、下記のリンク先より… -
ウェブデザイン技能検定３級の実技を通してやってみました！
まずはどういったものか？動画をチェック 動画時短モード 約1時間の動画になりますので、問題の１（作業の１）だけを見たい・・・という方は、下記の時短モードのリンクをご利用ください。 試験概要 注意事項 解答の諸注意（案外大事) 試験開始 解答フォ… -
04 バナー作成講座 PSDファイルからの書き出し
在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」作成講座4回目です。今回は、Photoshopを使ってアートボードごとに作成したバナーを、書き出し形式を使い、１枚１枚をjpeg/png形式で書き出しを行う工程を行っ… -
06 バナー作成講座 バナーをIllustratorで作って書き出し
在宅・フリーランスになるためのバナー作成講座・イラレ編 ６回目のバナー作成講座は、５回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記のようにSALE 詳細はこちらの文字をアピアランスで、境界線を作成し、ブラシツールから、… -
05 バナー作成講座 バナーをIllustratorで作ってみた
在宅・フリーランスになるためのバナー作成講座・イラレ編 5回目のバナー作成講座は、Illustratorを使って、バナーを作成していきます。Photoshopと異なり、写真加工は得意ではないIllustratorですが、オブジェクト（図形）やイラストの作成には適している… -
03 バナー作成講座 背景に写真・さくら吹雪のブラシ
在宅・フリーランスになるためのバナー作成講座 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます。 バナー作成講座の2回目で、キャッチコピーを入力して配置やデザインもきめたのですが、…