Search Input

アートディレクションを用いたWEBデザイン制作

グラフィックデザイナー 尾花大輔




講座詳細




グラフィックデザイナー,尾花大輔_오바나 Details

講座紹介

トレーラー
グラフィックデザイナー
尾花大輔


基礎から実務スキルまで
「デザイン」を重視したWEBサイト制作ノウハウ

Coloso 尾花大輔 アートディレクションを用いたWEBデザイン制作

今回の講座では、WEBサイトを制作する
方法だけを学ぶのではなく、
一味違う「デザイン」を意識した
サイト制作のノウハウをお教えします。

まずは、WEBデザインの基礎として、
サイトの役割や必要な知識、
サイト制作の流れなど、
基本的な知識を身に付けます。
特に、紙媒体とWEBの両方のデザイン分野で
活躍する尾花大輔だからこそ伝えられる、
それぞれの違いについて、
実務のワークフローの説明を加えながら
お話しします。

WEBデザインへの理解を深めた後は、
Adobe XDの使い方を学び、
簡単なバナーなどを制作しながら
操作に慣れていきます。

後半では、「ブランディングサイト」と
「ポートフォリオサイト」の
2つのWEBページ制作を通して
実践スキルを習得。
目的や要素、ターゲット層、
フォントや配色、レイアウトなど、
考慮すべき点を細かく解説しながら、
全体のデザインを仕上げていく
過程を学びます。
また、業種や目的に沿った
デザイン方法に加え、
他サイトとの差別化を図り、
個性的なサイトを目指すコツもお教えします。

他には真似できない、ユニークで魅力のある
WEBサイトを生み出す秘訣を
Colosoで体験してください!

Coloso 講座特徴1
講座情報

本数:22本の映像
難易度:初級・中級
無期限視聴

Coloso 講座特徴2
使用プログラム

Adobe XD 51

※バージョンに関しては、最新版の51以上の使用を推奨します。

Coloso 講座特徴3
動画情報

オンラインVOD
オーディオ:日本語
字幕:日本語

Coloso 講座特徴4
講座特典

作品数:2点(サイト2点)
講義内容の資料(PDFデータ)
課題用の素材(素材写真のJPGデータ、ロゴAIデータなど)
完成版デザインデータ(XDデータ)
など多数の学習資料提供

ブランドの魅力や世界観を最大限に引き出す
尾花大輔のポートフォリオ

実践的なステップごとの例題で
WEBデザインの流れやスキルを身に付けます

※上記の画像は講座に対する理解を深めるためのイメージです。

講師紹介

尾花大輔
グラフィックデザイナー


初めまして。
グラフィック&WEBデザイナーの
尾花大輔です。
2010年から東京を拠点に
フリーランスとして活動し、
WEBサイトの企画・デザイン・情報設計を中心に、
VI/CI・ブランドの企画制作、
販促物全般の制作など、
グラフィックデザイン周辺の
仕事に携わっています。
また、2017年からは
桑沢デザイン研究所の非常勤講師として、
WEBデザインの授業も担当しています。

WEB制作会社と
デザイン事務所を経て独立したので、
その経験を活かして平面デザインの
「何でも屋」のような立ち位置で
仕事をしています。
媒体にこだわらず、素材を引き立てる、
静かな気配りのようなデザインを
心がけています。よろしくお願いします。

背景イメージ
Coloso 尾花大輔
尾花大輔

現) グラフィックデザイナー


【経歴】
・2017年~ 桑沢デザイン研究所 非常勤講師
・2010年~ フリーランスとして活動
・2008年~ デザイン事務所にて勤務
・大阪総合デザイン専門学校卒業

Twitter
講座のポイント

この講座のポイント

WEBデザインと
Adobe XDを
基礎から学習

WEBサイトの役割やデザイナーに求められるもの、といった基礎知識や、Adobe XDの操作方法など、基本からしっかり説明し、企画からWEBサイトが公開されるまでのWEBサイト制作の流れを学んでいきます。

Coloso 尾花大輔 講座のポイント

枠にとらわれない
「紙媒体」のような発想法

紙媒体とWEB、両方のデザイン分野で活動している尾花大輔ならではの経験を基に、2つの違いやどのようにデザインを組み立てていくか、実践を交えてお伝えします。

Coloso 尾花大輔 講座のポイント

コンセプトを明確に伝える
アートディレクション

WEBサイトのトップページは、ブランディングにおけるイメージボードの機能を備えています。商品やサービスの印象を左右する、デザインの根幹となるノウハウを解説します。

Coloso 尾花大輔 講座のポイント

講座内容
下記のような内容を
学べます。


(자동 구성) 가격이 인상됩니다.

지금이 최저가!
カリキュラム

カリキュラム
カリキュラム内容の
ご紹介

SECTION 01. 自己紹介

01. 自己紹介

  1. 仕事紹介
  2. デザイン業務で大事にしている事
  3. 講座の概要について
  4. よくある質問
SECTION 02. WEBデザインの基礎

02. WEBデザインの基礎知識

  1. WEBサイトの役割について
  2. WEBデザイナーに求められるもの
  3. 必要な知識について

03. WEBサイト制作の流れ

  1. WEBサイト制作のワークフロー
  2. ワイヤーフレームについて
  3. スマホやアプリについての解説
  4. UI・XDデザインの役割について

04. 紙とWEBデザインの違い

  1. 条件的な違い
  2. 制作方法の違い

05. 画像について

  1. 拡張子や画像データの基礎知識や利点について
  2. 案件におけるイラストや写真素材の確保について
SECTION 03. XDの基本的な操作方法

06. Adobe XDの基本的な操作方法①

  1. 項目の説明
  2. ツールの説明

07. Adobe XDの基本的な操作方法②

  1. 講座内で使用する機能について
  2. デザインの模倣作成
SECTION 04. ブランディングサイトTOPデザイン制作

08. ブランディングサイトTOPデザイン制作①

  1. お菓子ブランディングサイトのTOPページ制作
  2. 要素と構成の確認
  3. 目的や要素
  4. ターゲット層
  5. サイト構成

09. ブランディングサイトTOPデザイン制作②

  1. ワイヤーフレームの制作
  2. ワイヤーフレームの重要性について

10. ブランディングサイトTOPデザイン制作③

  1. 素材の確認
  2. フォントや配色の設定
  3. 方向性の設定

11. ブランディングサイトTOPデザイン制作④

  1. 写真の配置
  2. テキストの配置
  3. 他素材の配置

12. ブランディングサイトTOPデザイン制作⑤

  1. ファーストビューでの見た目の調整
  2. 余白や文字の大きさの調整
  3. 配色やレイアウトの調整

13. ブランディングサイトTOPデザイン制作⑥

  1. 綺麗に見えるレイアウトについて
  2. 違和感を入れるコツ

14. ブランディングサイトTOPデザイン制作⑦

  1. 別パターン案の制作
  2. タイポグラフィーを使用した案
  3. レイアウトを自由にした案
SECTION 05. ブランディングサイトその他デザイン制作

15. ブランディングサイト下層ページデザイン制作

  1. PC版のTOPを元に下層1ページを制作

16. SPサイトTOPデザイン制作

  1. スマホ版タブレット版をPC版のTOPを元に制作
  2. レスポンシブについての簡単な説明
  3. 逆の制作過程になる可能性について

17. フィードバックや修正について

  1. プロトタイプで共有
  2. クライアントや他メンバーとの確認作業
  3. フィードバックをもらう際に大切にする事
SECTION 06. ポートフォリオサイトデザイン制作

18. ポートフォリオサイトデザイン制作①

  1. 魅力的なポートフォリオサイト制作
  2. 要素と構成の確認
  3. 流れの説明
  4. 目的や要素
  5. ターゲット層
  6. サイト構成

19. ポートフォリオサイトデザイン制作②

  1. ワイヤーフレームの制作
  2. 素材の確認
  3. フォントや配色の設定
  4. 方向性の設定

20. ポートフォリオサイトデザイン制作③

  1. 素材の配置
  2. 簡単なレイアウト

21. ポートフォリオサイトデザイン制作④

  1. 全体のデザインを詰める
  2. 一覧ページ(TOP)と合わせて作品ページのデザイン
SECTION 07. まとめ

22. まとめ

  1. WEBデザインのこれから
  2. 講座の総評
  3. WEBデザイナーとしてのアドバイスなど

インタビュー
グラフィックデザイナー
尾花大輔が
お話したいこと

背景イメージ
Question.01
該当の分野を勉強している方が一番難しく感じている点と、この講座を通してその点をどの様に解決できるでしょうか?


知識としてのコーディングやグラフィックデザインを学べるオンライン講座等はありますが、実践的なWEBデザインを学習できる機会があまりないように感じます。この講座では、実際にワイヤーフレームからデザインを起こして仕上がりを調整していく過程を通じて、手を動かしながら制作の流れを学んでいきます。WEBデザインの初心者には制作を分かりやすく、今現場で働かれている方には、アイデアの幅が広がるような講座になっています。

Question.02
グラフィックデザイン・Webデザインを勉強するきっかけを教えてください。


学生時代に音楽活動をしていたのですが、その繋がりでライブの告知ポスターやDMなどを制作する事に情熱を感じ、デザインの道を志すようになりました。その頃はフォントを選ぶだけで寝食を忘れて丸2日かけたりしていましたが、全く飽きずにのめり込んでいました。その後、専門学校でFlash時代のWEB制作に興味を持ち、WEBと紙媒体の両方を手掛けるデザイン事務所に勤務しました。

Question.03
グラフィックデザイン・WEBデザイン分野の市場性、展望についてお話しください。


グラフィックデザイン(紙媒体)とWEBデザイン業界、それぞれもう少し歩み寄れるのではないか、という印象を持っています。技術的にも精神的にも、それぞれの架け橋となるようなデザイナーはどの現場でも重宝されており、また、様々な分野に理解があり実務レベルの高いアートディレクターは、ブランド全体の構築の中心となるように思います。

Question.04
デザインを表現するにあたって、大切なポイントは何になりますか?


「バランス」が大切だと考えています。芸術性と機能性、必要と欲求、依頼主と制作者、予算とクオリティなど、デザインを仕事で進める上では多種多様なバランス感覚が求められます。良いデザインとは、様々な条件の中で奇跡的なバランスで調和が取れている状態だと思います。

使用プログラムについて
ご案内します。

当講座は、以下のツールを使用します。

[メインツール]
Adobe XD 51

※バージョンに関しては、最新版の51以上の使用を推奨します。

Adobe Xd
おすすめの講座

おすすめの講座
この講座を見た方は
こちらもチェック!

ご注意事項

*本ページ上の情報は弊社の都合により事前の告知なく変更、終了することがございます。予めご了承ください。
*講座の返金規定はColosoの返金ポリシーに準じます。▶ 返金ポリシーはこちら
* 受講、例題使用範囲などの知的財産権、機器台数制限に関する情報はFAQ 欄でご確認ください。