ポートフォリオを作りたいけど、簡単に作る方法が分からない！
カスタマイズ可能なテンプレートってないですか？
ポートフォリオサイトを作るときに、参考になるテンプレートがあると心強いですよね。
という事で、ポートフォリオテンプレートを作成しました。
- デモページはこちら
- ダウンロードはこちら(注意事項など、記事を一通り読んでからDLをお願いします)
このポートフォリオサイトテンプレートは無料で商用・非商用問わずお使いいただけます。
zipファイルの解凍後に使ってください。
また、ポートフォリオサイトテンプレートのカスタマイズは自由にしてください。
むしろ、カスタマイズしないと『そのまま持ってきただけ』と分かるので絶対にダメです。 配色やレイアウト、フォントなどを変えつつ自分だけのポートフォリオを作ってみて下さい！
無許可の再配布・再販売は禁止します。
本テンプレート使用によるいかなる損害についても、当サイトは責任を負わないものとします。
使用に当たってリンクとクレジットの表記は不要ですが、Xやブログなどで、当テンプレート(当記事)を紹介していただけると助かります。
例えばgitから、当記事へのリンクを出してもらえると嬉しいです。
カスタマイズ方法やファイル内容の詳細については記事の後半にて掲載していますので、本記事を最後まで読みつつ使ってもらえたらと思います！
上記ポートフォリオは、実際に案件獲得のために使用したポートフォリオをシンプルなデザインに変更したものです。
つまり、このポートフォリオトップページの構成で案件を獲得できているため、良いポートフォリオではないかなと思います。
今までに500回以上DLされています。
本記事では、当テンプレートの使い方とサーバーへのアップロード方法などを細かく解説していきます！
ポートフォリオサイトテンプレートの全体デザイン
テンプレートの全体デザインは以下の通り。
スマホでのレスポンシブにも対応しています。
詳細はデモページをご確認ください。
なお、当サイトのものとわかるようにデモページは名前に『maipyon』を入れた状態ですが、配布ファイルは上記画像のデザインにしています。
スキルとかサービス内容とかテキストは超適当です。(私PhotoShop全然使いませんし)
ポートフォリオサイトテンプレートの使い方について
ダウンロードした後に色々書き換えなければならないのですが、書き換え箇所について解説しておきます。
- titleタグが『Your Portfolio』になっているので変更
- descriptionが『私のポートフォリオサイトです』になっているので変更
- サイトのタイトル部分が『Your Portfolio』になっているので変更
- Worksの画像、テキスト、リンクのURLや使用言語を変更
- Skillsのスキル内容や画像、パーセンテージ(data-progressなども併せて)を変更 パーセントは10%刻みなら30%～90%の間であればhtml変更のみで対応可能
- サービス内容を変更(就活用とかであれば丸ごと削除)
- About Me部分の画像、テキスト、名前を変更、GithubのページがあればURLを変更
- ContactのメールやSNSのリンク先を変更
- サイト一番下のCopyright部分の『年』と『Your Name』を変更
テキストについては所々例を入れていますが、自分のスキルレベルに見合った内容に書き換えてください。
基本的に重要視されるのがWorksのリンク先の各成果物なので、トップページはそこまで凝りすぎない程度にとどめておくのがオススメ。
デザイン崩れがなければひとまずOKくらいでいきましょう。
ポートフォリオサイトに使用する画像について
拾ってきた画像を使用すると再配布にあたるので、デモ画像のみ配布しています。
それを参考に自分で画像を作成して下さい。
また、各セクションの背景には画像を使用できます。
簡単に印象を変えることができるのでやってみてください。CSSを見ればやり方はすぐにわかるかと思います。
セクションに画像を使う場合は、1920px × 1080pxを使用しましたが、画像デザインやPC画面サイズによってデザインが変動するので調節！
なお、Skillsに使用する画像は正方形の各言語のロゴを想定しています。
プログラミング言語のロゴサイトを解説した記事(外部サイト)などを参考に、DLして使ってみてください。
個人的にはsvgアイコンを使うのがオススメ！
ポートフォリオサイトテンプレートのホスティング方法
配布したファイルを(index.htmlをChromeにドラッグ&ドロップするなどして)確認・編集しつつ良いものができたら、ホスティングしましょう。
ホスティングとは、サーバーにファイルをアップロードして誰でも閲覧できるようにすることを言います。
今回の記事では、ポートフォリオの成果物としてWordPressでサイト制作をする人が多いので、WordPressも成果物として掲載する人向けの方法を書いていきます。
本サイトでは、各レンタルサーバーでのポートフォリオの掲載方法を紹介しています。
▼料金が安くてポートフォリオサイトには一番オススメ
▼コストとスピードのバランスが良いサーバー
▼老舗で信頼感の高いサーバー
まずはサーバーをレンタルする
まずはサーバーをレンタルします。
サーバーはロリポップ！のライトプラン
がオススメです。
他サーバーと比較してダントツで安く、月額264円～となっており、ポートフォリオ向きです。
契約方法やポートフォリオファイルの掲載方法などは以下の記事で完全解説していますので是非参考にしてください！
無料のサーバーなんかもありますが、WordPressインストールできなかったり、自動広告がつくなど制約があります。
そのためサーバーはどうしても有料のものが必要になります。
複数の成果物をアップロードするにはどうすればいい？
ファイル構成を変更することで、ポートフォリオサイトを以下のようにすることができます。
testsite.comのトップページ→ポートフォリオサイトトップページ
testsite.com/wordpress/→ワードプレスサイトのトップページ
契約したサーバー内のファイル構成を例えば以下のように変えます。
こうすることで、
testsite.comのトップページ→ポートフォリオサイトトップページ
testsite.com/wordpress/→ワードプレスサイトのトップページ
となります。
URLとフォルダ名が一致するので、『wordpress』というフォルダ名を変更した場合
testsite.com/[フォルダ名]/ がワードプレスサイトのトップページとなります！
なお、上記ファイル構成に変更した場合、WordPressログイン画面が『testsite.com/wordpress/wp-admin/』に変更になるので覚えておいて下さい！
逆に、
testsite.comのトップページ→ワードプレスサイトのトップページ
testsite.com/portfolio/→ポートフォリオのトップページ
とする場合は、以下のファイル構成にしてください。
porfolioフォルダを新規追加して、そこに今回配布したファイルを入れ込むだけ。
すでにブログを運営している人とかはこの構成の方がいいでしょう。
そうでない人はこの構成は(ポートフォリオを見る人にとって)わかりづらいのでやめた方がいいです。
作品を追加していく場合、同じようにフォルダを作成して、そこの配下に作品を入れていきましょう。
そしてその後、ポートフォリオトップページからリンクを付けてあげましょう。
例えば架空の化粧品メーカーのLPを作った場合は以下の画像のようなファイル構成。
testsite.com/cosme_lp/へアクセスしたらLPが表示されると思うので、リンクをトップページに追加してあげましょう！
上記のように作品を追加していけば、案件獲得できるポートフォリオサイトができること間違いなしです！
どのサーバーで契約しても、ファイル構成に大きな違いはないので上記を参考にセッティングしてみてください。
ポートフォリオサイトテンプレートを使って案件獲得しよう！
当サイトで紹介しているポートフォリオサイトテンプレートが役に立てれば嬉しいです！
ちなみに、ポートフォリオなしだとマジで案件とれません。
クラウドワークスとかで50件申し込んでも0案件だったみたいな話を聞きました。
ということで、本記事のようなポートフォリオサイトは必須というわけですね。
是非ダウンロードして色やテキストをカスタマイズして使ってみてください。
以下の記事でサーバーへのアップロードに関してもかなり丁寧に書いているので、サーバー契約～ホスティングまで一貫して参考になればと思います！
