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