【随時更新中】おすすめプログラミングスクール7選

【完全無料】ポートフォリオサイトテンプレート(シンプル)配布とカスタム方法

【完全無料】ポートフォリオサイトテンプレート(シンプル)配布とカスタム方法

ポートフォリオを作りたいけど、簡単に作る方法が分からない!
テンプレートってないですか?

こんな悩みに答える記事になっています。

ポートフォリオサイトを作るときに、参考になるテンプレートがあると心強いですよね。

という事で、ポートフォリオテンプレートを作成しました。

ポートフォリオサイトトップページ

このポートフォリオサイトテンプレートは無料で商用・非商用問わずお使いいただけます。

zipファイルの解凍後に使ってください。
また、ポートフォリオサイトテンプレートのカスタマイズは自由にしてください。

むしろ、カスタマイズしないと『そのまま持ってきただけ』と分かるので絶対にダメです。
配色やレイアウト、フォントなどを変えつつ自分だけのポートフォリオを作ってみて下さい!

無許可の再配布・再販売は禁止します。
本テンプレート使用によるいかなる損害についても、当サイトは責任を負わないものとします。

使用に当たってリンクとクレジットの表記は不要ですが、Twitterやブログなどで、当テンプレートを紹介していただけると助かります。

maipyon

このテンプレートを元にして作ってみました!というものがあれば、いくつか掲載したいです。
@maipyon8へのご連絡お待ちしています。

カスタマイズ方法やファイル内容の詳細については記事の後半にて掲載していますので、本記事を最後まで読みつつ使ってもらえたらと思います!


上記ポートフォリオは、実際に案件獲得のために使用したポートフォリオをシンプルなデザインに変更したものです。

つまり、このポートフォリオトップページの構成で案件を獲得できているため、良いポートフォリオではないかなと思います。

本記事では、当テンプレートの使い方とサーバーへのアップロード方法などを細かく解説していきます!

ポートフォリオサイトテンプレートの全体デザイン

テンプレートの全体デザインは以下の通り。

ポートフォリオ全体のデザイン

スマホでのレスポンシブにも対応しています。

詳細はデモページをご確認ください。

maipyon

なお、当サイトのものとわかるようにデモページは名前に『maipyon』を入れた状態ですが、配布ファイルは上記画像のデザインにしています。
スキルとかサービス内容とかテキストは超適当です。(私PhotoShop全然使いませんし)

ポートフォリオサイトテンプレートの使い方について

ダウンロードした後に色々書き換えなければならないのですが、書き換え箇所について解説しておきます。

最低限書き換える部分
  1. titleタグが『Your Portfolio』になっているので変更
  2. descriptionが『私のポートフォリオサイトです』になっているので変更
  3. サイトのタイトル部分が『Your Portfolio』になっているので変更
  4. Worksの画像、テキスト、リンクのURLや使用言語を変更
  5. Skillsのスキル内容や画像、パーセンテージ(data-progressなども併せて)を変更
    パーセントは10%刻みなら30%~90%の間ならhtml変更のみで対応可能
  6. サービス内容を変更(就活用とかであれば丸ごと削除ですね)
  7. About Me部分の画像、テキスト、名前を変更、GithubのページがあればURLを変更
  8. ContactのメールやSNSのリンク先を変更
  9. サイト一番下のCopyright部分の『年』と『Your Name』を変更

テキストについては所々例を入れていますが、自分のスキルレベルに見合った内容に書き換えてください。

基本的に重要視されるのがWorksのリンク先の各成果物なので、トップページはそこまで凝りすぎない程度にとどめておくのがオススメ。

デザイン崩れがなければひとまずOKくらいでいきましょう。

ポートフォリオサイトに使用する画像について

拾ってきた画像を使用すると再配布にあたるので、デモ画像のみ配布していまず。
それを参考に自分で画像を作成して下さい。

また、各セクションの背景には画像を使用できます。

簡単に印象を変えることができるのでやってみてください。CSSを見ればやり方はすぐにわかるかと思います。

maipyon

セクションに画像を使う場合は、1920px × 1080pxを使用しましたが、画像デザインやPC画面サイズによってデザインが変動するので調節!

なお、Skillsに使用する画像は正方形の各言語のロゴを想定しています。

プログラミング言語のロゴサイトを解説した記事(外部サイト)などを参考に、DLして使ってみてください。

maipyon

個人的にはsvgアイコンを使うのがオススメ!

ポートフォリオサイトテンプレートのホスティング方法

配布したファイルを(index.htmlをChromeにドラッグ&ドロップするなどして)確認・編集しつつ良いものができたら、ホスティングしましょう。

ホスティングとは、サーバーにファイルをアップロードして誰でも閲覧できるようにすることを言います。

今回の記事では、ポートフォリオの成果物としてWordPressでサイト制作をする人が多いので、WordPressを成果物として掲載する人向けの方法を書いていきます。

>>配布ファイルのダウンロードはこちら

まずはサーバーをレンタルする

まずはサーバーをレンタルします。

説明するとかなり長くなるので、以下の記事にまとめました!

ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】 ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】 この記事の通りに進めれば、30分でWordPressの立ち上げ・ポートフォリオのアップロードが完了します!ポートフォリオ作成時のホスティングやWordPress学習の参考になる記事になっています。

>>レンタルサーバーの契約方法の解説記事

上記記事なら、WordPressのインストールまで滅茶苦茶簡単に終わるのでオススメです。

無料のサーバーなんかもありますが、WordPressインストールできなかったり、自動広告がつくなど制約があります。

そのためサーバーはお値段も優しいConoHa WINGがオススメです。

ファイル構成を整理して、アップロード

ファイル構成を変更することで、ポートフォリオサイトを以下のようにすることができます。

(あなたが『testsite.com』というドメインを取得したとして話を進めていきます!)

testsite.comのトップページ→ポートフォリオサイトトップページ

testsite.com/wordpress/→ワードプレスサイトのトップページ

maipyon

今のままだと、testsite.comにアクセスしたらワードプレスのトップページに飛ぶので、それを変更します!

ConoHaのサイト管理→ファイルマネージャーを開きます。

ホスティングのやり方

WordPressダウンロード後のファイルは以下のような形式になっているかと。

ホスティングのやり方

上記のファイル構成(testsite.com配下)を、以下のように変えます。

ポートフォリオ用のファイル構成

こうすることで、

testsite.comのトップページ→ポートフォリオサイトトップページ

testsite.com/wordpress/→ワードプレスサイトのトップページ

となります。

maipyon

URLとフォルダ名が一致するので、『wordpress』というフォルダ名を変更した場合
testsite.com/[フォルダ名]/  がワードプレスサイトのトップページとなります!

なお、上記ファイル構成に変更した場合、WordPressログイン画面が『testsite.com/wordpress/wp-admin/』に変更になるので覚えておいて下さい!

逆に、

testsite.comのトップページ→ワードプレスサイトのトップページ

testsite.com/portfolio/→ポートフォリオのトップページ

とする場合は、以下のファイル構成にしてください。

ホスティングのファイル構成2

porfolioフォルダを新規追加して、そこに今回配布したファイルを入れ込むだけ。

maipyon

すでにブログを運営している人とかはこの構成の方がいいでしょう。
そうでない人はこの構成は(ポートフォリオを見る人にとって)わかりづらいのでやめた方がいいです。

その他ページについても同じようにホスティングしよう

作品を追加していく場合、同じようにフォルダを作成して、そこの配下に作品を入れていきましょう。

そしてその後、ポートフォリオトップページからリンクを付けてあげましょう。

例えば架空の化粧品メーカーのLPを作った場合は以下の画像のようなファイル構成。

ホスティングで作品を追加する

testsite.com/cosme_lp/へアクセスしたらLPが表示されると思うので、リンクをトップページに追加してあげましょう!

上記のように作品を追加していけば、案件獲得できるポートフォリオサイトができること間違いなしです!

ポートフォリオサイトテンプレートを使って案件獲得しよう!

当サイトで紹介しているポートフォリオサイトテンプレートが役に立てれば嬉しいです!

ちなみに、ポートフォリオなしだとマジで案件とれません。

クラウドワークスとかで50件申し込んでも0案件だったみたいな話を聞きました。

ということで、本記事のようなポートフォリオサイトは必須というわけですね。

是非ダウンロードして色やテキストをカスタマイズして使ってみてください。

サーバーへのアップロードに関してもかなり丁寧に書いたので、サーバー契約~ホスティングまで一貫して参考になればと思います!

ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】 ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】 この記事の通りに進めれば、30分でWordPressの立ち上げ・ポートフォリオのアップロードが完了します!ポートフォリオ作成時のホスティングやWordPress学習の参考になる記事になっています。