アートディレクター,モリケント_모리켄토 Details
トレーラー
アートディレクター, モリケント
モーションを用い、遊び心を刺激するWEBデザイン制作
今回の講座ではWEBデザインを中心に、UI/UXデザインの設計から、KV制作やインフォグラフィック制作、そしてアニメーション技術を使用した演出までの過程をお教えします。
次に、UI/UXについてWEBデザインとゲームデザイン、オンスクリーンメディアとプリントメディアを例にデザイン手法の違いについてお教えします。WEBのUIではLPとコーポレートサービスのサイトの違いについて解説し、ゲームUIでは動作に基づく設計や演出法を伝授します。
WEBデザイン実践では、PhotoshopとIllustratorを使って資料収集の段階からワイヤーフレーム作成、KVとVI作成し、ロゴやアイコン、各パーツの制作を基にブラッシュアップさせる過程について学びます。
最後に、KVやロゴ、ボタンなどをアニメーション効果を加え、より完成度を高めるコツを大公開。
モリケントならではの、WEBデザインとアニメーション効果をマッチングした制作プロセスを、Colosoで体験してください!
受講生全員に提供
モリケントの講座だけの特典
-
モリケントのWEBデザイン制作ノウハウを含む、講義動画21本を期間制限なしで受講可能 -
講座を通してKV/VI各1点、ロゴデザイン1点、アイコンを含む、WEBサイト1点の作品を完成 -
LPデザインのPsデータやInteractionのAEデータなどの資料を提供
講義資料の詳細
-
講座の資料- 講座内容のPDFファイル1点 -
例題制作の素材- 制作に使用されるLPデザインファイル1点
- InteractionのAEファイル1点 -
グラフィックデザイン- ロゴデザイン1点
- LPデザイン1点
- KV1点
- 各アイコンデザイン
モリケントのポートフォリオ
講座の例題
例題を通して学ぶWEBデザイン制作スキル
-
KV/VIの作成 -
ロゴデザイン制作 -
アイコン類の作成
-
WEBサイトの構築 -
心を掴むインタラクション
モリケント
アートディレクター
はじめまして、アートディレクターのモリケントです。グラフィックデザインを中心に、映像デザイン制作やブランディング、ゲームUIなど、様々な分野で遊び心を刺激するUI/UX設計をモットーに制作しています。
これまで有名なアーティストのアートディレクションや、大手企業のブランディング、世界的なフェスティバルの映像制作に携わり、領域を問わずにデザイン制作をしてきました。また、ハイクォリティーかつ誰もが楽しめるデザインを作り上げることを心掛けています。
本講座を通して、UI/UXデザインを基に展開する「遊べる」WEBデザイン制作の基本から実践までの過程を、徹底的にお伝えします。

モリケント
現) アートディレクター
【経歴】
YOASOBI 「The Book」 CM映像・タイポグラフィー担当
Cygames 「World Flipper」 UIコンセプトアーティスト
The Blue World-JAPAN ANIME TOWN in サウジアラビア パビリオンデザイン担当
TOYOTA 「COROLLA」 CMグラフィック担当
東京マラソン2018「SocialMarathon」 アートディレクション担当
アイマリンプロジェクト アートディレクション担当
Fontworks特設WEBサイト アートディレクション・ブランディング担当
【受賞歴】
TOKYO TDC Annual Award 2019, RGB入選
Cannes Lions 2014, MEDIA -SHORTLIST
Spikes Asia 2014, Grand Prix, Gold, Silver, Bronze ×2
この講座のポイント
グラフィックデザイナーやモーショングラファーでもできるWEBデザイン制作
デザインの基本原則や色彩理論、レイアウトなど、デザインに共通する基礎的なスキルは、モーションとグラフィック、どちらも共通している要素です。この講座では、UI設計が苦手な人でも、まずは苦手認識をなくし、手持ちのスキルでWEB制作ができるように、0から分かりやすく解説します。
今のWEBデザインからさらにスキルアップするコツ
固めのWEBサイトから少し抜けたWEBサイトを作れるように思考をほどく方法を伝授。シンプルながらも効果的なアニメーションや、マイクロインタラクションを導入することで、WEBサイトをより魅力的なものに変えることができます。独自のフォントの使用や、テキストの配置に工夫を凝らし、印象的で読みやすいデザインを生み出すコツを、例題を通して学ぶことができます。
一つの世界観を構築するデザインスキルの習得
デザインにおいて一つの世界観を構築することは、重要であり多くの利点があります。特に、ブランドアイデンティティの確立と視覚的な一貫性、メッセージ、そして他との差別化やユーザー体験を与えることができます。この講座を通して、強い印象を残しつつ、デザイナーとしての観察眼やスキルを身に付ける方法をお教えします。
講座内容
下記のような内容を学べます。
-
デザインの基礎力デザインの基礎からいろはを学び、色や、レイアウト、そして書体など、デザインへの理解を深めます。また、アイコンやツール、コンセプトの考え方について学びます。 -
レガシーな環境でもトレンディーなWEBデザインを制作する秘訣最新のツールでなければ、流行りのデザインを制作することが難しいと考えられることの多いWEBデザイン制作。実際に、デザイナーがよく使用するPsやAiなどのソフトを使って、トレンディーなWEBサイトを作るまでの過程を身に付けます。 -
各ソフトの特徴を活かしたデザインPhotoshopやIllustrator、After Effectなどのソフトを駆使する事で、思考の仕方や制作の領域を拡大することができます。また、それぞれのソフトの特性や利点を活かしたデザイン制作をお教えします。
-
デザインの世界観を作る重要性とまとまりデザインにおいて一つの世界観を統一するにあたり、UIパーツや、キービジュアル、インタラクションの動きなどを考慮し、これにより生み出される相乗効果をお教えします。 -
UIの基礎力ときもUIデザインにおいては、使いやすさや直感性はもちろん、視認性や一貫性、そして効果的なレイアウトなどが重要です。また、ユーザーの視点への理解を通して、魅力的かつ機能的なデザインを構築するための要素について解説します。 -
インタラクションがあることの心地よさと動きの重要性時間軸の使い方や、動きの緩急はユーザーに心地よさを与える上でとても重要です。この講座では、デザインの形状や全体の方向性を捉え、表現を加えていくための方法を学びます。
- 無期限視聴
- 最安値
一回の購入で、期限の制限なく視聴することができます。
06/29 (月) 販売価格が上がります。
もうすぐ販売価格が上がる予定です。
今すぐご購入ください!
カリキュラム
カリキュラム内容のご紹介
SECTION 01. INDEX
01. Orientation
- 本講義の目的と各セクションの紹介
02. Autobiography
- 会社紹介と自己紹介
- 仕事内容について
SECTION 02. Design Process
03. デザイン仕事のプロセス
- クライアントからの要望をヒアリング
- ターゲットの設定と組み立て
- 分布図作り
04. デザイナーとして持っておくと便利なスキル
- ヒアリング能力
- デザインプレゼン力etc
- 得意(好き)なツールを見つける
- デザインルールとデータ作り
SECTION 03. The Fundamentals of UX/UI
05. UIとはUXとはなにか
- インターフェースとインタラクション
06. Web UI
- 遷移とブランド設計
- キャンペーンサイト(LP)とコーポレートサイト(サービス系)の違い
07. ゲーム(アプリ) UI
- 動詞に基づく設計づくり(演出/課金)
08. 紙や映像に基づく人間工学
- 展示場所の有無
- オンスクリーンメディアとプリントメディアの違い
SECTION 04. Let's WEB design
09. 想定クライアント リファレンス収集
- クライアントの要件定義内容とリファレンス収集
- ヒアリングシートのメモ書き
- ポジショニングマップの設定
10. サイトマップと ワイヤーフレーム作り
- サイトマップ
- ワイヤーフレームの作成(グラフィックの多いLP制作)
11. LOGO DESIGN
- ロゴデザイン
12. Ground Design & Grid System
- ブラウザサイズと基礎を設計する
13. WEB DESIGN LAYOUT
- PCサイトのデザインをする
14. KV/VI
- KV/VI作成
15. Pictogram Signs Icons & Parts
- アイコン制作
- インフォグラフィック制作
16. WEB DESIGN Detail-UP
- 書体ルールの設計
- マージンルールの確定
- 画像のはめ込み
17. WEBデザイン
- SPサイト作成
SECTION 05. Interaction
18. KVアニメーション
- KVのアニメーション演出
19. ロゴアニメーション
- ロゴアニメーション演出
20. ボタンアニメーション
- インタラクションのアニメーション演出
21. LottieでJSON変換
- Lottieを使ってJSON変換する
SECTION 06. FIX
22. まとめ
- 完成とつくったものの振り返り
インタビュー
アートディレクター
モリケントが
お話ししたいこと
該当の分野を勉強している方、この講座を受講しようか悩んでいる方は、どういう部分を一番難しいと思っているでしょうか?また、講座を通じて、そのような部分をどういう風に解決できるでしょうか?
多くのデザイナーがクリエイティブなアイデアの発想と、それを実現する表現力に苦労することがあります。アートやデザインという異なるジャンルに独自性や新しさを追求したりしますが、アートとデザインを分けて考えることでクリアになります。また、デザインする媒体や、作る幅がどんどん多様化していっている中で、この講座がみなさんにとって、デザインの新たな表現力や考え方を学ぶきっかけになってくれたらと思っています。
デザインを勉強するきっかけを教えてください。
絵を書くのが好きだったときに、デッサンとデザインは元は同じ意味のラテン語だと知ったことです。それがデザインは怖いという考え方が変わったきっかけでした。また、印刷会社の就職に色弱という理由で落ちてしまったことが、タイポグラフィーをメインに進むキッカケとなりました。元々、色彩構成を使うのは得意ではなかったので、自然と方向性が絞られていったところ、自分の好きだったサブカルチャーなどを混ぜると色彩構成というジャンルも気づけば、全てのデザインジャンルが好きになっていました。
講師さまご自身は、勉強してきた中で難しかった部分、それを解決するためにどのような努力をされてきましたか?
好きなことをしてるのだから、努力だと思ってないというのが一番いいのですが、デザイン以外の範囲を広げるときはやはり難しいです。主に、広告やWEBなどを扱っていると、ソースコードにも触れなければいけないことや、興味のないジャンルのことも調べないと行けないということもたくさんあります。ただ、掘っていくうちに面白くなることも多いので、困ることはありませんし、それが仕事なら必然性が生まれます。新たな武器を手に入れようと苦しいときは、それを手に入れた自分を想像し、やるべき理由を探してみるのも、ひとつの方法だと思います。
アウトプットを形にすることにおいて、大切なポイントは何になりますか?
一つの案件にたくさんのデザインを作ることが正義だとは全く思っていません。クライアントと商品の方向性における、自分探しの訓練としてはいいと思いますが、その中からみなさんにとっての正解の引き出しがスッと引き出せることが、一番効率的です。そして重要なのは、なぜこれがいいのかを端的に説明できること。コンセプトをキャッチコピーにできること。デザイナーとしてこだわりたい部分を理解し、常にレベルアップさせるために努力することが重要だと思います。
使用プログラムについてご案内します。
当講座は、以下のツールを使用します。
[メインツール]
- Photoshop CC以上
- Illustrator CC以上
- After Effects 18.4.6以上
おすすめの講座
この講座を見た方は
