絵描き好きさんポートフォリオサイトってどんな風に作れば良いのかな？
WordPressのSWELLでポーフォリオを作るにはどうすれば良いの？
卯月まめ私はSWELLでポートフォリオページを作りました！
詳しい作り方や、サイト構成の考え方なども解説しますね。
この記事ではこんな事がわかります
- ポートフォリオサイトの構成
- ポートフォリオの考え方
- WordPressのSWELLのポートフォリオの作り方
この記事を書いたのはこんな人です
卯月まめ
- Photoshop歴 22年
- イラストレーター歴 13年（2009年～）
ゲームに登場するモンスターやアイテム、書籍の挿絵などのお仕事をしています。
リアルで厚塗りのイラストが得意。特に動物が得意で、伝説上の生き物やモンスターなどファンタジー系をよく描いています。
ポートフォリオは、イラストレーターにとって名刺のようなものだと考えられます。
クライアントに対して、見やすい、わかりやすい、伝わりやすいを意識して作る事が大事です。
こちらではWordpressのテーマSWELLを使用しています。
見やすくて使いやすい万能テーマです。
ポートフォリオサイトの構成
まずはポートフォリオサイトの構成を考えていきます。
ポートフォリオサイトにおいて、一番最初に表示されるトップページがもっとも重要です。
何を見せたいか、何をアピールしたいかを考えて構成していきましょう。
私のポートフォリオサイトです。参考になれば幸いです
一番上はもっとも見せたい最高作品のイラスト
自分の最高作品はこれだ！というものを1～3点ほど選び抜いて、一番上部の最も目につくところに置きましょう。
数点置く場合は、似たような構図や内容は避けて、いろんなバリエーションを意識して置くと、イラストの描ける幅を伝えやすくなります。
私の場合、上の動くイラストでインパクトを出して、すぐ下にこちらの静止画を表示しています。
描いたイラストに対する熱意や、工夫した事などを書くのは控えた方が良いでしょう。
卯月まめポートフォリオは基本的に、簡潔でわかりやすい展示を目指します！
次に、自信のある作品や、実績のあるイラストをおく
次に、自信作をおいておきます。
イラスト内容や実績内容のバリエーションを多く置くのがポイントです。
数が多いものは展示するイラストを数点に絞り、実績やテーマごとに専用の記事を作って、リンクを貼っておくと良いでしょう。
最後はその他のアピールポイントをおく
デフォルメイラストやドット絵、背景、動画や3Dなど、上記に載せてないけど、持っているスキルをアピールするためにおいておきましょう。
ラフイラストと完成イラスト、キャラクターの設定画集などもありだと思います。
数が多いものは展示するイラストを数点に絞り、実績やテーマごとに専用の記事を作って、リンクを貼っておきましょう。
クリエイターである事が伝わるプロフィールを書く
プロフィールもきちんと書きます。
大事なポイントは、ここで書くのはクリエイターとしてのプロフィールだという事です。
クライアントとなる人が見ている事を意識して書きましょう。
ポートフォリオは、イラストでのアピールが重要なので、文字だけのプロフィールは簡潔にした方が良いでしょう。
プロフィールの内容例
- 名前
ペンネームやハンドルネームでも大丈夫ですが、あまり変な名前はあとで後悔するかもしれません。 - 簡単な住所
県と市まででOKです。 - 携わった業務内容（書籍の表紙、挿絵など）
実績があれば信頼性が上がります。 - 使用ソフト（Photoshop、Procreateなど）
作品ごとに掲載するのもありです。 - どんなタッチが得意なのか（リアル調、アニメ調など）
得意なタッチなどを伝えておけば、そのタッチに近い依頼を頼まれやすくなります。 - 苦手なイラストなど
私は、頼まれると困るジャンルなどは、正直に書いてます。 - 他のクリエイティブに関わるスキル（動画制作、Live2D、3D制作）
イラスト以外にもできる事があれば強味になります！
自分の趣味や読んでいるマンガなど、制作関係とはまったく関係無い事を書くのはやめておいた方が良いです！💦
制作期間を書く
「これぐらいの作品なら何日で制作できる」と言った感じで、制作に必要な時間や日数も書いておくと、クライアントとなる人は参考になるかと思います。
卯月まめあくまでもクライアント目線で作ります
連絡先を書く
お問い合わせフォームへのリンクや、メールアドレスを必ず載せて、連絡とれるようにしておきます。
また、どうしても無理な案件内容や、メールに記載してほしい内容も一緒に書いておきます。
例えばこんな感じ
- アダルト、ギャンブル、消費者金融 、新興宗教系のご依頼はお断りしております。
- イラスト制作のサイズ、納期、料金の記載を必ずお願いいたします。
SWELLのLPを利用してポートフォリオを作る方法
できればポートフォリオ専用のブログを作った方がいいです。
SWELLなら、スタイリッシュなポートフォリオサイトを簡単に作ることができます。
私の場合は、ポートフォリオページだけブログから独立させて作りたかったので、SWELLの「LP」という機能を使っています。
ブログのメニューが、ポートフォリオと関係ない内容だったからです💧
ここではSWELLのLPを使ったポートフォリオサイトの作り方を解説していきます。
LPの新規作成をする
- WordPress編集ページのメニューから「LP」をクリック
- 「新規追加」をクリック
ヘッダー画像を付ける
↑この部分です。
一番上に表示されるポートフォリオの表紙部分のようなものですね。
ここは最初に目に映る場所ですので、インパクトのあるもの、自信のあるものを選びましょう。
左側のブロック追加メニューから「カバー」を選択します。
ブロックの上に出るメニューから、「メディアを追加」で表示したい画像を選びます。動画もいけます。
ブロック上のメニューから「配置を変更」→「全幅」を選択すると、横幅ピッタリに表示されるようになります。
「タイトルを入力…」で画像の上にテキストを入力する事もできます。
左側にあるブロック編集メニューから表示方法を編集します。
オーバーレイを使って、画像の上に色をのせることもできます。
オーバーレイを消したい場合は不透明度を0にしましょう。
画像の高さは「カバー画像の最小の高さ」から好きな数値を入力します。
フルワイドブロックを追加する
や、プロフィールなどのコンテンツは、フルワイドブロックをベースに作っていきます。
左側のブロック追加メニューから「フルブロック」を選択します。
幅が広いブロックが現れます
右側にあるブロック編集メニューから表示方法を設定します。
上部の境界線の形状を、「斜線」「円」「波」「ジグザグ」から選ぶ事ができます。高さレベルも0～5まで自由に設定できます。
こんな形になりました。
他の形状もうまく利用すれば、個性的なサイトを表現できます。
ただし、ブロックの変形は、背景に画像を付けるとできません💦
画像背景のフルブロックを形状変化させたい場合は、形状を変形させた色のみのフルブロックの間に、背景画像をセットしたフルブロックを挟むようにセットすればOKです
フルブロックの中を編集する
あとはフルブロックを編集して、好きなように画像やテキストを追加していきます。
私の場合は、シンプルにギャラリーを使って画像一覧を配置しています。
一番上にくる自信作でしたら、大きく表示するのも良いですね。
例えばこんな感じ
こちらはカラムブロックを使って、2列に分けて表示しています。
ただし、イラストを全て大きく表示してしまうと、見づらいので気を付けてください。
あくまでもクライアントとなる人から見た、見やすさ、わかりやすさが大事です！
あとはそれぞれのコンテンツごとにフルブロックを設置して、中身を作っていけば完成です。
以上がSWELLのLP機能を使ったポートフォリオの作り方でした。
私のポートフォリオはこちらのテーマから作成しました
ワードプレステーマのSWELLについてはこちらに詳しく
あとはそれぞれのコンテンツごとにフルブロックを設置して、中身を作っていけば完成です。
以上がSWELLのLP機能を使ったポートフォリオの作り方でした。
私のポートフォリオはこちらのテーマから作成しました
ワードプレステーマのSWELLについてはこちらに詳しく
できたポートフォリオは常にブラッシュアップしよう！
イラストの新作ができたり、新しい実績ができたりしたら、すぐに更新したり、良いと思ったものはどんどん取り入れたりして、ポートフォリオサイトをブラッシュアップしていってください。
イラストの仕事をもらえるチャンスを、少しでも掴むためにもポートフォリオサイトは持っていた方が良いでしょう。
ブランディングのために、ポートフォリオ専用のドメインを取得したり、ブログをまるごとポートフォリオとして活用している人もいます。
卯月まめできたポートフォリオサイトは、SNSのプロフィール欄からリンクを貼ったりして、自分をアピールするために活躍してください。
