カスタムウェブページの作成
ポートフォリオサイトを構築して作業内容を紹介し、コードを一切記述せずにライブでデプロイする方法を学びます。
- 作成者Anthropic
- カテゴリ個人向け
- モデルSonnet 4.5
- 機能
- 共有リンクをコピー
1
タスクを説明する
Claude のビジョンとコーディング機能が連携し、説明と画像を機能するウェブインターフェイスに変換します。 履歴書や過去のプロジェクトと組み合わせて、Claude は専門的な説明とお好みのデザインスタイルの両方を反映したポートフォリオを作成できます。
アップロードされた履歴書とプロジェクトファイルを使用してポートフォリオサイトを構築するよう Claude に指示します。デザイン設定と最終的なデプロイ方法に関するガイダンスが必要なことを指定します。
私の専門的なキャリアと業績を紹介するため、プロフェッショナルなポートフォリオ HTML ページの作成を手伝ってください。 履歴書、プロジェクト説明、デザインのインスピレーションを載せたファイルをアップロードしました。 これらを活用して私のバックグラウンドと美的嗜好を理解してください。
デザインの方向性に関しては、高度で編集的な要素を望んでいます。企業テンプレートではなく、ハイエンドのクリエイティブエージェントとして考慮してください。 汎用的なレイアウト、AI のようなグラデーション、過度の対称性は避けます。 私が賞賛する（アップロードファイルにある）サイトは、有機的で手作りされた品質と、予想外のディテールを備えています。
作成が完了したら、インターネット上でライブ公開する手順を説明してください。 ウェブサイトをデプロイした経験がないとします。コーディング知識を必要としない正確な手順が必要です。
2
Claudeにコンテキストを与える
専門的なバックグラウンドとデザイン嗜好に関する情報を Claude に提供し、作品を真に表現するサイトを作成します。
必要なコンテキスト
履歴書、過去のプロジェクトやその他の強調したい成果など、プロフェッショナルなストーリーを記録したファイルをアップロードします。
また、美的嗜好を伝えるファイルも含めます。 賞賛するポートフォリオのスクリーンショットや、お気に入りのデザインの UI コードスニペットさえも、Claude が美的方向性を理解する助けとなります。
No items found.
履歴書
プロジェクトの説明（得意分野の詳細な作品例 3～5 件）
履歴書
任意のコンテキスト
拡張思考をオンにすると、Claude が高品質な出力の作成により多くの時間を費やすことができます。
拡張思考
3
Claudeの生成内容
Claude は完全なポートフォリオページを HTML アーティファクトとして構築します。 アーティファクトには専門情報、プロジェクトのショーケース、デザインの選択肢などがあり、審美的な好みに一致させます。
Claudeの回答
ポートフォリオサイトを作成しました。 デザインはインスピレーションファイルの編集要素から手作りされた美学的要素を抽出します。対称的なレイアウトやコーポレートテンプレートを避け、より有機的に感じられるものを目指しました。 ご指摘のテープ効果はプロジェクトカードに表示され、ページを移動するにつれて起動する微妙なスクロールアニメーションを追加しました。
履歴書情報は「情報」セクションを構成し、プロジェクトの説明はそれぞれ独自のショーケース領域を持ち、画像と詳細を収納します。 タイポグラフィはご希望の洗練されたトーンに一致するサンセリフ体のペアを使用し、カラーパレットはデザイン参照の分析によるものです。
ポートフォリオウェブページの表示
こちらは、どのブラウザであっても開くと外観を確認できます。 色の調整、プロジェクト順序の変更、テキストの修正など、変更したい箇所を教えてください。
4
フォローアッププロンプト
Claudeとの会話を続けて、内容を洗練させたり、広げたり、さらに掘り下げたりしましょう。
サイトをライブでデプロイする
Claude は Netlify に接続してアーティファクトのコードを取得し、ライブウェブサイトとしてデプロイできます。コーディングは不要です。アーティファクトの HTML コードから、Claude は技術的なデプロイ処理方法をお伝えできます。
ポートフォリオアーティファクトのコードを使用して、実際のサイトを作成したいと考えています。 私の Netlify コネクタを使用して、Netlify で直接新しいサイトプロジェクトを作成し、このライブデプロイの概要を説明してください。 ポートフォリオアーティファクトからのコードを共有しています。 私の Netlify コネクタを使用して新しいサイトプロジェクトを作成し、これをライブウェブサイトとしてデプロイします。 ライブになったら URL を教えてください。変更を加えたい場合に後ほどサイトを更新する方法を説明してください。
インタラクティブ効果の構築
コード化されたアニメーションとインタラクションを通じて、洗練された機能を追加します。 Claude は、HTML、CSS、JavaScript を記述してサイトに機能的な動作を追加できます。例えばホバーエフェクト、スクロールアニメーション、ユーザー操作に反応するインタラクティブ要素などです。
プロジェクトカードにホバーエフェクトを追加します。微妙なシフトや境界線の変更などがある場合があります。 セクションまでスクロールする際、見出しを少しフェードアウトさせます。 派手さはない、詳細に注意を払ったインタラクションを洗練させました。
1 つのプロジェクトを詳細なケーススタディに拡張する
デザインプロセス全体で最も重要な作業を深く掘り下げます。
インフラストラクチャ監視ダッシュボードプロジェクトを例に、完全なケーススタディページに拡張します。 問題、研究フェーズ、設計プロセス、反復作業、直面した課題、解決方法、測定可能な影響などがあります。 ワイヤーフレーム、ユーザーフィードバック、教訓に関するセクションを追加します。
5
コツ・ヒント・トラブルシューティング
出力のデザインを改善する
Claude は、標準フォント、デフォルト色、適切なスペース間隔など、より機能的なデザインオプションを選択することがあります。 より多様な出力については、異なるプロンプト手法を使用してください。 品質ベンチマークを参照する（「最上位のコンサルティングレポート」「プレミアム SaaS 製品」）、Claude を分野の専門家として分類する（「シニアデザイナーとしてこれにアプローチする」）、あるいは Claude に質問したり、高品質基準に基づいて独自の出力結果を評価し改善したりするよう依頼します。 また、Claude にすべきでないこと（「一般的なコーポレートブルーを避ける」「デフォルトのタイポグラフィを使用しない」）を指示することもできます。 最終結果に到達するには反復作業が必要になります。最初の出力後、何が不足しているかを評価し、改善を促します。
一貫した設計基準にスキルを使用する
視覚的な参照、成功例、特定のデザイン設定をパッケージ化したスキルを作成することで、Claude は毎回設定を再説明することなく、確立した基準を適用できます。 Claude に質問してコンテンツデザインスキル作成の支援を得ることで、形式設定、美的方向性、品質基準を再利用可能なワークフローにまとめます。 スキル作成の詳細はこちら。
さあ、体験してみませんか？
Claude と連携して作業内容を反映したポートフォリオページを構築し、ライブでデプロイする方法を学びます。すべてコードの記述は不要です。
