Studioでつくる|イラストを活かしたウェブデザイン
講座詳細

イラストがウェブデザインにもたらす価値
形のないものの具体化や情報整理、世界観の表現など、イラストを活かしたウェブデザインをつくる前に知っておきたい、イラストの価値や役割について解説します。

デザインの核となるコンセプト設計
サイトの目的や役割に合わせた、コンセプトワードやトンマナの設計方法を、演習を通して実践的に学べます。

イラストを活かすアイデアの発想法
イラストならではの「表現の自由度」を活かした、ブランドのらしさを引き出すアイデアの発想法を、演習を通して実践的にお教えします。

イラストでブランドを表現するビジュアルデザイン
レイアウト検証を始め、カラー設計や、イラストイメージの明瞭化、フォント選定など、イラストを軸にしたビジュアルデザインのプロセスを、段階的にお教えします。

イラスト制作とイラストレーターへの依頼方法
イラストのタッチや制作条件に合わせた複数の制作プロセスや、イラストレーターへ依頼する際のポイントを解説します。

Studio実装の基礎から応用まで
初めてStudioを触る方でも安心して学んでいただけるように、基本操作の解説から、デザインを正確に再現する応用的な実装方法まで、演習を通して段階的に学べます。
※上記の画像は講座に対する理解を深めるためのイメージです。
- 1次公開(第1 ~ 10講):2026年1月19日
- 2次公開(第11 ~ 20講):2026年2月13日
※下記の画像は講座に対する理解を深めるためのイメージです。
※講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。
01.本講座について・自己紹介 ・実績紹介 ・デザインで大切にしていること ・講座概要 ・習得できる学び ・イラストがウェブデザインにもたらす価値
02.架空店舗の概要とサイト設計・店舗詳細と依頼内容 ・コンセプト設計 ・ワイヤーフレーム制作
03.アイデアの発想・イラストを活かしたアイデアの発想法 ・メインビジュアルのアイデア発想 ・メインビジュアルのラフスケッチ ・Studioで実装可能か検証
04.メインビジュアルデザイン①・レイアウトの検証 ・カラーの設計 ・イラストイメージの明瞭化 ・フォントの選定
05.メインビジュアルデザイン②・ブラッシュアップ
06.各セクションデザイン・ポリシーのデザイン ・クラフトマンのデザイン ・サービスのデザイン ・ショップのデザイン ・フッターのデザイン
07.レスポンシブデザイン・レスポンシブ化とポイント
08.イラストレーターへ依頼する際のコツとテクスチャ作成・イラストレーターへ依頼する際のコツ ・テクスチャ作成
09.イラスト作成・下描き ・本描き/Illustrator完結型 ・本描き/Illustrator + Photoshop型 ・本描き/タブレット + Illustrator or Photoshop型
10.GIFアニメーション作成・PhotoshopとAfter Effectsの違い ・GIFアニメーション作成/After Effects ・GIFアニメーション作成/Photoshop
11.Studioの基本操作①・Studioの紹介 ・画面構成の理解
12.Studioの基本操作②・レイアウト ・余白 ・単位
13.Studioの基本操作③・装飾 ・テキスト ・画像 ・リンク
14.Studioの基本操作④・レスポンシブ ・アニメーション ・まとめ
15.架空店舗サイトの実装①・メインビジュアルの実装 ・ポリシーセクションの実装
16.架空店舗サイトの実装②・クラフトマンセクションの実装 ・サービスセクションの実装
17.架空店舗サイトの実装③・ショップセクションの実装 ・フッターの実装
18.架空店舗サイトの実装④・レスポンシブ設定
19.架空店舗サイトの実装⑤・アニメーション設定 ・マークアップとメタ情報設定 ・各デバイスでの確認 ・公開設定
20.受講者へのメッセージ・講座の振り返り ・次のステップへのアドバイス
本講座は、以下のツールを使用します
[メインツール]
・Illustrator CC以上
・Photoshop CC以上
・After Effects CC以上
・Studio
※本講座では Illustrator / Photoshop / After Effects のバージョン2025 を使用しています。CC以降のバージョン でも受講可能ですが、画面表示や操作手順が一部異なる場合があります。
※プログラムの注意事項必要に応じて作成
こんにちは、ウェブデザイナー兼イラストレーターの北川太我です。大学卒業後、複数のデザイン事務所でグラフィックとウェブの経験を積み、2024年に独立しました。現在はノーコードツール「Studio」を使用し、デザインからイラスト、実装までのクリエイティブを一貫して手がけています。
本講座では、私が日々の制作で培った「Studioでつくる、イラストを活かしたウェブデザイン」のノウハウに沿って、ビジュアル表現の考え方からStudioの実装方法まで、イラストが描けない方やStudio未経験の方でも体系的に学ぶことができます。Studioとイラストを通じて、皆さんが自身の表現の幅を広げ、新しいデザインの可能性に出会うきっかけになれば嬉しいです!
該当の分野を勉強している方、この講座を受講しようか悩んでいる方は、どういう部分を一番難しいと思っているでしょうか?本講義を通じて、そのような部分をどういう風に解決できるでしょうか?
ウェブサイト制作において、イラストは欠かせない表現手段のひとつです。しかし、ウェブデザインの基礎やツール操作を学べる講座は多くても、「イラストを活かしたウェブデザイン」を体系的に学べる場はまだ少ないのが現状です。イラストでサイトの世界観を作るには、写真表現とは異なる独自の思考が必要です。また、「自分で描けるかどうか」が制作のハードルになることもあります。しかし本講座では、イラスト制作の経験を問わず、イラストをデザインとして機能させる手法を学べるため、どなたでも表現の幅を大きく広げることができます。さらに、コードが書けない方でもStudioを使えばノーコードで簡単に実装可能です。基本操作から、複雑なイラスト表現にも対応できる応用的なスキルまでを体系的に習得し、頭の中にあるアイデアをそのままウェブの形にする力を身に付けることができます。
ノーコードを勉強するきっかけを教えてください。
もともと私はグラフィックデザイナーとしてキャリアをスタートしました。ウェブデザインの経験もありましたが、コードはほとんど書けず、実装はエンジニアの方に依頼していました。エンジニアさんとの協業は、自分にはない実装アイデアを提案いただくことも多く、常に学びや発見がありました。一方で、細かな調整を何度もお願いすることに申し訳なさを感じる場面もあり、「自分ひとりで実装まで完結できたら」という思いも抱いていました。そんな時、事業会社に転職したデザイナーの先輩から「自社サイトをノーコードツールで作っている」という話を聞き、そこで初めてStudioの存在を知りました。コードの知識がなくても、自分ひとりでデザインから実装まで形にできる可能性に強く惹かれ、すぐにStudioの学習をスタートしました。
講師さまご自身は、勉強してきた中で難しかった部分、それを解決するためにどのような努力をされてきましたか?
Studioはノーコードツールですが、サイト構築にはウェブ独自のレイアウト設計の理解が不可欠です。私自身、多少の知識はあったものの、最初はそのレイアウト設計に戸惑い、ハードルを感じました。またCMS機能についても、座学だけでは理解できない部分が多く、実践なしでの習得は難しいと痛感しました。そこで、「まずは手を動かして作ってみよう」と考えていた矢先、知人のデザイナーが独立することを知り、「ウェブサイトをStudioで作らせてほしい」と自ら申し出ました。実際の制作プロセスを通じて、座学だけでは掴みきれなかったレイアウトの組み方やCMSの活用法を体験的に学ぶことができ、苦手を克服する大きなきっかけとなりました。
受講生に向けてメッセージをお願いいたします。
ノーコードは比較的低予算で制作でき、またデザイナーひとりで完結できる点から、需要はここ数年で急速に広がり、今後もさらに伸び続けると感じています。私自身も、コードが書けなくても実装が可能になったことで、仕事の幅が広がったと実感しています。一方で、AIとノーコードで簡単にサイトを作れる時代も徐々に近づいており、「デザイナーの仕事はどうなるのか」という不安もあります。だからこそ、まずはAIやノーコードツールをうまく使いこなすスキルを身につけつつ、その上で自分にしかできない表現や強みを持つことが、これからますます重要になると考えています。
【担当案件】 gmlabs株式会社/コーポレートサイト 映画「ライフ・イズ・ビューティフル・オッケー」/公式サイト 株式会社MeUMU/コーポレートサイト 株式会社caroa/4周年記念サイト クックドゥードゥードゥー/ポートフォリオサイト 積水ハウス「シャーメゾン」/アバウトページイラストレーション など 【受賞】 2024 Studio Design Award 2024/THE GUILD賞 2019 名古屋造形大学卒業制作展2019/桃美会賞 2018 AICHI AD AWARD 2018 学生広告賞/GRAND PRIX 2017 ゲンビ「広島ブランド」デザイン公募2017/入選&川上典李子賞 2016 第77回岐阜市美術展覧会 グラフィックデザイン部門/優秀賞
【担当案件】 gmlabs株式会社/コーポレートサイト 映画「ライフ・イズ・ビューティフル・オッケー」/公式サイト 株式会社MeUMU/コーポレートサイト 株式会社caroa/4周年記念サイト クックドゥードゥードゥー/ポートフォリオサイト 積水ハウス「シャーメゾン」/アバウトページイラストレーション など 【受賞】 2024 Studio Design Award 2024/THE GUILD賞 2019 名古屋造形大学卒業制作展2019/桃美会賞 2018 AICHI AD AWARD 2018 学生広告賞/GRAND PRIX 2017 ゲンビ「広島ブランド」デザイン公募2017/入選&川上典李子賞 2016 第77回岐阜市美術展覧会 グラフィックデザイン部門/優秀賞