Studioで作成したポートフォリオ作品例を紹介！作り方をステップで解説

ポートフォリオをStudioで作成したいけれど「Studioを使用したポートフォリオの作り方がわからない」「そもそもサイトの作り方がわからない」という方もいるでしょう。Webデザイナーやクリエイターを目指す方にとって、ポートフォリオは自分のスキルやセンスをアピールするための重要なツールです。

そこで本記事では、実際のポートフォリオ作品例とともに、Studioでのポートフォリオの作り方をステップごとにわかりやすく解説します。

Studioでポートフォリオを作成するメリットとは？

Studioでポートフォリオを作成するメリットは主に以下の3つです。

• コーディングの知識がなくてもWebサイトが制作可能
• レスポンシブ対応が可能
• テンプレートが豊富

メリットを理解したうえで、Studioでポートフォリオを作成することを検討しましょう。

コーディングの知識がなくてもWebサイトが制作可能

Studioは、直感的な操作でWebサイトを作れるノーコードツールです。HTMLやCSSの知識が少なくても、ドラッグ＆ドロップでレイアウトやデザインを組み立てられます。

Studioで公開されているポートフォリオも多く、参考にしながら作れるのも心強いポイント。

すでにデザインソフトを使っている方にとっても、Studioは選択肢のひとつ。IT企業でWeb広報として働くSHElikes受講生ののりさんも、コースでStudioを知り、ポートフォリオサイト作りに挑戦しています。

＞＞のりさんのインタビュー記事はこちら

レスポンシブ対応が可能

Studioで作成したポートフォリオは、自動でレスポンシブ対応が可能なため、さまざまなデバイスでレイアウトが崩れず、文字や画像のサイズも見やすいデザインで表示できます。

コーディングでレスポンシブデザインを実装する場合は、高度な知識や調整が必要ですが、Studioではデフォルトでマルチデバイス表示に最適化されるため、難しい知識や調整が必要ないのが魅力です。

テンプレートが豊富

Studioには、無料で使えるテンプレートが数多く用意されています。デザインの経験が少ない方でも、テンプレートをもとにすれば、整ったポートフォリオサイトを作りやすいでしょう。

テンプレートは業種や用途ごとに分かれていて、Webデザイナー向けやクリエイター向けなど、目的に合わせて選べます。

テンプレートをそのまま使わず、自分好みにカスタマイズすれば、オリジナルのデザインに仕上げられます。コストや時間をかけずに始められるのも、うれしいメリットです。

女性向けキャリアスクールSHElikesでは、50以上のスキルが定額で学び放題。詳しくは次の記事をご覧ください。

SHElikes受講生のStudioポートフォリオ作品例

ここからは、女性向けキャリアスクールSHElikesの受講生がStudioで作成したポートフォリオ作品例を4つ紹介します。

• meguさん｜LPデザイナー・Webデザイナー
• KOTOさん｜Webデザイナー
• 楓子さん｜デザイナー
• あゆみさん｜Webデザイナー

Studioでポートフォリオを作る際の参考にしてみてください。

meguさん｜LPデザイナー・Webデザイナー

LPデザイナー・Webデザイナーのmeguさんのポートフォリオは、ロゴ・バナー・Webサイト制作をはじめとした幅広い制作実績をカテゴリごとに整理し、誰が見てもわかりやすく情報を得られる構成が特徴です。

トップページは柔らかい色合いのデザインで、初めてサイトを訪れるクライアントにも安心感を与えます。また、制作物には「目的」や「工夫したポイント」が端的に記載されており、デザインの意図や強みを短時間で理解できるよう配慮されています。

＞＞meguさんのポートフォリオはこちら

KOTOさん｜Webデザイナー

Webデザイナーとして活動するSHElikes受講生のKOTOさん。全体のトーンやフォントが統一され、シンプルで洗練された世界観が伝わるポートフォリオです。

実績はWeb・紙・バナーなど媒体ごとに整理されています。各案件のページには「想定納期」「想定費用」など、実務を意識した情報も記載。依頼する側が、仕事のイメージを具体的に持ちやすい作りです。

SNSへのリンクや申し込みへの導線もあり、見た人がすぐに行動に移せる、実用的なポートフォリオといえます。

＞＞KOTOさんのポートフォリオはこちら

楓子さん｜デザイナー

楓子さんのポートフォリオは、イラストとデザインを融合させた独自の世界観が際立つビジュアルで、見る人の印象に強く残る構成が魅力です。ファーストビューで「デザインにも栄養を」というキャッチコピーを掲げ、自身の想いや感性を効果的に伝えています。

制作実績は化粧品広告バナーなどの採用実績から自主制作まで幅広く掲載され、デザインの幅広さと実力をアピール。各作品には「目的」「制作のポイント」がまとめられており、デザインの背景や意図を理解しやすい工夫がされています。

＞＞楓子さんのポートフォリオはこちら

あゆみさん｜Webデザイナー

Webデザイナーとして活動するSHElikes受講生のあゆみさん。ファーストビューに自己紹介を置き、強みやデザインへの想いを伝えたうえで、Webサイトやバナー、印刷物などの制作実績を紹介しています。

各作品には、使ったツールや制作時間、工夫したポイントを記載。制作者の考え方やプロセスが具体的に伝わる内容です。

全体のデザインは親しみやすく温かみがあり、依頼する側が安心して相談できる雰囲気にまとまっています。

＞＞あゆみさんのポートフォリオはこちら

Studioを使ったポートフォリオの作り方

Studioを使用したポートフォリオの作り方を5つのステップで紹介します。

1. ポートフォリオのコンセプトを決定する
2. 掲載する作品を選定する
3. 使用するテンプレートを決める
4. 各ページを作り込む
5. Webに公開する

ステップごとのポイントを押さえて、伝わるポートフォリオサイトを作りましょう。

1.ポートフォリオのコンセプトを決定する

ポートフォリオを作成する際、最初に取り組むべきはコンセプトの決定です。コンセプトとは、ポートフォリオを通じて「どんな自分を伝えたいか」「どんな仕事をしたいか」を明確化することです。

たとえば、Webデザイナーなら「シンプルで洗練されたデザイン」「女性向けの柔らかいデザイン」など、自分が得意とするテイストを打ち出すこと。まずは「どう見られたいか」を具体化することから始めましょう。

2.掲載する作品を選定する

次に、ポートフォリオに掲載する作品を選びます。重要なのは「ただ多くの作品を掲載する」のではなく、自分の強みが伝わる完成度の高い作品を選ぶことです。また、Webデザイナーであれば、バナー、LP、Webサイトなど、幅広い媒体の制作物をバランスよく揃えるとスキルの幅が伝わります。

実務未経験の場合、掲載する作品は自主制作でも問題ありません。各作品には、制作の目的やターゲット、使用ツール、制作期間などを明記し、作品の背景や制作意図も伝えましょう。

3.使用するテンプレートを決める

Studioのテンプレートは、ビジュアル重視のものからテキスト中心のものまでさまざまで、自分のコンセプトや掲載する作品のジャンルに合ったデザインを選びましょう。たとえば、グラフィック重視のポートフォリオであれば写真やビジュアルが映えるレイアウトを、文章でストーリーを伝えたい場合は読みやすさを重視したテンプレートが適しています。

テンプレートは無料で使用できるものもあり、そのまま使用せずにカスタマイズすることで、ほかのポートフォリオサイトとの差別化も図れるでしょう。

4.各ページを作り込む

テンプレートが決まったら、各ページを作り込みます。TOPページには、世界観が伝わるビジュアルやキャッチコピーを配置。「自己紹介」ページには経歴やスキルを書き、どんな人かが伝わるように工夫しましょう。

「制作実績」ページでは、作品をジャンルごとに整理し、制作の背景や目的を添えると説得力が増すでしょう。

作品例で紹介したKOTOさんは、Studioを選んだ理由を「作品の見せ方をカスタマイズできますし、そのポートフォリオを提出するだけで『サイトを作れること』をアピールできます」と話しています。

＞＞KOTOさんのインタビュー記事はこちら

5.Webに公開する

全体の構成が完成したら、Web上にポートフォリオを公開します。

公開前には、複数のデバイスでレスポンシブ表示を確認し、レイアウトが崩れていないかをチェックしましょう。SNSや名刺にURLを記載すれば、より多くの人にポートフォリオを見てもらえる機会が広がります。

Webデザイナーとして活動するなら、ポートフォリオは「自分を売り込む営業ツール」でもあるため、定期的に作品を更新し、最新のスキルや実績を反映させましょう。

ポートフォリオを仕事につなげたSHElikes受講生の事例

Studioでサイトを作るだけでなく、そのポートフォリオをどう仕事につなげたのかも、参考になるポイントです。

ここでは、ポートフォリオを使って仕事につなげた受講生を2人紹介します。

コンペの実績をポートフォリオにまとめ、4社と契約した元看護師のあかりさん

看護師からバリスタに転身し、夫の転勤をきっかけに2024年4月にSHElikesに入会したあかりさん。未経験から4ヶ月で、フリーランスのWebデザイナーになりました。

初めて応募したSNSクリエイティブコンペ_※1は不採用。次の作品はもくもく会で講師のフィードバックを受けて磨き、そこから3回連続で採用されています。

コンペの実績をポートフォリオにまとめてクラウドソーシングで応募を続け、約250件の応募を経て、現在は4社と業務委託契約を結んでいるそうです。

＞＞あかりさんのインタビュー記事はこちら

※1：受講生なら誰でも参加できる、毎週開催のデザイン練習の機会。

Studioの魅力を広めたくて、講師も始めたまゆさん

地方で子育てをしながら専業主婦をしていたまゆさん。「フリーランスになる」と決めてSHElikesに入会し、WebデザインとWordPressを半年で学び終えました。

卒業制作では、仕事につなげるために知人のサイト制作を無償で引き受けています。わからないことは、オンラインのもくもく会で講師に質問して解決したそうです。

その後はInstagramやX（旧Twitter）で発信を続け、少しずつ依頼が増えていきました。最近は、Studioの魅力を広めたいと、グループ講座の講師も始めています。

＞＞まゆさんのインタビュー記事はこちら

SHElikesならStudioを使ったポートフォリオ作成が学べる

女性向けキャリアスクールSHElikes（シーライクス）は、全50以上の職種スキルが学び放題。Studioでポートフォリオを作成したい人に向けた「Studioコース」やWebデザイナーに必要な基本原則を学べる「Webデザインコース」などポートフォリオ作成が学べる環境が充実しています。

Studioコースの内容は、次のとおりです。

Studioコースのあとに、要件定義やワイヤーフレーム、デザインカンプの作成を学べるWebサイト制作 デザインコースを受講して、載せる作品を増やす方法もあります。

課題の添削やフィードバックを受けられるので、「ポートフォリオでどう見せるか」という視点も身につけられます。

Studioポートフォリオ例を参考にサイトを作ろう

Studioは、コーディングの知識がなくても、直感的な操作でポートフォリオサイトを作れるツールです。テンプレートをカスタマイズすれば、自分らしいデザインに仕上げられます。

紹介した作品例や作り方のステップを参考に、強みや世界観が伝わるポートフォリオを作ってみてください。

ポートフォリオの作り方を基礎から学びたい方には、女性向けキャリアスクールSHElikesもおすすめです。講師のアドバイスを受けながら、作品を磨いていけます。

「自分もポートフォリオを作ってみたい」と感じた方は、まずは無料体験レッスンに参加してみてはいかがでしょうか。

関連記事

• 「Webデザイナーになりたい…」だったらSHElikesを使ってみよう！【受講生のポートフォ…
• Webデザイナーのポートフォリオ作品例を紹介！作り方のポイントも解説
• ポートフォリオの作品説明文の書き方と具体例｜スクール受講生の作品も紹介