目次
自分を表現するポートフォリオを作ろう
~魅力的なデザインで自分のスキルをアピール~
ポートフォリオは、自分のスキルや経験、制作実績を効果的にアピールする重要なツールです。この講座では、ノーコードで始める簡単なポートフォリオ作成から、さらに一歩進んで、ポートフォリオサイトやデザインカンプの作成まで学べる内容を用意しました。
前半では、Canvaを使った初心者向けの簡単なポートフォリオ作成方法を紹介しましたが、後半では、ウェブサイトとしてのポートフォリオを構築するステップを中心に解説します。特に「デザインカンプ」の作成は、実際のサイト制作のイメージを具体化する大切な工程です。
この講座を通じて、自分の魅力を最大限に伝えるポートフォリオを一緒に作っていきましょう!
作成ステップ
STEP
Part:0 ポートフォリオ・制作実績講座[0]ゼロ Canvaを使って作成してみよう!
動画で学ぶWebデザイン教室 Fuku…


ポートフォリオ・制作実績講座[0]ゼロ Canvaを使って作成してみよう! | 動画で学ぶWebデザイン教室 Fuku…
ポートフォリオとは? 分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブな業種…
STEP
Part:1 ポートフォリオサイトの作り方-制作工程
動画で学ぶWebデザイン教室 Fuku…


Part:1 ポートフォリオサイトの作り方-制作工程 | 動画で学ぶWebデザイン教室 Fukuokamiyako
ポートフォリオサイトとは、自分をアピールするためのプロフィールや、今まで作成した制作実績や課題などを掲載したWEBサイトのことです。就活やフリーランスで活動する場…
STEP
Part2:ポートフォリオ用1ページ構成カンプをFigmaで作る手順
動画で学ぶWebデザイン教室 Fuku…


Part2:ポートフォリオ用1ページ構成カンプをFigmaで作る手順 | 動画で学ぶWebデザイン教室 Fukuokamiyako
ポートフォリオのデザインカンプとは? ポートフォリオは、自分のスキルや実績を伝えるための重要なツールです。特にWeb系の職種では、見た目の印象や情報の伝え方がそのま…
STEP
Part3:HTMLで基本の構造を作ろうポートフォリオコーディング+Bootstrap
動画で学ぶWebデザイン教室 Fuku…


Part3:HTMLで基本の構造を作ろうポートフォリオコーディング+Bootstrap | 動画で学ぶWebデザイン教室 Fu…
デザインカンプの作成が終わったら、いよいよコーディングを始めましょう。最初のステップでは、デザインにとらわれすぎず、内容に合わせた正しいHTMLマークアップを意識す…
STEP
Part4:CSSで見た目を整えよう ポートフォリオコーディング
Part3ではHTMLでポートフォリオの基本構造を作成しました。今回はそのHTMLにCSSを加えて、デザインカンプに近づけていきます。CSSによるスタイルの調整は、情報の伝わりやすさ、視認性、操作性を向上させる大切なステップです。
あわせて読みたい


Part4:CSSで見た目を整えよう ポートフォリオコーディング
Part3ではHTMLでポートフォリオの基本構造を作成しました。今回はそのHTMLにCSSを加えて、デザインカンプに近づけていきます。CSSによるスタイルの調整は、情報の伝わり...
STEP
制作実績を作る
動画で学ぶWebデザイン教室 Fuku…
バナー作成講座 | 動画で学ぶWebデザイン教室 Fukuokamiyako
Photoshop/Illustrator/Figmaで作成するバナー講座 仕事で使えるバナーを作成したいけれど、どのツールを使えば良いのか迷ったことはありませんか?Photoshop、Illustrator…
動画で学ぶWebデザイン教室 Fuku…


Photoshopを使用。知っておくと超便利「よくある分割バナー」の作成方法 | 動画で学ぶWebデザイン教室 Fu…
ピンタレストなどでよく見かける「よくある分割バナー」をPhotoshopで作成する方法を動画で解説します。シンプルな手順で作れるので、初心者の方にもおすすめです! まずは…
動画で学ぶWebデザイン教室 Fuku…


Photoshopでアイキャッチ画像の作成。中央を意識した6分割バナー -応用- | 動画で学ぶWebデザイン教室 Fu…
中央に正方形を意識した分割バナーの作成 今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。OGPのことも考えたバナーで…
動画で学ぶWebデザイン教室 Fuku…


Photoshopのオブジェクト選択を使って、商品を並べたバナーを簡単に作成しよう! | 動画で学ぶWebデザイン…
楽天市場やさまざまなシーンでよくみかける、写真(アイテム)の背景が取り除かれて、文字を中心にあちこちに配置されているタイプのバナーの作成をPhotoshopで行います。 …
動画で学ぶWebデザイン教室 Fuku…


Illustrator ロゴデザイン。企業のロゴから学ぶ。シンプルなロゴが作れるようになろう! | 動画で学ぶWebデ…
ロゴデザインは、企業やブランドのアイデンティティを視覚的に表現する重要な要素です。Webデザインの仕事でも依頼される場面があります。ロゴデザインは、クライアント自…
関連記事
動画で学ぶWebデザイン教室 Fuku…


Webデザイナーだったら、IllustratorとPhotoshopどちらでバナーを作りますか? | 動画で学ぶWebデザイン教…
IllustratorとPhotoshopどちらで作りますか? バナーを作成する際、Webデザイナーがよく直面する疑問のひとつに、「AdobeのPhotoshopとIllustrator、どちらを使うべきか?…
動画で学ぶWebデザイン教室 Fuku…


現役ウェブデザイナーおすすめのフォント!20選!オススメのGoogleフォント | 動画で学ぶWebデザイン教室 …
ウェブデザインにおけるフォントの重要性 まずは、視認性(読みやすさ)が第一に挙げられます。Webサイトを閲覧したユーザーが内容をストレスなく、スムーズ理解できるよう…
動画で学ぶWebデザイン教室 Fuku…


Webデザイナーがオススメする「ブランドロゴにも使われている」超ド定番フォント 欧文・日本語 | 動画で学…
デザインのクオリティを左右する要素の一つにフォント選びがあります。フォントは単なる文字のスタイルではなく、メッセージのトーンや印象を伝える重要なツールです。しか…
動画で学ぶWebデザイン教室 Fuku…


そもそもWordpressって何?覚える必要ってあるの? | 動画で学ぶWebデザイン教室 Fukuokamiyako
「WordPress」という言葉を聞いたことはありますか?ウェブサイトを作るためのツールとして、多くの場面で名前が挙がるこのWordPress。一体何なのか、また本当に覚える価値…