参考にしたいイラストレーターポートフォリオサイト 9 選



イラストレーターや漫画家、アーティストなどのクリエイターにとって、自身の作品が世の中に広まっていくことはこの上ない喜びです。そのためには、世間での知名度の獲得が欠かせませんが、その手段として今では Instagram や Twitter など SNS の活用が当たり前となりました。


そんな中、一歩先をいくために自身のポートフォリオサイトを持つクリエイターが増えています。ポートフォリオサイトは作品を公開するだけでなく、作品へのこだわりを綴ったブログやこれまで積み上げてきた活動実績など多くの情報を発信できることから、自分を売り込む営業ツールとしての役割を果たしてくれます。


そんな優れたポートフォリオサイトを作成するために、まずは、Web デザインのアイデアを探してみましょう。


ここでは、漫画家やイラストレーターとして第一線で活躍している大人気クリエイター 9 名の本格ポートフォリオサイトを紹介します。インスピレーションを掻き立てるハイセンスな Web デザインに触れ、最適なアイデアを見つけてみましょう。これからクリエイターとして活動を始めたい方からベテランクリエイターまで、魅力溢れるポートフォリオサイトを作成するにあたり、ぜひ参考にしてみて下さい。



目次(順不同)

  1. BUSON

  2. momo

  3. STUDY優作

  4. yopipi〈よぴ〉

  5. えりた

  6. 大野太郎

  7. てらおかなつみ

  8. モチコ

  9. わかる

  10. まとめ



01. BUSON さん


クスッと笑える「あるあるネタ」をテーマにしたイラスト漫画を手掛ける BUSON さん。なかでも超現代風紫式部の「ポジティブしきぶちゃん」が話題を集めています。元消防士という経歴をお持ちの BUSON さんですが、今では SNS の総フォロワー数 100 万人超えの人気イラストレーターとしてメディア連載やトークショー、サイン会など多方面で活躍中。


そんな BUSON さんのウェブサイトを開くと、フル画面表示のしきぶちゃんと仲間たちのイラストが目に飛び込んできます。抜群のインパクトを与えているファーストビューのすぐ下には、BUSON さんの新着情報が一目でわかるニュースフィードやお仕事の依頼を考えている方に向けてのメッセージを掲載。ファンやクライアントなどサイト訪問者が最新情報を素早くキャッチできる設計となっています。


見込みクライアント向けの「business」ページには、BUSON さんのキャラクターを活用するメリットから、タイアップ事例やメディア掲載といったカテゴリ別の活動実績まで、具体的な成果をアピール。依頼側の目線にたった構成になっています。また、サイト内にはパスワードを知っている人限定のページ「secret」を設け、そのページでしか見れない情報やイラストを公開することでファンの熱量を高める工夫も施されています。




02. momo さん


穏やかな日常の中で起こるハプニングや珍場面など実体験をベースにエッセイ漫画を制作するイラストレーター momo さん。まるで知り合いかのような感覚になるほど momo さんのお人柄が伝わってくる親しみ深いエッセイ漫画です。ときおり夫であるタロスケさんも登場し、夫婦の仲の良さが垣間見えるエピソードがさらに親近感を抱かせてくれます。


momo さんの持ち味を十分に発揮したイラストが印象的なトップページ。作風を全面に出すことで、訪問者にインパクトを与えイメージも掴みやすく、興味を持った上でサイト閲覧ができるため回遊性の向上が期待できます。また、シンプルですっきりしたデザインのメニューバーが視認性を高め、訪問者が目的のページへとスムーズに遷移できる優れたデザイン設計です。


サイトの右上には、サイト全体の色調に合ったモノクロのソーシャルバーを設置。日頃からイラスト作品を投稿している SNS への誘導を促進し、サイト内には掲載していない作品も訪問者に見てもらえるチャンスが生まれます。スキルや個性をアピールできる幅がより広がるので、ソーシャルバーの設置は SNS を運用している方であれば必須と言えるでしょう。また、SNS のプロフィール欄にサイト URL を張ることで相互でのアクセスが可能になり、双方間で流入が期待できます。Wix のソーシャルバーは、レイアウトを縦表示にしたり、色付きのアイコンや縁取りのあるアイコンなど複数のオプションがあるので、momo さんのサイトのように自身のサイトに適したデザインを選ぶと良いでしょう。




03. STUDY優作 さん


一風変わった個性的な動物たちを描くイラストレーター STUDY優作さん。じわじわと魅力が伝わってくるユニークな作風で Web 漫画や LINE スタンプなど広範な分野において活動されています。STUDY優作さんにしか描けないゆるかわイラストにハマる熱いファンからの人気は絶大です。


ファーストビューから作風の魅力であるシュールなうさぎさんが迎えてくれます。画面領域を大きく使用して一枚絵の画像を自動でスライド表示。イラストに魅了され、思わず目を留めてしまう方も多いはず!サイト上に動きを加えることで見る人を飽きさせず、惹き付ける効果を生み出します。スライドショー機能は作品紹介だけでなく、イベント開催やグッズ販売などのお知らせを効果的に伝えるなど、幅広く活用できる便利な機能です。


また、ポートフォリオサイト全体は白を基調としたシンプルなデザイン仕様となっています。そのため、サイトのメッセージ性が際立つだけでなく、「作者はどのような人物なのか」「どんな作品を手掛けているのか」「どのような実績があるのか」など訪問者が求めている情報をスムーズに見つけることができます。情報がスッキリしているサイトは、訪問者の離脱防止に繋がりサイト内の回遊を促進させるメリットもあります




04. yopipi〈よぴ〉さん


ファッション情報やビューティ情報をイラスト作品として発信し、アパレルや美容に敏感な女性から強い人気を集めるイラストレーター yopipi〈よぴ〉さん。女性のライフスタイルへの探求を続け、日々のファッションコーデやメイクテクなど常に新しいトレンドを届けてくれます。元大手通販会社 web プランナーを経て現在はイラストのお仕事をはじめ一児の母としても全力投球中!


そんな yopipi さんのポートフォリオサイトは、ミニマルなデザインと相性の良い囲み枠を使ったウェブデザイン。ページの周りを太めの枠線で囲い、サイト全体が引き締まった印象になっています。また、枠線にシャープな黒を使用することでメリハリが生まれ、様々な色彩を使ったよぴさんのコーデイラストをより際立たせる効果を生み出しています。ガーリーさとエレガントさ、どちらも兼ね備えた華やかな仕上がりです。


ナビゲーションメニューにも着目してみましょう。サイト閲覧中にワンタップでページ最上部に戻ることができる「ページトップへ戻る」ボタンをあえて設置せずに、ヘッダーとフッターの両方にナビゲーションメニューを置くことでサイト全体へのアクセスを提供しています。一方、画面が縮小されるスマホ版サイトでは最下部に到達するまでの領域に高さがあるため、「ページトップへ戻る」ボタンを設置しスクロールの手間を省いたユーザビリティを高める工夫が施されています。




05. えりた さん


自身の広告営業職時代をベースに漫画制作を行う漫画家・イラストレーターのえりたさん。会社入社後の挫折、成長、転職など社会人が抱える悩みから、営業職あるあるやしくじりエピソードまで、えりたさんの具体的な体験談が綴られているエッセイ漫画は多くのファンを引き付けます。SNS での漫画投稿を主軸に、イラストや書籍の制作など、幅広く活動中。


えりたさんのサイトを開けるとまず目に入ってくるのは、スキルや案件の幅を伝えるイラストレーション。手掛けている漫画のジャンルや作風がどのようなものか一目でわかり、アピールポイントが上手に表現されています。続けてトップページをスクロールすると、視差効果で隠れていたイラストが表われます。遊び心のある仕掛けがアイキャッチで印象的なデザインです。


また、スマホでのサイト閲覧者が主流となっていることからスマホ対応のレスポンシブ Web デザインを意識したデザインに。スマホ表示に合わせてコンテンツやレイアウトを最適化し、モバイルフレンドリーな仕上がりとなっています。Wix で PC 版サイトを作成すると、モバイル版サイトは自動で生成されます。PC 版サイトで表示するコンテンツがスマホ版サイトでは不要という場合、ページやパーツなどの要素を必要に応じて非表示にすることもできます。




06. 大野太郎 さん


ご存知の方も多いはず!Twitter で大反響を呼んだ「1いいねにつき1日成長する赤ちゃん」でお馴染みのイラストレーター大野太郎さん。赤ちゃんが「いいね!」の数だけ成長する物語を描いた連載作品の他、画像をタップして遊べる GIF ゲームや個性豊かで親しみのあるキャラクター作品など、楽しいコンテンツを生み出す仕掛け人とも言えるイラストレーターさんです。


サイトを訪れると、大野さんの出版物である『きみの中のぼく』の表紙画像が目に入ります。見る人の視線を引き付けるミニマルなデザインが特徴。サイトをスクロールするにつれてシンプルなデザインから一転し、見ていて楽しいカラフルなキャラクターが現れます。スクロール速度に差をつけて 3D のような立体感を演出するエフェクト「パララックス・スクロール」を上手に活用し、大野さんの世界観を見事に表現。さらに、大野さんの持ち味である GIF アニメーションも所々に使用することで躍動感のある印象も与えています。思わずスクロールしたくなってしまう参考にしたいデザインです。


また、SEO 対策を施すために Wix の SEO ツールである「Wix SEO Wiz」を使って、サイトの表示順位の向上を実現できたとのこと。サイトの視覚的なデザインだけでなく、サイトの内部まで細かく設計されています。




07. てらおかなつみ さん


色鉛筆や鉛筆を使って温かみのある色彩で犬の絵を中心とした創作活動を行うイラストレーターてらおかなつみさん。ほんわかしたタッチと手書きの良さが際立つイラストは、見る人を優しい気持ちにさせてくれます。本の挿絵やグッズのデザイン、個展の開催など様々な分野で活躍中。イラストだけでなくてらおかさん自身も穏やかな雰囲気のある癒し系イラストレーターさんです。


てらおかさんのトップページは、作品を一覧表示できる機能「Wix プロギャラリー」を使って作品集を表示。サイトを訪れた瞬間からイラスト作品の魅力に惹き込まれます。ここではフォントにも注目してみましょう。作風とマッチする手書き風フォントをサイト名やメニューバーに使用しています。ポートフォリオサイトの外観に最適なフォントを選ぶことで、サイト全体に統一感をもたらしています。


過去のお仕事や告知を掲載する「event / work」のページは、記事形式で公開しています。各記事には見出し画像とタイトル、そして本文の一部を表示。シンプルでありながら興味を掻き立てられ、ついクリックしたくなるような仕様です。また、記事をタイル状に並べることができるタイル表示機能を使用することで、より多くの記事を一度に目にすることができ、訪問者にとって見やすいレイアウトとなっています。




08. モチコ さん


子育て中のあるあるネタで楽しませてくれるエッセイ漫画家モチコさん。2 人の幼子を抱えるモチコさんの実体験を基に、育児に奮闘する多くのパパやママに響く笑いや葛藤を 4 コマ絵日記で届けてくれます。SNS で作品を投稿するほか、子育てサイトでの連載や書籍の出版まで幅広く活躍する注目のエッセイ漫画家さんです。


モチコさんのイラスト作品は、淡いピンク色が差し色として使われているのが特徴。この色をサイトの背景色として取り入れることで、ポートフォリオサイト全体が一体感のある印象になっています。また、サイト内の文字色やボタンにも背景と同系の色を使用し、細部までこだわりを持ってデザインが施されています。調和の取れた色彩で、柔らかく優しいイメージを与えてくれます。「色」が人に与える印象は様々です。たとえば、青色は信頼や自信、黄色は幸福や希望のイメージなど。色の持つ効果を理解することで視覚的に訴求力の高いウェブデザインに仕上がります。ウェブデザインと色彩心理学について詳しく知りたい方はこちらの記事をご覧下さい。


メニューバーの「トップ」「プロフィール」「お問い合わせ」などのサイトページを開くと、右方向からスライドして表示されるオブジェクトが目に入ります。これはオブジェクトに対して動きのあるエフェクトを付けることができるアニメーション効果の機能です。他にも弾むような動きのバウンス、回転しながら出現するスピンなど様々なエフェクトで見せ方を工夫できます。




09. わかる さん


温かみのあるタッチで描くうさぎやくまの可愛いイラストから私たちの心の声を文字で表現したシュールな作品に加え、グッズ販売や LINE スタンプ制作など多岐に渡り活動されているイラストレーターわかるさん。DOYAGAO(ドヤ顔)、SUGOI(すごい)、KAERITAI(帰りたい)など、敢えてアルファベットで表現するシリーズ作品は、思わず自分のことのように「すごいわかる!」と共感を呼び幅広い層から支持を集めています。


モノクロを基調としたわかるさんのサイトは、統一感のあるスタイリッシュなデザイン。視線をうまく誘導したり、整頓された印象を与える効果のあるホワイトスペース(余白)を上手に取り入れています。最低限の項目に絞った明瞭なお問い合わせフォームや、これまでの作品を色で仕分けてある「gallery」ページなど、サイト全体を通じてぶれのないトーン&マナー。サイト全体を通じて、作品と作者自身のふんだんな魅力をオーディエンスへ伝えています。


サイト上に設置されたオンラインショップ「store」は、オリジナル商品の製造販売・梱包発送が可能なオンデマンドサービス&ドロップシッピングの Printful(プリントフル)を活用し、Wix サイトと Printful を接続してオリジナルグッズを販売。商品画像を複数掲載することで、買い手のイメージが膨らみやすい設計となっています。




10. まとめ


いかがでしたか?

ポートフォリオサイトは、自身の成果物をオンライン上で発表するだけに留まらず、スキルや実績、作品への想いなどより深い情報が発信できるため、自己表現の幅がぐんと広がります。思いがけないところから仕事の依頼が来たり、今まで以上に作品への反応がもらえたりと、大きなチャンスに繋がるでしょう。クリエイターとしての自分をより一層アピールできるポートフォリオサイトをあなたも作成してみませんか?





東福 千恵

ソーシャルメディアマネジャー


ja03.png