2025年8月11日·1 分
30分で作るポートフォリオサイト（コード不要）
30分でコード不要のシンプルなポートフォリオサイトを作る方法。テンプレート選び、作品追加、ドメイン接続、公開までの簡潔なチェックリスト付き。
30分でコード不要のシンプルなポートフォリオサイトを作る方法。テンプレート選び、作品追加、ドメイン接続、公開までの簡潔なチェックリスト付き。
このクイック構築の終わりには、作品を見せ、あなたが誰かを説明し、連絡を取りやすくする――という3つの役割を果たす、シンプルな1ページのポートフォリオサイトが手に入ります。
シンプルなページに次が含まれます：
意図的に最小限にしています。1ページのポートフォリオは作るのが速く、更新が簡単で、作品をざっと見る場面ではマルチページよりもコンバージョンが良いことが多いです。
この方法は、フリーランス、学生、クリエイター、求職者など、すばやくプロフェッショナルな見た目が必要な人に向いています。特に応募、クライアントへの提案、ソーシャルで作品を共有するときに有効です。
30分以内に終えるには、次を先に揃えておきます：
30分で作るには、まず3〜5分で「完成」の定義をする必要があります。そうしないとフォントをいじったり、セクションを並べ替えたり、何を入れるか迷って時間を失います。
ポートフォリオの主要な目的を選んでください：
この目標が、何を最初に強調するか（役割と成果、提供内容とプロセス、またはニッチな作品）を決めます。
次のどちらを作るか決めます：
時間が限られているなら、まずはシングルページで。後で分割できます。
優先CTAを1つ、（任意で）副次CTAを1つ選びます。例：
ページ上の全てがこれらの行動を支援するようにします。
テンプレートに触る前にシンプルな一文を作ります：
I help [who] with [what], so they can [result].
例：「私はSaaSスタートアップ向けにオンボーディングの設計を行い、解約率を下げ、アクティベーションを改善します。」
この文をビルド中に常に見える場所に置き、何を残すか切るかの判断基準にします。
ビルダー次第で「30分」がどれだけ現実的かが決まります。メニューと戦わずに公開できるものを選びましょう。
よりカスタムに近い結果が欲しいが従来の開発は避けたいなら、Koder.ai のようにチャットでポートフォリオを記述してリアルなReactアプリを生成できるツールも一つの選択肢です。ソースコードをエクスポートしたり、デプロイ／ホスト、カスタムドメインを接続したり、スナップショット／ロールバックが使えます。
まずは以下を確認：
多くのツールは安く見えても、ある地点で支払いが必要になります。次をチェック：
料金が重要なら、/pricing を見てカスタムドメインと上記機能をサポートする最小プランを選びましょう。拡張はいつでも可能です。
良いテンプレートは出発点として機能し、公開までを手助けしてくれます。30分で仕上げたいなら、間違ったテンプレートが最速で時間を失う原因になります。
クリアなヒーロー、プロジェクト用のグリッド、短いAbout、明確なContactセクションがあるテンプレートを選びます。イベントやビジネステンプレートから始めると削除や再配置に時間を取られます。
読みやすいタイポグラフィ、十分な余白を優先しましょう。派手なアニメーションや特殊なスクロール効果はデモでは映えても、実際のコンテンツの把握性や編集のしやすさを下げます。
ポートフォリオは製品です。テンプレートは邪魔をしないものを選びましょう。
テンプレートが次を自然にサポートするか事前に確認してください：
自然に含まれていない場合、無理に組み込むとビルダーが使いにくくなります。
モバイルプレビューで以下を確認：
モバイル表示が今乱れているなら、のちに勝手に直ることは少ないです。もっとシンプルなテンプレートを選んで先に進みましょう。
完全なブランドガイドは不要です。いくつかの一貫した選択で全体をまとめて見せられます。
既にロゴがあればヘッダーとフッターにだけ使います。なければ、名前を良いフォントで表示するワードマークで十分です。
ボタンやリンク、小さなハイライトに使うアクセントカラー1色を選んでください（大きなテキストブロックには使わない）。簡単な選び方：代表的な作品画像から色を1つ引く。
見出し用フォント1つと本文用フォント1つに限定します。多くのテンプレートがごちゃごちゃに見えるのはフォントが多すぎるからです。
読みやすさを確保：
分からなければテンプレートのデフォルトを使い、色だけ変えるのが安全です。
一貫性がノーコードのポートフォリオをカスタムに見せます。
すぐに決める設定：
これは派手な効果より重要で、テンプレート感を消します。
10秒で見てテキストが読めるか確認してください。
モバイルではコントラストの問題が顕著になることが多いので、先にモバイルでプレビューしましょう。
複雑なサイトマップは不要です。多くの場合、1つの明確なページで十分です。
上から下へのシンプルな流れで、訪問者が1分以内に知りたいことをカバーします：
テンプレートに余分なブロック（ブログ、ニュースレター、価格表など）があれば今は削除しましょう。後で追加できます。
ヒーローは「なぜ気にするべきか？」を伝える場所です。チェックリスト：
短い文章、明確な見出し、余白を確保して見やすくします。
ページが長くなる場合のみナビゲーションバーを追加します。短いスクロールで完結するなら、ナビ無しでレイアウトに任せても良いです。
各セクションは同じパターン：見出し、短い導入文、コンテンツ。速く作っても意図的に見えます。
プロジェクトがポートフォリオの本質です。量ではなく質で、3〜6件の強い作品を載せることを目指しましょう。
次の仕事に結びつく作品を選んでください。デザイナーならデザイン、写真家ならベストシリーズを先頭に。ジェネラリストなら一貫性のあるミックスを選びます。
早いフィルター：短い面接で自信を持って説明できない作品は外しましょう。「あまり関与していなかった」などの注釈が必要な作品は全体を弱めます。
各プロジェクトに同じ要素を含めると閲覧しやすくなります：
短くまとめてください（通常2〜5文）。
各プロジェクトに対して3〜6枚の画像、あるいは短い動画を使います。最強の画像を最初に置くとクリック率が上がります。
可能なら1枚「プロセス」画像（ワイヤーフレーム、スケッチ、ビフォー／アフター、コンタクトシート等）を入れて思考過程を示しましょう。ただし長いケーススタディ小説にしないように。
明確なタイトルやラベル（例：「ブランドアイデンティティ」「Web再設計」「編集撮影」）を付けます。リンクがある場合は「サイトを見る」「最終版を見る」といった分かりやすいラベルにします。
Aboutの役割は、短時間で「連絡すべきか」を判断させることです。
親しみやすいヘッドショットかクリーンなイラストを使い、背景はシンプルに。騒がしい背景や加工の強い写真は避けます。
合計4〜6行を目安に：
例：
私は、初期段階のSaaS向けにクリーンでコンバージョンに強いランディングページを設計するフリーランスのUIデザイナーです。以前はフィンテックのスタートアップで新しいオンボーディングを立ち上げ、アクティベーションを18%改善しました。現在、1〜2件の新規クライアント案件を探しています。
実際に使っているツール（Figma、Webflow、Notion）、得意な業界（ヘルス、フィンテック、教育）、受賞や認定があるなら（正確で関連性があれば）記載します。
フィールドに合うなら、近くに「履歴書をダウンロード（PDF）」のような短い行を置き、連絡ボタンと近接させます。閲覧者がストーリーを読んで信頼して行動できるようにします。
美しいポートフォリオも、連絡が取りにくければ意味がありません。連絡セクションは目立ち、短く、摩擦がないことが重要です。
理想は2つ、最大3つ：
多すぎると訪問者は迷います。ナビがあるなら「Contact」と明記しましょう。
一文で返信目安を示すと無駄なやり取りが減り、良い問い合わせが増えます。例：
「フリーランスのブランド案件を来月から受け付けています。通常の返信時間：1〜2営業日以内。」
ただし事実である場合のみ書いてください。もし仕事を受けていないなら、代わりに「コラボ、正社員ポジション、講演は応相談」などと書きます。
予約リンクはサービス系の仕事に合いますが、管理できないと混乱を招きます。スケジュールが頻繁に変わる場合はメール＋フォームに留める方が安全です。
クライアントワークがあるなら「東京在住（JST）」や「グローバル対応（UTC-5）」のような短い記載があると、打ち合わせ時間の提案がしやすくなります。
フッターにも連絡リンクを繰り返しておきましょう。人はスクロールして決めてからクリックすることが多いです。
きれいなポートフォリオでも、スマホで見づらかったり表示が遅ければ人は離れます。ここに数分使えば、サイトは洗練されて見えます。
訪問者の多くはスマホです。ビルダーのモバイルビューでトップからボトムまで素早くスクロールして確認します。
複数の画面サイズ（モバイル、タブレット、デスクトップ）でチェックし、次を探します：
修正は多くの場合シンプルです：パディングを減らす、スペーシングを統一する、マルチカラムをモバイルでは1カラムにするなど。
表示が速いと信頼感が増します。速度を遅くする主な要因は大きすぎる画像と背景メディアです。
大きな画像は圧縮しましょう（ポートフォリオ画像は多くの場合 ~2000px 幅で十分）。ビルダーに最適化トグルがあればオンにします。
巨大な背景動画は避け、どうしても動きが欲しいなら軽量なループや小さな埋め込みクリップ程度に抑えます。作品が主役です。
全てのボタンとリンク（SNSアイコン、プロジェクトカード、メールボタン）をクリックして確認します。
確認項目：
公開前に素早くチェック：
モバイル対応で、表示が速く、小さなミスがないだけで公開直後から信頼感が出ます。
カスタムドメインはポートフォリオを完成させ、履歴書やメール署名、SNSで共有しやすくします。公開はたいていワンボタン、ドメイン接続はもう少し手間がかかりますが比較的簡単です。
シンプルでプロフェッショナルに：
名前が取られている場合は、ミドルイニシャル、"studio"、職業を付けるなどの読みやすい変化を試してください。ハイフンや長いフレーズは避けましょう。
多くのビルダーはチェックリストで案内してくれます。ビルダーの設定でドメインを接続し、DNSの指示に従います。
通常はドメイン登録業者にAレコードやCNAMEを1〜2つコピーするだけです。ルートドメイン（yourname.com）と“www”のどちらを指すかを確認してください。
DNS変更には時間がかかることがあります。数分で終わる場合もあれば数時間かかる場合もあります。接続後は yourname.com と www.yourname.com の両方での表示を確認し、問題がないかチェックしてください。
最後に、優先するバージョン（通常は非wwwかwwwのいずれか）をプライマリドメインとして設定し、常に1つのクリーンなURLを共有できるようにします。
SEOは難しく聞こえますが、ノーコードのポートフォリオでは基本は簡単なフィールド入力と明瞭な文章です。数分かけるだけで人にも検索エンジンにも分かりやすくなります。
ビルダーのSEO設定でページタイトルとメタディスクリプションを設定します。
良いタイトルの形式：
あなたの名前 — 役割 | Portfolio
例：Jordan Lee — Product Designer | Portfolio
メタディスクリプションは短い1文で何をしているか、何が見られるかを書きます。
例：「モバイルアプリとデザインシステムを専門とするプロダクトデザイナー。選ばれたプロジェクト、プロセス、連絡先を掲載。」
ホームページには1つの明確なH1を入れましょう（通常は名前と役割）。これで訪問者は一目であなたの仕事を理解できます。
良いH1例：
セクション見出しは「Selected Work」「About」「Contact」など分かりやすくし、曖昧なラベル（"Welcome"や"Stuff I’ve Done"など）は避けます。
ポートフォリオは画像が中心なので、プロジェクトのサムネイルやヒーロー画像など重要な画像にはaltテキストを入れます。
altはピクセルの描写ではなく、伝えるべき情報を簡潔に書きます。例：
アクセシビリティ向上と検索エンジンの文脈付けに役立ちます。
一部のビルダーは検索ツールとの接続や自動サイトマップ生成をサポートします。もし可能なら接続しておきましょう。
サポートがない場合でも公開を先延ばしにせず、リンクをLinkedIn、Instagram、参加しているコミュニティに共有してください。
共有前に機能と見た目を1周チェックしましょう。動作するきれいなサイトは、壊れたリンクがある派手なサイトに勝ります。
基本的な解析で閲覧数、プロジェクトのクリック、問い合わせ数を測りましょう。1週間後に最もクリックされているプロジェクトを強調し、あまり見られていないタイトルは書き直します。
はい。1ページのポートフォリオは、スキャンされやすく、意思決定の速い場面ではむしろ有利です。
目指す流れ：Hero → Work → About → Contact。必要になったら、公開後にプロジェクトごとのケーススタディページを追加できます。
最小限にして完了できるように準備してください：
もしプロジェクトが3件揃っていなければ、1〜2件の強い作品で公開して、後から追加していって構いません。
1つの主要な成果を選び、それが全ての判断基準になります：
迷ったら、その目標に沿わないものは基本的に省きましょう。
摩擦の少ないツールを選んでください：
導入前に確認するべき支払いの壁：カスタムドメイン、フォーム、ストレージ/帯域、解析、ブランディング削除（多くは /pricing に記載）。
必要なセクション（ヒーロー、プロジェクトグリッド、About、Contact）が最初からあるテンプレートを選び、カスタマイズ前にモバイルプレビューを必ず確認してください。
重いアニメーションや特殊なナビゲーション、複雑なレイアウトに頼るテンプレートは避けると時間を節約できます。
テンプレートをプロっぽく見せるには、ブランド要素をいくつかに絞ります：
一貫性があるだけで“カスタム感”が出ます。
人がざっと見て理解できるように、繰り返し使えるフォーマットにします：
短めにまとめて（2〜5文）、視覚的に強いものを先頭に置きましょう。
読みやすく、素早く判断できる構成にします：
文章は1分以内で読める長さにし、近くに連絡ボタンや「履歴書をダウンロード（PDF）」のような次のアクションを置きます。
連絡手段は2つ（多くても3つ）に絞ると良いです：
短い期待値の一文（返信の目安など）を添えると良いです。リモートワーク相手には「Based in Tokyo (JST)」のような所在地／タイムゾーンを明記してください。
公開前にこれらをチェックしてください：
公開後はリンクを共有し、どのプロジェクトがクリックされているかを確認して改善しましょう。