30分で作るポートフォリオサイト（コード不要）

30分で作るポートフォリオで何ができるか

このクイック構築の終わりには、作品を見せ、あなたが誰かを説明し、連絡を取りやすくする――という3つの役割を果たす、シンプルな1ページのポートフォリオサイトが手に入ります。

「公開」したときにあるもの

シンプルなページに次が含まれます：

• 上部セクション（あなたの名前＋職種＋明確なCTA）
• 3〜6件の作品を載せたプロジェクトセクション（各作品に短い説明）
• 1分以内で読めるAboutセクション
• 連絡用の適切なリンク（メール、SNS、予約リンク、またはフォーム）

意図的に最小限にしています。1ページのポートフォリオは作るのが速く、更新が簡単で、作品をざっと見る場面ではマルチページよりもコンバージョンが良いことが多いです。

対象者

この方法は、フリーランス、学生、クリエイター、求職者など、すばやくプロフェッショナルな見た目が必要な人に向いています。特に応募、クライアントへの提案、ソーシャルで作品を共有するときに有効です。

作業前に用意しておくもの

30分以内に終えるには、次を先に揃えておきます：

• 3〜6件のプロジェクト（画像、リンク、短いケーススタディのメモ）
• 1枚のヘッドショット（またはシンプルなロゴ／アバター）
• 短いプロフィール（2〜4文）
• 訪問者にクリックして欲しいリンク（メール、LinkedIn、Behance、GitHub、Dribbbleなど）

30分の時間割

• セットアップ（5分）： ビルダーを選び、サイトを開始し、デザインを選ぶ
• コンテンツ（15分）： プロジェクトを追加し、見出しとAboutを書き、連絡先リンクを入れる
• 仕上げ（10分）： スペース感、可読性、モバイルチェック、誤字の最終確認

作る前にサイトを設計する

30分で作るには、まず3〜5分で「完成」の定義をする必要があります。そうしないとフォントをいじったり、セクションを並べ替えたり、何を入れるか迷って時間を失います。

1) 明確な目標を1つ決める

ポートフォリオの主要な目的を選んでください：

• 採用されること（採用担当者向け）
• クライアントを獲得すること（サービス購入者向け）
• 専門性を示すこと（例：「フィンテック向けのUX」や「フード写真」）

この目標が、何を最初に強調するか（役割と成果、提供内容とプロセス、またはニッチな作品）を決めます。

2) シンプルな構成を選ぶ

次のどちらを作るか決めます：

• シングルページサイト： 最速で、ほとんどのクリエイターやフリーランサーに向く。訪問者がスクロールして理解し、連絡できる。
• マルチページサイト： ケーススタディや執筆、複数サービスが多い場合に有用。

時間が限られているなら、まずはシングルページで。後で分割できます。

3) CTAは1〜2つに絞る

優先CTAを1つ、（任意で）副次CTAを1つ選びます。例：

• 「メールする」
• 「通話を予約する」
• 「履歴書をダウンロード」

ページ上の全てがこれらの行動を支援するようにします。

4) 1文のポジショニングを作る

テンプレートに触る前にシンプルな一文を作ります：

I help [who] with [what], so they can [result].

例：「私はSaaSスタートアップ向けにオンボーディングの設計を行い、解約率を下げ、アクティベーションを改善します。」

この文をビルド中に常に見える場所に置き、何を残すか切るかの判断基準にします。

ビルダーを選ぶ（見るべき点）

ビルダー次第で「30分」がどれだけ現実的かが決まります。メニューと戦わずに公開できるものを選びましょう。

一般的な選択肢（向いている人）

• ウェブサイトビルダー（汎用）： シンプルなマルチページや将来の拡張を考える人向け。
• ポートフォリオ特化ツール： ギャラリーやケーススタディに強く、デザイナーや写真家向け。
• ランディングページツール： 強いCTAを持つ1ページポートフォリオに最適。

よりカスタムに近い結果が欲しいが従来の開発は避けたいなら、Koder.ai のようにチャットでポートフォリオを記述してリアルなReactアプリを生成できるツールも一つの選択肢です。ソースコードをエクスポートしたり、デプロイ／ホスト、カスタムドメインを接続したり、スナップショット／ロールバックが使えます。

時間を無駄にしないための必須チェック

まずは以下を確認：

• 編集できるテンプレート： クリーンなレイアウト、セクションの並べ替えが簡単、読みやすいタイポグラフィ
• 画像処理： 自動圧縮、見栄えの良いギャラリー、手動リサイズなしで高速表示
• モバイル編集とプレビュー： スペーシングやフォントサイズ、画像トリミングの調整が可能
• カスタムドメイン対応： yourname.com を公開できるか

制限を事前に確認

多くのツールは安く見えても、ある地点で支払いが必要になります。次をチェック：

• ページ数制限（1ページか5ページ以上か）
• ストレージと帯域（画像の多いポートフォリオでは重要）
• フォーム機能（問い合わせフォーム、通知、スパム対策）
• 解析機能（基本のトラフィック統計や好きなトラッキングの対応）
• ブランディング除去（ビルダーのロゴを消せるか）

料金が重要なら、/pricing を見てカスタムドメインと上記機能をサポートする最小プランを選びましょう。拡張はいつでも可能です。

編集を妨げないテンプレートを選ぶ

良いテンプレートは出発点として機能し、公開までを手助けしてくれます。30分で仕上げたいなら、間違ったテンプレートが最速で時間を失う原因になります。

ポートフォリオ（または個人サイト）用のテンプレートから始める

クリアなヒーロー、プロジェクト用のグリッド、短いAbout、明確なContactセクションがあるテンプレートを選びます。イベントやビジネステンプレートから始めると削除や再配置に時間を取られます。

目立とうとするよりも“きれい”を選ぶ

読みやすいタイポグラフィ、十分な余白を優先しましょう。派手なアニメーションや特殊なスクロール効果はデモでは映えても、実際のコンテンツの把握性や編集のしやすさを下げます。

ポートフォリオは製品です。テンプレートは邪魔をしないものを選びましょう。

必要なセクションをサポートしているか確認

テンプレートが次を自然にサポートするか事前に確認してください：

• Projectsセクション（画像、タイトル、短い説明のグリッドまたはリスト）
• Contactセクション（ボタン、メールリンク、簡単なフォーム）
• レスポンシブレイアウト（スマホで整列するか）

自然に含まれていない場合、無理に組み込むとビルダーが使いにくくなります。

モバイルでプレビューしてから惚れない

モバイルプレビューで以下を確認：

• テキストはズームなしで読めるか？
• プロジェクトのサムネイルが奇妙にトリミングされないか？
• メニューはシンプルに動作するか？

モバイル表示が今乱れているなら、のちに勝手に直ることは少ないです。もっとシンプルなテンプレートを選んで先に進みましょう。

5分でブランディングを決める

完全なブランドガイドは不要です。いくつかの一貫した選択で全体をまとめて見せられます。

1) ロゴまたはワードマーク（任意）＋アクセントカラー1つ

既にロゴがあればヘッダーとフッターにだけ使います。なければ、名前を良いフォントで表示するワードマークで十分です。

ボタンやリンク、小さなハイライトに使うアクセントカラー1色を選んでください（大きなテキストブロックには使わない）。簡単な選び方：代表的な作品画像から色を1つ引く。

2) フォントは1〜2種類（読みやすさ重視）

見出し用フォント1つと本文用フォント1つに限定します。多くのテンプレートがごちゃごちゃに見えるのはフォントが多すぎるからです。

読みやすさを確保：

• 本文は一目で読めるもの（極薄や装飾の強いフォントは避ける）
• 明確なサイズ階層：大きな見出し、通常の本文、小さめのキャプション

分からなければテンプレートのデフォルトを使い、色だけ変えるのが安全です。

3) スペーシング、ボタン、画像の角を統一

一貫性がノーコードのポートフォリオをカスタムに見せます。

すぐに決める設定：

• スペーシング： セクション間は同じ垂直余白（例：全体で「Large」パディング）
• ボタン： 1つのスタイル（塗りかアウトライン）を全体で使う
• 画像の角： 鋭角か一定の丸みかを統一する

これは派手な効果より重要で、テンプレート感を消します。

4) アクセシビリティのチェック：コントラストと可読性

10秒で見てテキストが読めるか確認してください。

• 白背景に薄いグレー文字は避ける
• 画像の上にテキストを置くときは薄いオーバーレイを入すか、テキストをソリッドな背景に置く

モバイルではコントラストの問題が顕著になることが多いので、先にモバイルでプレビューしましょう。

ページ構成を素早く作る

複雑なサイトマップは不要です。多くの場合、1つの明確なページで十分です。

最低限必要なセクション

上から下へのシンプルな流れで、訪問者が1分以内に知りたいことをカバーします：

• Hero（ページトップ）
• Work（プロジェクト）
• About（自己紹介）
• Testimonials（任意）
• Contact（連絡）

テンプレートに余分なブロック（ブログ、ニュースレター、価格表など）があれば今は削除しましょう。後で追加できます。

機能するヒーローを作る

ヒーローは「なぜ気にするべきか？」を伝える場所です。チェックリスト：

• あなたは誰か（名前＋役割）
• 何をするか（1文）
• 裏付け（クライアント名、経験年数、受賞、専門分野）
• CTA（例：「作品を見る」や「連絡する」）

短い文章、明確な見出し、余白を確保して見やすくします。

ナビゲーションは必要なときだけ

ページが長くなる場合のみナビゲーションバーを追加します。短いスクロールで完結するなら、ナビ無しでレイアウトに任せても良いです。

構成の一貫性を保つ

各セクションは同じパターン：見出し、短い導入文、コンテンツ。速く作っても意図的に見えます。

スキルが見えるプロジェクトを載せる

プロジェクトがポートフォリオの本質です。量ではなく質で、3〜6件の強い作品を載せることを目指しましょう。

適切な3〜6件を選ぶ

次の仕事に結びつく作品を選んでください。デザイナーならデザイン、写真家ならベストシリーズを先頭に。ジェネラリストなら一貫性のあるミックスを選びます。

早いフィルター：短い面接で自信を持って説明できない作品は外しましょう。「あまり関与していなかった」などの注釈が必要な作品は全体を弱めます。

シンプルで繰り返せるプロジェクトフォーマットを使う

各プロジェクトに同じ要素を含めると閲覧しやすくなります：

• 問題： 何を解決する必要があったか？
• あなたの役割： 何を担当したか（何をしていないかも）
• 納品物： 具体的なアウトプット（画面、ブランド資産、撮影、編集、コピーなど）
• 成果： 結果や学び（共有できる場合のみ）

短くまとめてください（通常2〜5文）。

一番強いビジュアルを先頭に置く

各プロジェクトに対して3〜6枚の画像、あるいは短い動画を使います。最強の画像を最初に置くとクリック率が上がります。

可能なら1枚「プロセス」画像（ワイヤーフレーム、スケッチ、ビフォー／アフター、コンタクトシート等）を入れて思考過程を示しましょう。ただし長いケーススタディ小説にしないように。

各プロジェクトを読みやすくする

明確なタイトルやラベル（例：「ブランドアイデンティティ」「Web再設計」「編集撮影」）を付けます。リンクがある場合は「サイトを見る」「最終版を見る」といった分かりやすいラベルにします。

人が読むAboutを書こう

Aboutの役割は、短時間で「連絡すべきか」を判断させることです。

シンプルな写真（またはアバター）から始める

親しみやすいヘッドショットかクリーンなイラストを使い、背景はシンプルに。騒がしい背景や加工の強い写真は避けます。

3パートの読みやすい自己紹介を使う

合計4〜6行を目安に：

• 現在のフォーカス： 今何をしていて誰に向けているか（例：「SaaSのランディングページを設計しています」）
• 過去の実績： 1〜2つの信頼のあるポイント（クライアントの種類、結果、有名プロジェクト）
• 次にやりたいこと： 求めている仕事のタイプ（例：「契約のプロダクトデザイン、週2〜3日」）

例：

私は、初期段階のSaaS向けにクリーンでコンバージョンに強いランディングページを設計するフリーランスのUIデザイナーです。以前はフィンテックのスタートアップで新しいオンボーディングを立ち上げ、アクティベーションを18%改善しました。現在、1〜2件の新規クライアント案件を探しています。

信頼性の付加（本当のことだけ）

実際に使っているツール（Figma、Webflow、Notion）、得意な業界（ヘルス、フィンテック、教育）、受賞や認定があるなら（正確で関連性があれば）記載します。

次のステップを簡単にする

フィールドに合うなら、近くに「履歴書をダウンロード（PDF）」のような短い行を置き、連絡ボタンと近接させます。閲覧者がストーリーを読んで信頼して行動できるようにします。

連絡を取りやすくする

美しいポートフォリオも、連絡が取りにくければ意味がありません。連絡セクションは目立ち、短く、摩擦がないことが重要です。

2〜3つの明確な連絡手段を提供する

理想は2つ、最大3つ：

• 問い合わせフォーム（ほとんどの訪問者に最適）
• 直接メールリンク（自分の受信箱で管理したい人向け）
• チェックしているSNSの1リンク

多すぎると訪問者は迷います。ナビがあるなら「Contact」と明記しましょう。

期待値を伝える（信頼構築）

一文で返信目安を示すと無駄なやり取りが減り、良い問い合わせが増えます。例：

「フリーランスのブランド案件を来月から受け付けています。通常の返信時間：1〜2営業日以内。」

ただし事実である場合のみ書いてください。もし仕事を受けていないなら、代わりに「コラボ、正社員ポジション、講演は応相談」などと書きます。

カレンダーブッキングは管理できるなら

予約リンクはサービス系の仕事に合いますが、管理できないと混乱を招きます。スケジュールが頻繁に変わる場合はメール＋フォームに留める方が安全です。

所在地やタイムゾーンを載せる

クライアントワークがあるなら「東京在住（JST）」や「グローバル対応（UTC-5）」のような短い記載があると、打ち合わせ時間の提案がしやすくなります。

フッターにも連絡リンクを繰り返しておきましょう。人はスクロールして決めてからクリックすることが多いです。

モバイル、速度、最終品質チェック

きれいなポートフォリオでも、スマホで見づらかったり表示が遅ければ人は離れます。ここに数分使えば、サイトは洗練されて見えます。

まずはモバイルで（その後その他）

訪問者の多くはスマホです。ビルダーのモバイルビューでトップからボトムまで素早くスクロールして確認します。

複数の画面サイズ（モバイル、タブレット、デスクトップ）でチェックし、次を探します：

• テキストが小さすぎたり幅が不自然でないか
• プロジェクトが奇妙な順序で積み重なっていないか
• セクションに不自然な隙間や端に触れている要素がないか
• ボタンがタップしづらくないか

修正は多くの場合シンプルです：パディングを減らす、スペーシングを統一する、マルチカラムをモバイルでは1カラムにするなど。

速度：重い要素を削る

表示が速いと信頼感が増します。速度を遅くする主な要因は大きすぎる画像と背景メディアです。

大きな画像は圧縮しましょう（ポートフォリオ画像は多くの場合 ~2000px 幅で十分）。ビルダーに最適化トグルがあればオンにします。

巨大な背景動画は避け、どうしても動きが欲しいなら軽量なループや小さな埋め込みクリップ程度に抑えます。作品が主役です。

ボタンとリンクの「信頼」テスト

全てのボタンとリンク（SNSアイコン、プロジェクトカード、メールボタン）をクリックして確認します。

確認項目：

• リンク先が正しいか（外部リンクは新しいタブで開く）
• ラベルは明確か（「ケーススタディを見る」は「ここをクリック」より良い）
• タップ領域は十分か（小さすぎるアイコンは避ける）

2分でできる仕上げチェックリスト

公開前に素早くチェック：

• スペルと句読点（特にプロジェクトのタイトルや見出し）
• タイトルの統一（セクション間で同じ大文字ルールを使う）
• 空のブロックやプレースホルダー（Lorem ipsum）を削除
• アラインメントが揃っているか（カードが揃っている、パディングが意図的か）

モバイル対応で、表示が速く、小さなミスがないだけで公開直後から信頼感が出ます。

公開とカスタムドメインの接続

カスタムドメインはポートフォリオを完成させ、履歴書やメール署名、SNSで共有しやすくします。公開はたいていワンボタン、ドメイン接続はもう少し手間がかかりますが比較的簡単です。

後悔しないドメイン名の選び方

シンプルでプロフェッショナルに：

• 基本は yourname.com や yourname.design が良い

名前が取られている場合は、ミドルイニシャル、"studio"、職業を付けるなどの読みやすい変化を試してください。ハイフンや長いフレーズは避けましょう。

ビルダーでの接続方法

多くのビルダーはチェックリストで案内してくれます。ビルダーの設定でドメインを接続し、DNSの指示に従います。

通常はドメイン登録業者にAレコードやCNAMEを1〜2つコピーするだけです。ルートドメイン（yourname.com）と“www”のどちらを指すかを確認してください。

セキュリティと見た目の確認

• SSL/HTTPSを有効にする（多くは自動）
• ファビコンとブラウザタブのサイトタイトルを設定する

DNS変更には時間がかかることがあります。数分で終わる場合もあれば数時間かかる場合もあります。接続後は yourname.com と www.yourname.com の両方での表示を確認し、問題がないかチェックしてください。

最後に、優先するバージョン（通常は非wwwかwwwのいずれか）をプライマリドメインとして設定し、常に1つのクリーンなURLを共有できるようにします。

数分でできる基本的なSEO設定

SEOは難しく聞こえますが、ノーコードのポートフォリオでは基本は簡単なフィールド入力と明瞭な文章です。数分かけるだけで人にも検索エンジンにも分かりやすくなります。

ページタイトルとメタディスクリプションを設定する

ビルダーのSEO設定でページタイトルとメタディスクリプションを設定します。

良いタイトルの形式：

あなたの名前 — 役割 | Portfolio

例：Jordan Lee — Product Designer | Portfolio

メタディスクリプションは短い1文で何をしているか、何が見られるかを書きます。

例：「モバイルアプリとデザインシステムを専門とするプロダクトデザイナー。選ばれたプロジェクト、プロセス、連絡先を掲載。」

明確なH1と分かりやすい見出しを使う

ホームページには1つの明確なH1を入れましょう（通常は名前と役割）。これで訪問者は一目であなたの仕事を理解できます。

良いH1例：

• 「Jordan Lee — UX/UI Designer」
• 「Sam Patel — Brand Photographer」

セクション見出しは「Selected Work」「About」「Contact」など分かりやすくし、曖昧なラベル（"Welcome"や"Stuff I’ve Done"など）は避けます。

重要な画像に代替テキスト（alt）を追加する

ポートフォリオは画像が中心なので、プロジェクトのサムネイルやヒーロー画像など重要な画像にはaltテキストを入れます。

altはピクセルの描写ではなく、伝えるべき情報を簡潔に書きます。例：

• 「チェックアウト画面のビフォー・アフター」
• 「コールドブリューブランドのロゴとパッケージ」

アクセシビリティ向上と検索エンジンの文脈付けに役立ちます。

サイトマップや共有

一部のビルダーは検索ツールとの接続や自動サイトマップ生成をサポートします。もし可能なら接続しておきましょう。

サポートがない場合でも公開を先延ばしにせず、リンクをLinkedIn、Instagram、参加しているコミュニティに共有してください。

公開チェックリストとプロモーション方法

共有前に機能と見た目を1周チェックしましょう。動作するきれいなサイトは、壊れたリンクがある派手なサイトに勝ります。

5分の公開チェックリスト

• 全リンクをクリック（プロジェクトボタン、SNSアイコン、メールリンク）し、404がないか確認
• 連絡手段をテスト：フォームを送信するかメールリンクをクリックして実際に受信できるか確認
• プレースホルダー（lorem ipsum、"Project Name"など）を削除
• 見出しとプロジェクトタイトルの校正（誤字、キャピタリゼーションの不一致、改行の不自然さ）
• モバイルで確認：メニュー、ボタン、画像がタップしやすいか
• ホームページのストーリーを確認：10秒で訪問者が何をするべきか理解できるか

さりげないプロモーション方法

• LinkedInで共有し、プロフィール（Featuredセクション＋連絡先）にリンクを追加
• メール署名やSNSのプロフィールにサイトを入れて常に露出させる
• 「注目プロジェクト」投稿を作り、問題、あなたの役割、結果を説明してケーススタディへのリンクを貼る

効果を測る

基本的な解析で閲覧数、プロジェクトのクリック、問い合わせ数を測りましょう。1週間後に最もクリックされているプロジェクトを強調し、あまり見られていないタイトルは書き直します。