Brand: Coloso. | コロソ.
Price: 35000 JPY
Availability: InStock

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

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

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

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

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

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

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

講座情報

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

使用プログラム

Adobe XD 51

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

動画情報

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

講座特典

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

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

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

模倣サイト
（TOPページ）
ブランディングサイト
（PC版TOPページ）
ブランディングサイト
（PC版下層ページ）

ブランディングサイト
（SP版TOPページ）
ポートフォリオサイト
（PC版TOPページ）
ポートフォリオサイト
（PC版下層ページ）

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

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

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

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

尾花大輔

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

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

Twitter

この講座のポイント

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

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

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

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

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

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

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

WEBデザインの基礎知識

WEBサイトの役割やサイト制作のワークフロー、WEBデザイナーに必要な知識など、WEBデザインを制作する上で必要となる基本的な内容を簡潔に説明します。
紙媒体とWEBの違い

全く違うものであるからこそ、どちらも互いに影響を受けながら進化している、「紙媒体」と「WEB」。２つの条件的な違いや制作方法の違いなどを解説します。
表現に必要なAdobe XDの基本操作方法

初めてAdobe XDを触る方でも分かりやすいように、テキストや図形、写真の配置など実用性のある操作を中心に、デザイン制作に必要な機能を身に付けます。

世界観を考えたビジュアル素材の手配

WEBサイトの中で最も印象に直結し、大切な部分となるのが、写真や動画などのビジュアル要素。クライアントの要望から、どのような考え方で決定していくかをお教えします。
実務の流れを意識した制作プロセス

現実的な案件と条件を仮定し、実際の流れに沿って説明を加えながらデザインしていきます。見栄えの良いサイトを作るだけでなく、業種や目的に沿ったデザイン方法や、実務で役立つ小技なども紹介します。
個性あるサイト制作のための
一味違うひと工夫

隠し味として、少しだけ違和感やフックのある表現を入れると、それが個性となり他サイトとの差別化に繋がります。分かりやすいだけでなく、ユニークで他とは違う、魅力のあるサイト制作を目指します。

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

지금이 최저가!

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

SECTION 01. 自己紹介

01. 自己紹介

仕事紹介
デザイン業務で大事にしている事
講座の概要について
よくある質問

SECTION 02. WEBデザインの基礎

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

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

03. WEBサイト制作の流れ

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

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

条件的な違い
制作方法の違い

05. 画像について

拡張子や画像データの基礎知識や利点について
案件におけるイラストや写真素材の確保について

SECTION 03. XDの基本的な操作方法

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

項目の説明
ツールの説明

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

講座内で使用する機能について
デザインの模倣作成

SECTION 04. ブランディングサイトTOPデザイン制作

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

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

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

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

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

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

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

写真の配置
テキストの配置
他素材の配置

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

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

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

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

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

別パターン案の制作
タイポグラフィーを使用した案
レイアウトを自由にした案

SECTION 05. ブランディングサイトその他デザイン制作

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

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

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

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

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

プロトタイプで共有
クライアントや他メンバーとの確認作業
フィードバックをもらう際に大切にする事

SECTION 06. ポートフォリオサイトデザイン制作

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

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

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

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

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

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

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

全体のデザインを詰める
一覧ページ（TOP）と合わせて作品ページのデザイン

SECTION 07. まとめ

22. まとめ

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

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

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

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

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

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

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

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

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

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

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

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

[メインツール]
Adobe XD 51

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

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

ご注意事項

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

Search Input

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