- デモ（ポートフォリオ）：
https://ユーザー名.github.io/リポジトリ名/ - リポジトリ（GitHub）：
https://github.com/ユーザー名/リポジトリ名
採用側は「読みやすさ」と「具体性」を見ています。
よくあるNGを避けるだけで、印象は大きく変わります。
この記事でやること（3行）
- 採用目線のNGを知る
- “直し方” までセットで理解する
- 最低限の改善で「伝わる状態」にする
対象読者
- 初めてポートフォリオを作る人
- 何が悪いか分からない人
- “頑張った感” はあるのに伝わらない人
0. 採用側が30秒で見るポイント（ここが弱いと落ちる）
- 何ができる人？（スキル/領域）
- 何を作った？（成果物）
- どこが見どころ？（工夫/担当範囲）
- ちゃんと動く？（リンク切れ/スマホ崩れ）
- 次の行動は？（連絡/導線）
1. NG：作品の説明がない（タイトルだけ）
NG
- タイトルだけで中身が分からない
改善
- 1〜2行でOK。「誰に / 何を / 何のために」
例：学習中の方向けに、HTML/CSSで自己紹介ページを作りました。スマホでも崩れないようにレスポンシブ対応しています。
2. NG：リンクが切れている（404 / 権限で見られない）
改善
- 公開前に 全部クリック
- GitHub Pagesが
404なら、Settings → Pagesを確認
3. NG：担当範囲が不明（“全部作った？”が分からない）
改善
- 作品ごとに「自分がやったこと」を1行入れる
担当：デザイン（Figma）/ コーディング（HTML/CSS）/ GitHub Pages公開
4. NG：環境・起動手順がない（GitHubがあるのに不親切）
改善
- 最低限これだけ書く（1分で読める量）
## セットアップ
- Node.js：不要（静的サイト）
- 公開URL：GitHub Pages
## 動作確認
- PC：Chrome
- SP：iPhone（Safari）
5. NG：読みにくい（文字が小さい / 余白がない / 行間が詰む）
改善（目安）
- 本文：
16px以上 - 行間：
1.6以上 - セクション間：余白を増やす（詰めない）
6. NG：スマホで崩れる（採用側はスマホでも見ます）
改善
- まず “幅375px” を想定して確認
- 崩れる箇所は
max-width: 100%/flex-wrap/gapで直す
7. NG：画像が重い（表示が遅い＝離脱される）
改善
- 画像は
webpを優先 - 可能なら
loading="lazy"を付ける
<img src="thumb.webp" alt="作品のサムネイル" loading="lazy">
8. NG：自己紹介が抽象的（“頑張っています”だけ）
改善
- 「何ができるか」を具体で1行
- 作品リンクに誘導
例：HTML/CSS/JavaScriptで、LPやコーポレートサイトの制作ができます。作品は下のWorksから見られます。
9. NG：成果・工夫が伝わらない（“作りました”で終わる）
改善
- 数字がなければ 工夫点 だけでもOK
- できれば Before/After を入れる（強い）
10. NG：連絡導線が弱い（“次にどうすれば？”がない）
改善
- 「お問い合わせはこちら」を1つだけ置く
- SNS/メール/フォームは 迷わせない
最短で直す：公開前5分チェック
- デモURLは開ける（404なし）
- GitHubはPublic / READMEあり
- 作品に1〜2行の説明がある
- スマホ（幅375px）で崩れない
- 連絡導線が1つある（迷わない）
まとめ
- 採用側は 読みやすさ × 具体性 を見ている
- NGを避けるだけで印象は大きく変わる
- まずは「説明文・リンク・スマホ崩れ」を直すのが最優先
次に読む
-
【超初心者】HTML/CSSで1枚ページを作ってGitHub Pagesで公開する最短手順
https://qiita.com/ko_nagai_0801/items/8b7c6721fe3485e28866
→ そもそも「公開できる状態」を最短で作る手順です -
【超初心者】成果物の見せ方（サムネ・説明文・リンクの3点セット）
https://qiita.com/ko_nagai_0801/items/7048084de73a2b6250c9
→ NGを避けた上で「見せ方」を整えると一気に強くなります