コードを書かずにポートフォリオサイトを作る：ステップバイステップガイド

作るものと、その重要性

ポートフォリオサイトはあなたの仕事をまとめるシンプルでプロフェッショナルな場所――どこでも共有できる1つのリンクです。うまく作れば、同時に3つの役割を果たします：信頼を築き、実績を示し、連絡を取りやすくします。

ポートフォリオサイトが達成するべきこと

信頼性： 誰かがあなたの名前を検索したりリンクをクリックしたとき、すぐに「本物」に見える清潔で一貫したプレゼンテーションが必要です。個人サイトは仕事に真剣に取り組んでいることを示します。

リード（機会）： サイトは訪問者を明確な次の行動（メール、通話の予約、見積依頼、履歴書のダウンロード）へ導くべきです。作品が気に入っても連絡方法が分からなければ、サイトの目的は果たせません。

実績の提示： ソーシャルやマーケットプレイスは便利ですが、文脈の中で最良の仕事を見せられるとは限りません。オンラインポートフォリオなら目的・あなたの役割・成果を説明でき、訪問者が実際に何ができるか理解できます。

このガイドの対象者

このステップバイステップは、コードを書かずに素早く公開できるポートフォリオサイトを作りたい方向けです：

• ビジュアルが重要なデザイナーや写真家
• サンプルや事例を見せたいライターやマーケター
• 洗練された個人サイトが必要な学生や求職者
• DMに頼らず問い合わせを受けたいフリーランス

ドラッグ＆ドロップでテキストが編集できるなら、ポートフォリオビルダーやドラッグ＆ドロップのウェブサイトツールで十分作れます。

Note: 典型的なノーコードより少し柔軟性が欲しい（でも手でコードを書きたくない）場合は、「チャットで作る」タイプのプラットフォーム（例：Koder.ai）も強力な選択肢です。チャットで希望を伝えると実際に公開できるウェブアプリを生成してくれます。テンプレート以上のカスタムページやフォーム、インタラクションが必要なら便利です。

これで手に入るもの

最後まで進めれば：

• ライブのポートフォリオサイト（ホーム、プロジェクトページ、About、Contact）
• 後で拡張できる明確な構造
• 定期的に更新できる軽い運用ルーチン（新プロジェクト、プロフィールの更新、リンクの更新）

時間と予算の目安

多くの人は週末（または数回の集中した夜）で最初のバージョンを公開できます（コンテンツが揃っている場合）。

予算は選択次第です：

• 無料プラン： テンプレートを試したりビルダーを学ぶのに最適。ただしプラットフォームのサブドメインや制限が付くことが多いです。
• 有料プラン： カスタムドメインやより洗練された見た目に通常必要。
• ドメイン費用： 標準的なドメイン（yourname.com）は年間およそ**$10–$20**。一部のビルダーはドメインとホスティングをプランに含めていて設定が簡単です。

目標は完璧ではなく、きれいで分かりやすいサイトをローンチして改善していくことです。

スタート前に目標と対象を決める

ビルダーやテンプレートに触る前に、サイトに「何をしてほしいか」と「最初の30秒で納得させたい相手」を明確にしましょう。

ノーコードのポートフォリオは、レイアウト・プロジェクト・文章・ボタンといった判断がすべて「この要素は理想の訪問者が次の行動を取る助けになるか？」というフィルターで決められると作りやすくなります。

主要な目標を1つ選ぶ

今一番重要な成果を選んでください：

• 採用される（正社員・契約）
• クライアントを獲得する（サービスを売る）
• プロジェクトを見せる（信頼を築き、コラボを呼び込む）

副次的な目標は構いませんが、ホームが関連のない選択肢の羅列にならないように一つを優先しましょう。

対象（誰を説得したいか）を定義する

対象は採用担当、雇用マネージャー、潜在クライアント、コラボ相手など様々です。人によって重視する証拠は異なります。

問いかけてみてください：

• 相手はどんな質問に答えを求めているか？（「この人は仕事をこなせるか？」「予算を任せられるか？」）
• どんな証拠が重要か：成果、プロセス、ビジュアル、推薦文、資格など？
• 最初に何を見せるべきか：2〜3件の代表作、サービス一覧、短いポジショニング文？

フォーカスを絞る：1〜2の役割やサービス

「何でもやります」では印象に残りにくいです。1つのターゲット役割（例：「ジュニアUXデザイナー」）か1つのコアサービス（例：「スタートアップ向けのブランドアイデンティティ」）を選び、必要なら関連のある2つ目を許容します。

CTA（行動喚起）を決める

あなたのサイトは訪問者に1つの次の一手を促すべきです：

• メールリンク（最も速い）
• 問い合わせフォーム（整理される）
• 予約リンク（クライアントとの通話に最適）

ヘッダーにCTAを置き、ホームの下部付近でも繰り返して（例：/contact）おきましょう。

サイト構成を計画する（ページとナビゲーション）

テンプレートに触る前に、サイトが「誰に何を伝えるか」を決めておきましょう：短時間であなたが誰で何ができるか、どう連絡するかが分かること。シンプルな構造はどのノーコードビルダーでも扱いやすく、モバイルでの迷子を防ぎます。

必須ページから始める

多くのポートフォリオはトップナビゲーションに収まる小さな“コア”が最適です：

• Home：簡潔な要約と明確な次の行動（作品を見る、連絡、履歴書をダウンロード）
• Work / Projects：主要なギャラリーやプロジェクト一覧
• About：あなたのストーリー、スキル、求めていること
• Contact：フォームやメールリンク＋SNSリンク

迷ったらまずこの4つで始め、後から追加できます。

目標を支える場合のみオプションページを追加

オプションページは役に立つことがありますが、訪問者の判断を楽にする場合に限ります：

• Services（フリーランスなら）：提供内容、典型的なパッケージ、開始方法
• Resume / CV：専用ページまたはダウンロードPDF
• Blog：継続的に発信するなら有効
• Case studies：強いプロジェクトの詳細な事例

ナビゲーションラベルと順序を決める

人が期待するラベルを使いましょう：「Work」や「Projects」といった一般的な表示。重要なリンクは前方に（多くの場合Work）、コンバージョンリンクは最後に（Contact）。一般的な順序：

Home → Projects → About → Contact

モバイルではシンプルに保つ

スマホではメニューが小さなアイコンになります。トップレベルの項目は4–6個に制限してください。余分なコンテンツは「More」や「Resources」などにまとめるか、フッターへリンクしてください。

ニーコードビルダーを選ぶ

テンプレートや色を決める前に、どのツールで作るか選びましょう。「最良の」ビルダーは機能ではなく、あなたが実際に更新し続けられるものです。

主なタイプ

ウェブサイトビルダー（最も柔軟）： Wix、Squarespace、Webflow、Framer、WordPress.com。ページ、メニュー、公開機能が揃っています。

ポートフォリオプラットフォーム（最速）： Behance、Dribbble、Adobe Portfolio。作品投稿は速いですが構造やブランディングの自由度は低いです。

オールインワン／ミニマルツール： Notionベースのサイト、Carrd、ワンページビルダー。軽量でシンプルなプレゼンスに最適。

チャットで作る系（テンプレよりカスタム）： カスタムフォームや動的なプロジェクトページ、ゲーテッドなケーススタディなどが要るなら、チャット駆動のプラットフォーム（例：Koder.ai）を検討してください。会話で要望を伝え、公開できる形で生成してくれます。

選ぶときの基準

以下は見た目の派手さより重要です：

• 編集のしやすさ： テキストや画像を数分で変えられるか？
• テンプレートの合致度： 出発点のデザインが好みに合っているか？
• モバイル設計： 自動でスマホに最適化され、必要なら微調整できるか？
• SEOのコントロール： ページタイトル、メタ、クリーンなURL、画像のaltが設定しやすいか？
• フォームと連携： 組み込みフォームやメール／カレンダー連携が簡単か？

無料プランの制限を理解する

無料プランはテストに便利ですが、しばしば次の制限があります：

• ビルダーのブランディング表示
• カスタムドメイン不可（サブドメイン提供）
• ストレージやページ数の制限
• SEOや連携の制限

求人応募やクライアント向けにはカスタムドメイン付きの有料プランが価値があります。

候補を絞ってから決める

2～3ツールを短く試し、それぞれで簡単なホームを作ってから決めてください：

• 採用重視なら：編集が簡単でテンプレートが強いもの
• デザイン重視なら：レイアウトとタイポグラフィの制御が優れているもの
• シンプルなプレゼンスなら：最速で作れるワンページを選ぶ

一度選んだらコミットしましょう。途中で乗り換えると手が止まりやすいです。

すばやくカスタマイズできるテンプレートを選ぶ

テンプレートは「最初から意図的に見える」近道です。完璧なデザインを探すより、業界の期待に沿ったレイアウトを出発点にして、自分らしく調整することが目標です。

業種向けテンプレートから始める

多くのビルダーはユースケース別にテンプレートを整理しています。そのフィルタは時間の節約になります。

• クリエイティブ（デザイン、写真、映像）： 大きなビジュアル、シンプルなナビゲーション、プロジェクト重視のホーム
• ビジネス（コンサル、マーケ、フリーランス）： サービスが明確、推薦文、コンタクト優先のレイアウト
• テック（開発者、プロダクト、データ）： ケーススタディ、役割の明確化、GitHub/LinkedInへのリンク
• 学生／エントリーレベル： プロジェクト＋スキル＋強いAbout、実務年数を前提にしない

選ぶ前にチェックすること

テンプレートのプレビューを訪問者の目線で評価してください。

見るべき点：

• 強いタイポグラフィ：見出しと本文が明確に分かれていて読みやすいか
• プロジェクトグリッド：最初のスクロールで作品が見えるか、サムネが一貫しているか
• 読みやすいモバイル表示：タップ領域が小さすぎないか、テキストが詰まっていないか

可能ならスマホでプレビューしてから決めてください。

見た目が派手でも避けるべきもの

効果を見せるためのテンプレートは避けましょう。

疲れるアニメーション、隠れたナビゲーション、自動再生ビデオ、白背景に薄いグレーの文字などはスキップ。訪問者が読めるようになるまで工夫が必要なら、離脱されやすくなります。

カスタマイズのしやすさを確認する

テンプレートに時間を投資する前に、以下が簡単にできるか確かめてください：

• 色： プライマリカラーを設定してボタンやリンクに反映できるか
• フォント： 見出しと本文のフォントを一括で変更できるか
• セクション： セクションの並べ替えや削除、追加が壊れずにできるか

ルール：色・フォント・余白を15–20分で自分仕様にできないなら、よりシンプルなテンプレートを選んでください。あなたの作品を目立たせることが最優先です。

コンテンツを集める：文章、画像、個人ブランディング

ビルダーに触る前に実際に載せるものを収集してください。この手順で何度も中断される時間を減らせます。

明確な見出しを1つ書く（人間らしく）

見出しは最初に読まれるものなので、瞬時に理解できるようにします。何をするかと誰を助けるかを1文にまとめてください。

例：

• 「スタートアップの混沌をシンプルなフローに変えるUXデザイナー」
• 「結婚式・ブランド・エディトリアル向けのフリーランス写真家」
• 「中小企業向けの高速マーケティングサイトを作るフロントエンド開発者」

マルチスキルなら全部列挙せず、今ほしい仕事に合わせて1つ選んでください。

主要な資産を1つのフォルダにまとめる

フォルダとサブフォルダを作り、作業感を“組み立て”に変えます。

用意すべきもの：

• ロゴ（任意）：ワードマークで十分。ここでつまずかないこと。
• ヘッドショット：フレンドリーで光の良い写真。四角・横長の両方に対応できると便利。
• プロジェクト画像：スクリーンショット、写真、モックアップなど成果を見せるもの。
• 推薦文：短めの引用が1〜2件あると効果的。可能なら氏名・役職・会社を添える。

ヒント：Web向けにJPG/PNG、可能ならWebPで出力し、ファイル名は説明的に（例：brand-redesign-homepage.jpg）。

ベストなプロジェクトを3–6件用意する（量より質）

少数の強いプロジェクトが長い平凡なリストより説得力があります。各プロジェクトに3–5箇条を準備：

• 目的は何だったか？
• あなたの役割は？
• 使用したツール/スキルは？
• あなたの仕事で何が変わったか（結果）

初心者なら：

• 明確なブリーフの個人プロジェクト
• リデザインのコンセプト（ビフォー/アフター）
• ボランティアや学校のプロジェクト

シンプルなブランドスタイルを作る（意図ある見た目）

フルのブランドガイドは不要です。必要なのは一貫性です。

• フォント： 見出し用と本文用に1〜2種類、ビルダーのデフォルトから選ぶ。
• 色： 2〜3色（プライマリ、ニュートラル、アクセント）。アクセントはボタンやリンクに控えめに使う。
• 余白： デフォルトの余白ルールを決め、セクション分けを明確に保つ。

コンテンツが揃えば、ノーコードでの作業はほぼドラッグ＆ドロップになります。核心は「明快さ」です。

クリックさせるホームページを作る

ホームページの仕事は一つ：数秒であなたが誰で何をする人か、そして次に何をすればいいかを伝えることです。訪問者が「理解するために時間をかける」必要があると離脱されます。

シャープなヒーローセクションから始める

役割 + 専門分野 + 結果 を簡潔に伝える1文を目指します。採用担当やクライアントが検索しそうな言い回しに近づけてください。

例：

「B2B SaaSを専門とするプロダクトデザイナー――チームが明確なワークフローを出し、活性化を高めるのを支援します。」

2行目にはニッチや使用ツール、扱うプロジェクトのタイプを短く補足してください。

注目プロジェクトを分かりやすく表示する

作品を探させないでください。ホームに「Featured Projects」エリアを入れましょう。

各プロジェクトカードはスキャンしやすく：

• プロジェクト名 + ラベル（例：「UXケーススタディ」「ブランドアイデンティティ」「Webリデザイン」）
• 1行の結果や焦点（例：「オンボーディング完了率を改善」）
• フルプロジェクトページへの明確なリンク

初期段階なら個人プロジェクトやボランティア、課題作品でも構いません。明快さと見せ方が重要です。

主要なCTAを1つに絞る（目立たせる）

プライマリボタンを1つ決め、1〜2箇所（上部と下部など）に繰り返します：Contact または Book a call。リンク先は /contact にします。

「CVをダウンロード」「メール」「フォロー」「予約」など複数の競合するボタンを避け、主な行動を一本化しましょう。

スキャンしやすさを保つ

短いセクション、分かりやすい見出し、余白を使って読みやすく。典型的なホームの構成例：

Intro → Featured Projects → 短いAbout → 推薦文／クライアント（任意）→ CTA

プロジェクトページを作る（初心者でも）

プロジェクトページはポートフォリオの信頼を築く場所です。シンプルで再利用しやすいフォーマットにすると、訪問者が何をしたかを理解しやすくなります。

再現できるレイアウトを使う（公開を速く）

一つの「プロジェクトページテンプレート」を作り、それを複製して使います。流れは明確に：

• 概要： プロジェクトの内容と対象（「個人プロジェクト」と書いてもOK）
• あなたの役割： 担当した範囲（リサーチ、デザイン、ライティング、写真など）
• ツール： 使用したアプリや手法
• ステップ： 実際にやったことの順序
• 結果： 何が変わったか、何をリリースしたか、次に改善したいこと

最終成果だけでなくプロセスを見せる

初心者は「見せるものが足りない」と感じがちですが、プロセスの提示で補えます。スケッチ、草案、主要な判断、ビフォー/アフターを含めてください。

ルール：誰かに「アイデアから成果までどうやってたどり着いた？」と聞かれたときに答えられる内容にしてください。

文脈を加えて印象に残す

小さなプロジェクトでも文脈次第で十分説得力が出ます：

• 制約（短納期、予算、ブランドルール）
• タイムライン（「週末スプリント」など）
• 協働（誰とどう働いたか）
• 学んだこと（正直な気づき1つ）

各プロジェクトの最後に小さなCTAを置きます：「こういうものを作りたいですか？/contact から連絡ください。」

詳細を公開できない場合

クライアントワークや職場の機密がある場合はサニタイズしたケーススタディを書いてください：目標、あなたの担当、アプローチ、影響を一般化して説明します。機密画像はワイヤーフレームやモックで差し替え、何を省略したかを注記しましょう。

Aboutページと連絡手段を明確に

Aboutページは「この人は自分に合うか？」と決める場所です。温かく、具体的で、スキミングしやすく書いてください（特にスマホでの閲覧を想定）。

会話調で短いバイオ（4–6文）

短いパラグラフで次を答えます：何をする人か、誰を助けるか、どんな成果を目指すか。記憶に残る1つのディテール（ニッチ、手法、価値観）を加えてください。

例の構成：「私は[役割]で、[対象]に対して[仕事の種類]を手伝います。専門は[焦点]です。最近は[プロジェクト／成果]に取り組んでいます。拠点は[場所／タイムゾーン]で、[フルタイム／フリーランス／コラボ]で対応可能です。」

履歴書っぽくしすぎない信頼の裏付け

仕事に関係する3–6の信頼シグナルを紹介しましょう：

• 主要スキル（プロジェクトで示しているもの）
• クライアントや勤務先（小さくても可）
• 学歴、資格、研修
• 受賞、掲載、登壇

初期キャリアなら、コースワーク、ボランティア、インターン、あるいは守っているプロセスを示しましょう。

フリーランスならサービスを簡潔に列挙

短く分かりやすいサービス一覧が手間を減らします：

• サービス名（例：「ブランドデザイン」）
• 含まれるもの（納品物、修正回数、目安の納期）
• 参考価格または「Starting at…」（任意）

連絡を簡単にする

複数の連絡手段を提示し、期待値を設定しましょう：

• クリックできるメールアドレス（mailto）
• 短い問い合わせフォーム（名前、メール、メッセージ）
• 実際に返信するSNSリンク

一行で「1–2営業日以内に返信します」「対応：フリーランス／正社員／コラボ」などを書くと信頼感が増します。

SEOとアクセシビリティの基本（難しく考えない）

マーケターのように本格的なSEOをやる必要はありません。小さな設定で検索エンジンに理解されやすくなり、実際のユーザーにも使いやすくなります。

ページタイトルとメタディスクリプション（効果大）

各ページに固有のタイトルとメタディスクリプションを設定してください。検索結果で表示される見出しと短い説明です。

• タイトル： 役割＋専門分野を先に入れる（例：「モバイル向けUXデザイナー｜佐藤太郎」）。
• メタディスクリプション： 誰を助けて何を作るかを一文で（例：「オンボーディング改善に注力するUXデザイナー、プロトタイプとユーザビリティテストの事例集。」）。

ビルダーにページごとのSEO設定があればそこに記入します。

見出しとURLを意味あるものに

見出しでページ構造を作りましょう：

• H1は各ページで1回（通常はメインの見出し）
• H2/H3 をセクション分けに使う（「Selected Work」「Process」「Results」等）

URLは読みやすく整えておきます：

• /（ホーム）
• /about
• /work/project-name
• /contact

自動生成の/page123のようなスラッグは避けてください。

画像：読み込みを速く、アクセシビリティにも配慮

ポートフォリオは画像が多くなるので、ページ速度に注意：

• 画像を圧縮してからアップロード（多くのビルダーは自動最適化も行う）
• altテキストは重要な説明を入れる：例「チェックアウト画面のリデザイン（ビフォー/アフター）」は「image1」よりずっと良い

altテキストはスクリーンリーダーに役立ち、検索エンジンにも作品内容を伝えます。

フッター：小さな工夫で大きな親切

全ページに共通のシンプルなフッターを入れましょう：

• クイックナビ（Home、Work、About、/contact）
• 明確な連絡方法（メールかフォーム）
• 任意で所在地／タイムゾーン、SNSリンク

フッターは使いやすさを高め、どこからでも連絡を取りやすくします。

ドメイン設定と公開の自信を持つ

カスタムドメイン（yourname.com）はポートフォリオをよりプロフェッショナルに見せ、履歴書やLinkedIn、メール署名で共有しやすくなります。目標はシンプル：タイプしやすい名前を選び、ビルダーに接続して、公開前の簡単チェックをしてから公開することです。

覚えやすいドメインを選ぶ

「一度聞いて綴れるか」を基準に選んでください。

良い例：

• firstnamelastname.com（一般的）
• lastname.design / lastname.dev / lastname.photo（職種に合えば）
• firstnamecreates.com（名前が取られている場合）

ハイフンや誤字を誘う二重文字、凝りすぎた語呂は避けましょう。

ビルダーに接続する（DNSを簡単に説明）

ドメインは購入先（レジストラ）に残り、サイトはビルダー上にあります。DNSは訪問者をどこへ送るかの「案内板」です。通常はビルダーが提示する設定値をレジストラに貼り付けます：

• Aレコード：ドメインをIPアドレスに向ける
• CNAME：www のようなサブドメインをサイトに向ける

多くのビルダーはステップごとの画面を用意しており、接続が確認されると完了します。反映には数分〜数時間かかることがあります。

Koder.ai のようにホスティングやデプロイを含むプラットフォームなら、カスタムドメイン接続や公開がさらにスムーズで、後でソースコードをエクスポートするオプションがある場合もあります。

公開前にあらゆる環境でプレビューする

公開前にチェック：

• モバイル、タブレット、デスクトップの表示
• ナビゲーションとボタン（モバイルでタップしやすいか）
• フォントサイズと行間（ズームなしで読みやすいか）

公開前チェックリストを実行する

最終確認で：

• リンク切れ（特にプロジェクトボタンやSNSアイコン）
• 誤字と表記ゆれ
• 問い合わせフォームの動作（送信テストと確認メッセージ）
• 画像品質（ぼやけていないか、伸びていないか、適切なファイルサイズか）

これらがOKなら公開して、ドメインをあちこちで共有しましょう。

維持・計測・改善を続ける

公開が終わりではなく、そこからサイトがあなたのために働き始めます。少しのメンテナンスで情報を正確に、ナビゲーションを簡潔に保てます。

軽量な解析を導入する

多くのノーコードビルダーは組み込みの統計か簡単な連携を提供しています。基本的な解析をオンにして次の質問に答えられるようにしましょう：

• どのページがよく見られているか（ホーム、About、特定のプロジェクト）？
• 訪問者はどこから来ているか（LinkedIn、検索、参照元）？
• 訪問者はContactに到達しているか、それとも途中で離脱しているか？

Google Analyticsやプライバシー重視の代替ツールを接続しても良いですが、頻繁に細かく見るより月1回の傾向確認で十分です。

表示数ではなくコンバージョンを追う

ページビューは見栄えが良いですが、価値を示すのはコンバージョンです。1–3の重要な行動を選んで追跡しましょう：

• 問い合わせフォームの送信数
• メールアドレス（mailto）クリック数
• 予約リンク（Calendly等）のクリック数

変更を加えたらスプレッドシートに「日付、変更内容、数週間後の結果」をメモするだけで十分な学習になります。

簡単な更新サイクルを設定する

定期的に手を入れると更新が楽です：

• 月次（15分）：情報の古くなった箇所を修正、リンク確認、推薦文や指標を1件追加。
• 四半期（30–60分）：より強いプロジェクトに差し替え、ホームのコピーを絞る、Featured作品を更新。

目標は「現状が正確で分かりやすい」こと。完璧を目指さないでください。

見られる場所で宣伝する

ポートフォリオを目立たせるだけで機会は増えます：

• LinkedInに載せる（Featuredセクションやプロフィールのリンク）
• メール署名に入れる
• 応募書類で最初にリンクを出す
• 定期的に発信するなら /blog を簡潔に設けて更新やケーススタディを共有する

小さな改善が積み重なります――計測して調整し、継続的に公開し続けましょう。