<目次リストを追加する領域>
ポートフォリオは日本語で「書類を持ち運ぶための入れ物」を意味し、自分の経歴や作品をまとめたものを指しています。ポートフォリオの中身は状況や時間の経過に合わせて変更する必要があったり、アップデートされたりするものであり、書類を綴じる「ファイル」とはニュアンスが異なります。
後からコンテンツを足したり変更したりすることが簡単なホームページは、ポートフォリオとして利用するのに便利です。動きを見せたい作品も掲載できて、端末があればいつでもどこでも見てもらうことができます。
ポートフォリオはエンジニアやデザイナーの就職・転職ツール
エンジニアとデザイナーはものを作る業種です。就職や転職活動のときは履歴書と経歴書に加え、自分の作品を示せるポートフォリオが必要になります。
エンジニア志望の方なら、ホームページのポートフォリオに自分がプログラミングしたアプリやサービスなどを設置しましょう。ホームページでなら実際に動かしてもらうことも可能です。
デザイナー志望の方は、これまでデザインした作品のデータや写真をまとめるとよいでしょう。動画や動きのあるコンテンツなどの制作物も、ホームページでなら十分に表現できます。
ホームページのポートフォリオは紙とどう違う？
紙に出力したポートフォリオでは、静的なグラフィックは表現できても、動的なアプリやコンテンツなどの制作物を表現するのには向いていません。ホームページのポートフォリオであれば、見る人が実際に動く様子を見たり、動かしたりすることも可能です。
また、Web関係のエンジニアやデザイナー志望の場合、ホームページを作ること自体が自分のスキルを示すことにもなります。
ポートフォリオサイトの作り方
ポートフォリオサイトを作るには、ホームページのデザインをPhotoshopなどで制作し、テキストエディタなどでHTMLとCSSのコーディングをします。
載せる作品が少ないのであれば、この機会にサンプルとして作り足すことも考えましょう。製本した紙のポートフォリオとは違い、ホームページなら後から作品を足すことも容易です。
もうデザインで悩まない！テンプレートにおまかせ
HTMLやCSSを使えば、オリジナリティの高いポートフォリオを作成できます。しかしレイアウトや構成を考え、必要な画像を作成するところから始めなければなりません。当然HTMLとCSSの高度な知識も求められます。これでは、ポートフォリオの完成までに膨大な時間を要するでしょう。
そこで活用したいのが、ポートフォリオ向けのHTMLテンプレートです。
ポートフォリオ向けのHTMLテンプレートには難しく思えるデザインが簡単に作れ、作品を閲覧しやすいナビゲーションメニューなどもセットされています。見やすさとデザイン性を両立させたポートフォリオサイトを作成できるでしょう。また大幅に制作時間を短縮しながら、難しいデザインを再現することも可能です。
自分の作品や記事を入れてポートフォリオを完成させよう
ホームページで作るポートフォリオには制作物のビジュアルだけでなく、コンセプトや誰に向けて作ったものかの説明と、自分が担当した部分や制作期間などの詳細情報も一緒に記載しておきましょう。
制作したときの想いやとくに苦労した点、工夫した点も加えるとより魅力的になります。
ポートフォリオには、制作物の画像やビジュアルデザインを盛り込みます。こうした画像とともに掲載したいのが以下の情報です。
- 制作コンセプトやテーマ
- どのようなターゲットを視野に入れて制作したか
- （複数人で制作したものであれば）自分が担当した箇所の詳細
- 制作に要した期間
- 苦労した箇所
- 工夫したポイント
このような画像からは伝えきれない補足情報を書き添えることで、自分のスキルや魅力を伝えられます。
またポートフォリオサイトには問い合わせ欄を設けるのが一般的ですが、これとは別に自分のメールアドレスやSNSのアカウント情報も入れましょう。採用担当者が連絡をとりやすくなります。
無料のおすすめhtmlポートフォリオテンプレート
HTMLテンプレートで検索すると、さまざまなサイトで数多くのHTMLテンプレートが提供されています。
ここでは、どのような基準でHTMLテンプレートを選べばよいかを見ておきましょう。また、おすすめのHTMLテンプレートを3つ紹介します。HTMLテンプレートを選定する参考になさってください。
HTMLテンプレートを選ぶ基準
HTMLテンプレートを選ぶ際は以下の項目をチェックしましょう。
- レスポンシブ対応
- ポートフォリオに適したデザイン
- 商用可能
- 情報を追加しやすい
スマートフォンの利用率が高い昨今、スマートフォン端末で閲覧しても見やすいサイト設計は集客面でも、またSEOの観点からも欠かせない要素です。自分でテンプレートを編集してレスポンシブ対応にすることはもちろん可能ですが、設定の手間が増えるでしょう。
またあらかじめポートフォリオサイト用に作られたHTMLテンプレートなら、ポートフォリオサイトに必要な項目がすでに含まれるので便利です。
自分でHTMLやCSSを編集する際に操作しやすいHTMLテンプレートを選ぶのも重要です。
HTMLテンプレートを選択する際に重要なのは、ポートフォリオサイト制作の効率が上がることです。自分のポートフォリオサイトに必要な要素をあらかじめピックアップし、必要十分なHTMLテンプレートを選びましょう。
無料のHTMLテンプレートを3つ紹介します。いずれも無料でダウンロードできます。またスマートフォン対応であり、商用利用可能です（2021年5月現在）。
ポートフォリオHTMLテンプレート（ベーシック）
https://webdesigner-go.com/template/portfolio-02/
シンプルなHTMLテンプレートです。ベーシックの他にスプリットスクリーン、ビジュアル、ガーリーとバリエーションがあります。デモに加えてカスタマイズ事例も掲載されており、デザインで悩む時も心強いでしょう。
非常にシンプルなHTMLテンプレートなので、カスタマイズ次第で無限にオリジナリティを出せるのが最大の魅力です。
無料ホームページテンプレート.com
HTML5で作成されたHTMLテンプレーです。1ページのみのシンプルなデザインのHTMLテンプレートなので、ポートフォリオサイトとして活用しやすいでしょう。デモとともにシミュレーターも用意されていますから、ダウンロード前にテンプレートのイメージを細かに確認することも可能です。
templatewire
クリエイティブ職向け1ページのポートフォリオサイトの他、用途別に様々なテンプレートが用意されたサイトです。有料のHTMLテンプレートも用意されており、テンプレートの選択肢が豊富な点が魅力でしょう。いずれも無料で商用可。レスポンシブ対応のHTMLテンプレートです。
更新するなら作成サービスもおすすめ
HTMLテンプレートを活用すれば、HTMLとCSSを編集してポートフォリオサイトを作るハードルを下げることができます。しかし更新やFTPアップなどの手間がかかるデメリットがあります。
情報の更新が頻繁に行われるタイプのポートフォリオや、ポートフォリオ以外の用途としても活用する予定がある場合は、ホームページ作成サービスやCMSといった選択肢を検討するのもよいでしょう。
ホームページ作成サービスでは、ポートフォリオサイト用のテンプレートを用意しているところもあります。大まかなデザインはテンプレートにセットされているので、細かい部分を自分好みに設定するだけ。
ドラッグ＆ドロップの直感的な操作のサービスも多いので、ホームページ構築に疎くても簡単に作れます。好きなテンプレートのデザインを選んで、あなただけのポートフォリオサイトを作りましょう。
1．ジンドゥー（Jimdo）
出典：ジンドゥー（Jimdo）
「ジンドゥー（Jimdo）」は、ウェブサイトの知識は一切不要。誰でも簡単かつ手軽に本格的なポートフォリオサイトを作成できるサービスです。
美しいデザインのテンプレートも用意されており、スライドショーも簡単に設定できます。メディアライブラリと大容量ストレージが使えるので、作品数が多い方や動画などのデータ量のある作品を載せたい方におすすめです。
InstagramやFacebookなどのSNSに作品をアップしている方は、連携させるだけでポートフォリオとシェアできます。
- 料金：無料（有料プランもあり）
- 商用利用：◯
- 独自ドメイン：無料プランは×（有料プランは◯）
- 容量：500MB
- 広告表示：あり（有料プランはなし）
- 特徴：直感的にページのレイアウト変更が可能、SNSとの連携が簡単
2．ワードプレス（WordPress）
「WordPress（ワードプレス）」はHTMLやCSSの知識さえあれば、自由度の高いポートフォリオサイトを作成できるサービスです。テンプレートをアレンジし、プラグインを追加することで、自分好みのサイトを実現できます。
最近では企業ホームページをWordPressで制作する事例も増えています。ポートフォリオサイトをWordPressで作れば、スキルのアピールにも役立つでしょう。
ただし、テーマのデザインが無数にあるため選びにくい可能性は否めません。また、サポート体制もないので、データ更新や不具合が発生した際は自己責任で対応する必要があります。ウェブサイトに関する相当な知識が求められる点はデメリットです。
- 料金：無料（有料プランもあり）
- 商用利用：◯
- 独自ドメイン：無料プランは×（有料プランは◯）
- 容量：3GB
- 広告表示：あり（有料プランはなし）
- 特徴：無料テーマやプラグインが利用できカスタマイズ性が高い
関連記事：あ
3．ウィックス（WiX）
出典：ウィックス（Wix）
「WiX（ウィックス）」ではデザイナーやアートディレクター、映像作家向けなどの多彩なテンプレートを利用可能。ブログの併設もできるので、SEOでホームページ訪問者を増やせるでしょう。
無料のサービスで気軽に利用できるので、作品のジャンルが多すぎてごちゃつきを感じる場合には、ホームページ自体を複数作るのも一つの手です。
- 料金：無料（有料プランもあり）
- 商用利用：◯
- 独自ドメイン：無料プランは×（有料プランは◯）
- 容量：500MB
- 広告表示：あり（有料プランはなし）
- 特徴：選べるデザインテンプレート多数
4．アメーバ オウンド（Ameba Ownd）
「Ameba Ownd（アメーバ オウンド）」は、国内最大規模の無料ブログサービス「Ameba」のホームページ作成サービスです。
日本の企業が運営しており、操作性が良いのがポイント。ドラック＆ドロップの簡単操作だけでおしゃれなホームページに仕上がります。
スターバックスなどの有名企業や有名人の利用者が多く、ブランディング重視のポートフォリオに向いています。
- 料金：無料（有料プランもあり）
- 商用利用：◯
- 独自ドメイン：取得済みのドメインを使うのは無料
- 容量：1GB
- 広告表示：あり（有料プランはなし）
- 特徴：1つのアカウントで複数のホームページ作成が可能
5．ストライキングリー（Strikingly）
「Strikingly（ストライキングリー）」は、無料で簡単にホームページが作れるサービス。アカウント登録後すぐのテンプレート選択画面で、ポートフォリオ向けのものを選びましょう。
編集画面には最初からダミーの写真やテキストが入った状態になっているので、どこにどんなコンテンツを入れるべきかがわかりやすいつくりです。画像編集や、テンプレートのアレンジもできます。
- 料金：無料（有料プランもあり）
- 商用利用：◯
- 独自ドメイン：無料プランは×（有料プランは◯）
- 容量：500MB
- 広告表示：あり（一部有料プランはなし）
- 特徴：シングルページのみ作成可能、スマホアプリあり
6．アイムクリエイター（IM Creator）
「IM Creator（アイムクリエイター）」は、アメリカのホームページ制作サービスです。豊富なテンプレートから「アートデザイン」や「写真」などのカテゴリーを選択すれば、見栄えの良いポートフォリオサイトを実現できます。
見やすくシンプルなデザインのテンプレートが多く、操作画面もシンプル。独自ドメインを利用する以外は、すべての機能を無料で利用できます。
- 料金：無料（有料プランもあり）
- 商用利用：◯
- 独自ドメイン：無料プランは×（有料プランは◯）
- 容量：無制限（1ページから1,000ページまで）
- 広告表示：あり（有料プランはなし）
- 特徴：IMクリエーターで簡単、高速編集
7．ペライチ
出典：ペライチ
「ペライチ」は、テンプレートを選択してコンテンツを入力、公開ボタンを押す3ステップでホームページを作成できるサービスです。ポートフォリオなら何もない「ブランク」テンプレートを選び、欲しい要素を「ブロック」で入れていく作り方もあります。
検索エンジンに最適化しているので、検索で見つけてもらいやすいポートフォリオサイトが作れるのが魅力です。
- 料金：スタートプランは無料（有料プランもあり）
- 商用利用：◯
- 独自ドメイン：スタートプランは×（有料プランは◯）
- 容量：スタートプランで公開できるのは1ページまで
- 広告表示：スタートプランはあり（一部有料プランはなし）
- 特徴：シンプルなホームページを手軽に作って公開できる
まとめ
ポートフォリオサイトは、ホームページ制作サービスのテンプレートを利用すれば、誰でも簡単に作成できます。無料の範囲内でもおしゃれなデザインに仕上げられるので、自分好みのものを探してみましょう。
Web関係の職種を希望する方は、ホームページのポートフォリオで自分のスキルをアピールするのがおすすめ。プロフィールや問い合わせ方法も掲載し、わかりやすいホームページ作成を心がけましょう。自分の作品の魅力を最大限に伝えられるポートフォリオサイトを目指してくださいね。
また、ご自身でホームページを作成する時間がない方や、クオリティの高いホームページが欲しい方は、ジンドゥーのホームページ制作プランもオススメです。プロのデザイナーに任せておくだけでホームページが完成します。
▼詳細はこちら▼
