web design hands on seminar

9c0c7dc38ea18b09c2038e87a6413df9?s=47 Eve Okamoto
December 12, 2012

web design hands on seminar

2012年12月8日(土)に名古屋のコワーキングスペース「Basecamp Nagoya」さんにて発表させていただいたセミナーのスライドです。

※ハンズオン以外の前半約2時間分。

9c0c7dc38ea18b09c2038e87a6413df9?s=128

Eve Okamoto

December 12, 2012
Tweet

Transcript

  1. None
  2. テーマ0 . はじめに

  3. はじめに 1 9 8 7 . 1 2 . 2

    4 生まれ 名古屋市内の広告会社にてデザイナーとして勤務。 名刺・ポストカードから、E C サイト・スマートフォンサイトの制作まで、 紙媒体、WE B 媒体に関わらず幅広く制作に携わる。 また、個人の活動においても、パフォーマンス作品や実験的なWE B サイ ト、 アート色の強いグラフィック作品などの制作も精力的に行っている。
  4. はじめに 制作実績 R e s u l t T h

    e m e . 0 h t t p : / / www. s l i mg a t e . c o m/ h t t p : / / www. i wa - k i . c o m/
  5. はじめに h t t p : / / www. y

    mc . g r . j p / o l i v e / h t t p : / / www. t o k a i - y a k e i . c o m h t t p s : / / i t u n e s . a p p l e . c o m/ u s / a p p / h o f u k u z e n s h i n / i d 5 1 0 6 6 3 4 6 8 ? mt = 8 制作実績 R e s u l t T h e m e . 0
  6. はじめに その他、 紙媒体 、 WE B 媒体 問わず多くの作品がありますが、 割愛します。 制作実績

  7. WE B デザインをする前に、 知っておきたい基礎知識 テーマ1 . WE B デザインをする前に 知っ

    ておきたい基礎知識
  8. WE B デザインをする前に、 知っておきたい基礎知識 1 . 急成長を遂げるWE B メディア 2

    . デバイスの変化によるS NS の普及 ( 企業にとってのWE B の価値) ( 個人にとってのWE B の価値)
  9. WE B デザインをする前に、 知っておきたい基礎知識 1 . 急成長を遂げるWE B メディア (

    企業にとってのWE B の価値) 人口に占めるネッ トユーザーの割合 出典:
  10. WE B デザインをする前に、 知っておきたい基礎知識 1 . 急成長を遂げるWE B メディア (

    企業にとってのWE B の価値) 人口に占めるネッ トユーザーの割合 出典: 創業 創業 ※wi k i p e d i a やS NS の登場 サービス開始 i - mo d e サービス 開始
  11. WE B デザインをする前に、 知っておきたい基礎知識 1 . 急成長を遂げるWE B メディア (

    企業にとってのWE B の価値) 人口に占めるネッ トユーザーの割合 出典: 創業 創業 ※wi k i p e d i a やS NS の登場 サービス開始 i - mo d e サービス 開始
  12. WE B デザインをする前に、 知っておきたい基礎知識 1 . 急成長を遂げるWE B メディア (

    企業にとってのWE B の価値) インターネッ トがもたらした購買行動の変化 注意 興味 欲求 記憶 購買
  13. WE B デザインをする前に、 知っておきたい基礎知識 1 . 急成長を遂げるWE B メディア (

    企業にとってのWE B の価値) インターネッ トがもたらした購買行動の変化 注意 興味 欲求 記憶 購買 注意 興味 購買
  14. WE B デザインをする前に、 知っておきたい基礎知識 1 . 急成長を遂げるWE B メディア (

    企業にとってのWE B の価値) インターネッ トがもたらした購買行動の変化 注意 興味 欲求 記憶 購買 注意 興味 検索 購買 共有
  15. WE B デザインをする前に、 知っておきたい基礎知識 1 . 急成長を遂げるWE B メディア (

    企業にとってのWE B の価値) 媒体別広告費の伸び率 出典 :電通 「媒体別広告費の伸び率」
  16. WE B デザインをする前に、 知っておきたい基礎知識 1 . 急成長を遂げるWE B メディア (

    企業にとってのWE B の価値) 媒体別広告費の伸び率 出典 :電通 「媒体別広告費の伸び率」
  17. WE B デザインをする前に、 知っておきたい基礎知識 2 . デバイスの変化によるS NS の普及 (

    個人にとってのWE B の価値) ソーシャルメディア利用者数の推移 出典:総務省 「ソーシャルメディア利用者数の推移」
  18. WE B デザインをする前に、 知っておきたい基礎知識 2 . デバイスの変化によるS NS の普及 (

    個人にとってのWE B の価値) ソーシャルメディア利用者数の推移 出典:総務省 「ソーシャルメディア利用者数の推移」 さらに、 その中でも T wi t t e r :4 0 . 0 % F a c e b o o k :3 3 . 5 %が スマートフォンからの利用! h t t p : / / www. i mp r e s s r d . j p / n e ws / 1 2 0 6 1 2 / i wp 2 0 1 2
  19. WE B デザインをする前に、 知っておきたい基礎知識 2 . デバイスの変化によるS NS の普及 (

    個人にとってのWE B の価値)
  20. WE B デザインをする前に、 知っておきたい基礎知識 2 . デバイスの変化によるS NS の普及 (

    個人にとってのWE B の価値) そもそもこのセミナーだって、 T wi t t e r とF a c e b o o k でしか宣伝していません!
  21. WE B デザインをする前に、 知っておきたい基礎知識 2 . デバイスの変化によるS NS の普及 (

    個人にとってのWE B の価値) そもそもこのセミナーだって、 T wi t t e r とF a c e b o o k でしか宣伝していません!
  22. WE B デザインをする前に、 知っておきたい基礎知識 1 . I T 企業と言ってもやってることは多種多様 3

    . 就職したい!そんな君へちょっとしたヒントを~ 2 . ディレクター? アートディレクター? We b デザイナー?   たくさんあるよ。横文字職種。
  23. WE B デザインをする前に、 知っておきたい基礎知識 1 . I T 企業と言ってもやってることは多種多様 大きく分類すると大体この4

    つに当てはまる。 ※もちろん複合する企業もある。
  24. WE B デザインをする前に、 知っておきたい基礎知識 1 . I T 企業と言ってもやってることは多種多様

  25. WE B デザインをする前に、 知っておきたい基礎知識 1 . I T 企業と言ってもやってることは多種多様 主な企業例

    ※数えきれないほど多く存在します。 もちろんT wi t t e r 社、 F a c e b o o k 社なんかもこの分類。
  26. WE B デザインをする前に、 知っておきたい基礎知識 1 . I T 企業と言ってもやってることは多種多様

  27. WE B デザインをする前に、 知っておきたい基礎知識 1 . I T 企業と言ってもやってることは多種多様 主な企業例

    ※あくまで会社概要と今までの業界経験から分類しています。 広告代理店はここの分類。
  28. WE B デザインをする前に、 知っておきたい基礎知識 1 . I T 企業と言ってもやってることは多種多様

  29. WE B デザインをする前に、 知っておきたい基礎知識 1 . I T 企業と言ってもやってることは多種多様 主な企業例

    ※完全に僕個人の趣味で選んでいます。 今回はデザインの素晴らしい会社さんを紹介していますが、   「F l a s h に強い」 や 「E C に強い」 会社もあります。
  30. WE B デザインをする前に、 知っておきたい基礎知識 1 . I T 企業と言ってもやってることは多種多様

  31. WE B デザインをする前に、 知っておきたい基礎知識 1 . I T 企業と言ってもやってることは多種多様 主な企業例

    ※ホスティングサービスの会社もどちらかと言えばここの分類。
  32. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディレクター? アートディレクター? We b

    デザイナー?   たくさんあるよ。横文字職種。
  33. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディレクター? アートディレクター? We b

    デザイナー?   たくさんあるよ。横文字職種。
  34. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディレクター? アートディレクター? We b

    デザイナー?   たくさんあるよ。横文字職種。 よくわからん!
  35. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディ レクター? アートディ レクター?

    We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ
  36. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディ レクター? アートディ レクター?

    We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ クライアントから案件を受注してくる 仕事。WE B は少し特殊で、WE B サイ ト自体がその役割をすることも。 また価格が不透明かつ無形なものを商 材とするため非常に難易度も高い。
  37. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディ レクター? アートディ レクター?

    We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ 営業の受注してきた案件の課題(売上を伸 ばしたいなど) に対して解決策を提案する 仕事。高いヒアリング能力とWE B マーケテ ィング知識が必要となる職種。 プロジェクト自体を管理するため、 予算やス ケジュールに関しても仕切る場合が多い。
  38. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディ レクター? アートディ レクター?

    We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ ディレクターと課題・提案内容を共有し、 ア ート面 (ビジュアル面) に関して提案を行う。 またデザイナーにそれらを伝え、 プロジェク ト全体のデザイン感や方向性がそれないよ う取りしきる役割。 A D と略されるケースも多い。 ディレクターはC D ( クリエイティブディレクター) 。 なお なお、 T V業界のA D はアシスタントディレクター。
  39. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディ レクター? アートディ レクター?

    We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ アートディレクターの決定した方向性に従 って、実際にビジュアル面を制作していく。 会社規模にもよるが、 ひたすらWE B のデザ インのみを行う場合もあるが、紙媒体の制 作や次に紹介するマークアップ業務などを 兼任する場合も中小規模なんかの会社では 多い。
  40. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディ レクター? アートディ レクター?

    We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ デザイナーの 作 成した デザインデータを、 HT ML やC S S 、J a v a s c r i p t を駆使しWE B デー タとして実装していくポジション。 別名フロントエンドエンジニアやコーダーとも 呼ばれる。 ※J a v a s c r i p t の再注目により、 現在枯渇気味な職種。
  41. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディ レクター? アートディ レクター?

    We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ マークアップエンジニアの使用するHT ML や C S S 、J a v a s c r i p t の言語では実装できない「ロ グイン機能」や「決済機能」などを盛り込む際 にそれを開発する役割。 (開発言語としては、 P HP やR u b y 、C 言語、J a v a など) 別名として 別名として、 先ほどのフロントエンドエンジニ アに対してバックエンドエンジニアとも呼ばれ る。
  42. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディ レクター? アートディ レクター?

    We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ
  43. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディ レクター? アートディ レクター?

    We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ WE B サイトなどで必要となる” キャッチコピー ” や ” ページ内の文章” を考える仕事。 中小規模の会社では、 サイトの構成を考えるデ ィレクターが兼任する場合が多い。
  44. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディ レクター? アートディ レクター?

    We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ WE B サイト内で必要となる挿絵などのイラス トを描くプロ。 イラストの描けるデザイナーもいるが、多くは そのテイストに合わせてフリーランスで活躍 している方にお願いするケースが大半。
  45. WE B デザインをする前に、 知っておきたい基礎知識 2 . ディ レクター? アートディ レクター?

    We b デザイナー? たくさんあるよ。 横文字職種。 一般的な仕事の流れ ビジュアル面で必要となるイメージ写真を撮 影するプロフェッショナル。 こちらも撮影したい内容に合わせてプロの方 にお願いするのが一般的だが、 まれにコストや スケジュールの都合でカメラが得意なデザイナ ーが撮影するケースも. . . 。
  46. WE B デザインをする前に、 知っておきたい基礎知識 先ほど、 ディレクターやアートディレクターの紹介でWE B サイトの 構成について少し触れました。 現場ではその構成になるものを

    「ワイヤーフレーム」と通称呼んで います。 また、WE B サイトにどんなページが必要か?どのページからどの ページに遷移した方が分かりやすいかなどを図式化したものを、「 サイトマップ」と読んでいます。 ワイヤーフレーム 、 サイトマップについて
  47. WE B デザインをする前に、 知っておきたい基礎知識 ワイヤーフレーム見本 ワイヤーフレーム 、 サイトマップについて

  48. WE B デザインをする前に、 知っておきたい基礎知識 ワイヤーフレーム見本 ワイヤーフレーム 、 サイトマップについて どこにどの要素を 配置するのかを図示

    ワイヤーフレームの 形式はイラストレータ、 エクセル、 パワポなど様々。
  49. WE B デザインをする前に、 知っておきたい基礎知識 サイトマップ見本 ワイヤーフレーム 、 サイトマップについて

  50. WE B デザインをする前に、 知っておきたい基礎知識 サイトマップ見本 ワイヤーフレーム 、 サイトマップについて ユーザーが使いやすいように WE

    B サイトの導線を考える。 サイトマップを元に サイト制作の見積もりを 作成する。
  51. WE B デザインをする前に、 知っておきたい基礎知識 3 . 就職したい!そんな君へちょっとしたヒントを~

  52. WE B デザインをする前に、 知っておきたい基礎知識 3 . 就職したい!そんな君へちょっとしたヒントを~ 先ほども紹介したようにWE B 業界で働きたい!と言っても

    、その内容は様々です。多くの人に利用されるようなWE B サービスの制作の一員に携わりたいのか、地域の人に直接 喜ばれるような仕事がしたいのか、一人である程度できる ようになりたいのか、など色々あると思います。 自分に正直になって、思う方向に挑戦した方が良いです。 漠然とWE B というだけでは、続かないかもしれません。
  53. WE B デザインをする前に、 知っておきたい基礎知識 3 . 就職したい!そんな君へちょっとしたヒントを~

  54. WE B デザインをする前に、 知っておきたい基礎知識 3 . 就職したい!そんな君へちょっとしたヒントを~ これ過去の自分自身も含めて結構できていないデザイナー の方多いです。僕が面接官なら絶対に聞きます。その上で ポートフォリオも見ます。

    (言っていることと合っているの か?など)
  55. WE B デザインをする前に、 知っておきたい基礎知識 3 . 就職したい!そんな君へちょっとしたヒントを~

  56. WE B デザインをする前に、 知っておきたい基礎知識 3 . 就職したい!そんな君へちょっとしたヒントを~ 受験する会社によってポートフォリオも工夫した方がいい でしょう。即戦力を求めているのか、それとも将来有望な デザイナーを育てたいのかでも見るポイントは変わってき

    ます。 ※WE B 作品だとしてもポートフォリオは紙媒体で郵送した 方が絶対に印象は良いです。 (見る状況・環境)
  57. WE B デザインをする前に、 知っておきたい基礎知識 1 . インターネットの歴史 2 . どういう仕組みでインターネットって、

      見れてるの?
  58. WE B デザインをする前に、 知っておきたい基礎知識 1 . インターネットの歴史 冷戦時代 アメリカが「A R

    P A NE T 」というネットワーク技術を考案。 これがインターネットの全身と呼ばれている。
  59. WE B デザインをする前に、 知っておきたい基礎知識 1 . インターネットの歴史 冷戦時代 アメリカが「A R

    P A NE T 」というネットワーク技術を考案。 これがインターネットの全身と呼ばれている。 A R P A NE T の技術を利用した「NS F Ne t 」と呼ばれる ネットワークが構築され、大学や研究機関にて利用される。
  60. WE B デザインをする前に、 知っておきたい基礎知識 1 . インターネットの歴史 冷戦時代 アメリカが「A R

    P A NE T 」というネットワーク技術を考案。 これがインターネットの全身と呼ばれている。 A R P A NE T の技術を利用した「NS F Ne t 」と呼ばれる ネットワークが構築され、大学や研究機関にて利用される。 インターネットの生みの親、ティム・バーナーズ= リーが wwwの起源となる文書交換システムを提案。翌年、同氏が、 世界初のWe b ブラウザとなる「Wo r l d Wi d e We b 」を開発。
  61. WE B デザインをする前に、 知っておきたい基礎知識 1 . インターネットの歴史 冷戦時代 アメリカが「A R

    P A NE T 」というネットワーク技術を考案。 これがインターネットの全身と呼ばれている。 A R P A NE T の技術を利用した「NS F Ne t 」と呼ばれる ネットワークが構築され、大学や研究機関にて利用される。 インターネットの生みの親、ティム・バーナーズ= リーが wwwの起源となる文書交換システムを提案。翌年、同氏が、 世界初のWe b ブラウザとなる「Wo r l d Wi d e We b 」を開発。 当時のアメリカ副大統領のアル・ゴア氏の 「情報スーパーハイウェイ構想」によってインフラが整備される。
  62. WE B デザインをする前に、 知っておきたい基礎知識 1 . インターネットの歴史 冷戦時代 アメリカが「A R

    P A NE T 」というネットワーク技術を考案。 これがインターネットの全身と呼ばれている。 A R P A NE T の技術を利用した「NS F Ne t 」と呼ばれる ネットワークが構築され、大学や研究機関にて利用される。 インターネットの生みの親、ティム・バーナーズ= リーが wwwの起源となる文書交換システムを提案。翌年、同氏が、 世界初のWe b ブラウザとなる「Wo r l d Wi d e We b 」を開発。 当時のアメリカ副大統領のアル・ゴア氏の 「情報スーパーハイウェイ構想」によってインフラが整備される。 その後1 9 9 5 年、Mi c r o s o f t 社の Wi n d o ws 9 5 の登場によって、爆発的に インターネットは広まっていった。
  63. WE B デザインをする前に、 知っておきたい基礎知識 2 . どういう仕組みでインターネットって 見れてるの?

  64. WE B デザインをする前に、 知っておきたい基礎知識 2 . どういう仕組みでインターネットって 見れてるの?

  65. WE B デザインをする前に、 知っておきたい基礎知識 2 . どういう仕組みでインターネットって 見れてるの?

  66. WE B デザインをする前に、 知っておきたい基礎知識 2 . どういう仕組みでインターネットって 見れてるの?

  67. 2 . どういう仕組みでインターネットって 見れてるの? WE B デザインをする前に、 知っておきたい基礎知識

  68. 2 . どういう仕組みでインターネットって 見れてるの? WE B デザインをする前に、 知っておきたい基礎知識

  69. 2 . どういう仕組みでインターネットって 見れてるの? WE B デザインをする前に、 知っておきたい基礎知識 あれ. .

    . ? ちょっと待てよ? それじゃあ他人のパソコンのデータを 直接見に行くってこと?
  70. 2 . どういう仕組みでインターネットって 見れてるの? WE B デザインをする前に、 知っておきたい基礎知識 あれ. .

    . ? ちょっと待てよ? それじゃあ他人のパソコンのデータを 直接見に行くってこと? ここで 「サーバー」 の出番です !
  71. WE B デザインをする前に、 知っておきたい基礎知識 2 . どういう仕組みでインターネットって 見れてるの? サーバとは? ユーザーからの要求に対して何らかのサービスを提供するシステムの

    ことである。( wi k i p e d i a より抜粋)
  72. WE B デザインをする前に、 知っておきたい基礎知識 2 . どういう仕組みでインターネットって 見れてるの? サーバとは? ユーザーからの要求に対して何らかのサービスを提供するシステムの

    ことである。( wi k i p e d i a より抜粋) ここまでは さっきと一緒
  73. WE B デザインをする前に、 知っておきたい基礎知識 2 . どういう仕組みでインターネットって 見れてるの? サーバとは? ユーザーからの要求に対して何らかのサービスを提供するシステムの

    ことである。( wi k i p e d i a より抜粋) ここまでは さっきと一緒 一般的なP C と 違うのは. . .
  74. WE B デザインをする前に、 知っておきたい基礎知識 2 . どういう仕組みでインターネットって 見れてるの? サーバとは? ユーザーからの要求に対して何らかのサービスを提供するシステムの

    ことである。( wi k i p e d i a より抜粋) ここまでは さっきと一緒 一般的なP C と 違うのは. . . 連続稼働性 ・信頼性 ・設備が違う ! 2 4 時間3 6 5 日停止しない性能 個々の部品の信頼性 災害などから守る場所
  75. WE B デザインをする前に、 知っておきたい基礎知識 2 . どういう仕組みでインターネットって 見れてるの? サーバとは? ユーザーからの要求に対して何らかのサービスを提供するシステムの

    ことである。( wi k i p e d i a より抜粋) ここまでは さっきと一緒 一般的なP C と 違うのは. . . 連続稼働性 ・信頼性 ・設備が違う ! 2 4 時間3 6 5 日停止しない性能 個々の部品の信頼性 災害などから守る場所 ちなみに見た目はこんな感じです
  76. WE B デザインをする前に、 知っておきたい基礎知識 2 . どういう仕組みでインターネットって 見れてるの? サーバとは? ユーザーからの要求に対して何らかのサービスを提供するシステムの

    ことである。( wi k i p e d i a より抜粋) ここまでは さっきと一緒 一般的なP C と 違うのは. . . 連続稼働性 ・信頼性 ・設備が違う ! 2 4 時間3 6 5 日停止しない性能 個々の部品の信頼性 災害などから守る場所 ちなみに見た目はこんな感じです 一般的なP C からサーバとしての 機能以外を排除した非常にシンプルな 見た目です。
  77. 2 . どういう仕組みでインターネットって 見れてるの? WE B デザインをする前に、 知っておきたい基礎知識 なるほど~。 あれ.

    . . ? もう一つ待てよ? そのサーバーまでは、 さっきのI P アドレスで辿り着くの? ここで 「ドメイン」 の出番です !
  78. WE B デザインをする前に、 知っておきたい基礎知識 2 . どういう仕組みでインターネットって 見れてるの? ドメインとは? 先ほどの0

    0 0 . 0 0 0 . 0 . 0 . のようなI P アドレスをwww. g o o g l e . c o . j p の ように人間にわかるような形に変換したもの。 主なドメインには、 . c o m、. c o . j p 、. j p 、. n e t 、. o r g などがあり、 それぞれのドメインには意味合いや規則もある。 . c o . j p → 会社がきちんと存在しているかの証明が必要。 . c o m → C o mp a n y の略だが証明は必要なし。. j p → 日本 など. . .
  79. WE B デザインをする前に、 知っておきたい基礎知識 F T P ソフトについて

  80. WE B デザインをする前に、 知っておきたい基礎知識 F T P ソフトについて F T

    P ソフトとは、WE B データ( H T ML など) を 自分のP C からサーバーへアップロードするためのソフト MA C 用無料F T P ソフト 「C y b e r d u c k 」 WI N D OWS 用無料F T P ソフト 「F F F T P 」
  81. WE B デザインをする前に、 知っておきたい基礎知識 1 . 知っていないと話もできない? p a r

    t . 1 ( WE B サイトの価値・ 値段) ( いっぱいあるよ。 WE B 用語) 最低限おさえておきたい! WE B サイトに関する基礎知識 2 . 知っていないと話もできない? p a r t . 2
  82. WE B デザインをする前に、 知っておきたい基礎知識 1 . 知っていないと話もできない? p a r

    t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい!WE B サイトに関する基礎知識 WE B サイ トの価値や値段というのは非常に不透明で、相場 感も一般的には良く知られていないのが現状です。 基本的には制作に関わる人間の作業に対する人件費がWE B サイトの値段というのが一般的です。 例えば、写真も新らしく撮りたい、キャッチコピーもロゴ もきちんとしたものを作りたい!となった場合、それだけ 値段もかわってきます。
  83. WE B デザインをする前に、 知っておきたい基礎知識 1 . 知っていないと話もできない? p a r

    t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい!WE B サイトに関する基礎知識 WE B サイ トの価値や値段というのは非常に不透明で、相場 感も一般的には良く知られていないのが現状です。 基本的には制作に関わる人間の作業に対する人件費がWE B サイトの値段というのが一般的です。 例えば、写真も新らしく撮りたい、キャッチコピーもロゴ もきちんとしたものを作りたい!となった場合、それだけ 値段もかわってきます。 手を抜くわけではなく、 かけられる予算に対して、 ベストなパフォーマンスを 導くのがプロの仕事です。
  84. WE B デザインをする前に、 知っておきたい基礎知識 1 . 知っていないと話もできない? p a r

    t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい!WE B サイトに関する基礎知識 WE B サイ トの価値や値段というのは非常に不透明で、相場 感も一般的には良く知られていないのが現状です。 基本的には制作に関わる人間の作業に対する人件費がWE B サイトの値段というのが一般的です。 例えば、写真も新らしく撮りたい、キャッチコピーもロゴ もきちんとしたものを作りたい!となった場合、それだけ 値段もかわってきます。 WE B サイトを作ることで達成したい 目的をしっかり定めることが重要! WE B サイト制作というと、 デザインばかりに目がいき がちですが. . .
  85. WE B デザインをする前に、 知っておきたい基礎知識 1 . 知っていないと話もできない? p a r

    t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい!WE B サイトに関する基礎知識 WE B サイ トの価値や値段というのは非常に不透明で、相場 感も一般的には良く知られていないのが現状です。 基本的には制作に関わる人間の作業に対する人件費がWE B サイトの値段というのが一般的です。 例えば、写真も新らしく撮りたい、キャッチコピーもロゴ もきちんとしたものを作りたい!となった場合、それだけ 値段もかわってきます。 例えば、 「とにかく売上を伸ばしたい」 「商品のブランド価値を高めたい」 「会社の信頼性を高めたい」 など この違いでも答えとなる デザインは変わっ てきます !
  86. WE B デザインをする前に、 知っておきたい基礎知識 1 . 知っていないと話もできない? p a r

    t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい!WE B サイトに関する基礎知識 WE B サイ トの価値や値段というのは非常に不透明で、相場 感も一般的には良く知られていないのが現状です。 基本的には制作に関わる人間の作業に対する人件費がWE B サイトの値段というのが一般的です。 例えば、写真も新らしく撮りたい、キャッチコピーもロゴ もきちんとしたものを作りたい!となった場合、それだけ 値段もかわってきます。 とは言っても. . . 。 もしあなたが発注する立場 だったとしたら、 知りたいですよね!
  87. WE B デザインをする前に、 知っておきたい基礎知識 1 . 知っていないと話もできない? p a r

    t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい!WE B サイトに関する基礎知識 T h e m e . 1 We b 担当者F o r u m「ウェブサイト制作の相場早見表」 h t t p : / / we b - t a n . f o r u m. i mp r e s s r d . j p / e / 2 0 0 8 / 0 2 / 2 0 / 2 4 5 6
  88. WE B デザインをする前に、 知っておきたい基礎知識 1 . 知っていないと話もできない? p a r

    t . 1 ( WE B サイトの価値・ 値段) 最低限おさえておきたい!WE B サイトに関する基礎知識 T h e m e . 1 We b 担当者F o r u m「ウェブサイト制作の相場早見表」 h t t p : / / we b - t a n . f o r u m. i mp r e s s r d . j p / e / 2 0 0 8 / 0 2 / 2 0 / 2 4 5 6 あくまで相場。 地域差や発注する相手の 会社規模によっても 大きく差がある。
  89. WE B デザインをする前に、 知っておきたい基礎知識 2 . 知っていないと話もできない? p a r

    t . 2 ( いっぱいあるよ。 WE B 用語) WE B の世界はめまぐるしいスピードで日々新しい技術やサー ビスが登場しています。 そのため、すべてを網羅することは現実的ではありません。 僕らでも不可能です。 しかし、最低限知っておいた方がよい用語がありますので、 ご紹介します。 最低限おさえておきたい!WE B サイトに関する基礎知識
  90. WE B デザインをする前に、 知っておきたい基礎知識 2 . 知っていないと話もできない? p a r

    t . 2 ( いっぱいあるよ。 WE B 用語) ・ドメイン、 サーバ ・ベクターデータ ・S E O ・リスティング広告 ・アクセス解析 ・ユーザビリティ ・C MS ・バナー ・ブラウザ ・HT ML ・ランディングページ 最低限おさえておきたい!WE B サイトに関する基礎知識
  91. WE B デザインをする前に、 知っておきたい基礎知識 2 . 知っていないと話もできない? p a r

    t . 2 ( いっぱいあるよ。 WE B 用語) ・ドメイン、 サーバ ・ベクターデータ ・S E O ・リスティング広告 ・アクセス解析 ・ユーザビリティ 口頭説明します ! ・C MS ・バナー ・ブラウザ ・HT ML ・ランディングページ 最低限おさえておきたい!WE B サイトに関する基礎知識
  92. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    2 . WE B とグラフ ィ ックデザインの違い 3 . WE B デザインのトレンド
  93. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 a . 情報の優先順位

    b . レイアウト c . 配色 d . フォント選び いよいよ本題!WE B デザイン
  94. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 a . 情報の優先順位

    b . レイアウト c . 配色 d . フォント選び いよいよ本題!WE B デザイン
  95. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 例:非リア充だけで楽しもう ! X

    ’ ma s P a r t y 2 0 1 2 a t S a k a e 出演:D J D A R E K A、D J S ONOHOK A P R I C E :2 , 0 0 0 y e n a . 情報の優先順位 いよいよ本題!WE B デザイン
  96. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 例: 情報に順位を 付けてみてください!

    非リア充だけで楽しもう ! X ’ ma s P a r t y 2 0 1 2 a t S a k a e 出演:D J D A R E K A、D J S ONOHOK A P R I C E :2 , 0 0 0 y e n a . 情報の優先順位 いよいよ本題!WE B デザイン
  97. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 P R I

    C E :2 , 0 0 0 y e n 非リア充だけで楽しもう ! ① . . . イベントのタイ トル X ’ ma s P a r t y 2 0 1 2 a t S a k a e 出演:D J D A R E K A、D J S ONOHOK A a . 情報の優先順位 いよいよ本題!WE B デザイン
  98. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 P R I

    C E :2 , 0 0 0 y e n 非リア充だけで楽しもう ! ① ② . . . イベントのタイ トル . . . イベントのキャッチコピー X ’ ma s P a r t y 2 0 1 2 a t S a k a e 出演:D J D A R E K A、D J S ONOHOK A a . 情報の優先順位 いよいよ本題!WE B デザイン
  99. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 P R I

    C E :2 , 0 0 0 y e n 非リア充だけで楽しもう ! ① ③ ③ 同 列 順 位 ③ ② . . . イベントのタイ トル . . . 開催場所 . . . 料金 . . . 出演者 . . . イベントのキャッチコピー X ’ ma s P a r t y 2 0 1 2 a t S a k a e 出演:D J D A R E K A、D J S ONOHOK A a . 情報の優先順位 いよいよ本題!WE B デザイン
  100. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 a . 情報の優先順位

    c . 配色 d . フォント選び いよいよ本題!WE B デザイン b . レイアウト
  101. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    b . レイアウト
  102. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    これが結構むずかしい. . . b . レイアウト
  103. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    何がおかしいのでしょう? 名刺の例 株式会社WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト
  104. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 情報をグループごとに分け、 それぞれのグループに距離を持たせる! いよいよ本題!WE

    B デザイン 名刺の例 株式会社WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト - 近接 -
  105. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    名刺の例 株式会社WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト - コントラスト -
  106. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 「文字の大きさを変える」 「色に濃淡をつける」 などで情報にコントラスト(

    差) を与える。 いよいよ本題!WE B デザイン 名刺の例 株式会社 WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト - コントラスト -
  107. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    名刺の例 株式会社 WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト - 整列 -
  108. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    名刺の例 株式会社 WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト - 整列 - まだなんだか寂しいから 写真を入れたい!
  109. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    名刺の例 株式会社 WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト - 整列 -
  110. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    実は見えない線が存在している ! b . レイアウト - 整列 - 名刺の例 株式会社 WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y
  111. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    写真が無い場合、 この見えない線を 活かしてデザインするのもアリ ! 名刺の例 株式会社WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト - 整列 -
  112. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    写真が無い場合、 この見えない線を 活かしてデザインするのもアリ ! 名刺の例 株式会社WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y b . レイアウト - 整列 - 株式会社WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y 株式会社WE B D E S I G N デザイナー 岡本偉武 MA I L : p a @d o t s u p a . c o m T E L : 0 9 0 - X X X X - Y Y Y Y
  113. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    b . レイアウト - 反復 - T h e m e . 1 参考サイト「住まいづくりの情報サイト」 パナホーム h t t p : / / www. p a n a h o me . j p / i e - y a k u d a c h i /
  114. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    b . レイアウト - 反復 - T h e m e . 1 参考サイト「住まいづくりの情報サイト」 パナホーム h t t p : / / www. p a n a h o me . j p / i e - y a k u d a c h i / > > 反 復 > >
  115. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    b . レイアウト - 反復 - T h e m e . 1 参考サイト「住まいづくりの情報サイト」 パナホーム h t t p : / / www. p a n a h o me . j p / i e - y a k u d a c h i / > > 反 復 反 復 > > >
  116. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 いよいよ本題!WE B デザイン

    b . レイアウト - 参考サイト ・書籍 - T h e m e . 1 WE B デザインレシピ 2 0 1 1 / 5 / 5 h t t p : / / we b d e s i g n r e c i p e s . c o m/ we b - d e s i g n - b e g i n n e r - l e a r n i n g - d t p - d e s i g n / デザインのルール、レイアウトのセオリー Md N 出版
  117. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 a . 情報の優先順位

    d . フォント選び b . レイアウト c . 配色 いよいよ本題!WE B デザイン
  118. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 配色はデザインの中でも面白い反面、非常にセンスの問わ れる作業です。まずは配色に意識して良いサイトをたくさ ん見ることが一番の近道です。

    c . 配色 いよいよ本題!WE B デザイン T h e m e . 1
  119. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 配色はデザインの中でも面白い反面、非常にセンスの問わ れる作業です。まずは配色に意識して良いサイトをたくさ ん見ることが一番の近道です。

    「中国自動車学校」h t t p : / / www. c h u g o k u - d s . c o . j p /  「F e s t i v a l R o c k e n S e i n e 」h t t p : / / www. r o c k e n s e i n e . c o m/ e n / 参考サイト「ロフト」h t t p : / / www. l o f t . c o . j p /  「b i k k e 」h t t p : / / b i k k e - b i k k e . j p /  「L o wd i 」h t t p s : / / l o wd i . c o m/ c . 配色 いよいよ本題!WE B デザイン T h e m e . 1
  120. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 優れたWE B デザインを紹介しているアーカイブサイト。

    s 5 - s t y l e h t t p : / / b m. s 5 - s t y l e . c o m/ ズロック h t t p : / / www. z z r o c k . n e t / c . 配色 いよいよ本題!WE B デザイン T h e m e . 1
  121. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 それでもセオリーを知りたい! c .

    配色 いよいよ本題!WE B デザイン
  122. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 色の基本 色相環 赤、

    黄、 緑、 青、 紫を代表としてその中間の色 を当てはめていった結果、 このような輪が出 来る。なお、この輪の反対の色が「補色」と 言われ、お互いの色を引き立てると言われて います。 c . 配色 いよいよ本題!WE B デザイン T h e m e . 1 S h i k i s o u k a n 参考:We b クリエイターズマニュアル 「カラーデザインの基本。色の三属性とは?」 h t t p : / / c r e a t o r s - ma n u a l . c o m/ c o l o r _ f o u n d a t i o n s /
  123. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 色の基本 明度 サンプル

    サンプル サンプル サンプル 文字通り明るさの度合いのことです。左のサ ンプルの場合、 このスライドショーの背景が 黒のため、 真っ白の明度の高い文字の方が読 みやすいですよね。この読みやすさを可読性 とも言います。 c . 配色 いよいよ本題!WE B デザイン
  124. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 色の基本 彩度 サンプル

    サンプル サンプル サンプル こちらも文字の通りですが、色の 鮮やかさを表します。彩度のもっ とも高い色を原色または純色と呼 びます。 彩度を下げていくと、徐々に色味 を感じなくなり、最終的にはグレ ーとなります。 c . 配色 いよいよ本題!WE B デザイン T h e m e . 1 参考:We b クリエイターズマニュアル 「カラーデザインの基本。色の三属性とは?」 h t t p : / / c r e a t o r s - ma n u a l . c o m/ c o l o r _ f o u n d a t i o n s / S a i d o
  125. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 色の基本を理解したら、 次にベースカラーを決定する。 c

    . 配色 いよいよ本題!WE B デザイン
  126. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 色の基本を理解したら、 次にベースカラーを決定する。 c

    . 配色 いよいよ本題!WE B デザイン 恐怖・高級感・男性的 情熱的・衝動的・暴力 家庭・暖かい・深い知恵 好奇心・幸福・軽快 穏やかさ・自然・協調 清潔・美しさ・純粋 清潔感・涼しさ・透明感 安全・誠実・冷静 高貴・優雅・非現実的 女性的・うららかさ
  127. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 色の基本を理解したら、 次にベースカラーを決定する。 c

    . 配色 いよいよ本題!WE B デザイン 恐怖・高級感・男性的 情熱的・衝動的・暴力 家庭・暖かい・深い知恵 好奇心・幸福・軽快 穏やかさ・自然・協調 清潔・美しさ・純粋 清潔感・涼しさ・透明感 安全・誠実・冷静 高貴・優雅・非現実的 女性的・うららかさ R G B のパレットから 選ぶのでどうしても 彩度の高い色を選びがち. . .
  128. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 デザインの優れたサイトが どんな色を使っているのか知ろう !

    c . 配色 いよいよ本題!WE B デザイン
  129. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 デザインの優れたサイトが どんな色を使っているのか知ろう !

    G o o g l e C h r o me の 拡張機能( アドオン) で C o l o r P i c k e r と検索! c . 配色 いよいよ本題!WE B デザイン
  130. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 ベースカラーが決まったら配色を考えよう ! c

    . 配色 いよいよ本題!WE B デザイン
  131. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 ドミナントカラー配色 ドミナントトーン配色 トーンオントーン配色

    トーンイントーン配色 トーナル配色. . . ベースカラーが決まったら配色を考えよう ! c . 配色 いよいよ本題!WE B デザイン
  132. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 ドミナントカラー配色 ドミナントトーン配色 トーンオントーン配色

    トーンイントーン配色 トーナル配色. . . ベースカラーが決まったら配色を考えよう ! c . 配色 いよいよ本題!WE B デザイン むずかしそう. . .
  133. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 そんな方におすすめ! 配色を自動化するツールがあります。 「k

    u l e r 」h t t p s : / / k u l e r . a d o b e . c o m/ c . 配色 いよいよ本題!WE B デザイン
  134. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 そんな方におすすめ! 配色を自動化するツールがあります。 「k

    u l e r 」h t t p s : / / k u l e r . a d o b e . c o m/ A n a l o g o u s :類似色 Mo n o c h r o ma t i c :モノクロ,単色 T r i a d :トライアッドなど 自動で配色してくれます! c . 配色 いよいよ本題!WE B デザイン
  135. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 c . 配色

    - 参考サイト ・書籍 - いよいよ本題!WE B デザイン T h e m e . 1 ノンデザイナーのための配色理論 h t t p : / / www. s l i d e s h a r e . n e t / s a u c e r j p / s s - 1 4 9 0 2 6 8 1 ウェブ配色 決める! チカラ 坂本 邦夫 著
  136. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 a . 情報の優先順位

    b . レイアウト c . 配色 d . フォント選び いよいよ本題!WE B デザイン
  137. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 最後にフォントについて少し紹介します。デザインにおいてフ ォントは、ユーザーに言葉としての意味を伝えるだけでなく、 書体の形や大きさ、

    太さなどから、 感覚的な情報も伝えます。 d . フォント選び いよいよ本題!WE B デザイン
  138. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 明朝体/ セリフ体 書体選び

    F o n t s 書体選び ゴシック体/ サンセリフ体 最後にフォントについて少し紹介します。デザインにおいてフ ォントは、ユーザーに言葉としての意味を伝えるだけでなく、 書体の形や大きさ、 太さなどから、 感覚的な情報も伝えます。 d . フォント選び いよいよ本題!WE B デザイン
  139. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 明朝体/ セリフ体 書体選び

    F o n t s 書体選び ゴシック体/ サンセリフ体 書体選び F o n t s 書体選び F o n t s はね・はらい有り はね・はらい無し 最後にフォントについて少し紹介します。デザインにおいてフ ォントは、ユーザーに言葉としての意味を伝えるだけでなく、 書体の形や大きさ、 太さなどから、 感覚的な情報も伝えます。 d . フォント選び いよいよ本題!WE B デザイン
  140. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 書体選び ゴシック体/ サンセリフ体

    元気・若々しい印象 最後にフォントについて少し紹介します。デザインにおいてフ ォントは、ユーザーに言葉としての意味を伝えるだけでなく、 書体の形や大きさ、 太さなどから、 感覚的な情報も伝えます。 d . フォント選び いよいよ本題!WE B デザイン 明朝体/ セリフ体 書体選び F o n t s おごそかで上品な印象
  141. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン T h e m e . 1 明朝体/ セリフ体(日本語) カタオカデザインワークス 「まるみんオールド」 有限会社エイワン「Z E Nオールド明朝」 株式会社モリサワ「リュウミン」 株式会社モリサワ「A 1 明朝」 日本語フォントだと このあたりが人気!
  142. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン 明朝体/ セリフ体(英語) We b D e s i g n C e n t u r y We b D e s i g n We b D e s i g n T i m e s G e o r g i a 英 語 フ ン ト だ と こ の あ た り が メ ジ
  143. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン ゴシック体/ サンセリフ体(日本語) 株式会社モリサワ「新ゴ」 株式会社モリサワ「フォーク」 T y p e P r o j e c t 「A X I S F o n t s 」 視覚デザイン研究所「ロゴG 」 株式会社モリサワ「新丸ゴ」 日本語フォントだと このあたりが人気!
  144. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン ゴシック体/ サンセリフ体(英語) We b D e s i g n A r i a l We b D e s i g n We b D e s i g n D I N G i l l S a n s We b D e s i g n H e l v e t i c a 英 語 フ ン ト だ と こ の あ た り が メ ジ
  145. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン 行間、 カーニング (文字詰め) について 行間を狭めると非常に読みづら くなりますので注意してくださ い。行間を狭めると非常に読み づらくなりますので注意してく ださい。 行間にこれくらいの余裕がある 行間にこれくらいの余裕がある と見やすくなりますね。適度に 行間をとってデザインしましょ う。
  146. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン 行間、 カーニング (文字詰め) について 行間を狭めると非常に読みづら くなりますので注意してくださ い。行間を狭めると非常に読み づらくなりますので注意してく ださい。 行間にこれくらいの余裕がある 行間にこれくらいの余裕がある と見やすくなりますね。適度に 行間をとってデザインしましょ う。 こちらの文章は行の右端がそろ っていなくて非常に気持ちが悪 いですね。 きちんと揃えるよう にしましょう。 やっぱり揃えた方が見栄えが やっぱり揃えた方が見栄えがよ く読みやすいですよね。文章を デザインする時はこうあるべき ですよね!
  147. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン 行間、 カーニング (文字詰め) について 文字詰めについて
  148. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン 行間、 カーニング (文字詰め) について 文字詰めについて 文字詰めについて 文字詰めについて 文字詰めについて 文字詰めについて 文字詰めについて 文字詰めについて 文字詰めについて
  149. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン 行間、 カーニング (文字詰め) について 文字詰めについて
  150. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン 文字のジャンプ率について
  151. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン 文字のジャンプ率について 「ジャンプ率」とは、 一 番小さい文字と大きい文字 との差のことを言います。 一般的に、 ジャンプ率が小さいほど、 ” 大人っぽさ や高級感” を表現し、 大きいほど、 ” 活発さや子ど もらしさ” を表します。
  152. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    いよいよ本題!WE B デザイン T h e m e . 1 文字のジャンプ率について ジャンプ率小さめ ジャンプ率大きめ 「V e r mi c u l a r (バーミキュラ)」 h t t p : / / www. v e r mi c u l a r . j p / 「ビックカメラ×ユニクロ P R E S E N T S ビックロベーダー」 h t t p : / / www. u n i q l o . c o m/ b i c q l o - v a d e r /
  153. WE B デザインをする前に、 知っておきたい基礎知識 1 . デザインの基礎 d . フォント選び

    - 参考サイト ・書籍 - いよいよ本題!WE B デザイン T h e m e . 1 バンクーバーのうぇぶ屋 2 0 1 1 . 9 . 2 6 記事 h t t p : / / we b y a . o p d s g n . c o m/ we b d e s i g n / f o n t s f o r we b d e s i g n e / タイポグラフィの基本ルール ソフトバンククリエイティブ出版
  154. WE B デザインをする前に、 知っておきたい基礎知識 2 . WE B とグラフィ ックデザインの違い

    いよいよ本題!WE B デザイン
  155. WE B デザインをする前に、 知っておきたい基礎知識 2 . WE B とグラフィ ックデザインの違い

    ・情報を探しにきている ・クリックなどの操作が伴う ・マークアップという作業が入る いよいよ本題!WE B デザイン さて、ダラダラとデザインの基礎についてお話してきまし たが、WE B デザインとグラフィック (チラシなど紙媒体へ のデザインのこと) デザインはどこが大きくちがうのでしょ うか?
  156. WE B デザインをする前に、 知っておきたい基礎知識 2 . WE B とグラフィ ックデザインの違い

    ・情報を探しにきている ・クリックなどの操作が伴う ・マークアップという作業が入る 大きな差はこの3 つ! いよいよ本題!WE B デザイン さて、ダラダラとデザインの基礎についてお話してきまし たが、WE B デザインとグラフィック (チラシなど紙媒体へ のデザインのこと) デザインはどこが大きくちがうのでしょ うか?
  157. WE B デザインをする前に、 知っておきたい基礎知識 参考「H a n d y C

    MS L A C N E ( ラクネ) 」 h t t p : / / l a c n e . j p / c ms / 2 . WE B とグラフィ ックデザインの違い ・情報を探しにきている いよいよ本題!WE B デザイン T h e m e . 1 WE B というメディア検索やリンクから来るた め、訪問者の多くは何らかの目的を持ってい ます。 欲しい情報を的確に与えることが、デザイン において重要となります。 そのため、どのページにどんな情報があるの か、一目でわかるよう設計されています。
  158. WE B デザインをする前に、 知っておきたい基礎知識 2 . WE B とグラフィ ックデザインの違い

    ・情報を探しにきている 素早く情報に辿り つけるよう、 デザインされている! いよいよ本題!WE B デザイン WE B というメディア検索やリンクから来るた め、訪問者の多くは何らかの目的を持ってい ます。 欲しい情報を的確に与えることが、デザイン において重要となります。 そのため、どのページにどんな情報があるの か、一目でわかるよう設計されています。
  159. WE B デザインをする前に、 知っておきたい基礎知識 2 . WE B とグラフィ ックデザインの違い

    ・情報を探しにきている 素早く情報に辿り つけるよう、 デザインされている! そしてこのサイト全体のガイド的な役割をするこの部分は、 他のページでも同じ場所で共通して利用される。 いよいよ本題!WE B デザイン WE B というメディア検索やリンクから来るた め、訪問者の多くは何らかの目的を持ってい ます。 欲しい情報を的確に与えることが、デザイン において重要となります。 そのため、どのページにどんな情報があるの か、一目でわかるよう設計されています。
  160. WE B デザインをする前に、 知っておきたい基礎知識 2 . WE B とグラフィ ックデザインの違い

    ・クリックなどの操作が  ともなう いよいよ本題!WE B デザイン 違いの二つ目は、 クリックなどの操作 がともなうかどうかです。 訪問者がパッと見た瞬間にクリック するべき場所がどこかわかりやすい ようデザインされるのが基本です。
  161. WE B デザインをする前に、 知っておきたい基礎知識 2 . WE B とグラフィ ックデザインの違い

    ・クリックなどの操作が  ともなう グラデーションが ほどこされ 、 ボタンだと 認識しやすい! いよいよ本題!WE B デザイン 違いの二つ目は、 クリックなどの操作 がともなうかどうかです。 訪問者がパッと見た瞬間にクリック するべき場所がどこかわかりやすい ようデザインされるのが基本です。
  162. WE B デザインをする前に、 知っておきたい基礎知識 2 . WE B とグラフィ ックデザインの違い

    ・クリックなどの操作が  ともなう グラデーションが ほどこされ 、 ボタンだと 認識しやすい! また、少し分かり づらいが、ボタンの下に 影があるため、浮き出ている ように見える! いよいよ本題!WE B デザイン 違いの二つ目は、 クリックなどの操作 がともなうかどうかです。 訪問者がパッと見た瞬間にクリック するべき場所がどこかわかりやすい ようデザインされるのが基本です。
  163. WE B デザインをする前に、 知っておきたい基礎知識 2 . WE B とグラフィ ックデザインの違い

    ・マークアップという  作業が入る いよいよ本題!WE B デザイン 前半の方でご紹介したようにWE B は デザインして終わりではなく、HT ML 文書にする必要があります。( 要はペ ージに情報としての構造を持たせるこ と) 人間に対して分かりやすく表現する 人間に対して分かりやすく表現すると 同時に、 「検索エンジン」というロボッ トにも情報を伝える必要があります。
  164. WE B デザインをする前に、 知っておきたい基礎知識 2 . WE B とグラフィ ックデザインの違い

    ・マークアップという  作業が入る < h 1 > < l i > < l i > < l i > < / l i > < / l i > < / l i > < / h 1 > いよいよ本題!WE B デザイン マークアップとは、文書に構造を持 たせること。ページの中でどれが何 の要素なのか、どの優先順位で重要 なのかという意味合いを、HT ML タ グというもので囲んでいくと、検索 エンジンが理解できるようになる。 前半の方でご紹介したようにWE B は デザインして終わりではなく、HT ML 文書にする必要があります。( 要はペ ージに情報としての構造を持たせるこ と) 人間に対して分かりやすく表現する 人間に対して分かりやすく表現すると 同時に、 「検索エンジン」というロボッ トにも情報を伝える必要があります。
  165. WE B デザインをする前に、 知っておきたい基礎知識 参考「神鋼不動産株式会社」h t t p : /

    / www. k o b e l c o 2 1 0 3 . j p / WE B サイトの構造について 省略 T i p s T h e m e . 1
  166. WE B デザインをする前に、 知っておきたい基礎知識 WE B サイトの構造について 省略 T i

    p s T h e m e . 1 ヘッダー(頭) フッター(足) メインイメージ コンテンツ
  167. WE B デザインをする前に、 知っておきたい基礎知識 WE B サイトの構造について 省略 T i

    p s T h e m e . 1 ヘッダー(頭) グローバル ナビゲーション フッター(足) メインイメージ コンテンツ
  168. WE B デザインをする前に、 知っておきたい基礎知識 WE B サイトの構造について 省略 T i

    p s T h e m e . 1 ヘッダー(頭) グローバル ナビゲーション メインカラム フッター(足) メインイメージ コンテンツ サイドカラム
  169. WE B デザインをする前に、 知っておきたい基礎知識 WE B サイトの構造について 省略 T i

    p s T h e m e . 1 ヘッダー(頭) グローバル ナビゲーション メインカラム フッター(足) メインイメージ コンテンツ サイドカラム ナビゲーションの位置や カラムの数はちがえど、 基本構造は大体この パターンに当てはまる。
  170. WE B デザインをする前に、 知っておきたい基礎知識 3 . WE B デザインのトレンド レスポンシブWE

    B デザイン 「NHK スタジオパーク」 h t t p : / / www. n h k . o r . j p / s t u d i o p a r k / パララックスWE B デザイン 「東京スカイツリー」 h t t p : / / t o k y o - s k y t r e e . j p / いよいよ本題!WE B デザイン
  171. WE B デザインをする前に、 知っておきたい基礎知識 3 . WE B デザインのトレンド レスポンシブWE

    B デザイン 「NHK スタジオパーク」 h t t p : / / www. n h k . o r . j p / s t u d i o p a r k / パララックスWE B デザイン 「東京スカイツリー」 h t t p : / / t o k y o - s k y t r e e . j p / ブラウザのサイズに よって表示が変化する WE B デザイン。 スマホやタブレットにも 対応している。 いよいよ本題!WE B デザイン
  172. WE B デザインをする前に、 知っておきたい基礎知識 3 . WE B デザインのトレンド レスポンシブWE

    B デザイン 「NHK スタジオパーク」 h t t p : / / www. n h k . o r . j p / s t u d i o p a r k / パララックスWE B デザイン 「東京スカイツリー」 h t t p : / / t o k y o - s k y t r e e . j p / ブラウザのサイズに よって表示が変化する WE B デザイン。 スマホやタブレットにも 対応している。 画面のスクロールに よって視差効果を 生み出すのを狙いとした デザイン。 映像的センスが必要。 いよいよ本題!WE B デザイン
  173. WE B デザインをする前に、 知っておきたい基礎知識 WE B デザインをするにあたって必要な環境 デザイン マークアップ その他

    F o n t s 書体 マークアップ用の アプリケーションは フリーソフトのものでもOK ! 例:S u b l i me T e x t など + o r
  174. 実際にデザインしてみよう! テーマ2 . 実際にデザインしてみよう ! ( 座学はここまでです。ここからハンズオン)

  175. 実際にデザインしてみよう! 課題:クライアントからメールが!    ワイヤーフレームを作ってみよう !

  176. 実際にデザインしてみよう! 課題:クライアントからメールが!    ワイヤーフレームを作ってみよう ! ※太陽工業社は、自動車部品製造メーカーの想定です。(製造業) 「サイトリニューアルの件」 - - - -

    - 株式会社△△ 〇〇様 お世話になっております。 株式会社太陽工業の岡本です。 株式会社太陽工業の岡本です。 さて先日お話させていただいた表題の件ですが、 掲載して頂きたい内容を以下に まとめさせていただきましたのでご確認ください。 デザインのテイストはお任せしますが、 やはり会社としての実績や信頼感というものを考慮し、 ベーシックな形にしていただきたいです。 よろしくお願いします。 よろしくお願いします。 【掲載して頂きたい内容】 ▪会社のロゴマーク、お問い合わせの電話番号と お問い合わせフォームへのボタン ▪メインのイメージに弊社取り扱いの商品の写真。 ※添付ファイルのものです。 ▪キャッチコピー「創業1 0 0 年の信頼と実績。自動車部品なら太陽工業」 ▪ページを分けて載せていただきたい内容 ▪ページを分けて載せていただきたい内容 「太陽工業が選ばれる理由」 「製品紹介」 「納品までの流れ」 「スタッフ紹介」 「会社概要」 ▪ニュース欄 ▪F a c e b o o k (一般的によく見かける顔のたくさん出ているものが良いです) ▪F a c e b o o k (一般的によく見かける顔のたくさん出ているものが良いです) ▪その他、プライバシーポリシー、採用情報、よくある質問 以上となります。また何か不明点等あれば、ご連絡ください。 それでは、よろしくお願いします。
  177. E v e O k a m o t o

    T w i t t e r / @e v e o k a m o t o F a c e b o o k / E v e O k a m o t o M a i l / p a @ d o t s u p a . c o m T h a n k U ! ! ; - )