デザインセンスに全く自信がないのですが、どうすればいいですか？

センスではなく「ルール」に従いましょう。まずは「デザインの4大原則（近接、整列、反復、コントラスト）」を意識し、要素の端を揃える、余白を一定にすることから始めてください。

配色の選び方のコツを教えてください。

使う色は3色（ベース、メイン、アクセント）に絞りましょう。色の選択に迷う場合は「Coolors」などの配色提案ツールを利用すると、プロのような統一感のある色使いが可能になります。

UIフレームワークを使うと、他の人とデザインが被りませんか？

デフォルトのままだと被りますが、メインカラーの変更、フォントの選定、独自の余白設定を行うことで、十分に差別化できます。骨組みをライブラリに任せ、細部で個性を出しましょう。

ポートフォリオの「デザイン」をプロっぽく見せるコツ｜基礎を学ぶ

このレッスンで分かること

この記事では「ポートフォリオの「デザイン」をプロっぽく見せるコツ」をポートフォリオ作成の現場で使える形で整理します

エンジニアのポートフォリオにおけるデザインの重要性と共通の悩み をおさえれば、現場で迷ったときに立ち戻れる

脱・素人感！プロっぽく見せるための4大デザイン原則 をおさえれば、現場で迷ったときに立ち戻れる

1. 近接（Proximity） をおさえれば、現場で迷ったときに立ち戻れる

2. 整列（Alignment） をおさえれば、現場で迷ったときに立ち戻れる

ポートフォリオの「デザイン」をプロっぽく見せるコツとは

エンジニアのポートフォリオを「プロっぽく」見せるためのデザインのコツを解説。4大デザイン原則、配色ルール、UIライブラリの活用法、UX向上のテクニックなど、センス不要で論理的に見た目を改善する方法を学びます。

エンジニアのポートフォリオにおける「デザイン」の重要性と共通の悩み

エンジニアのポートフォリオにおいて、最も重要なのは「技術力」であることは間違いありません。しかし、採用担当者やクライアントが最初に目にするのは、コードの中身ではなく「Webサイトの見た目（UI）」です。どんなに高度なバックエンド処理を実装していても、デザインが崩れていたり、使い勝手が悪かったりすると、「細部へのこだわりが足りないのではないか」「ユーザー視点が欠けているのではないか」というネガティブな印象を与えかねません。

多くのエンジニアが「自分にはデザインセンスがないから……」と諦めてしまいがちですが、プロっぽいデザインを作るために必要なのは「センス」ではなく論理的なルールの理解です。 このレッスンでは、デザインの専門知識がなくても、明日からすぐに実践できる「プロっぽく見せるためのコツ」を体系的に学んでいきましょう。

結論先出し — デザインはセンスではなくルール。4大原則・配色・余白の3点を整えるだけで「素人感」は消え、コードの中身に目が向くようになります。

脱・素人感！プロっぽく見せるための「4大デザイン原則」

デザインには、視覚的な情報を整理するための「4大原則」が存在します。これらを意識するだけで、ポートフォリオの「素人感」を劇的に減らすことができます。

diagram (will load when visible)

1. 近接（`Proximity`）

関連する項目を近づけ、関係のない項目を遠ざける原則です。例えば、ブログの「タイトル」と「投稿日」は近づけ、次の「記事の抜粋」との間には少し広めの余白を作ります。これにより、ユーザーは直感的に「どの情報がセットなのか」を理解できます。

2. 整列（`Alignment`）

要素の端を揃える原則です。左揃え、中央揃え、右揃えなど、目に見えない「軸」を意識して配置します。エンジニアであれば、コードのインデントを揃える感覚に近いでしょう。バラバラに配置されたボタンやテキストを整列させるだけで、画面に安定感が生まれます。

3. 反復（`Repetition`）

特定のデザイン要素を繰り返す原則です。見出しのスタイル、ボタンの色、アイコンのサイズなどを統一します。ルールを繰り返すことで、サイト全体に一貫性が生まれ、プロが作ったような洗練された印象になります。

4. コントラスト（`Contrast`）

情報の優先順位をはっきりさせるために、要素に強弱をつける原則です。最も重要なボタン（「ログイン」や「送信」など）を目立つ色にし、補足的な情報は文字を小さく・薄くします。コントラストをつけることで、ユーザーの視線をスムーズに誘導できます。

良い例

CSS
/* 良い例：コントラストが明確で読みやすい */ .submit-button { background-color: #2563eb; /* 鮮やかな青 */ color: #ffffff; /* はっきりとした白 */ font-weight: bold; }

避けたい例

CSS
/* 悪い例：背景色と文字色が近く、視認性が低い */ .submit-button { background-color: #2563eb; color: #1e3a8a; /* 暗い青で背景に沈んでしまう */ }

デザインの4大原則は、プログラミングの設計原則（DRYやKISSなど）に通じるものがあります。美しさだけでなく「情報の整理」と捉えると、エンジニアにとって非常に理解しやすいものになりますよ！

配色とタイポグラフィ：統一感のあるブランドを作るテクニック

色は感情を動かし、フォントは信頼感を醸成します。ここでのポイントは「使いすぎないこと」です。

配色の黄金比「70:25:5」を意識する

プロっぽいサイトは、使う色の数を絞っています。以下の比率を意識してみましょう。

ベースカラー（70%）は背景や広い面積に使う色（白や薄いグレーがおすすめ）
メインカラー（25%）はブランドの象徴となる色（ナビゲーションや見出しなど）
アクセントカラー（5%）は最も目立たせたい部分に使う色（お問い合わせボタンなど）

初心者がやりがちな失敗は、原色（真っ赤、真っ青など）を多用することです。少し彩度（鮮やかさ）を落とした色を選ぶと、目に優しく落ち着いた印象になります。

diagram (will load when visible)

タイポグラフィ（フォント）の選び方

フォント選びも重要です。日本語なら「Noto Sans JP」などの読みやすいゴシック体、英語なら「Inter」や「Roboto」などがモダンでエンジニアのポートフォリオに向いています。フォントサイズは、本文なら16px程度、行間は1.5〜1.7倍程度に設定すると、読みやすさが格段に向上します。

UIライブラリとフレームワークを賢く活用する

ゼロからデザインを組むのは時間がかかります。現代のエンジニアリングでは、既存のUIライブラリをカスタマイズして使うのが一般的です。

ライブラリ名	特徴	向いている人
`Tailwind CSS`	自由度が高く、クラス名で直感的にデザインできる	独自のこだわりを表現したい人
`MUI` (Material UI)	Googleのデザイン規約に基づいた高品質な部品が豊富	堅実で機能的なUIを早く作りたい人
`shadcn/ui`	コピー＆ペーストで導入でき、カスタマイズが容易	最新のトレンドを取り入れたい人
`Bootstrap`	昔からの定番。ドキュメントが非常に豊富	学習コストを抑えて手っ取り早く作りたい人

これらのライブラリを使用する際も、「デフォルトのまま」使うのではなく、前述した「配色」を自分のブランドカラーに変更するだけで、他の受験者と差別化された「プロの仕事」に見せることができます。

細部で差がつく！余白・アイコン・画像の使いこなし方

デザインの良し悪しは、細部に宿ります。特に以下の3点に注意を払ってみてください。

「余白」はデザインの要素である

初心者は画面の空白を「埋めなければならないもの」と考えがちですが、プロは「情報の区切り」として余白を活用します。要素同士をぎゅうぎゅうに詰め込まず、ゆとりを持たせることで、コンテンツが引き立ち、洗練された印象を与えます。

高品質なアセットを利用する

自分で用意した質の低い画像は、サイト全体の評価を下げてしまいます。以下のサイトなどを活用して、高品質な素材を揃えましょう。

アイコンはLucide, Phosphor Icons, Font Awesome
画像はUnsplash, Pexels（著作権フリーの高品質写真）
イラストはunDraw, humaaans（カスタマイズ可能なベクター素材）

画像の比率を統一する

ポートフォリオの「制作実績一覧」などで使うカード型のデザインでは、画像の縦横比を必ず統一しましょう。CSSの aspect-ratio プロパティや object-fit: cover; を活用することで、元の画像のサイズが異なっていても綺麗に揃えることができます。

ユーザー体験（`UX`）を高めるエンジニアならではの視点

見た目の美しさだけでなく、「使い心地（UX）」にこだわるのがエンジニアとしてのプロの証です。

レスポンシブ対応は採用担当者は移動中にスマートフォンでポートフォリオを見ることもあります。スマホでも崩れず、操作しやすい設計にしましょう。
ローディング状態の実装はAPIからのデータ取得中に、ぐるぐる回るアイコン（スピナー）や、スケルトンスクリーン（コンテンツの形をした薄いグレーの枠）を表示させることで、ユーザーの不安を解消します。
フィードバックの提供はボタンを押した後に「送信しました」という通知（トースト）を出したり、フォームに不備がある際にエラーメッセージを表示したりするなど、インタラクションを丁寧に実装します。

ここまでの要約 — UX は「待ち時間」と「操作後の反応」で評価されます。スピナー・スケルトン・トーストの3点セットを習慣化するだけで、印象が一段引き上がります。

まとめ

ポートフォリオのデザインをプロっぽく見せるために、特別な才能は必要ありません。「4大原則（近接・整列・反復・コントラスト）」を守り、「色とフォント」を絞り、「UIライブラリ」を効果的に活用するだけで、あなたの技術力はより正確に、そして魅力的に伝わるようになります。

まずは自分の現在のポートフォリオを見直し、どこか「整列」が崩れているところはないか、色が多すぎていないかを確認することから始めてみてください。デザインが整うことで、自信を持ってURLを共有できるようになるはずです。次のステップでは、制作中に発生した問題の解決プロセスについて学んでいきましょう。

現場でよくある具体例

Aさん (受託企業内定) は GitHub の README 冒頭に「誰の何を解決するか」を 3 行で書き、デプロイ URL を最上段に置いた。それだけで書類通過率が 2 倍に
Bさん (自社開発内定) は技術選定理由を README の「Why this stack?」セクションに明記。面接が「決定根拠の深掘り」中心になり、暗記質問が消えた
Cさん (落選続き → 内定) はテーブルを切ってコミット履歴を整理。「feat: 機能追加」のような Conventional Commits に変えた途端、レビュー観点での評価が上がった

次にとるべきアクション

今のポートフォリオを採用視点で 30 秒見直す — README・デプロイ URL・スクショの 3 点が即座に伝わるか確認する
改善ポイントを GitHub Issue 化する — 「ポートフォリオの「デザイン」をプロっぽく見せるコツ」で得た観点を、自分のリポジトリの Issue として 3 件登録する
実装/修正を次の 1 週間で完了させる — Issue を Pull Request に落とし込み、コミットメッセージにも改善理由を残す

次のレッスン

次は 制作中に「詰まった」時の効果的な問題解決プロセス で、制作中に「詰まった」時の効果的な問題解決プロセスを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

デザインのコツの要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. デザインのコツとは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

参考にした出典

経済産業省「IT人材需給に関する調査」 — IT 人材の需給見通しと求められるスキル像（出典: 経済産業省, 2019, https://www.meti.go.jp/policy/it_policy/jinzai/）
GitHub「The State of the Octoverse」 — GitHub 上の開発者活動とリポジトリのトレンド（出典: GitHub, 最新版, https://github.blog/news-insights/octoverse/）
Stack Overflow Developer Survey — 開発者が実務で利用するツール・スキル比率（出典: Stack Overflow, 年次, https://survey.stackoverflow.co/）

学習を加速したい方へ

未経験エンジニア向けポートフォリオ作成ガイドを体系的にマスターするなら、chotdekiru の無料学習ポータルで実際に手を動かして学習を始めるのがおすすめです。質問・つまずきも現役エンジニアが伴走します。