ポートフォリオサイトを作りたいけど、一からWEBサイトを作るのは難しそうだし時間がかかる…そう感じて腰が重くなっている人も多いのではないでしょうか。
しかしコーディングができなくても、ポートフォリオを作る方法はたくさんあります。わたし自身、未経験からデザイナーに転職した時や仕事案件に応募するのにいくつもポートフォリオを作りましたが、全てポートフォリオ用のプラットフォームやノーコードツールを使って問題なく作成できました！
この記事では、実際に使ってみた体験をもとに一部キャプチャ画像付きでコーディングなしでポートフォリオを作る方法を紹介します。
プラットフォームを使ってサクッと作る方法から、ノーコードツールで自作する方法まで幅広く紹介するので、自分に合った方法を見つけてみてください！
- ポートフォリオを作りたいデザイナー、イラストレーター、ライター、カメラマンなど
- できるだけすぐにポートフォリオを作りたい人
- ポートフォリオサイトを作るにはどんな手段があるか気になる人
ポートフォリオサイトを作る方法は大きく2種類
ポートフォリオサイトを作る方法は大きく分けると、コーディングでゼロから実装する方法とコーディングなしで作る方法の2種類があります。
コーディングで実装する場合はデザインの自由度が高く、コーディングスキルのアピールにもなりますが、HTML・CSS・Javascriptなどの知識が必要なため、ハードルが高めで作るのに時間もかかります。
一方コーディング不要で作る方法なら、プラットフォームやノーコードツールを使ってコードを書かずにポートフォリオサイトが作れます。急ぎでポートフォリオを作りたい場合や、まずは作品を見せる場所を確保したい場合にも向いています。
この記事ではコーディング不要で作る方法に絞って紹介していきます！
プラットフォームを使う方法
アカウントを登録してすぐに使えるプラットフォームを使う方法です。
自分でデザインを考えたりスマホのレイアウトに対応させたりする必要がなく、とにかく手軽に作れるのが特徴です。素材集めや細かい設定に時間をかけず、作品を見せることに集中できます。
RESUME
| 手軽さ | ◎ |
| カスタマイズ性 | △ |
| パスワード設定 | 作品ごとに設定可能 |
| 並び替え | 先頭固定表示のみ |
シンプルで洗練されたデザインが特徴のポートフォリオ作成サービスです。無料で作品ごとにパスワードをかけられるのも嬉しいポイントです！実際にRESUMEで作った画面がこちら。
経歴やスキルセットを入力できる欄もあるので、作品だけでなく自分のプロフィールも見せられます。
詳細ページにはリッチテキストで画像や説明文を入れることもできます！デザインの意図や制作背景を言葉で補足できるので、作品の見せ方にこだわりたい人にも向いています。
一方で、アイコンとヘッダー画像しかカスタマイズできないため個性は出しにくく、作品の並び替えやフィルター表示もできないため、見せ方には多少制限があります。
foriio
| 手軽さ | ◎ |
| カスタマイズ性 | △ |
| パスワード設定 | 有料プランのみ可 |
| 並び替え | ◯ |
RESUMEと同じく、アップするだけでポートフォリオサイトが作れるサービスです。RESUMEよりも細かめにサムネイルがずらっと並びます。foriioで作ったポートフォリオの画面はこちら。
foriioはタグをつけてフィルター表示ができるので、掲載する作品が多くなっても整理して見せやすいです。
並び替えも自由自在にできるので管理も楽々◎パスワードをつけたり、アップ済みの作品を下書きに戻したりするには有料プランへの加入が必要です。
また、foriioには依頼フォームが標準で用意されているので仕事の依頼を受けたい人にもおすすめ！ただし、RESUMEと同様他の部分のカスタマイズの自由度は低めで個性は出しにくいので、転職活動には向いていないかもしれません。
Notion
| 手軽さ | ◯ |
| カスタマイズ性 | ◯ |
| パスワード設定 | アクセス権限の設定は可能 |
| 並び替え | ◯ |
もともとメモ・タスク管理ツールとして知られるNotionですが、ページをWEBサイトとして公開する機能を使えばポートフォリオとしても活用できます。データベースのギャラリービューを使えばサムネイルを並べたり、タグをつけて絞り込み表示したりもできます。
サムネイルのサイズや一覧画面で表示する項目などを自分でカスタムができる分、RESUMEやforiioなどのポートフォリオ専用プラットフォームよりも自由度が高いのがポイント！
真っ白なページにデータベースや画像・文章等自由に追加していくような操作感なので、プロフィール部分や作品の見せ方にこだわりたい・フォーマット通りじゃ物足りないという人にはおすすめです。
また、Notionでは他の人が作ったテンプレートを使うこともできるので、操作にあまり自信がない人もすぐに使い始めることができます。公式のマーケットプレイスで「Portfolio」と検索するとすでに100件以上のテンプレートが！
作品管理ができるNotionテンプレートは当サイトでも配布しているので、気になった人はぜひ使ってみてください🙌（もちろんポートフォリオサイトに使っていただいてもOKです！）
Tumblr
| 手軽さ | ◯ |
| カスタマイズ性 | ◯ |
| パスワード設定 | サブブログであればサイト全体に設定可能 |
| 並び替え | 不可 |
TumblrはブログとSNSをかけ合わせたようなサービスです。WEBサイトとして投稿したサムネイルを一覧表示することもできるので、ポートフォリオサイト的な使い方ができます。
SNSやブログ感覚で投稿することで作品を追加できるので、手軽に操作をすることができます！Tumblrで作った画面はこちら。
他の人が作ったテンプレートを使うことができるので手軽に見栄えの良いサイトを作ることができます。細かいフォントやサムネイルのサイズを変更できたり、追加のCSSも編集できたりとカスタマイズ性も高め。イメージ画像はIllustfolio 4という無料のテンプレートを使用させていただいています。
ただし、ポートフォリオ専用のプラットフォームというわけではないので作品の管理面はそこまで強くないかも。操作感のイメージはブログの方に近い感じです。
ノーコードツールで自作する方法
コーディング不要でWEBサイトが実装できるノーコードツールを使うやり方です。
プラットフォームと違ってデザインをある程度自分で作り込む必要がありますが、その分オリジナリティが出せます。また、ツールを使いこなせること自体がスキルのアピールにもなるので、デザイン力やCMSが使えることをポートフォリオで示したい人・転職活動にも使えるポートフォリオが作りたい人に向いています！
Studio
| 手軽さ | 操作の知識が必要 |
| カスタマイズ性 | ◎ |
| パスワード設定 | サイト全体に設定可能 |
| 並び替え | CMSを使う場合は不可 |
コードを書かずにゼロからWEBサイトが作れる有名な国産ノーコードツールです！無料版は多少制限はありますが、ポートフォリオサイトを作るには十分な機能が揃っています。
CMS機能を使うと作品の追加・編集もしやすく、タグをつけて絞り込み表示もできるのでポートフォリオにはうってつけです◎
実際にはどんなかんじのページが作れるの？
イメージ用に管理人がサンプルサイトを作ってみたよ
ゼロからデザインができる分、Studioで作ったポートフォリオサイトがあればWEBデザインスキルを示すことができます。その上近年はStudioでWEB制作を行っている会社も増えているので、Studioが使えること自体もアピールになるかも！
メリットはたくさんある一方で、自由度が高い分操作を覚えるのには少し時間がかかります。レスポンシブデザインも自分で対応する必要があるので、時間がかかってでもこだわって作りたい人向けのツールです。
管理人Studioにもテンプレートもありますが、ある程度操作がわかっていないと使いこなすのは難しかったように感じました…
WordPress
| 手軽さ | サーバーの契約・操作の知識が必要 |
| カスタマイズ性 | ◎ |
| パスワード設定 | 記事毎・サイト全体共に設定可能 |
| 並び替え | プラグインを使えば可能？ |
WordPressとは、ざっくり言うとブログやWEBサイトを簡単に作れる無料ツールです。実際にWEBサイトとして公開するには、合わせてサーバー（インターネット上にデータを保存する場所）の契約が必要です。
WordPressで作られているWEBサイトは非常に多く、特にWEB制作業界に転職したい・仕事を受注したい場合はWordPressが使えること自体がアピール材料になります。
このサイトもWordPressのSWELL
というテーマ＋ConoHa WINGで契約したサーバーで作っています！
サイトとして公開するには有料でサーバーを契約する必要がありますが、すでにWordPressでサイトを運営している人はサブドメインで作れる場合もあります。今から新しくWordPressでサイトを作りたいなら、サーバー契約時に一緒にWordPressをインストールする（ほとんどのサーバーでオプションとして選択可能です）のが一番手軽です。
WordPressにはテーマ（サイトのデザインや機能をまとめたテンプレート）も豊富に用意されていて、テーマを選ぶだけでサイトの見た目を整えられます。
WordPressってなんだかちょっと難しそうだなぁ…
WordPressのカスタマイズ方法については別の記事でも紹介してるから、参考にしてみてね
どの方法が自分に向いてる？
紹介した方法をまとめると、目的別にこんな感じで選ぶのがおすすめです。
とにかく早く作りたい→RESUME・foriio
アカウントを登録してすぐに使えるので、急ぎでポートフォリオが必要なときに最適です。操作も簡単で迷いづらいです！
凝ったデザインはできないけどある程度の自由度がほしい→Notion
プラットフォームのフォーマットに縛られることがないので、データベースを増やしたりプロフィールや自由記述のセクションを追加することもできます。また、フィルター機能があったり作品の並び替えも可能なので、作品が増えても整理しやすいです。
イラストや写真を手軽に綺麗に見せたい→Tumblr
テンプレートを使えば手軽に見た目の綺麗なギャラリーサイトが作れます。SNS・ブログに投稿する感覚で作品を追加できるので、操作も手軽です。
WEBデザインスキルやCMSを使えることもアピールしたい→Studio、WordPress
デザインの自由度が比較的高く、ツールが使えること自体もアピールになります。
スキルになりうる分、操作方法を覚えたりデザインを自分で考えたりする必要はありますが、しっかり時間をかけてアピール材料になるポートフォリオサイトが作ってみたい人にはおすすめ！
まとめ
今回はHTMLなしでポートフォリオを作る方法を、プラットフォーム系とノーコードツール系に分けて紹介しました。
HTML・CSSが分からなくとも、自分の作品を見せる場所は作れます。まずは手軽に作れるRESUMEやforiioでサクッと作ってみて、慣れてきたらStudioやWordPressでこだわって作り直すのがおすすめかな？と思います。
気になる方法があればぜひ試してみてください！