Webデザインにおいて学習したいキーワードを入力。またはカテゴリー・タグを選択して検索
Webデザインにおいて
学習したいキーワードを入力。
FukuokamiyakoのPCSchoolでは、未来のWebデザイナー・フロントエンドエンジニアを目指す方に向けて、解説動画を提供しています！デザインの世界に踏み込み、フロントエンドエンジニアとしてのスキルを磨くための手段として、私たちの専門的な解説動画がお役に立てれば・・・技術の基礎から実践的なテクニックまで、わかりやすい形で学べるコンテンツをご用意しています。
Figma講座スタートしました！
Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操作について詳しく解説します。これからFigmaを始める方に向けた内容です！
Figmaを使ってスマートフォン対応のワイヤーフレームを作成します。一般的なネットショップをモデルにし、基本的な手順で作成していきます。オートレイアウトや制約なども解説しています。
再利用可能なデザイン要素であるコンポーネントの解説です。デザインにおいて、同じパーツを繰り返し使用する場合に便利。効率よくサイトを作成するためには必須の要素です。
プロトタイピング機能を使うと、作成したデザインにーザーが画面上で行う操作＝インタラクティブ設定（タップ、クリック、ホバー、ドラッグなど）に応じて、どのように反応するかを再現することが可能です
Photoshop・Illustratorを使って、バナー作成からデザインを学ぼう
Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法
ピンタレストなどでもよく見かける「よくある分割バナー」をPhotoshopで作成する動画講座です。クリッピングマスクを使います。
Photoshopでアイキャッチ画像の作成。中央を意識した6分割バナー -応用-
OGPを意識した中央に文字列を配置するアイキャッチバナーの作成から書き出し方法。Photoshopのパス選択・切り抜きツールを使用。
仕事で使えるバナーを作成したいけれど、どのツールを使えば良いのか迷ったことはありませんか？Photoshop、Illustrator、そしてFigmaを使ったバナー作成講座
フロントエンドのためのHTML/CSS/レスポンシブウェブサイト講座
HTML/CSSを使ってWebサイト（ホームページ）が作成できるようになるためには、コーディング力を上げる必要があります。まずはコードを模写コーディングしながら、目でコードに慣れましょう。コードに慣れてからコードの内容を覚えて、どんなコードも書けるように練習しましょう！
中級講座では、全体のコードを外部スタイルシートに記述[中級者向け]
レスポンシブなWebサイト練習では、デベロッパーツールを使って、メディアクエリを理解します。
ポートフォリオとは？必要なコンテンツを載せて作成していきましょう
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基礎 スマートフォン対応のワイヤーフレームの作成
Figmaを使ってスマートフォン対応のワイヤーフレームを作成しましょう。一般的なネットショップをモデルにし、基本的な手順で作成していきます。 Figmaにプロジェクトを作成する Figmaを開きます。ブラウザ版またはアプリ版のFigmaを起動します。 新しいフ… -
Figmaを知ろう！入門講座 基本操作と概要
Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操作について詳しく解説します。これからFigmaを始める方に向けた内容です！ Figmaとは… -
今更聞けない。Webサイトのアップロード方法。FTPって何？
「Webサイトをアップロードする」と聞くと、初心者の方は少し難しそうに感じるかもしれません。でも実は、適切なツールと手順を知っていれば簡単にできます。その中でもよく使われる方法が FTP（File Transfer Protocol） を使ったアップロード・ダウンロ… -
Photoshopのオブジェクト選択を使って、商品を並べたバナーを簡単に作成しよう！
楽天市場やさまざまなシーンでよくみかける、写真（アイテム）の背景が取り除かれて、文字を中心にあちこちに配置されているタイプのバナーの作成をPhotoshopで行います。 まずは出来上がりから確認 横幅1280px、高さ720px（アスペクト比16:9) 解像度72ppi… -
HTMLを適当に書いてませんか？マークアップはとても大事です！
HTMLを扱うとき、「とりあえず見た目さえ整えばいい」という思いで書かれているコードに出会うことがあります。しかし、マークアップを適当に書いてしまうと、SEOやアクセシビリティの面で大きな問題が発生することがあります。適当なマークアップがもたら… -
意外と読めない・・・HTML/CSSのコードの読み方
生徒さんによく質問されるHTMLやCSSの読み方をまとめてみました。意外と特殊な読み方をするHTML要素や属性、そしてCSSのプロパティや値があります。「え？こんな読み方？」と思うものも少なくありません。授業で間違った読み方をしないように調べて説明す… -
ウェブデザイン技能検定 学科 令和５年度 １回目（3級）
「令和5年度第1回ウェブデザイン技能検定3級」の学科試験を徹底解説！本試験は、HTMLやCSS、デザイン基礎などを問う国家資格です。過去問を分析し、効率的な学習方法や合格に役立つポイントを解説します。初めて受験する方もこの記事で合格への一歩を踏み… -
WebデザイナーがおすすめするWordPress 無料＆有料テーマ
Webデザイン会社や多くのユーザーに人気の高いCMS「Wordpress 」そのWordPressにはデザイン性の高い「テーマ」（テンプレート）が数多く用意されており、テーマは管理画面（ダッシュボード）の外観から選択して簡単にセッティングすることができます。 ま… -
Photoshopでアイキャッチ画像の作成。中央を意識した6分割バナー -応用-
中央に正方形を意識した分割バナーの作成 今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。OGPのことも考えたバナーです。まずは出来上がりを確認します。 サイズはアイキャッチ画像になりますので、最… -
Webデザイナーだったら、IllustratorとPhotoshopどちらでバナーを作りますか？
IllustratorとPhotoshopどちらで作りますか？ バナーを作成する際、Webデザイナーがよく直面する疑問のひとつに、「AdobeのPhotoshopとIllustrator、どちらを使うべきか？」というものがあります。クライアントや案件の特性によって異なりますが、デザイナ… -
現役ウェブデザイナーおすすめのフォント！15選！オススメのGoogleフォント
ウェブデザインにおけるフォントの重要性 まずは、視認性（読みやすさ）が第一に挙げられます。Webサイトを閲覧したユーザーが内容をストレスなく、スムーズ理解できるようにするためにはとても重要です。読みやすいフォントを使用することで、UX（ユーザ… -
ウェブデザイン技能検定を受検した方に聞いてみました！
職業訓練校などでウェブデザイン技能検定に受検された方のお話しを少しまとめてみました。 ウェブデザイン技能検定ー実技編 ウェブデザイン技能検定は、当日 実技問題を最初に行なってから、休憩後学科となります。パソコンはWindowsで10や11のOSが多いよ… -
ウェブデザイン技能検定 学科 令和2年度 2回目（3級）
ウェブデザイン技能検定 学科 令和2年度の2回目（3級）の過去問解説を行っています。 令和２年度の２回目は、ユーザビリティやアクセシビリティ、知的財産権なども出てきます。よく出てくる傾向にある非可逆圧縮や透過などもありますので、ぜひ動画を確… -
Webデザイナーがおすすめする無料SVGアイコン「Tabler Icons」
様々なサイトで、UIデザインにぴったりのSVG及びPNGアイコンが無料で使えるTabler Icons Over 4900 pixel-perfect icons for web design このサイトでは、4944以上の種類のアイコンを利用することができます。これらのアイコンはどれもバランス… -
WordPress[初心者向け]固定ページとメニュー作成 -3-
3回目のWordPress（ワードプレス）初心者向け講座では、よくある会社のウェブサイトを想定した固定ページの作成と、固定ページを作成したあと、ヘッダー・フッター・モバイルのメニュー反映までを行なっています。 WordPress基礎講座の１回目・２回目の続…