Download to read offline
Uploaded byschoowebcampus
【Schoo web campus】webデザインの基礎 1限目
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/112/room
More Related Content
Similar to 【Schoo web campus】webデザインの基礎 1限目
【Schoo web campus】webデザインの基礎 1限目
- 1. Webデザインの基礎 @Stocker_jp 庄崎大祐 13年4月11日木曜日
- 2. 自己紹介 • 庄崎大祐 • 社会人のための Webデザインスクール • Webデザイン入門書 13年4月11日木曜日
- 3. Webデザインの基礎 •レイアウトの話 • スケッチの話 • 色の話 • Adobeのアプリケーションの話 13年4月11日木曜日
- 4.
- 5. レイアウトの4原則 •近接 • 整列 • コントラスト • 反復 13年4月11日木曜日
- 6.
- 7. 近接 Star 1 Star 2 Star 3 Star 4 13年4月11日木曜日
- 8. 近接 Star 1 Star 2 Star 3 Star 4 Star 5 Star 6 Star 7 Star 8 13年4月11日木曜日
- 9.
- 10. 近接 •関係あるものは近づけ、関係ないものは離す • 関係あるものはまとめる（グループ化する） 13年4月11日木曜日
- 11.
- 12. 左揃え 坊ちゃん 親譲りの無鉄砲で小供の時から損ばかりしている。 小学校に居る時分学校の二階から飛び降りて一週間 ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも知れぬ。 別段深い理由でもない。 13年4月11日木曜日
- 13. 右揃え Home Menu Company Contact 13年4月11日木曜日
- 14. 中央揃え（センター揃え） Webデザイン、Web制作の最新情報を分かりやすく解説するブログ 13年4月11日木曜日
- 15. 整列 •左、右、中央のいずれかに見えない力線があると考え そこに える • Webデザインで無難なのは左 え。意図がある時以外 は右 えや中央 えはあまり使わない 13年4月11日木曜日
- 16. 見えない力線 坊ちゃん 親譲りの無鉄砲で小供の時から損ばかりしている。 小学校に居る時分学校の二階から飛び降りて一週間 ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも知れぬ。 別段深い理由でもない。 13年4月11日木曜日
- 17. 見えない力線 Webデザイン、Web制作の最新情報を分かりやすく解説するブログ 13年4月11日木曜日
- 18.
- 19. コントラスト •色の濃淡 • サイズの大小 • 余白の大きさ • 線の太さ 13年4月11日木曜日
- 20. コントラストが低い例 坊ちゃん 親譲りの無鉄砲で小供の時から損ばかりしている。 小学校に居る時分学校の二階から飛び降りて一週間 ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも知れぬ。 別段深い理由でもない。 13年4月11日木曜日
- 21. コントラストが高い例 坊ちゃん 親譲りの無鉄砲で小供の時から損ばかりしている。 小学校に居る時分学校の二階から飛び降りて一週間 ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも知れぬ。 別段深い理由でもない。 13年4月11日木曜日
- 22. コントラストが高い例 坊ちゃん 親譲りの無鉄砲で小供の時から損ばかりしている。 小学校に居る時分学校の二階から飛び降りて一週間 ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも知れぬ。 別段深い理由でもない。 13年4月11日木曜日
- 23. L R FM k J c I h Symbol Signs collection by sander baumann http://www.designworkplan.com/design/symbol-signs.htm 13年4月11日木曜日
- 24. L R FM k J c I h Symbol Signs collection by sander baumann http://www.designworkplan.com/design/symbol-signs.htm 13年4月11日木曜日
- 25. コントラストの例 坊ちゃん 親譲りの無鉄砲で小供の時から損ばかりしている。 小学校に居る時分学校の二階から飛び降りて一週間 ほど腰を抜かした事がある。 なぜそんな無闇をしたと聞く人があるかも知れぬ。 別段深い理由でもない。 13年4月11日木曜日
- 26. コントラスト •複数の要素が同じ種類でない場合、はっきり違うもの だと伝えるためにコントラストをつける • コントラストには「色の濃淡」「サイズの大小」 「余白の大きさ」「線の太さ」などがある 13年4月11日木曜日
- 27.
- 28.
- 29.
- 30. 反復 •要するに「繰り返し」 • 強い一貫性を持たせる 13年4月11日木曜日
- 31. レイアウトの4原則 •近接 • 整列 • コントラスト • 反復 13年4月11日木曜日
- 32. 今日のテーマ スケッチしよう 13年4月11日木曜日
- 33. なぜスケッチが必要か •Web特有のレイアウトを知るため • 頭の中で「美しいWebページの具体的なイメージ」を 作れるようになるため 13年4月11日木曜日
- 34. まずは 美しいサイトをたくさん見ること 13年4月11日木曜日
- 35. そして、以下のことを考えてみよう •あなたはどこが美しいと思ったか？ • どこが見やすい、使いやすいと思ったか？ • よりよくできるところはないか？ 13年4月11日木曜日
- 36. おすすめの Webデザイン ギャラリーサイト 13年4月11日木曜日
- 37.
- 38.
- 39.
- 40.
- 41. おさえておきたい 色彩・配色の基礎 13年4月11日木曜日
- 42. 無彩色と有彩色 無彩色の例 有彩色の例 これも有彩色 13年4月11日木曜日
- 43.
- 44. 彩度 彩度が高い 彩度が低い 13年4月11日木曜日
- 45. 明度 明度が高い 明度が低い 13年4月11日木曜日
- 46. HSB色空間とRGB色空間 拡大 Hue（色相）/ Saturation（彩度）/ Brightness（明度） Red（赤）/ Green（緑）/ Blue（青） 13年4月11日木曜日
- 47. Rだけが発光 拡大 (255, 0, 0) 13年4月11日木曜日
- 48. Bだけが発光 拡大 (0, 0, 255) 13年4月11日木曜日
- 49. RGBすべて発光 拡大 (255, 255, 255) 13年4月11日木曜日
- 50. 16進数によるRGB色空間の表記 •Web制作の場合は#ff0000のように「16進数」で表記 することが多い • 16進数では0から9までの数字と アルファベットのaからfまでを使用 • 10進数の255と、16進数のffは等しい 13年4月11日木曜日
- 51.
- 52.
- 53.
- 54. どうすれば失敗なく 色を選ぶことができるのか • 「コンピューターを使って色を選ぶと失敗する」理由 のほとんどは、「RGB色空間から色を選んだから」 13年4月11日木曜日
- 55. HSB色空間から色を選ぶ 彩度 明度 色相 13年4月11日木曜日
- 56.
- 57. トーンを統一する うすい あさい 明るい 明るい 灰みの 柔らかい 強い 鮮やかな 灰みの にぶい 濃い 暗い 暗い 灰みの 13年4月11日木曜日
- 58.
- 59.
- 60.
- 61. どうすれば失敗なく 色の組み合わせを選ぶことができるのか • 「同じトーンの中から異なる色相の色を選ぶ」か「同 じ色相の中から異なるトーンの色を選ぶ」 うすい あさい 明るい 明るい 灰みの 柔らかい 強い 鮮やかな 灰みの にぶい 濃い 暗い 暗い 灰みの 13年4月11日木曜日
- 62. HUE/360を使う •配色ツール • ムーン&スペンサーの色彩調和論という考え方を基にし ている 13年4月11日木曜日
- 63.
- 64. ハレーションが 起きないようにするには 13年4月11日木曜日
- 65.
- 66.
- 67.
- 68. Adobeのアプリケーションの 役割を覚えましょう 13年4月11日木曜日
- 69. Photoshop • 写真の色調補正 • 写真の切り抜き • 写真の合成 • Webデザイン • イラスト（主に塗り） 13年4月11日木曜日
- 70.
- 71. Illustrator • ベクターグラフィックの作成 • ロゴやアイコンの作成 • ポスター／チラシなどペラ物 印刷物の作成 13年4月11日木曜日
- 72. @Stocker_ jp Web Designer Daisuke Shozaki 13年4月11日木曜日
- 73.
- 74. Fireworks • Webデザイン制作用 • 操作は Illustrator に似ている • Webに特化した機能が多い 13年4月11日木曜日
- 75. Dreamweaver • HTML/CSS/JavaScript等の コーディング • テンプレート機能や一括置換 など便利な機能が豊富 13年4月11日木曜日
- 76. 今後の方針 • Web制作の現場で役立つよう「実践的であること」 を重視 • あと2回しかないので「Adobe Photoshopを使った Webデザインの基礎」に絞ってお届け 13年4月11日木曜日
- 77. 今後の予定 • 4/18(木) WebデザインのためのPhotoshop実習 • 4/25(木) Photoshopを使ったバナー制作 13年4月11日木曜日
- 78.
- 79. 社会人のための Webデザインスクール • 2013年5月9日（木）∼2013年8月1日（木） • 毎週月曜・木曜の 19:00∼22:00 • 渋谷駅新南口より徒歩30秒の LightningSpot • 詳しくは Stocker.jp 13年4月11日木曜日