Webデザイン実践

Webデザイン実践 サイトに使用するロゴマークのSVG化 〜よくある問題と解決方法〜

第1回:2015年5月2日公開

40min

Webデザイン実践 サイトに使用するロゴマークのSVG化 〜よくある問題と解決方法〜

おためし受講する(5分)

コース概要

この授業では、サイトデザインについて、ロゴマークからファーストビュー、インタラクションデザインまで網羅的に学べます。

良質なサイトデザインを実現したい方におすすめの授業です。

こんな人にオススメ

DTPデータをWebに落とし込む仕事に携わるデザイナー、クロスメディアな制作現場に関わるデザイナー

担当の先生

パーソナリティ

  • 青島 莉子

    青島 莉子

    スクー放送部

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

  • 江川 みどり

    江川 みどり

    スクー放送部

参加したい受講生 : 2465

カテゴリー

タグ

月額980円で、4,600本以上の授業が見放題

授業リスト

Webデザイン実践 サイトに使用するロゴマークのSVG化 〜よくある問題と解決方法〜

2015年5月2日公開

40min.

■ サイトデザイン時によく起こる画像の問題を解決しよう

サイトデザインを請け負った際に必要となるのがサイト素材の回収です。
しかし、実際の現場では回収した画像形式に問題の有ることが多々あります。
中でもロゴ・マークは、その用途が多岐にわたることから、拡大縮小に耐えるデータであることが欠かせません。

そこで『基礎からのWebデザイン実践』1限目では、
ロゴ・マークを題材に、画像素材の取り扱いについて学びます。

下記よくある問題の解決法を紹介します

  1. もらったロゴやマークがビットマップデータの時
  2. もらったロゴやマークがdtp用入稿データの時
  3. もらったロゴやマークがインデックスカラーの時
  4. もらったロゴやマークがCMYKの時

スライド資料

Webデザイン実践 サイトに使用するロゴマークのSVG化 〜SVGのロゴマークを作成しよう〜

2015年5月2日公開

50min.

■ SVG形式のロゴ・マークを作ろう

サイトデザインを請け負った際に必要となるのがサイト素材の回収です。
しかし、実際の現場では回収した画像形式に問題の有ることが多々あります。
中でもロゴ・マークは、その用途が多岐にわたることから、拡大縮小に耐えるデータであることが欠かせません。

そこで『基礎からのWebデザイン実践』2限目では、
ロゴ・マークをSVG形式で新規に作成する方法について学びます。
既存のベクター素材なども利用しながら、実際にロゴ・マークを作成しましょう。

※ SVGはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、ベクターデータとビットマップデータの長所を併せ持ち、互いの苦手を保管しながら綺麗な画像を実現することが出来ます。

※ 授業内容の一部が1限に集約されたため、タイトルを変更しております。ご了承下さい。

スライド資料

Webデザイン実践 デザインの命ファーストビュー制作〜サイト例〜

2015年5月9日公開

40min.

サイトに着地した瞬間に見える画面をファーストビューと言います。
ファーストビューは、訪問者を直帰させるのか、それとも興味を持って回遊し、滞在時間を伸ばしてくれるのかの明暗を分ける、サイト作りにおいて最重要な部分です。

サイズを意識しないサイトはデザインの一部分しか見えないのでデザインにもなりません。
PCもスマホもきっちりファーストビューで完結するデザインの手法を学んでいきます。

前半は、ファーストビューで勝負した優れたサイト例を見ていきます。
優れたサイトのファーストビューにある共通点をあらわにして、後半の実戦へとつなげていきます。

スライド資料

Webデザイン実践 デザインの命ファーストビュー制作〜実演編〜

2015年5月9日公開

50min.

前半はファーストビューの重要さを見てきました。
後半ではファーストビューに完結されたデザインを展開する手法を学んでいきます。

1.PCのアスペクト比は16:9か16:10
2.スマホのアスペクト比はほとんど16:9
3.スマホ時代のサイトはページ遷移よりもスクロール
4.どこをデバイスの画面に切り取られても美しく作る

  • 自己紹介&アジェンダ
  • 00:59
  • 実例で見るファーストビュー考察
  • 09:40
  • ファーストビューの構成要素を考えてみよう
  • 04:41
  • 構成要素を加えていこう
  • 02:00
  • ナビゲーションバーを加えていこう
  • 03:44
  • 企業名を加えていこう
  • 04:09
  • Q:BtoB向けの企業サイトもソーシャルブックマークはあった方がいいのでしょうか。
  • 00:32
  • Q:子供向けでもSNS表示はあった方がよいですか?
  • 01:06
  • Q:Sublimeのコメントアウトの方法を教えて下さい。
  • 00:58
  • Q:最近Web制作ではsketch3というソフトを使用していると耳にします。田中先生は使用されたことはありますでしょうか?
  • 00:43
  • Q:自分の作成したサイトがGoogleの検索にひっかかるようにするには、何が1番必要ですか?
  • 00:52
  • Q:建設業なのですが、SNSは必要ないのでしょうか?
  • 00:43
  • Q:ファーストビューがデバイスによって見え方が違ってしまうようですが、注意するポイントなどありましたら教えて下さい。
  • 01:07
  • Q:「(大規模な)改装をしたら検索順位が下がる」と聞いたことがあるのですが、そうなのでしょうか?
  • 01:18
  • Q:気に入ったサイトなどの保存はどうされていますか?
  • 00:53
  • Q:最近のページは自動スクロールで同ページの下に移動するという形式が多いように感じます。SEO的に問題はありませんか?
  • 01:08
  • Q:4つのSNSアイコンがありましたが、赤いPボタンは、pinterestというサイトですか?
  • 00:43
  • Q:画像の容量はどのくらいまでが限度でしょうか?
  • 01:31
  • Q:今回の架空サイトのソールはどこかで見れますか?
  • 02:04
  • Q:解像度は画面の大きさでWebページの表示領域とは異なると思いますが、どうやって大まかなサイズを設定していますか?
  • 00:48
  • Q:田中先生はレスポンシブでWeb制作をする時は、モバイルファーストかPCファーストどちらを優先して制作しますか?
  • 00:17
  • Q:田中先生がWeb制作してる時に音楽とかかけてますか?
  • 00:52
  • Q:フラットデザインがモバイルに良いということはあるのですか?
  • 01:46
  • Q:WordpressでもプラグインなどでHPも制作ができると思いますが、HTML/CSSでは細かい事ができるという解釈では間違っていますか?
  • 01:36
  • Q:IEの旧バージョンは基本どこまで対応していますか?

スライド資料

Webデザイン実践 サイトデザインのモノクロ構成〜実演編〜

2015年5月16日公開

40min.

Webデザイン実践 サイトデザインのモノクロ構成〜実践編〜

2015年5月16日公開

50min.

前半ではモノクロで見る事により、デザインの良し悪しを浮き彫りにしてみました。

後半はモノクロで作るデザイン実践編です。
1.ワイヤーフレームからデザインは始まっている
2.Webディレクターのワイヤーは構成さえ崩さなければスタイリッシュにブラッシュアップしていい!
3.ごちゃごちゃしたワイヤーはデザインではない。
4.どこかが目立っているワイヤーを作る。
(目立たせたい所はしっかり聞いておく)

スライド資料

Webデザイン実践 触ってもらえる動くページ制作手法〜サイト例〜

2015年5月23日公開

40min.

サイトに着地した時そのサイトが静止したままであれば、それは紙と変わりありません。
人は動く物に目を奪われます。ファーストビューに動く物を配置しましょう。
すると、人はその動く物を触ろうとします。
そんな人を惹きつける動くデザインの制作手法を学びます。

前半は触ってもらえる優れたWebサイト例を見ていきます。
後半では前半で見てきた、インタラクションの実現方法を学んで行きます。

スライド資料

Webデザイン実践 触ってもらえる動くページ制作手法〜実演編〜

2015年5月23日公開

50min.

人は動くものに目を奪われると言う事を前半では学びました。後半は、サイトに着地した瞬間にインタラクションを発動させる上での注意点と技術について学んで行きます。
1.動かすタイミングが大事(ロードされた時は動きが終わっているor動く前にスクロールしてしまった、或いは遷移してしまった)
2.衝撃的な動きは人を惹きつけるが2度目の訪問はない!
3.心地よい動きに会いたくて、また来てしまうビジター
4.動くデザインがすなわちWeb

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ