1 PAGE
開発者ポートフォリオ
ネイビーのヒーローとスキルカードで、開発経験と制作実績を紹介。
自己紹介・スキル・制作実績を1ページに整理。Webエンジニアの学習内容や開発経験を、役割や工夫とともに紹介する出発点に。
このテンプレートを確認PORTFOLIO 無料β公開中
無料β版で、はじめての
ポートフォリオサイトを。
作品や学んだことを、ひとつのWebサイトに。Webcraftの公式テンプレートを使えば、構成のたたき台から始めて、文章・画像・色を自分の内容へ置き換えられます。コードを確認しながら、制作の基本も学べます。
まず決めたい、ポートフォリオの4つの内容。
見た目を整える前に、「誰に、何を伝えたいか」を考えましょう。学習の記録を見せるのか、仕事の依頼につなげるのかで、強調する内容が変わります。最初は次の4つで十分です。
1. 自己紹介
名前・活動分野・大切にしていることを短くまとめます。「何をする人か」が最初の画面で伝わる見出しを用意しましょう。
2. スキルと取り組み
使った技術やツールに加えて、何を作った経験があるかを記載します。勉強中の内容は、勉強中と分かる表現で構いません。
3. 作品・制作実績
画像だけでなく、目的・担当範囲・使用技術・制作期間・工夫した点を添えます。実務経験がなくても、自主制作や学習作品を、その背景とともに紹介できます。
4. 連絡方法
公開できるメールアドレスやSNSなど、連絡先を設定します。サンプルのリンクを自分の連絡先に変更し、公開してよい情報だけを載せてください。
他者や勤務先の作品を掲載するときは、公開の許可と素材の利用条件を確認しましょう。テンプレートのサンプル名や実績は、あなた自身の情報に置き換えてください。
実装済みの公式テンプレートから選ぶ。
以下は、Webcraftで実際に利用できる初期デザインです。画像はテンプレートをそのまま表示したもので、架空の完成サイトではありません。1ページのテンプレートはGuestから試せます。
1 PAGE
シンプルポートフォリオ
やわらかな色と大きな余白で、作品とあなたらしさを伝える。
やわらかな背景とセリフ体の見出し、2列の作品カードが特徴。デザインや写真など、作品を中心に自分らしさを伝えたい方に。
このテンプレートを確認情報を分けたいときは、複数ページポートフォリオ
Home・About・Projects・Contactの4ページ構成です。青系のアクセントと共通ナビゲーションを使い、プロフィール・作品・連絡先を別ページに整理できます。複数ページの利用には無料アカウントが必要です。
4ページ構成を確認テンプレートから、あなたのサイトへ。
- デザインをプレビューする
「このテンプレートを確認」からエディターの選択画面へ進み、Desktop / Tablet / Mobileで見比べます。「このテンプレートを使う」で新しいサイトを作成します。作業中の内容があるときは、画面の保存・切替の案内を確認してください。 - 見出しと文章を置き換える
キャンバス上の文字をクリックするか、選択した要素の「文字内容」を編集します。作品ごとの目的や工夫を、自分の言葉で書いてみましょう。 - 自分の画像・配色に整える
画像を追加するときはPCのファイルをドロップ、または画像設定から選択します。色・余白・文字サイズは右側の設定で変更。下部のCSSにも変更が反映されます。 - スマホでの読みやすさを確認する
上部をMobileに切り替え、見出しの改行、作品カードの並び、画像やボタンの幅を確認します。自動調整を基本に、必要な項目だけ手動で整えます。 - 保存し、ZIPで書き出す
制作データをブラウザまたはクラウドへ保存。画像を使ったサイトは「エクスポート」からZIPで書き出し、展開したHTMLと画像を確認してください。
ZIPを書き出した後のWeb公開には、別途ホスティング先が必要です。Webcraftのクラウド保存は、編集を再開するための保存先であり、サイトの一般公開とは異なります。
書き出しと公開前の確認を詳しく読む →無料で利用できる範囲。
Webcraftは個人開発のβ版として無料公開しています。まずGuestで1ページを試し、ページや保存先を増やしたくなったら無料アカウントを利用できます。
| できること | Guest（登録なし） | Free（無料アカウント） |
|---|---|---|
| 基本編集・レスポンシブ編集・コード表示 | 利用可能 | 利用可能 |
| 1つのサイトのページ数 | 1ページまで | 10ページまで |
| 保存先 | 使用中のブラウザ内 | ブラウザ内・クラウド |
| クラウドプロジェクト | 利用不可 | 3プロジェクトまで |
| 共通レイアウト・共通パーツ | 無料アカウントが必要 | 利用可能 |
| 公式テンプレート | 1ページ構成を利用可能 | 複数ページ構成も利用可能 |
| マイテンプレート | 無料アカウントが必要 | 3件まで（プロジェクトとは別枠） |
| 画像追加・HTML/CSS・ZIP書き出し | 利用可能 | 利用可能 |
自由なHTML/CSSやJavaScriptの追加など、高度な操作はPro向けの機能です。Webcraft Proは現在準備中です。現在、Proの販売・新規申し込みは行っていません。
作り始める前によくある疑問。
HTMLやCSSをまだ書けなくても使えますか？
基本の文字・画像・レイアウトの編集は画面操作で行えます。生成されたHTML/CSSを見比べながら学べます。ただし、複雑な動作や独自のシステムまで自動で作る機能ではありません。
テンプレートの色や構成は変更できますか？
通常の要素として、文章・色・サイズ・余白や順序を変更できます。共通レイアウトや複数ページを使う場合は無料アカウントが必要です。
画像を含むサイトを持ち出せますか？
はい。ZIP書き出しには、参照している管理画像がassets/images/に含まれます。HTML単体のコピーやダウンロードには画像ファイルが付属しないため、画像があるときはZIPを利用してください。
公開前に何を確認すればよいですか？
サンプル文章の置き換え、素材の利用権、連絡先とリンク、スマホでの表示、画像の代替テキストを確認しましょう。公開先に配置した後も、実際のURLで各ページと画像を開いて確認してください。