【デザイン学生必見!】
ポートフォリオをゼロから作ろう!

【ノーコード】Wixでのポートフォリオサイトの作り方と作例を徹底解説

記事内にプロモーションを含む場合があります
Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Wix(ウィックス)で自身のポートフォリオサイトを手軽に作る方法を解説します。

デザイナーやイラストレーターの方がサイトで作品を公開する事は非常に重要。
しかし本格的なWebサイトの制作にはデザインスキル以外にHTML、CSS、JavaScript、SEOなど、様々なWeb制作の知識が必要です。

Wixはノーコードでサイト制作が行えるので、Web制作初心者の方にも安心して作れます。

TwitterやPixiv、instagram等のみで作品を公開している方必見!
より自身の作品をブランディングする上で欠かせない自サイトをWixを使ってゼロから構築しましょう!

Wixを使ったサイトの作例

上記はWix(ウィックス)を使ったサイトの作例です。

個人のポートフォリオサイトやコーポレートサイトなどのビジネス系サイト、EC機能を備えたネットショップやデザイン事務所などのサイト、健康やフィットネス系、音楽に特化したデザインなど、800点以上の高品質なテンプレートが準備されています。

上記サイトは私がWixを使って作成したサンプルです。
制作時間は1時間ちょっと。

テンプレートを選び、画像と文字をはめ込み、ドメインとSEOの設定を加えるのみ!
イラストレーターやデザイナー系の方が作品をシンプルに見せる上でよく使う形式のポートフォリオサイトです。

Wixを使ったサイト作成の流れ

Wixを使ったポートフォリオサイトを作る流れを解説します。
正直詰まる個所が無いのでそのまま進めていけば誰でも作れる設計になっていますよ。

アカウントを作成

STEP.1
アカウント連携
Wix公式サイトにアクセスし、Wix用のアカウントを作成します。

Google、Facebook、Appleと連携可能。
私はGoogleアカウントと連携させました。
STEP.2
設定項目を入力
サイト名、サイト作成の目的、サイトに追加したい機能を選択します。
これらの設定は後から変更できます。
FINISH
アカウント作成の完了
ダッシュボードが開きます。
これでWixのアカウント作成が完了しました。

サイトを編集

STEP.1
サイトを編集する
実際にサイトデザインを行いましょう。
ダッシュボード右上の [ サイトを編集 ] をクリックします。
STEP.2
サイトテンプレートの設定
スタイルやトップページデザインなどを選択し、サイトのテンプレートを設定します。
STEP.3
文字や画像を編集
変更したい文字、画像をクリックすると直感的&簡単に編集できます。
画像にリンクを追加、画像のレイアウトなど、設定から細かく追加変更が可能。

SEOツールの設定

Wixでのサイト制作がある程度完成したらGoogleにサイトを提出、SEO設定、サイト認証、サイトマップなどの設定を行いましょう。

独自ドメインに接続していないと出来ない設定が多々あります。
検索結果に関わる項目なので、無料プラン・有料のプレミアムプランに関わらず設定可能な項目は全て設定しておきましょう!

サイトの設定

サイト名、サイトアドレス(URL)、ファビコン、一般的なソーシャル画像の設定を行いましょう。

ファビコンとはブラウザのタブに表示されるサイト用のアイコンです。(詳しくはコチラの記事を参照。)
一般的なソーシャル画像とはいわゆるOGPの事、SNSにリンクをシェアした際に表示される画像です。(OGPについて詳しくはコチラの記事で解説しています。)

以上でWixを使ったサイト制作に必要な最低限の設定が行えました。
あとは時間が許す限りサイトを作りこんでいきましょう!

無料プランと有料プランの違い

無料プランと有料プランの違い、無料プランの使いどころや有料プランの利点について解説します。
具体的な金額なども交えてWixのプレミアムプランを深掘りいたします!

無料ドメイン・独自ドメイン

Wixの無料プランでは独自ドメインが使えません。

https://GメールのID.wixsite.com/hogehoge

無料ドメインはwixsite.comのサブドメイン扱いになり、自身の完全なるコンテンツとなりません。
いくら頑張った所で言わばwixsite.comの評価を上げる為の素材みたいな扱いですね。

また可能性は無いでしょうが、万が一Wixがサービス停止した場合、無料ドメインでせっせといくら頑張ってもドメインの価値は一瞬でゼロになります。

就活用に一時的にサクッとポートフォリオサイトを作るのであれば無料プランでも良いでしょう。
※無料で済ませるなら広告の無いAdobePortfolio(アドビポートフォリオ)の方が断然オススメです。


本格的にポートフォリオサイトを運営するのであれば独自ドメインの取得は必須!
独自ドメインとは下記のように自身が取得したドメインの事を指します。

https://www.burgsan.com/
https://sdesignlabo.com/

もし仮にWixからWordPress(ワードプレス)で構築したサイトに引っ越ししても、ドメインの価値や評価はそのまま受け継がれます。
サイトを長く運営するのであれば最初から独自ドメインを利用する事を強くオススメします。

なお、ドメイン取得費用はプレミアムプランに加入すると1年無料で付いてきます。
つまり初年度はWixの利用料のみ。

2年目から更新料が1,650円、月額100円ちょっとですね。
※Wixのプレミアムプランの詳細はコチラから確認できます。

独自ドメインだけ利用するなら?
独自ドメインのみ利用するのであればドメイン接続(月額500円)が最安値です。
ただしWixの広告は消えないのでアドバンスを50%OFF SALE(月額750円)で利用するのが一番賢いですよ。(アカウント開設時から24時間以内に申し込みしないと使えないので注意!)

SEO対策

Wixの無料プランはSEO対策が十分とは言えません。
先に解説した独自ドメインが使えないのでGoogleサーチコンソールの利用が不可。
(就活の際に見せるだけの一時的なポートフォリオサイトなら無料プランのままでも大丈夫です。)

しかし検索によるアクセス数を向上させ、幅広い層からのアプローチを実現するにはGoogleサーチコンソールとの連携が必須です。
Googleサーチコンソールとの連携には有料のプレミアムプランへのアップグレードが必要となります。

全サイトにプレミアムプランは適用されない
有料のプレミアムプランに加入しても、アカウント内で作成している全サイトにプレミアムプランが適用されません。対象となるサイト一つのみです。
都度必要なサイトに対してプレミアムプランに加入する必要があるので要注意!

無料とプレミアム、どちらがいいの?

Wixでのポートフォリオサイト制作を無料プランで行うかプレミアムプランで行うか、悩みますね。

前述しましたが、一時的にポートフォリオサイトを運営するだけなら無料プランで構いません。
※そもそも論ですが、ポートフォリオサイトを完全無料で作りたいならAdobePortfolio(アドビポートフォリオ)の方がオススメ、Wixと違って無料で広告が入りません。

しかしそれなりに長期間の運営を考えられているのであればWixのプレミアムプラン一択です。
機能性やデザイン等、数あるノーコードサイト制作サービスの中でもトップクラスのクオリティ。

シンプルで美しく、運営や制作で悩む事の無い設計。
WixはWeb制作初心者の方だけでなく、プロの方にもオススメできるサービスですよ。

どのプランがおすすめ?
ホームページプランにはVIP(月額2,700円)、アドバンス(月額1,500円)、ベーシック(月額900円)、ドメイン接続(月額500円)の4つが存在します。
通常のポートフォリオサイトならベーシックで十分ですが、アカウント作成時に付与される50%オフキャンペーンを活用したアドバンスはベーシックより安く、最も費用対効果が大きいプランです。
VIPは初心者の方には正直オーバースペック、ドメイン接続は広告が表示される。となるとベーシックより安く、尚且つ高機能なアドバンス一択ですね。

アドバンスに必要な費用

2年間のアドバンスプランに必要な合計費用です。
※アカウント開設時に24時間付与される50%OFF SALEを活用した場合の金額です。

・アドバンス24か月(50%OFF適用):14,520円(税込)
・.comドメイン取得費用(2年分、1年無料):1,650円(税込)
・プライベート登録(2年分):2,100円(税込)
計:18,270円(税込)

1年当たり9,135円、月額761円。
と、非常にお得な料金設定です。

プライベート登録とは?
Wixのプライベート登録を行わないと、ドメインの登録情報に自身の個人情報が表示されます。
「Whois」でドメインを検索すると自身の本名や住所、電話番号等がモロバレになるので注意!
プライベート登録は年間1,050円で利用できるので併せて活用される事を強く推奨します。

下記は私が契約しているエックスサーバーとドメイン更新に必要な費用(2年分)です。

・エックスサーバー12か月:13,200円(税込)×2年 計26,400円
・.comドメイン更新費用(2年分):3,456円(税込)
計:29,856円(税込)

1年当たり14,928円、月額1,244円。
2年目までは圧倒的にWixの方がお得な料金設定です。
3年目以降はWixが2,292円割高となり、運営7年目でエックスサーバーと同等の維持費用となります。


Wix(ウィックス)は知識ゼロでもノーコードでサイト制作ができ、ドメイン管理も全てWix上で完結。
サーバの設定も必要ナシ。

通常ゼロからサイトを立ち上げるにはサーバ契約、サーバ設定、CMS設定、ドメイン設定、サイト制作等が必要です。その点、Wixは知識が必要なサーバ設定やCMS設定を丸々飛ばせます。

慣れていないと非常にややこしいドメイン設定も迷うことなく1分で設定可能。
WixはWeb制作の知識ゼロの方にとって本当に優しい設計なのでプレミアムプランを利用する価値は十分過ぎるほどありますよ。

Wixの使いどころ

Wixは基本的に有料プランを想定したサービス内容になっています。
よって無料でポートフォリオサイトを運営したい方にWixはやや不向きです。

完全にサイトの維持費用が無料でそれなりのポートフォリオサイトを運営されたいのであればAdobePortfolio(アドビポートフォリオ)が最もオススメです。(Wixと違い、広告が入りません。)

有料のWixプレミアムプランは独自ドメインの接続やGoogleサーチコンソールと連携したSEO対策など。
本格的なサイト運営に必要不可欠な機能が全て備わっています。

ワンランク上のポートフォリオサイトの制作をされたい方は、Wixのアドバンスプラン+独自ドメイン取得の方が自由度が高くSEOに強いサイト制作が低額で実現できますよ。

どういったサイト、運営方針を目指すか事前によく練り、自身に適したサービスを選択しましょう!

AdobePortfolioについてもっと知る
AdobePortfolioの使い方や設定方法、サンプルサイトなどを詳しく解説しています。ポートフォリオサイトを無料&ノーコードで作成されたい方は是非ご覧ください!

その他ノーコードで作れるサイト制作ツール

Wix以外に存在するノーコードサイト制作サービスやポートフォリオサイト制作サービスです。

サービス名 種別、備考
AdobePortfolio ポートフォリオサイト、作例と使い方
Behance(ビハンス) Adobe提供のSNS
MATCHBOX(マッチボックス) エージェント連携型ポートフォリオサイト、作例と使い方
Jimdo(ジンドゥー) ノーコードサイト制作サービス
Strikingly(ストライキングリー) ノーコードサイト制作サービス
Ameba Ownd(アメーバ オウンド) ノーコードサイト制作サービス
IM Creator(アイムクリエイター) ノーコードサイト制作サービス
STUDIO(スタジオ) ノーコードサイト制作サービス
Salon.io ノーコードサイト制作サービス
ノーコード、色々あるけど結局どれがいいの?
正直ノーコードのサイト制作サービスはWixひとつで全て事足ります。
他に色々とサービスがありますが、ワンランク上の活用を考慮するならどれも有料プランが必須。
機能性やデザインに優れているWix以外を選択するメリットは特に見当たりません。
Wix、AdobePortfolio、Behance(ビハンス)、MATCHBOX(マッチボックス)の4つを押さえておけば十分ですよ。

おわりに

以上、Wix(ウィックス)を使ったポートフォリオサイトの作り方についてでした。
サイト制作の知識が一切無くてもWixなら直感的にポートフォリオサイトやECサイト等が作れます。

無料での利用が可能ですが、基本的に有料のプレミアムプランを想定した仕様になっています。
完全無料でポートフォリオサイトを作られたい方はAdobePortfolioを推奨します。

しかし本格的なサイト運営を前提にプレミアムプランと独自ドメインを活用すると一気に化けます。
煩雑なサイト運営の手順を大幅に簡略化でき、なおかつ直感的な操作で素早く美しいサイト制作ができるので、コンテンツ制作以外の余計な知識や手順が不要!

ブログやEC機能、チャットや様々な機能を後から追加する事も簡単なので、非常に拡張性の高いサービスですよ。

Wixは初めてのWebサイト制作の方からプロフェッショナルまで、全ての層にオススメできるノーコードサイト制作サービスと言えます。

ではまた!

商用利用可能な高品質素材

ポートフォリオテンプレート

ポートフォリオ用の高品質なテンプレート34選
デジタルポートフォリオ用のテンプレート35選
InDesign形式の高品質なポートフォリオテンプレート77選
AI形式の高品質なポートフォリオテンプレート25選
PSD形式のポートフォリオ用テンプレート12選
【InDesign】 A4横のポートフォリオテンプレート15選
【InDesign】 A4縦のポートフォリオが簡単に作れるテンプレート15選

印刷物のテンプレート

【名刺テンプレート】 高クオリティな名刺テンプレート50選
【名刺Part.2】高品質なミニマルデザインの名刺テンプレート18選
高品質な三つ折りパンフレットのテンプレート76選
【神速チラシデザイン】商用利用可能なフライヤーのテンプレート50選
【イラレ初心者でも自作可】商用可能で高品質なクリスマスカード素材53選
【商用利用可能】高品質な便箋のテンプレート50点を厳選

Web制作にオススメ

高クオリティなロゴのテンプレート50選
高品質なバナーテンプレート50選
Webサイトのデザインカンプ用テンプレート35選

その他のテンプレートや素材

ゲームUIに使える高品質なテンプレート48選
ゲームやイラストの背景素材66選
1枚絵として成立するクオリティの和風背景素材20選
【デザインモックアップ】様々な素材の高品質なモックアップ50選
イラスト初心者の為の便利なテンプレート
【商用OK!】フリーフォントと一味違う超高品質でユニークなフォント20選

最強素材リストの目次一覧
SCROLL
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!