Search Input

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

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




講座詳細




アートディレクター,長谷川弘佳_하세가와 Details

講座紹介

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


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

Coloso 長谷川弘佳 タイポグラフィと動きを用いたWEBデザイン

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

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

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

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

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

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

Coloso 講座特徴1
講座情報

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

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

Figma

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

Coloso 講座特徴3
動画情報

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

Coloso 講座特徴4
講座特典

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

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

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

Coloso アートディレクター 長谷川弘佳 講座例題

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

Coloso アートディレクター 長谷川弘佳 講座例題

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

Coloso アートディレクター 長谷川弘佳 講座例題

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

Coloso アートディレクター 長谷川弘佳 講座例題

一覧ページA (PC/SP)

Coloso アートディレクター 長谷川弘佳 講座例題

一覧ページB (PC/SP)

Coloso アートディレクター 長谷川弘佳 講座例題

一覧ページC (PC/SP)

Coloso アートディレクター 長谷川弘佳 講座例題

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

Coloso アートディレクター 長谷川弘佳 講座例題

動きの設計1

Coloso アートディレクター 長谷川弘佳 講座例題

動きの設計2

講師紹介

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


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

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

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

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

背景イメージ
Coloso  長谷川弘佳
長谷川弘佳

現) アートディレクター


【経歴】
多摩美術大学を卒業後、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デザイン制作の楽しさを体験できるカリキュラムです。

Coloso 長谷川弘佳 講座のポイント

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

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

Coloso 長谷川弘佳 講座のポイント

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

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

Coloso 長谷川弘佳 講座のポイント

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


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

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

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

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

01. プロローグ

  1. 自己紹介
  2. 本講座の目的
Section 02. 概要

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

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

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

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

04. Figmaの基本的な使い方

  1. Figmaの基本操作の説明
Section 03. タイポグラフィを用いたインターフェイス

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

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

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

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

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

  1. フレームを制作する
  2. デバイスごとのフレームを用意する(SP、Tablet、 PC)
  3. 全てのページのフレームを用意する
  4. レイアウトグリッドの設定

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

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

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

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

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

  1. 課題説明
  2. 3種類のデザインを作ってみよう!
  3. 伝える順番を考慮してレイアウト
  4. 意識するポイントとは
  5. デザインAの完成(PC/SP)

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

  1. 文字が際立つレイアウト
  2. 意識するポイントとは
  3. デザインBの完成(PC/SP)

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

  1. 文字だけでレイアウト
  2. 意識するポイントとは
  3. デザインCの完成(PC/SP)

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

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

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

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

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

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

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

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

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

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

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

  1. デザインデータを一通り整理する
  2. ボタンルール
  3. 各ページの整理
  4. デバイスごとの整理
  5. 補足
Section 04. 動きを用いたインタラクション

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

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

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

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

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

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

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

  1. サイト全体が動画のようなわくわくするWEBを作るには
  2. ポイント
  3. 企画から考える
  4. 構成を考える
  5. 注意点
Section 05. まとめ

23. まとめ

  1. これまでの課題の復習
  2. 仕事として活用する時のポイント
  3. アドバイスやこれからの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バージョンを使用しますが、
受講に際してはどのバージョンでも問題ありません。

Figma
おすすめの講座

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

ご注意事項

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