ポートフォリオをSTUDIOで作成したいけれど「STUDIOを使用したポートフォリオの作り方がわからない」「そもそもサイトの作り方がわからない」という方もいるでしょう。Webデザイナーやクリエイターを目指す方にとって、ポートフォリオは自分のスキルやセンスをアピールするための重要なツールです。
そこで本記事では、実際のポートフォリオ作品例とともに、STUDIOでのポートフォリオの作り方をステップごとにわかりやすく解説します。
STUDIOでポートフォリオを作成するメリットとは？
STUDIOでポートフォリオを作成するメリットは主に以下の3つです。
メリットを理解したうえで、STUDIOでポートフォリオを作成することを検討しましょう。
コーディングの知識がなくてもWebサイトが制作可能
STUDIOは直感的な操作でWebサイトがノーコードで制作できるツールのため、コーディングの知識が少なくてもポートフォリオを作成できます。HTMLやCSSの知識が少なくても、ドラッグ＆ドロップでレイアウトやデザインを構築可能です。
また、STUDIOで公開されているポートフォリオ作品も豊富なため、さまざまなポートフォリオを参考に作成ができ、自分のスキルや制作実績を魅力的に表現することができます。
レスポンシブ対応が可能
STUDIOで作成したポートフォリオは、自動でレスポンシブ対応が可能なため、さまざまなデバイスでレイアウトが崩れず、文字や画像のサイズも見やすいデザインで表示できます。
コーディングでレスポンシブデザインを実装する場合は、高度な知識や調整が必要ですが、STUDIOではデフォルトでマルチデバイス表示に最適化されるため、難しい知識や調整が必要ないのが魅力です。
テンプレートが豊富
STUDIOには無料で使えるテンプレートが豊富に用意されており、デザイン経験が少ない方でもプロレベルのポートフォリオサイトを短時間で構築できます。テンプレートは業種や用途ごとに最適化されているため、Webデザイナー向けやクリエイター用のポートフォリオなど目的に合わせて選択が可能です。
また、テンプレートをベースにしつつ、自分好みにカスタマイズすることで、ほかの人が作成したポートフォリオと差別化したオリジナルデザインを実現できます。無料で高品質なデザインが活用できる点は、コストを抑えたい人や時間がない人にとってメリットです。
以下の記事では、女性向けキャリアスクールSHElikes（シーライクス）について紹介しています。SHElikesでは45以上のスキルが定額で学び放題。プロによるアドバイスも受けられるため、質の高いポートフォリオの作成が可能です。本記事とあわせてチェックしてみてください。
SHElikes受講生のSTUDIOポートフォリオ作品例
ここからは、女性向けキャリアスクールSHElikesの受講生がSTUDIOで作成したポートフォリオ作品例を4つ紹介します。
STUDIOでポートフォリオを作る際の参考にしてみてください。
meguさん｜LPデザイナー・Webデザイナー
LPデザイナー・Webデザイナーのmeguさんのポートフォリオは、ロゴ・バナー・Webサイト制作をはじめとした幅広い制作実績をカテゴリごとに整理し、誰が見てもわかりやすく情報を得られる構成が特徴です。
トップページは柔らかい色合いのデザインで、初めてサイトを訪れるクライアントにも安心感を与えます。また、制作物には「目的」や「工夫したポイント」が端的に記載されており、デザインの意図や強みを短時間で理解できるよう配慮されています。
meguさんのポートフォリオはこちら
KOTOさん｜Webデザイナー
KOTOさんのポートフォリオは、全体のトーンやフォントが統一され、シンプルかつ洗練された世界観が感じられるデザインです。実績はWeb・紙・バナーなど媒体ごとに整理され、各案件ページには「想定納期」「想定費用」など実務を意識した情報が明記。依頼者が具体的なイメージを持ちやすくなっています。
また、SNSリンクや申込み導線も整備されており、閲覧者がすぐアクションできる実用性の高いポートフォリオといえます。
KOTOさんのポートフォリオはこちら
楓子さん｜デザイナー
楓子さんのポートフォリオは、イラストとデザインを融合させた独自の世界観が際立つビジュアルで、見る人の印象に強く残る構成が魅力です。ファーストビューで「デザインにも栄養を」というキャッチコピーを掲げ、自身の想いや感性を効果的に伝えています。
制作実績は化粧品広告バナーなどの採用実績から自主制作まで幅広く掲載され、デザインの幅広さと実力をアピール。各作品には「目的」「制作のポイント」がまとめられており、デザインの背景や意図を理解しやすい工夫がされています。
楓子さんさんのポートフォリオはこちら
あゆみさん｜Webデザイナー
あゆみさんのポートフォリオは、自己紹介をファーストビューに配置し、自身の強みやデザインへの想いを明確に伝えたうえで、Webサイトやバナー、印刷物など制作実績を紹介しています。
各作品には使用ツールや制作時間、工夫したポイントが記載されており、閲覧者が制作者の思考やプロセスを具体的にイメージできる内容です。全体のデザインは親しみやすく温かみがあり、依頼者が安心して相談できる雰囲気にまとめられています。
あゆみさんのポートフォリオはこちら
STUDIOを使ったポートフォリオの作り方
STUDIOを使用したポートフォリオの作り方を5つのステップで紹介します。
それぞれのステップで意識すべきポイントを押さえ、完成度の高いポートフォリオサイトを制作しましょう。
1.ポートフォリオのコンセプトを決定する
ポートフォリオを作成する際、最初に取り組むべきはコンセプトの決定です。コンセプトとは、ポートフォリオを通じて「どんな自分を伝えたいか」「どんな仕事を獲得したいか」を明確化することです。
たとえば、Webデザイナーなら「シンプルで洗練されたデザイン」「女性向けの柔らかいデザイン」など、自分が得意とするテイストを打ち出すこと。まずは「どう見られたいか」を具体化することから始めましょう。
2.掲載する作品を選定する
次に、ポートフォリオに掲載する作品を選びます。重要なのは「ただ多くの作品を掲載する」のではなく、自分の強みが伝わる完成度の高い作品を選ぶことです。また、Webデザイナーであれば、バナー、LP、Webサイトなど、幅広い媒体の制作物をバランス良くよく揃えるとスキルの幅が伝わります。
実務未経験の場合、掲載する作品は自主制作でも問題ありません。各作品には、制作の目的やターゲット、使用ツール、制作期間などを明記し、作品の背景や制作意図も伝えましょう。
3.使用するテンプレートを決める
STUDIOのテンプレートは、ビジュアル重視のものからテキスト中心のものまでさまざまで、自分のコンセプトや掲載する作品のジャンルに合ったデザインを選びましょう。たとえば、グラフィック重視のポートフォリオであれば写真やビジュアルが映えるレイアウトを、文章でストーリーを伝えたい場合は読みやすさを重視したテンプレートが適しています。
テンプレートは無料で使用できるものもあり、そのまま使用せずにカスタマイズすることで、ほかのポートフォリオサイトとの差別化も図れます。
4.各ページを作り込む
テンプレートが決まったら、各ページの作り込みをおこないます。TOPページではファーストビューで自分の世界観を伝えるビジュアルやキャッチコピーを配置。「自己紹介」ページでは経歴やスキルを記載し、依頼者があなたを理解しやすくなるよう工夫します。
「制作実績」ページにはポートフォリオ作品をジャンルごとに整理し、制作背景や目的を添えると説得力が増します。STUDIOは自由度が高いため、ページごとに見せ方を工夫し、自分らしいポートフォリオサイト作りを意識しましょう。
5.Webに公開する
全体の構成が完成したら、Web上にポートフォリオを公開します。公開前には、複数のデバイスでレスポンシブ表示を確認し、レイアウトが崩れていないかをチェックしましょう。SNSや名刺にURLを記載すれば、より多くの人にポートフォリオを見てもらえる機会が広がります。
Webデザイナーとして活動するなら、ポートフォリオは「自分を売り込む営業ツール」でもあるため、定期的に作品を更新し、最新のスキルや実績を反映させましょう。
SHElikesならSTUDIOを使ったポートフォリオ作成が学べる
女性向けキャリアスクールSHElikes（シーライクス）は、全45以上の職種スキルが学び放題。STUDIOでポートフォリオを作成したい人に向けた「STUDIOコース」やWebデザイナーに必要な基本原則を学べる「Webデザインコース」などポートフォリオ作成が学べる環境が充実しています。
また、課題の添削やフィードバックを受けられるサポートもあるため、ポートフォリオの質を高められます。プロの講師が実践的な作り方を指導してくれるため、「魅力的なポートフォリオとしてどう見せるか」という視点まで身につけられるのも魅力です。
STUDIOポートフォリオ例を参考にサイトを作ろう
STUDIOは、コーディングの知識なしでも直感的な操作でポートフォリオサイトをノーコードで制作できるツールです。豊富なテンプレートをカスタマイズすることで、自分らしいデザインを実現できるのが魅力。
本記事で紹介した作り方のステップを実践し、自分の強みや世界観が伝わるポートフォリオを制作してみましょう。ポートフォリオの作り方を体系的に学びたい方は、女性向けキャリアスクールSHElikesがおすすめです。プロからのアドバイスを受けながらブラッシュアップすることで、より完成度の高いポートフォリオを制作できます。無料体験レッスンを開催していますので、少しでも気になった方は参加してみてください。
