【WordPress SWELLで作る!】ポートフォリオサイトの作り方

  • URLをコピーしました!
絵描き好きさん

ポートフォリオサイトってどんな風に作れば良いのかな?
WordPressのSWELLでポーフォリオを作るにはどうすれば良いの?

そんな疑問にお答えします

この記事ではこんな事がわかります

  • ポートフォリオサイトの構成
  • ポートフォリオの考え方
  • WordPressのSWELLのポートフォリオの作り方
卯月まめ

SWELLでのポートフォリオページ作り方も解説しています。

ポートフォリオは、イラストレーターにとって名刺のようなものだと考えられます。
クライアントに対して、見やすい、わかりやすい、伝わりやすいを意識して作る事が大事です。

CONTENTS

ポートフォリオサイトの構成

まずはポートフォリオサイトの構成を考えていきます。

ポートフォリオサイトにおいて、一番最初に表示されるトップページがもっとも重要です。
何を見せたいか、何をアピールしたいかを考えて構成していきましょう。

私のポートフォリオサイトです。参考になれば幸いです

一番上はもっとも見せたい最高作品のイラスト

ブログで作るポートフォリオ

自分の最高作品はこれだ!というものを1~3点ほど選び抜いて、一番上部の最も目につくところに置きましょう。
数点置く場合は、似たような構図や内容は避けて、いろんなバリエーションを意識して置くと、イラストの描ける幅を伝えやすくなります。

私の場合、上の動くイラストでインパクトを出して、すぐ下にこちらの静止画を表示しています。

ブログで作るポートフォリオ

描いたイラストに対する熱意や、工夫した事などを書くのは控えた方が良いでしょう。

卯月まめ

ポートフォリオは基本的に、簡潔でわかりやすい展示を目指します!

次に、自信のある作品や、実績のあるイラストをおく

ブログで作るポートフォリオ

次に、自信作をおいておきます。
イラスト内容や実績内容のバリエーションを多く置くのがポイントです。

数が多いものは展示するイラストを数点に絞り、実績やテーマごとに専用の記事を作って、リンクを貼っておくと良いでしょう。

最後はその他のアピールポイントをおく

ブログで作るポートフォリオ

デフォルメイラストやドット絵、背景、動画や3Dなど、上記に載せてないけど、持っているスキルをアピールするためにおいておきましょう。
ラフイラストと完成イラスト、キャラクターの設定画集などもありだと思います。

数が多いものは展示するイラストを数点に絞り、実績やテーマごとに専用の記事を作って、リンクを貼っておきましょう。

クリエイターである事が伝わるプロフィールを書く

プロフィールもきちんと書きます。

大事なポイントは、ここで書くのはクリエイターとしてのプロフィールだという事です。
クライアントとなる人が見ている事を意識して書きましょう。

ポートフォリオは、イラストでのアピールが重要なので、文字だけのプロフィールは簡潔にした方が良いでしょう。

プロフィールの内容例

  • 名前
    ペンネームやハンドルネームでも大丈夫ですが、あまり変な名前はあとで後悔するかもしれません。
    また、本名だとさらに信頼性が上がります。
  • 簡単な住所
    県と市まででOKです。
    詳細な住所は信頼性があがりますが、リスクも上がるので気を付けてください💦
  • 携わった業務内容(書籍の表紙、挿絵など)
    実績があれば信頼性が上がります。
  • 使用ソフト(Photoshop、Procreateなど)
    作品ごとに掲載するのもありです。
  • どんなタッチが得意なのか(リアル調、アニメ調など)
    得意なタッチなどを伝えておけば、そのタッチに近い依頼を頼まれやすくなります。
  • 苦手なイラストなど
    私は、頼まれると困るジャンルなどは、正直に書いてます。
  • 他のクリエイティブに関わるスキル(動画制作、Live2D、3D制作)
    イラスト以外にもできる事があれば強味になります!

自分の趣味や読んでいるマンガなど、制作関係とはまったく関係無い事を書くのはやめておいた方が良いですよ!💦

制作期間を書く

これぐらいの作品なら何日で制作できる」と言った感じで、制作に必要な時間や日数も書いておくと、クライアントとなる人は参考になるかと思います。

卯月まめ

あくまでもクライアント目線で作ります

連絡先を書く

お問い合わせフォームへのリンクや、メールアドレスを必ず載せて、連絡とれるようにしておきます。
また、どうしても無理な案件内容や、メールに記載してほしい内容も一緒に書いておきます。

例えばこんな感じ

  • アダルト、ギャンブル、消費者金融 、新興宗教系のご依頼はお断りしております。
  • イラスト制作のサイズ、納期、料金の記載を必ずお願いいたします。

SWELLのLPを利用してポートフォリオを作る方法

できればポートフォリオ専用のブログを作った方がいいです。
SWELLなら、スタイリッシュなポートフォリオサイトを簡単に作ることができます。

私の場合は、ポートフォリオページだけブログから独立させて作りたかったので、SWELLの「LP」という機能を使っています。

ブログのメニューが、ポートフォリオと関係ない内容だったからです💧

LPで記事を作る事で、ブログの上部メニューを非表示にする事ができます。

ここではSWELLのLPを使ったポートフォリオサイトの作り方を解説していきます。

STEP
LPの新規作成をする
ブログでポートフォリオを作る方法
  1. WordPress編集ページのメニューから「LP」をクリック
  2. 「新規追加」をクリック
STEP
ヘッダー画像を付ける
ブログでポートフォリオを作る方法

↑この部分です。

一番上に表示されるポートフォリオの表紙部分のようなものですね。
ここは最初に目に映る場所ですので、インパクトのあるもの、自信のあるものを選びましょう。


ブログでポートフォリオを作る方法

左側のブロック追加メニューから「カバー」を選択します。


ブログでポートフォリオを作る方法

ブロックの上に出るメニューから、「メディアを追加」で表示したい画像を選びます。動画もいけます。


ブログでポートフォリオを作る方法

ブロック上のメニューから「配置を変更」→「全幅」を選択すると、横幅ピッタリに表示されるようになります。
タイトルを入力…」で画像の上にテキストを入力する事もできます。



ブログでポートフォリオを作る方法

左側にあるブロック編集メニューから表示方法を編集します。

ブログでポートフォリオを作る方法

オーバーレイを使って、画像の上に色をのせることもできます。
オーバーレイを消したい場合は不透明度を0にしましょう。

ブログでポートフォリオを作る方法

画像の高さは「カバー画像の最小の高さ」から好きな数値を入力します。

STEP
フルワイドブロックを追加する

イラストギャラリーや、プロフィールなどのコンテンツは、フルワイドブロックをベースに作っていきます。

ブログでポートフォリオを作る方法

左側のブロック追加メニューから「フルブロック」を選択します。


ブログでポートフォリオを作る方法

幅が広いブロックが現れます


ブログでポートフォリオを作る方法

右側にあるブロック編集メニューから表示方法を設定します。

ブログでポートフォリオを作る方法

上部の境界線の形状を、「斜線」「円」「波」「ジグザグ」から選ぶ事ができます。高さレベルも0~5まで自由に設定できます。


ブログでポートフォリオを作る方法

こんな形になりました。
他の形状もうまく利用すれば、個性的なサイトを表現できます。

ただし、ブロックの変形は、背景に画像を付けるとできません💦

ブログでポートフォリオを作る方法

画像背景のフルブロックを形状変化させたい場合は、形状を変形させた色のみのフルブロックの間に、背景画像をセットしたフルブロックを挟むようにセットすればOKです。

STEP
フルブロックの中を編集する

あとはフルブロックを編集して、好きなように画像やテキストを追加していきます。
私の場合は、シンプルにギャラリーを使って画像一覧を配置しています。

一番上にくる自信作でしたら、大きく表示するのも良いですね。

例えばこんな感じ

ブログでポートフォリオを作る方法

こちらはカラムブロックを使って、2列に分けて表示しています。

ただし、イラストを全て大きく表示してしまうと、見づらいので気を付けてください。
あくまでもクライアントとなる人から見た、見やすさ、わかりやすさが大事です!

あとはそれぞれのコンテンツごとにフルブロックを設置して、中身を作っていけば完成です。
以上がSWELLのLP機能を使ったポートフォリオの作り方でした。

できたポートフォリオは常にブラッシュアップしよう!

イラストの新作ができたり、新しい実績ができたりしたら、すぐに更新したり、良いと思ったものはどんどん取り入れたりして、ポートフォリオサイトをブラッシュアップしていってください。

イラストの仕事をもらえるチャンスを、少しでも掴むためにもポートフォリオサイトは持っていた方が良いでしょう。
ブランディングのために、ポートフォリオ専用のドメインを取得したり、ブログをまるごとポートフォリオとして活用している人もいます。

卯月まめ

できたポートフォリオサイトは、SNSのプロフィール欄からリンクを貼ったりして、自分をアピールするために活躍してください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
CONTENTS
閉じる