グラフィックデザイナー,尾花大輔2_오바나2 Details
トレーラー
グラフィックデザイナー 尾花大輔
今回の講座では、第1弾のWebデザインのアートディレクションはもちろん、ショップカードを始めとするアプリケーションツールなどのブランディングデザインまで、Figmaを使い個性溢れる創造的デザインを展開します。
次に、実際の案件を使ったメディアサイトのWebデザインを制作します。クライアントの要望や目的に合わせて、ワイヤーフレームから素材の使い方、統一感を持たせるためのポイントまでを、解説します。
最後に、架空のレストランのブランディングを通して、WebサイトをTOPと下層に分けて制作し、ショップカードや名刺、パンフレットなど他ツールに展開します。
尾花大輔ならではの、個性溢れる表現力と創造力を活かしたWebデザイン中心のアートディレクションの秘訣を、colosoで体験してください。
お試し動画
講座の様子を少しだけ公開します!
- フォント
- ジャンプ率
- 縦組み横組み
- 課題:文字で遊ぶ
受講生全員に提供
尾花大輔の講座だけの特典
-
尾花大輔のWebデザイン制作のノウハウを含む、講座動画22講を期間制限なしで受講可能 -
講座を通してWebデザイン3点、ブランディングデザイン3点を完成 -
講座資料のPDFや課題用の素材データ、ブランディングのデザインデータなどの資料を提供
講義資料の詳細
-
提供資料・講座のスライド資料提供
・練習用デザイン素材
・FigmaのWebデザインデータ
・Illustrator販促ツールのデザインデータ -
講座の完成作品・Webサイトのデザイン要素
・Webデザイン3点
・ブランディング素材3点
尾花大輔のポートフォリオ
講座の例題
例題を通して学ぶWeb制作を中心としたブランディング
実践課題
メディアWebサイト(TOP)
メディアWebサイト(下層)
レストランWebサイト(TOP)
レストランWebサイト(SP)
ブランディングデザイン制作
グラフィックデザイナー
尾花大輔
はじめまして、グラフィック&Webデザイナーの尾花大輔です。Webとグラフィックデザインを中心に活動しています。第1弾に続き、Webデザインに加え、ブランディングの内容を取り入れて解説します。
前回好評いただいた講座に引き続き、今回はFigmaを使用したWebデザインとブランディング講座を制作しました。Figmaで魅力的なWebデザインの技術を伝授します。
また、「あと一歩、何かが足りない」や「次のステップに進みたい」と感じる方に向け、お悩み解決の手がかりとしてサポートができる内容の講座となっています。

尾花大輔
現) グラフィックデザイナー
この講座のポイント
表現力を磨いて「没個性」からのステップアップ
デザイン制作において、個性を際立たせる遊び心ある表現力の向上を目指して、尾花大輔ならではのノウハウをお教えします。また、実践的な演習や問題を通して、「あと一歩、何かが足りない」と感じる部分を解決できるようサポートします。個々のクリエイティブな特性を伸ばし、表現力をさらに深化させるスキルをお教えします。
Webからロゴや紙媒体まで、統一感を持たせるデザイン手法
ブランディング制作において最も重要な要素である「統一感」。ロゴから始まり、Webサイトやグラフィックツールまで、異なるメディアでも一貫性を保ちながら制作する方法を伝授します。また、ブランドの視覚的アイデンティティを強化し、消費者に持続的な印象を持たせるコツを公開します。
実践的なプロジェクトを通じて、依頼から納品まで現場の流れを公開
尾花大輔自身の長年のフリーランス経験から、培ったデザインプロセスを紹介します。依頼を受けてからの撮影や素材作成、デザイン修正、実装依頼、そして納品まで、現場の流れを全て解説します。このような知識を深めることで、実践的なデザインスキルやプロセスを身に付けることができます。
講座内容
下記のような内容を学べます。
-
楽しみながらデザイン制作をする方法デザインを制作する際、何よりも制作を楽しむことが作品のクオリティに影響すると考える尾花大輔。理論だけでなくデザインのプロセスを楽しみながら、完成度の高いデザインを制作する秘訣を伝授します。 -
手を動かしてスキルを習得実際のプロセスを体験していただけるように、全ての課題で提供データを使用して、デザインを組み立てていきます。講座をただ視聴するだけでなく、一緒に手を動かしながらどんなデザインが魅力的か検証し、実際にデザインを制作できるように解説します。 -
個性ある魅力的なデザインのためのスキルタイポグラフィやレイアウト、配色、そして動きなどの視点から、独自のデザインを作り上げる方法をお教えします。様々な手法やアプローチを通して表現力を磨きます。
-
WebサイトにおけるFigmaでのデザイン制作現在、世界的に使用率が上がり、一般的なツールとなりつつあるFigmaを使用し、Webサイトのデザイン制作方法を解説します。また、実践的な操作に焦点を当てながら、必要な機能を身に付け、実際にWebサイトを制作するまでの過程をお教えします。 -
実際のプロジェクトを基にした課題制作実際に携わったプロジェクトを基に、現場でのリアルな仕事のプロセスを解説します。依頼や撮影、素材作成から、デザイン制作と修正、納品までの具体的なプロセスを紹介します。 -
Webから他の媒体への展開ロゴからWebサイトをデザインするだけでなく、他のアプリケーションツールへの展開する方法をお教えします。また、分野を横断して表現力を広げるコツを実践的な課題を通して基礎からお伝えします。
- 無期限視聴
- 最安値
一回の購入で、期限の制限なく視聴することができます。
05/18 (月) 販売価格が上がります。
もうすぐ販売価格が上がる予定です。
今すぐご購入ください!
カリキュラム
カリキュラム内容のご紹介
SECTION 01. 概要
01. 自己紹介
- 自己紹介
- 実践的なWebデザインなど講座の概要
- 使用するツール
- 最近の指針
- よくある質問
SECTION 02. 遊びの手法
02. 遊び心のあるデザイン
- 「遊び」とは
- 基礎など前提条件
- 必要なジャンルや目的
- 参考事例
- 課題:プレーンなデザイン
03. タイポグラフィ(表情とタイポグラフィ)
- Webでの文字の基礎
- フォント
- ジャンプ率
- 縦組み横組み
- 課題:文字で遊ぶ
04. レイアウト(揺らぎとレイアウト)
- Webでのレイアウトの基礎
- 余白の効果
- 導線を確保する
- 課題:レイアウトで遊ぶ
05. 配色(感情と配色)
- Webでの配色の基礎
- 正しい色の組み合わせ
- 背景とアクセントカラー
- 写真やイラストも配色に含まれる
- 課題:色で遊ぶ
06. 動き(心地よさと動き)
- Webでの動きの基礎
- マイクロインタラクション
- ページ遷移、ローディング、ホバーエフェクト
- パフォーマンスなどの注意点
- 課題:動きで遊ぶ
SECTION 03. 個性あるデザイン(3講座で一つの課題を完成させる)
07. 対象について知る
- 基本情報、第一印象
- 温度感、声の大きさ、距離感、感情
- 依頼主が何を嫌がるか
- 形、配色、フォント、その他、アウトプットする
08. 感覚を取り入れる
- データにならない感覚
- 感情の細分化
- フックとなる違和感を入れる
- 土、水、鉄などの素材感
- デザインに馴染ませる
09. 他デザインへの展開
- 一貫したビジュアルイメージを使用して展開
- ショップカードや名刺、パンフレット、その他ツールなど
- 手触りをなるべく近くする
- 共通点を作る
SECTION 04. メディアサイト制作(実際のプロジェクトのデザインデータ)
10. メディアサイト制作①
- 要素と構成の確認
- 目的や要素
- ターゲット層
- サイト構成
11. メディアサイト制作②
- 今回のサイト構成の特徴
- ワイヤーフレームの制作
- アイデアの整理
12. メディアサイト制作③
- 素材制作について
- 撮影
- 写真のセレクト
- タイプフェイスの検討
13. メディアサイト制作④
- 用意した素材の配置
- 簡単なレイアウト
14. メディアサイト制作⑤
- セクション2、3の内容を踏まえた調整
- 意識するポイント
15. メディアサイト制作⑥
- SP版のデザイン
- 下層ページのデザイン
SECTION 05. レストランブランディング制作(架空プロジェクトのデザインデータ)
16. レストランブランディング制作①
- 要素と構成の確認
- 目的や要素
- ターゲット層
- サイト構成
17. レストランブランディング制作②
- コンセプトの設定
- 展開を考えたビジュアルの検討
- ロゴの制作
18. レストランブランディング制作③
- 今回のサイト構成の特徴
- ワイヤーフレームの制作
- アイデアの整理
19. レストランブランディング制作④
- 用意した素材の配置
- 簡単なレイアウト
20. レストランブランディング制作⑤
- セクション2、3の内容を踏まえた調整
- 意識するポイント
21. レストランブランディング制作⑥
- ショップカードや名刺、パンフレット、その他ツールなどへの展開
SECTION 06. まとめ
22. まとめ
- これまでの課題の復習
- 実践で遊ぶ注意点
- アドバイスなど
インタビュー
アートディレクター尾花大輔が
お話ししたいこと
使用プログラムについてご案内します。
当講座は、以下のツールを使用します。
[メインツール]
Figma 116.16.13
[サブツール]
Illustrator 2024
おすすめの講座
この講座を見た方は
