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

トレーラー
アートディレクター
長谷川弘佳

デザイン＆使いやすさの両方を叶える
インタラクションデザインの秘訣

タイポグラフィが際立つ
見やすさと使いやすさ、
そしておしゃれなデザインの
全てが揃ったインタラクションデザインを
得意とする、長谷川弘佳。

今回の講座では、Figmaを使用し、
タイプの違う３パターンの例題に沿って
長谷川弘佳ならではの
WEBデザインの秘訣をお教えします。

まずは、架空のテーマを基にサイトマップや
ワイヤーフレームを制作し、
デザインの土台となるフレーム制作や
WEBサイトを構成するページの
フレームレイアウトグリッドなどを設定。
また、見出しや本文などの書体ルールを設定し
グリッドデザインシステムを使った
文字サイズの設計など、
サイトで見せる文字の設定を先に決めていきます。

土台の作成が完了したら、
ページのデザインに挑戦。
伝える順番を考慮したレイアウト、
文字が際立つレイアウト、
文字だけのレイアウトの３パターンに沿って
まずはトップページを制作。
次に、一覧ページを制作しながら
スクロールのリズムや最適なカラムなどの
多様なスキルを解説します。

ページデザインを学んだ後は、
動きを用いたインタラクションデザインを実践。
企画からコーディング段階前までの工程の適用や、
アニメーションやボタンごとの動きなどを
コーダーへ伝えるディレクション方法まで
解説します。

WEBページのデザインから
サイトへの実装に向けたディレクションまで
総合的に学べる講座を、
Colosoで体験してください！

講座情報

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

使用プログラム

Figma

※講座内では、116.6.3バージョンを使用しますが、受講に際してはどのバージョンでも問題ありません。

動画情報

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

講座特典

作品数：WEBデザイン３種類
課題用Figmaファイル(数種)

タイポグラフィを活用し
見やすく、おしゃれなデザインを生み出す
長谷川弘佳のポートフォリオ

例題に沿ってWEBデザインにおける
インタラクションデザインのスキルを
身に付けます

トップページA (PC/SP)

トップページB (PC/SP)

トップページC (PC/SP)

一覧ページA (PC/SP)

一覧ページB (PC/SP)

一覧ページC (PC/SP)

デバイスごとのサイズ展開

動きの設計１

動きの設計２

長谷川弘佳
アートディレクター

はじめまして。
アートディレクター/
グラフィック&インターフェイスデザイナーの
長谷川弘佳です。

現在、東京を拠点に
ファッション、アート、食品など、
幅広い業態を中心として
ブランディング、CI/VI、パッケージ、
ビジュアル、アプリ、企画開発などの
デザイン制作を行っています。

私は2009年から、WEB制作を専門に
キャリアをスタートさせました。
デザイン業務を中心としながらも
基礎的なコーディング技術も持っています。

WEBデザインは、
様々な技術が集結された
総合デザインのようなものです。
これまでの経験から、
WEBデザインを習得することで
絵を作る力、伝える力、
情報を整理する力、
動画、写真、編集など、
様々な領域へのデザインも
可能になると感じています。
WEBデザインを通じて
みなさんのデザインの可能性が
広がることを信じています。

長谷川弘佳

現) アートディレクター

【経歴】
多摩美術大学を卒業後、WEB制作会社である博報堂アイスタジオ、mount inc. での勤務を経て独立。
現在はWEBだけでなく、総合ブランディング、CI/VI、印刷など、幅広いメディアでデザインを多数担当。

【受賞歴】
World Best Website Design (2022) 選出
グッドデザイン賞 (2020、2022) 受賞
TOP AWARD ASIA (2020) 受賞
Awwwards (2018、2019) 受賞
CSS Design Awards (2018、2019) 受賞

Facebook

この講座のポイント

分かれば楽しい！
WEBデザインの総合ノウハウ

WEBの特徴から始まり、WEB制作の基本的な流れや企画、構成、デザインの実践、量産、動きのディレクションまで、WEBデザイナーの作業工程を総合的に学び、WEBデザイン制作の楽しさを体験できるカリキュラムです。

タイポグラフィと動きを
自在に操るデザインスキル

実践を通して、タイポグラフィと動きへの論理的な理解を深めます。書体の扱い方やレイアウト、デバイスごとの設計、スクロールやマウスオーバーアニメーションといったWEB制作におけるスキルを解説し、なんとなくのデザインではなく、「理解して作れる」デザインの秘訣をお教えします。

「伝わる」を大切にした
レイアウト技術とインタラクション

なぜその位置なのか、なぜその大きさなのか、といったデザインにおける理由を理解し、レイアウト技術を身に付けます。また、クリックやスクロールなど、ユーザーに行動を促すWEB特有の機能を知ることで、インタラクションのあるサイト作りのコツを学びます。

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

Figmaの基本的な使い方

インターフェースに慣れ、直感的にFigmaを扱えるようになるためのスキルを身に付けます。また、デザインをする際に必要なFigmaの様々な機能の使い方を学んでいきます。
情報の整理力

良いデザインを作るためには、様々な要素を整理する力が重要になります。そのためにも、物ごとのあるべき場所を理解し、情報を整理整頓するスキルを高めます。
タイポグラフィの基礎

WEBサイトにおける文字は、ただの文字ではなく、ボタンなどの機能も含まれます。様々な文字の役割をしっかりと把握し、自在にレイアウトできる力を養います。

空間的な視点

空間や時間に対する感覚を磨くことで、ページ遷移やスクロールによって見え方が変わるWEBサイトを、自由にデザインできる視点を身に付けることができます。
操作させる動きの感覚

触ったり、クリックした時に起こる様々なアクションを覚え、より感覚的に楽しいサイトを作るノウハウを学ぶことができます。
ブラッシュアップする秘訣

WEBサイトがある程度出来上がった後に、どこを仕上げていくとよりクオリティが上がるのか、といったデザインをブラッシュアップする秘訣をお教えします。

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

지금이 최저가!

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

Section 01. イントロダクション

01. プロローグ

自己紹介
本講座の目的

Section 02. 概要

02. 知れば作れる！WEBデザインについて

特徴
他のデザインとの違い
面白さ
タイポグラフィと動きの重要性
WEBデザインの可能性

03. 一般的なWEBデザインの仕事

仕事における関係性
制作プロセス
デザイナーの役割

04. Figmaの基本的な使い方

Figmaの基本操作の説明

Section 03. タイポグラフィを用いたインターフェイス

05. こんなに重要。WEBにおけるタイポグラフィ

タイポグラフィとは
WEBにおけるタイポグラフィ
今後の課題の説明

06. [準備] 設計図を作る

架空のお題の説明
サイトマップの制作
ワイヤーフレームの制作

07. [準備] デザインの土台を作る

フレームを制作する
デバイスごとのフレームを用意する（SP、Tablet、 PC）
全てのページのフレームを用意する
レイアウトグリッドの設定

08. [デザインする] 書体

書体を選ぶための土台を用意する
書体の候補を出す・選ぶ
書体を見るポイント

09. [デザインする] 書体ルールの設計

見出し、本文など必要な書体ルールを用意する
グリッドデザインシステムを使った文字サイズの設計
決まったルールをFigmaに登録する

10. [デザインする] レイアウト基礎①トップページA

課題説明
３種類のデザインを作ってみよう！
伝える順番を考慮してレイアウト
意識するポイントとは
デザインAの完成（PC/SP）

11. [デザインする] レイアウト基礎②トップページB

文字が際立つレイアウト
意識するポイントとは
デザインBの完成（PC/SP）

12. [デザインする] レイアウト基礎③トップページC

文字だけでレイアウト
意識するポイントとは
デザインCの完成（PC/SP）

13. [デザインする] 縦長ページ①Aの一覧ページ

スクロールのリズムを考える
グリッドシステムを利用する
デザインAの一覧ページ完成（PC/SP）

14. [デザインする] 縦長ページ②Bの一覧ページ

最適なカラムを考える
写真と文字のバランスを考える
デザインBの一覧ページ完成（PC/SP）

15. [デザインする] 縦長ページ③Cの一覧ページ

最適なカラムを考える
写真と文字のバランスを考える
デザインCの一覧ページ完成（PC/SP）

16. [デザインする] デバイスごとのAのデザイン展開

SP/Tablet/PCごとのデザイン展開
注意するポイント
カラムを考える
デザインAのデバイス別デザインの完成（SP/Tablet/PC-S、M、L）

17. [デザインする] Aのその他ページ

その他のページを作る
デザインAのその他ページの完成
ナビゲーション
お問合せ
About

18. [仕上げ] データを整理する

デザインデータを一通り整理する
ボタンルール
各ページの整理
デバイスごとの整理
補足

Section 04. 動きを用いたインタラクション

19. WEBが広がる楽しい「動き」

WEBにおける動きの役割
動きの種類
今後の課題の説明

20. [動きの設計] 基礎①Aに動きを考える

表示アニメーションを考える
切り替えアニメーションを考える

21. [動きの設計] 応用①Bに大胆な動きを考える

個性のある動きをつける
画面を大胆に使う

22. [アイデアを広げる] 動画のようなWEBを企画する

サイト全体が動画のようなわくわくするWEBを作るには
ポイント
企画から考える
構成を考える
注意点

Section 05. まとめ

23. まとめ

これまでの課題の復習
仕事として活用する時のポイント
アドバイスやこれからのWEBデザインの在り方

インタビュー
インタビュー
アートディレクター
長谷川弘佳が
お話したいこと

Question.01
WEBデザインにおいて大切なポイントは何になりますか？

今の時代、WEBサイトは私たちの生活において必要不可欠なメディアです。また近年、WEBサイトを誰でも簡単に作れるツールが登場し、気軽にWEB制作にチャレンジできる時代となりました。しかし、誰でも制作できるからといって、良いものが作れるかどうかはまた別の話です。そのため、大事な視点を知ること、理解することは、デザイン制作の基礎として何よりも重要だと思います。

Question.02
講師さまご自身は、勉強してきた中で難しかった部分、それを解決するためにどのような努力をされてきましたか？

最初の頃は、WEBデザインの意味や役割がわからないまま、感覚的にデザインをしていたため、自分のデザインに自信を持つことができませんでした。しかし、制作していくうちに、WEBデザインへの理解が深まり、自分のデザインに自信を持ち、楽しんで作れるようになりました。理解を深めること、意味を論理的に知ること、そして、とにかく手を動かして実践すること、それが成長への鍵だと思います。

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

私が多摩美術大学を卒業した頃は、まだ紙媒体が主流ではあるものの、徐々にWEBの存在感が出始めていた時期でした。就職を考えた時に、「これから新しく成長する分野で思いっきり表現を作っていきたい」という、未来のわくわく感と共に、WEB制作の業界に入ったのがきっかけとなりました。

Question.04
受講生に向けて
メッセージをお願いいたします。

WEBデザインは、2Dや3Dデザインの感覚、建築的な構造整理や空間感覚、編集、展開、動画のスキルが必要となるため、ある種デザイン技術の結集であると思っています。そのため、WEBデザインをデザインの最初の入り口とすることで、今後、様々なメディアのデザインにも挑戦しやすくなると感じています。このように、デザインの世界を広げることができるWEBデザインを、この講座を通して思いっきり楽しみながら、学んでいただけると嬉しいです。

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

使用プログラムについてご案内します。
当講座は、以下のツールを使用します。

[メインツール]
Figma

※講座内では、116.6.3バージョンを使用しますが、
受講に際してはどのバージョンでも問題ありません。

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

ご注意事項

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

Search Input

タイポグラフィと動きを用いたWEBデザイン