Adobe Portfolioの使い方!基本的な操作とレイアウト例
この記事では、Adobe Portfolioの使い方をわかりやすく解説します。テンプレートが豊富でデザイン性が高いポートフォリオを作成できるAdobe Portfolioは、クリエイター以外にもおすすめです。まずは基本操作を確認しましょう。
目次 [閉じる]
Adobe Portfolioとは?
世界の多くのクリエイターたちが利用している「Adobe」には、ポートフォリオの機能があります。
ソフトウェアをサブスクリプション形式で利用できる「Adobe Creative Cloud」の一部である「Adobe Portfolio」では、自分がこれまで携わってきた経歴・実績・スキルなどを説明することで、いわゆる自己紹介サイトのようなものを作成することができます。
- ・Adobe Portfolioでできること
- ・他のポートフォリオ作成サービスとの違い
- ・Adobe Portfolioが向いている人と用途
Adobe Portfolioについて、まずは基本的な項目から解説します。
Adobe Portfolioでできること
Adobe Portfolioでは、サーバーやドメインの契約もプログラミングも不要でWebサイトを作成し、公開することができます。
以下、Adobe Portfolioでできることの一覧です。
- ・スマホ対応のポートフォリオ作成
- ・20,000以上の高品質フォントが揃うAdobe Fontsの利用(日本語含む)
- ・背景に動画を設定
- ・画像は最大50MB/1ファイルまで、動画は最大1GB/1ファイルまで対応
- ・HTTPS / SSL対応のサポートを受ける
- ・ダウンロードを防ぎ画像を保護する機能の利用
- ・公開・限定公開の設定
なお、Adobe Creative Cloud解約後もデータは残すことができます。
他のポートフォリオ作成サービスとの違い
他のポートフォリオ作成サービスとのもっとも大きな違いは、Adobe製品との連携です。
例えば以下のようなアプリケーションで作成した作品を、Adobe Portfolio上で作成したWebサイトに公開することができます。
・Photoshop:美しい画像アート編集合成作成が可能
・InDesign:クオリティの高いレイアウトやページデザイン作成ツール
・Premiere Pro:色彩音やテロップなど臨場感のあるさまざまな編集が可能
・Illustrator:商品パッケージやポスターチラシなどのロゴイラストから、日常的に目にする看板のデザインなど一般的なビジネスでもニーズが高いツール
・Adobe XD:本物のようなアニメーションデザインやストーリーなど、多様な機能が統合されているツール
Adobe Portfolioが向いている人と用途
「Adobe Portfolio」は自分の作品を売り込むためにとても便利なWebツールであるため、ポートフォリオサイトを高いクオリティで簡単に作成したいというクリエイターに特に向いているサービスです。
例えばWebデザイナー、イラストレーター、ゲームクリエイターといったクリエイティブ職を目指す方など、 多くの人に閲覧してもらうという目的を持つ方に適しています。
用途としては、転職活動などで企業へ実力をアピールするために役立ちます。
独自ドメインを使うことでよりプロフェッショナルな印象を与えることができるため、スキルをしっかりアピールできるでしょう。
転職におけるポートフォリオの重要性については、後ほど詳しく解説します。
\ IT転職のプロがキャリアもサポート! /
Adobe Portfolioを使う前の準備
Adobe Portfolioを実際に使う前に次の準備が必要です。
- ・無料プランでできることを確認する
- ・設計図を用意する
- ・掲載する作品をまとめる
以下、それぞれ解説します。
無料プランでできることを確認する
Adobe Portfolioは、Adobe Creative Cloudを有料契約していれば追加料金なしで利用できます。
冒頭で解説したような、Adobe Creative Cloudに含まれる独自ドメインの使用やAdobe Fontsの利用など、さまざまな機能を使ってポートフォリオを作成しましょう。
設計図を用意する
ポートフォリオとしてまとめるために、全体像を決め、設計します。
何に関するページがどの程度必要かを書き出して整理する作業です。
外部リンクや連絡先や自己紹介ページについてもこの段階で決めておきましょう。
最終的な完成形をイメージすることが大切です。
掲載する作品をまとめる
続いてポートフォリオに掲載する作品のピックアップです。画像のサイズは適したものに設定して、各ジャンルごとに用意します。
ここで改めて自分が設定したいテーマを見つめなおす方もいらっしゃるでしょう。
先に全体像を設計してから必要な素材を用意することで、スムーズに進めることができます。
履歴書・職務経歴書との親和性を高める
転職活動でポートフォリオを活用するのであれば、履歴書・職務経歴書でより魅力が伝わるよう工夫する必要があります。
応募書類には企業が求めるスキルを把握していることを伝えるための書き方を用いて、それを可視化するためにポートフォリオを用意することが大切です。
履歴書や職務経歴書が適切に作成できていれば、書類選考の通過率も高まりやすくなります。
もしも不安がある方は、添削サービスを活用するのもおすすめです。
Adobe Portfolioの基本的な使い方
ここでは、Adobe Portfolioの基本的な使い方を解説します。
まずはログイン、もしくはアカウントを新規作成して「フルポートフォリオ」か「ようこそページ」を選択しましょう。マルチでカスタマイズしやすいのは「フルポートフォリオ」ですが、初心者は「ようこそページ」が安心です。
テーマを選択したら、さっそく作成を始めましょう。
- ・新しいサイトの作成方法
- ・画像・テキストの追加/編集方法
- ・ページ構成の変更と管理方法
- ・カスタムドメインの設定方法
以下、それぞれ確認しておきましょう。
新しいサイトの作成方法
「Get Started」や「+ New Site」などのボタンから新規サイトを作成します。
用途に合わせてテンプレートを選択しますが、後から変更することもできるため、直感的に選んでみましょう。
サイト名や概要などの初期設定も行えます。
プレビューもできるため、公開前にはかならずプレビューで確認するようにしましょう。
画像・テキストの追加/編集方法
編集画面の中央にカーソルを合わせると+マークが出てきます。「画像」「テキスト」など追加したいものを選択しましょう。
テキストの場合は複数回クリックすることで出てくる調整ツールで文字サイズやフォント、リンクを編集できます。
画像は単体であればキャプション、リンク、画像説明文を埋め込むことができます。「写真グリッド」は複数の画像を並べてくれる機能です。
ページ構成の変更と管理方法
左側は基本設定、右上の「+」アイコンでは「ページ追加」の項目が出てきます。
ページ種類の選択肢が出てきますが、最初は「ページ」でよいでしょう。
ページレイアウトは「デフォルト」を、保存先は「ナビゲーション」を選択すると新しくできたページはナビゲーションメニューにそのタイトルが表示されるようになります。
カスタムドメインの設定方法
歯車のマークではサイト全体の設定を行うことができます。
ドメイン名やGoogleアナリティクスのトラッキングコードを入力するのはこちらの設定からです。
他にも基本設定ではテーマ変更することもできますし、サイト全体の背景、フォントの設定も可能です。
このページからそのまま公開ボタンをクリックすることもできます。
\ IT転職のプロがキャリアもサポート! /
ポートフォリオはなぜ大切?
転職や案件獲得においてポートフォリオが大切だと言われる理由は、主に次の2つです。
- ・応募書類だけでは伝わらない実力を伝えられる
- ・転職の成功率が上がる
以下、それぞれ解説します。
応募書類だけでは伝わらない実力を伝えられる
応募書類は文字のみの情報であるため、採用担当者は具体的なスキルのレベル感をイメージすることしかできません。
「〇〇ツール使用経験あり」と記載されていても、業務で触れたことがある程度なのか、実際にそのツールを用いて成果物を作成したことがあるのか図りかねます。
その点、ポートフォリオは実力を視覚で確認できる点が大きなメリットです。
その一方で、応募書類に記載された情報と乖離していると、実力を最大限に伝えることは難しいでしょう。企業が求めるスキルと応募書類に記載されたスキルがマッチしているうえで、それを明確に可視化したものがポートフォリオであることが大切です。
\ プロが応募書類を添削・代行! /
転職の成功率が上がる
実力が正確に伝わることで、企業は自社が求める人物像とマッチしているかどうかを確認しやすくなります。
安心して採用に踏み切りやすくなることで、求職者としては転職の成功率を上げやすくなるでしょう。
ただし、応募書類とポートフォリオがミスマッチでは魅力が正確に伝わりにくくなってしまうため、両方を応募する企業にあわせてブラッシュアップすることが大切です。
IT転職のプロに履歴書、職務経歴書を添削・代行してもらおう
自己PRの書き方が分からない、職務経歴書の内容がまとまらないなど、転職活動に必要な履歴書や職務経歴書の作成で悩む方は少なくありません。
応募書類に関して悩んだら、一度Geekly(ギークリー)に相談してみませんか?
Geekly(ギークリー)はIT転職に関するノウハウが豊富にあるため、IT・Web・ゲームなど、業界別のエキスパートが企業の特性に合わせて応募書類を添削し、あなたの魅力を最大限に引き出すことが可能です!
これから転職時の応募書類を作成する予定の方や書き方で悩んでいる方、過去に作成した書類をブラッシュアップしたい方は、ぜひ以下のボタンから添削・代行サービスをご利用ください。
第一志望から内定獲得!サービス利用で転職に成功したAさんの例
- ご年齢:20代
- ご経歴:ネットワーク保守運用・監視⇒開発エンジニア
- サービスを利用した感想:
担当キャリアアドバイザーの方のサポートと指導がなければ、この素晴らしい機会を手にすることはできなかったと思っております。この度は大変お世話になりました。
Aさんはサービスを利用することで、応募書類を通して今までの経歴やスキル、人柄を企業に伝えることができたため内定を複数獲得し、無事に第一志望からも内定をいただきました。
【あわせて読みたい】Geekly(ギークリー)を利用して転職成功した事例⇓
応募書類添削・代行サービスご利用の流れ
「応募書類添削・代行サービス」は4つのステップで完結!
STEP1:以下のボタンからお申込みページへ
STEP2:面談・書類作成
STEP3:応募書類の添削・代行
STEP4:作成した書類で応募・面接に参加可能
通常だと半日〜1日かけて作る応募書類も、応募書類添削・代行サービスをご利用いただければ30~60分という短時間で作成できるため、すぐに求人に応募することが可能です。
IT転職で重要な、履歴書や職務経歴書の作成もGeekly(ギークリー)におまかせください。
\ プロが応募書類を添削・代行! /
応募書類添削・代行サービスに関するよくある質問
ここでは応募書類添削・代行サービスに関するよくある質問をご紹介します。サービスについて詳しく知りたい場合は、ぜひ下のボタンからご確認ください。
途中まで記入した書類の添削はお願いできますか?
可能です。空白があっても問題ございませんので、お申し込み時に書類をご提出ください。
業界または職種未経験です。サービスの利用は可能ですか?
可能です。弊社では業界または職種未経験の方にもご支援の実績がございます。
未経験の場合でも、まずはお気軽にご相談ください。
\ プロが応募書類を添削・代行! /
Adobe Portfolioのレイアウト例
Adobe Portfolioのレイアウト例として、以下2つご紹介します。
- ・イラストレーター編
- ・エンジニア編
企業の採用担当者の目に留まりやすい工夫なども参考にしましょう。
イラストレーター編
【トップページの構成例】
- ・ヒーロービジュアル(代表作を大きく表示)
- ・サムネイルギャラリー(作品一覧、6〜12点)
- ・各サムネイルから個別作品ページにリンク
シンプルなグリッド形式の作品表示には、「Thomas」や「Sawyer」などのテンプレートがおすすめです。
【作品ページの構成例】
- ・高解像度の画像を使用する
- ・制作背景・使用ツール・クライアント名(任意)を記載する
- ・制作年・ジャンル(例:広告・SNS用など)を記載する
拡大表示やダウンロード不可設定も忘れないようにしましょう。
【カテゴリ別ページ】
- ・「キャラクターデザイン」
- ・「個人制作/コンセプトアート」
- ・「広告・販促ビジュアル」など
「カスタムページ」を使ってカテゴリページを作り、作品を分類・リンクするのがおすすめです。
【自己紹介ページ(About)の構成例】
- ・簡単なプロフィール(専門分野、活動年数など)
- ・使用ソフトや制作スタイル
- ・実績やクライアント名(公開可能な範囲で)
親しみを持ってもらうために、顔写真または作業風景の写真などを載せるのもよいでしょう。
【お問い合わせページ(Contact)の構成例】
- ・問い合わせ用メールアドレスまたはフォーム
- ・SNSリンク(InstagramやXなど)
お問い合わせページは、仕事依頼の導線を確保するためにも設置しておきましょう。
イラストレーターはいかに自分の作品をアピールするかがとても重要です。この場合、企業側に目に止めてもらうために、シンプルなデザインのテーマを選択することがポイントです。
Adobe Portfolioのテーマはシンプルなものから、おしゃれなものまで数多くありますが、おしゃれなものを選択することでテーマが混同してしまい、自分のオリジナル作品のインパクトが薄れる可能性があるためです。
デザインのセンスに注目される傾向があるイラストレーターですが、企業は作品から人物像も見極めようと考えていることも忘れないようにしましょう。
エンジニア編
【トップページの構成例】
- ・メインビジュアル(キーワードや開発スタイルを強調するコピー)
- ・代表プロジェクトのサムネイル(複数件)
- ・技術スタック一覧やスキルタグ(React, Node.js, AWS など)
「Lina」や「Thomas」など、シンプルで視認性の高いテンプレートがおすすめです。
【プロジェクト紹介ページの構成例】
- ・プロジェクト名と概要
- ・使用技術・担当領域
- ・開発期間・チーム人数・目的や背景
- ・スクリーンショット or 動画 or GIF
- ・GitHubリンク・デモサイト
内容が明確になるよう、デザインよりも構成に工夫しましょう。
【カテゴリ別ページ】
- ・「Webアプリ開発」
- ・「スマートフォンアプリ」
- ・「個人開発ツール・OSS」
- ・「機械学習/データ解析」
「カスタムページ」を使って分類し、カード型やリンクボタンで見やすくするのがおすすめです。
【スキル紹介/使用技術ページ】
- ・使用経験のある言語やフレームワーク一覧(レベル・年数)
- ・得意分野
- ・保有資格
視覚的にわかりやすくするためには、グラフやアイコンを使うのもおすすめです。
【自己紹介ページ(About)の構成例】
- ・名前/現職での役職/在籍年数など
- ・現在の関心領域(例:Next.jsを用いた高速Web開発)
- ・チーム開発/個人開発の経験
- ・自己PR(エンジニアとしての姿勢や強み)
スキルについては正確に、自己PRは非エンジニアでもわかりやすい内容を意識しましょう。
【お問い合わせページ(Contact)の構成例】
- ・連絡用メールアドレス/SNS(GitHub, LinkedIn, Xなど)
- ・連絡フォーム
連絡フォームはAdobe Portfolio標準機能で追加可能です。フリーランスなら業務形態や条件も記載しておきましょう。
エンジニア用のポートフォリオでは、レイアウトで目を留める工夫をしてライバルとの差別化を図りましょう
1つの画面上に作品以外に得意分野などを盛り込んでおけば、一目で見やすく、人物像もイメージしやすくなります。
また自分が作成したゲームアプリのURLなどリンクやソースを貼っておきましょう。
企業側が忙しくて見ない可能性もふまえ、ゲームアプリがどのように動くか、実際に動画を撮ってリンクを貼り付ける方法もおすすめです。
\ IT転職のプロがキャリアもサポート! /
Adobe Portfolioで転職成功率を高めよう
Adobe PortfolioはAdobeを有料契約しているクリエイターにとって非常に使いやすいポートフォリオサイトサービスです。
ただし転職で活用するためには、適切にアピールできるよう工夫しましょう。
「クリエイティブな仕事に携わりたい」
「IT・Web業界に転職して年収を上げたい!」
「もっと自分の適性を活かせる環境で働きたい!」
などのキャリアのお悩みは是非、「IT・Web業界の知見が豊富なキャリアアドバイザー」にご相談ください!
IT特化の転職エージェントのGeekly(ギークリー)なら、専門職種ならではのお悩みも解決できる専任のキャリアアドバイザーがカウンセリングから入社後まで完全無料で全面サポートいたします!
転職しようか少しでも悩んでいる方は、お気軽に以下のボタンからご相談ください。
\ IT転職のプロがキャリアもサポート! /
あわせて読みたい関連記事
新着記事はこちら
-
- 履歴書の写真サイズが違う!小さい、合わない時の対処法を解説
- 2025/8/15
-
- 面接の志望動機例文を解説!長さ・話し方・作り方の注意点は?
- 2025/8/13
-
- 【ZETA DIVISION×Geekly】STREET FIGHTER部門の選手に聞く「あなたのGeek」と「eスポーツ業界の今後」~Vol.2~
- 2025/8/4
-
- 年収とは?手取りとの違いや確認方法・計算方法についても徹底解説!
- 2025/7/28
-
- 会社を辞めたい7つの理由と対処法を紹介!退職前にするべきことや転職の仕方も説明
- 2025/7/24
-
- 【ZETA DIVISIONxGeekly】企画責任者が語るスポンサー契約の背景~Vol.1~
- 2025/7/22