2025/6/30の記録です。
講師：田中先生
【1】誰のためのポートフォリオか？──まず「採用担当者の目線」で考える
採用担当者がポートフォリオを見る目的はただひとつ。
**「この人と一緒に働きたいと思えるか？」**を判断するためです。
だからこそ、自分が見せたいものだけでなく、相手が見たいものを意識しましょう。
-
どんなスキルがあるのか？
-
どんな実績があるのか？
-
未経験でも、どれだけ学び・成長してきたのか？
自己紹介や制作実績だけでなく、**“仕事としての視点”**を忘れずに。
【2】トップページは「作品主体」で！
ポートフォリオの第一印象は、トップページで決まります。
「つかみはOK！」となるように、自信作や注目してほしい作品を最初に見せましょう。
できれば…
-
ビジュアルメインで、作品がすぐ見えるように
-
スクロールしすぎない構成に
-
文字ばかりにならないよう注意
トップページは、あなたという人の「プレゼン資料の1枚目」。
まず心をつかんでから、じっくり読んでもらいましょう。
【3】操作性と導線が命──クリック地獄にご用心
良いポートフォリオでも、「どこを押せばいいかわからない」「クリックが多すぎて疲れる」と感じた時点で、離脱されてしまいます。
チェックポイントはこちら：
-
メニューはシンプルか？
-
1クリックで作品までたどり着けるか？
-
スマホでもストレスなく見られるか？
“迷わせない設計”が、見やすさと信頼感につながります。
【4】未経験でもできる「伝え方の工夫」
たとえ実務経験がなくても、「こんなことを学んできました」「私はこんなことができます」と伝えられる構成にすれば、強みになります。
おすすめの工夫：
-
学校や講座での制作物をまとめる
-
「できることリスト」を箇条書きで明記
-
課題に対してどう取り組んだか、工夫点を添える
「経験値」ではなく、「学ぶ姿勢」と「吸収力」が伝わる内容にしていきましょう。
【5】完成度を高めるには？──メニューと構成がカギ！
ポートフォリオ全体の印象は、「トップページ」と「メニュー定義」に大きく左右されます。
-
メニューはシンプルかつ直感的に
-
全体の構成が論理的で、整理されているか
-
自分のアピールポイントが、適切に配置されているか
自己満足ではなく、**「読む人が心地よく回遊できる構成」**を目指しましょう。
まとめ
ポートフォリオは、あなたの分身です。
だからこそ「何を伝えるか」「どう見せるか」の両方が大切。
-
採用担当者の目線で考える
-
トップページに自信作を
-
操作性・導線を整える
-
未経験でも「伝え方」を工夫する
-
メニューと構成で印象を高める
ひとつずつ意識すれば、あなたらしさがしっかり伝わる、説得力のあるポートフォリオが完成します。
Wappalyzer
Wappalyzer（ワップアライズァー） は、ウェブサイトが使用している**技術スタック（技術的な構成要素）**を一目で調べられる、便利なブラウザ拡張機能です。
Web制作や開発に関わる人なら、一度は使ってみる価値ありのツールです。
✅ 何がわかるの？
Wappalyzerを使うと、以下のような情報が瞬時に表示されます：
-
使用しているCMS（WordPress、Shopifyなど）
-
サーバーサイド言語（PHP、Node.jsなど）
-
JavaScriptライブラリ（jQuery、Reactなど）
-
Webサーバー（Apache、Nginxなど）
-
解析ツール（Google Analytics、Meta Pixelなど）
-
CDNやホスティング（Cloudflare、Amazon AWSなど）
🛠 使い方は超かんたん！
-
Chrome ウェブストアで「Wappalyzer」をインストール
👉 Wappalyzer - Chrome ウェブストア -
拡張機能を有効にすると、ブラウザの右上にアイコンが表示されます。
-
調べたいサイトを開いて、アイコンをクリック！
-
ページで使用されている技術一覧が、カテゴリごとに表示されます。
💡 どんなときに便利？
-
競合サイトがどんなCMSや解析ツールを使っているか調べたいとき
-
勉強中に「このアニメーションってどうやって実装してるんだろう？」と思ったとき
-
クライアントに「このサイトっぽく作って」と言われたときの調査ツールとして
⚠ 注意点
-
一部の技術は検出されないこともある（特にフロントに露出していないもの）
-
非公開設定にされている情報は取得できない
必要な情報を一瞬で引き出せる、WEB業界の虫眼鏡みたいな存在。それが「Wappalyzer」です🕵️♀️✨
Webデザイン・開発・マーケの現場で、知ってて損はなし！
