授業料は無料？有料？通学式かオンラインなのか？など、金銭面や自分の生活スタイルに合わせてスクールを選びましょう！プログラミングを無料で学べるスクールも紹介！
ポートフォリオHTMLテンプレート（ベーシック）
シンプルでベーシックなポートフォリオサイト用のHTMLテンプレートです。挙動やソースはデモをご確認ください。
デモ
ダウンロード
実際の使用例は、僕のポートフォリオサイトをご覧ください。
ねこポンのポートフォリオサイト
紙のポートフォリオ制作については下記の記事で詳しく解説しています。
最強ポートフォリオの簡単な作り方
その他のポートフォリオHTMLテンプレート
ポートフォリオHTMLテンプレート（ガーリー）
テンプレートについて
- スマホ（レスポンシブ）対応済み
- Flexbox使用
- ヘッダー・コンテンツ・フッターの１カラム構造
- ナビゲーションはスクロール途中でヘッダー固定
- コンテンツは「WORKS」「FEATURE（最新の実績 or 1サイトを解説）」「ABOUT」「SKILL」「CONTACT」
- 「WORKS」では、スライド（Photoswipe）を使用
- 「WORKS」では、Lazyloadプラグイン（Lazysizes）を使用しています。作品画像がページのスクロールに応じて表示されます。サムネイルと作品画像は同じ画像（1600 x 1200pxと少々重い）を使うため、少しでも軽くするために、Lazyloadを導入しています。imgタグの「data-src=」に作品画像のパスを記載し、「src=」にplaceholder画像（data-srcの画像が表示される前に表示する仮の軽いダミー画像）のパスを指定します。placeholder画像はデフォルトでplaceholder4x3.pngを設定しているため、特に新たに画像を作成したり設定する必要はありません。もちろん、src用の画像にdata-srcで表示する作品画像の解像度を落とした荒く軽い画像を設定してもOKです。
無料で商用・非商用問わずお使いください。改変自由です。無許可の再配布・再販売は禁止します。本テンプレート使用によるいかなる損害についても、本サイトは責任を負わないものとします。
リンクとクレジットの表記は不要ですが、ご自身のサイトやブログなどで本サイトやこのテンプレートをご紹介していただけると、とても嬉しいです＾＾
全体デザイン
コラム①：正社員のWebデザイナーを強くオススメする理由
このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。
Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いワークポートです。Webに強いエージェントは他にもあるし、僕もいくつも登録していますが、ワークポートほど大量に求人案件を紹介してくれるエージェントを他に知りません笑。
↑ワークポートさんに会ってきました！ねほりはほりと質問をぶつけています。ぜひ読んでみてください。
転職エージェントは複数登録しますが、ワークポートはそのうちのメインエージェントして必ず登録しましょう。
コラム②：Webデザイナーを強くオススメする理由
あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。
でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。
ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』に行きましょう。プログラマカレッジは、学校＆就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。
無料のプログラミング学校はもう一つ、『GEEK
JOB』があります。就職率97.8%と驚異的な数字を出しています！よりエンジニア色の強いカリキュラムを受けたい場合はこちらを受講します。
２校ともオススメです。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。
この２つの学校のどちらかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。
30歳以上の方は、『テックキャンプ エンジニア転職』
がオススメです。転職できなければ授業料全額返金してくれます。教室は9時〜22時まで開放し、教室あるいはオンラインでマンツーマンで無制限に質問ができます！超集中なら10週間、ゆったりなら6ヶ月と期間も生活に合わせて選べます。スクールは無数にありますが、有料系ではここが一番爆速に成長できそうです。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか
“ポートフォリオHTMLテンプレート（ベーシック）” への13件のフィードバック
Webデザインのご質問やサイトの感想など、お気軽にどうぞ！
管理人（ねこポン）について
週３日だけ会社で働く30代前半ウェブデザイナーです！
インテリ風＆仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。
最近ちょこっと『月曜から夜ふかし』に出演しました↓
なんでもWebの質問受け付け中 (^o^) /♪
おすすめのWebデザインスクール一覧
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 求職者支援訓練 ハロートレーニング |
無料 （教材費のみ） |
通学 （約６ヶ月/週４〜５日） |
Webデザイン | ハローワークによるサポート |
 プロによる総評 |
||||
|
一番おすすめのスクールは国の運営する求職者支援訓練（ハロートレーニング）です。授業料が無料！しかも約６ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。僕自身も求職者支援訓練を経てWebデザイナーになりました。 失業保険が受給できる方は職業訓練がおすすめです。期間が約３ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数は２校ほどで少ないですが６ヶ月コースも登場しました！ 参考記事：【無料】職業訓練でWebデザインを学ぶ |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 LIG |
有料 （¥450,000 〜） |
通学 （６ヶ月） |
Webデザイン | 転職セミナーあり/LIGへの採用実績もあり |
| プロによる総評 |
||||
|
金銭的に余裕があればLIGを検討しましょう。超有名Web制作会社LIGによるWebデザインスクールです。現役のプロデザイナーが講師で、Mac＆デュアルディスプレイという最新設備で学べます！LIG運営のコワーキングスペースも無料で使い放題。生徒のレベルによってはLIGへの就職も可能です。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 CodeCamp デザインマスターコース |
有料 （¥148,000 〜） |
オンライン （２ヶ月〜） |
Webデザイン | キャリア支援あり （就職エージェントの紹介） |
| プロによる総評 |
||||
|
CodeCampはオンラインのWebデザインスクールです。低価格ながら講師から直接指導とフィードバックを受けられるのが最大の特長です！おすすめのコースは「デザインマスターコース」。コスパ重視で講師と対話しながら学びたい人に最適なスクールです。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 TechAcademy Webデザインコース |
有料 （¥139,000 〜） |
オンライン （４週間〜） |
Webデザイン | 転職サービスあり （スカウト制度） |
| プロによる総評 |
||||
|
４週間から短期で受講可能なオンラインのスクールです。週２回メンターにビデオチャットで質問ができ、毎日15時〜23時の間に不明点をチャットで質問可能。「Webデザインコース」がおすすめ。ある程度自習ができて最低限のメンターによるサポートが欲しい人におすすめのスクールです。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 プログラマカレッジ |
無料 | 通学 | プログラミング | あり |
| プロによる総評 |
||||
|
『プログラマカレッジ』は20代限定の通学式で完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。スクール側は就業先の企業からお金をもらうことで無料で運営をしています。とはいえ授業の質は高いと評判です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。 |
||||
| スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
|---|---|---|---|---|
 GEEK JOB |
無料 | 通学 | プログラミング | あり |
| プロによる総評 |
||||
|
上で紹介した『プログラマカレッジ』と同様の20代限定の通学式で完全無料のプログラミングスクールです。プログラマカレッジは決まった時間に通学しますが、GEEK JOBは個別指導なので自分のペースで通学できます。エンジニアになりたい方は、自分の生活スタイルに合わせてどちらのスクールに行くか検討してみましょう。就職率97.8%は驚異的です！ |
||||
Web制作会社を歩き回れるゲームを作ってみました！ぜひ探検してみてください。(注意：音が出ます！)
こちらの「ポートフォリオHTMLテンプレート（ベーシック）」使用させていただきました！
まだ、作成した成果物がなく、公開までは至ってないのですが、後々公開させていただくと思います。
こちらのテンプレートを変更しポートフォリオサイト作成した事をツイッターで呟かせていただきます。
だいじゅさん、ポートフォリオのテンプレートを使っていただきありがとうございます＾＾
はい、ぜひぜひツイートしてやってください。
作品たまっていくと良いですね〜
ねこポンさん！はじめまして！
ポートフォリオHTMLテンプレート（ベーシック）使用させていただきました！
11月からデザインの勉強を始めて、ポートフォリオサイトを公開まですることができました。
このポートフォリオを持って、転職活動に挑みたいと思います！
ありがとうございます！
ナヲフミさん、はじめまして！
こちらこそポートフォリオのテンプレートを素敵に使っていただき嬉しいです。ありがとうございます！
拝見しましたが、バナーのクオリティが高くて素晴らしいですね。これなら自信を持って転職活動ができますね^^
以前も日本デザインスクールの方の作品を見たことがありますが、いつもレベルが高いなぁと思っておりました。
可能であれば、ぜひポートフォリオをこのサイトで紹介させてください。
ナヲフミさんが良い会社に巡り会えるよう陰ながら応援しております。
ご返信ありがとうございます！
ご覧いただきありがとうございます！！
ねこポンさんのおかげで素敵なポートフォリオサイトを作ることができました。
紹介していただけるなんて光栄です、、！！ぜひ、自分のサイトでよければお願いします！
ねこポンさんに褒めていただき、自身がつきました！
頑張ります！ありがとうございます！
掲載の許可をありがとうございます！
Worksの各作品はそれぞれ個別ページに飛ぶように改良されていたりして、しっかりテンプレを活用してくださって嬉しいです。
自信を持って転職活動を楽しみながら頑張ってください^^
ねこポンさんお久しぶりです！
以前、ポートフォリオHTMLテンプレートの利用でコメントさせていただいたナヲフミと申します。
私事ですが、、
無事、web制作会社から内定をいただくことができました！！
とても良い会社に巡り会えました。
ねこポンさんの有益な記事やテンプレートを利用させていただいたおかげです！
改めて、ありがとうございます！
簡単にはなりますが、感謝の意を込めてご報告させてもらいます。
ナヲフミさん、内定おめでとうございます！！！
すごいですね！Web制作会社で、しかも良さそうな職場なんですね〜。本当によかったです＾＾テンプレとこのサイトが少しでもナヲフミさんの転職活動をアシストできて、すごく嬉しいです。
これからWebデザイナーとしての人生がスタートしますね。僕も平凡なスキルながらWebデザイナーですので、お仕事をする中で疑問や大変なこと等あれば、ぜひいつでもまた相談してくださいね。
ご報告ありがとうございました。デザインとコーディング、これからも楽しんでいきましょう！
こんにちは、初歩的な質問で申し訳ありません。
こちらのページのポートフォリオサイトを参考に自分のものを作ってみました。
そのあと、ドメインを取得してアップロードしたいのですがどのようにアップするのかがわかりません。参照サイトなどがございましたらお教えいただきたく存じます。
aiさん、こんにちは！
ポートフォリオテンプレートを使っていただき、ありがとうございます。
比較的かんたんな、ムームードメイン（ドメイン取得サイト）とロリポップ（レンタルサーバー）の組み合わせで解説している記事を探してみました。
★【ロリポップ×ムームードメイン】一番安く出来るブログ（サイト）の作り方
https://hitodeblog.com/wordpress-start2
僕のサイトではありませんが、、こちらの記事で契約方法と設定が詳しく解説されています。
ロリポップとムームードメインは同じ会社が運営しているので、連携がとってもラクです。
アップロードについては、Windowsであれば「FFFTP」などのFTPソフトを使ってアップロードします。細かい説明は下記の記事が参考になります。
★ロリポップをFFFTPで使った話
http://hyouban.click/web/ffftp-portable/
またアップロードについては、ロリポップのサイト上からアップロードする方法も一応あります。
★レンタルサーバー ロリポップ！FTPの使い方
https://webst8.com/blog/lolipop-ftp-howto/
ただ、この方法は大量のファイルをアップロードするには面倒なので、あまりプロの世界では一般的ではありません。
一旦、上記の記事を参考にしていただいて、またわからない箇所があれば随時こちらで質問をください。ポートフォリオサイトの設置、がんばってください＾＾
ねこポン様、ポートフォリオのベーシックテンプレートを使わせていただきました。テンプレートのみならず、こちらのサイトに掲載してくださっている多くのアドバイスがとても参考になりました。誰にも相談できなかったので本当に助かりました。（私の年齢をみてWebスクールの事務局は親身に対応しないようでしたし・・）
ねこポン様のおかげで、Web業界は未経験でありながら、ECコンサルティングの会社でWebディレクション担当として採用内定いただきました。私は現在41歳です。同年代の女性の方で、同じような境遇の方がおられましたら諦めずに活動してみて欲しいです。
本当にありがとうございました。感謝申し上げます。
れこぴんさん、はじめまして！
テンプレートを使っていただいてありがとうございます！
そして内定も本当に本当におめでとうございます＾＾！！
Webスクールがそんな対応の中で、折れることなく転職活動を成功させられて、、すごいことです。
ポートフォリオサイトを拝見しました。精力的に多くのサイトデザインを制作されたんですね。素敵なデザインでした。
おっしゃるとおり、同じ境遇の方にとって、このことはとても刺激になると思いますので、れこぴんさんのポートフォリオをこの記事内で紹介してもよろしいでしょうか…？？
ECコンサルの会社でディレクション、興味深いですね！これからお仕事楽しみですね〜
ねこポン様 ご返信くださりありがとうございます！
そしてポートフォリオをご覧くださりありがとうございます。
スクールを卒業後に集中してポートフォリオにするWEBサイトを3つ制作しました。デザインだけの方は、ねこポンさんのアドバイスを参考に急遽追加で制作しました次第です。
＞れこぴんさんのポートフォリオをこの記事内で紹介しても
はい、同じような境遇の方の励みになるのでしたらどうぞ！
ただ、名前（トップページとABOUT）と顔写真と連絡先の部分は恥ずかしいのでボカしていただけますでしょうか？
＞ECコンサルの会社でディレクション、興味深いですね！
ありがとうございます。仕事に慣れてきましたら、SEOやディレクションを担当していく中で、クライアントの売上にどれくらい貢献できるか手応えを感じてみたいところです。
ちなみに、雇用形態は私自身が望んでのアルバイト・パートです。（長時間オフィスに拘束されるライフスタイルが苦手になったため・・。 1日6時間正社員とか、週3or4正社員とかが流行する時代がこないかな・・）