Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
知っておきたい 「Web制作イマドキの注目ポイント」 r360studio 森和恵
本日の内容 • イマドキのWebデザインのキーワード • スマホ対応サイトの功罪 • コンテンツの表現を考えよう
自己紹介
r360studio 森和恵 • Web系のセミナー講師 • 書籍執筆「 よくわかるFireworksの教科書 」など • 勉強会 + ガチンコバトル勉強会 + r360study 「 HTML5とCSSを書籍と学ぼう！ 」
担当セミナーのご紹介 担当セミナーのスケジュールは、下記ページをご覧ください → r360studio セミナー紹介 http://r360studio.com/seminar/
Q) ウオーミングアップに質問です
Q) Webを使って、楽しんで、いますか？ • よく見るサイトがありますか？ • よく使うサイトはありますか？
note https://note.mu/r360studio note（ノート）は、文章、写真、イラスト、 音楽、映像などを手軽に投稿できるクリエイ ターと読者をつなぐサービスです。ブログの ように使うことも、SNSのように使うことも、 ...
Webを使わなければ、わからない 自社サイト・他者サイトによらず、 作る前にまず、Webを使おう＆楽しもう！
1) イマドキのWebデザインのキーワード
レスポンシブウェブデザイン • Responsive Web Design • ひとつのHTMLファイルで、マルチデバイスに対応 • ベターなスマホ対応サイト
http://www.sbenergy.jp/ http://tsite.jp/r/cpn/100pt/web/ http://www.regalshoes.jp/week/
パララックス効果 • なが～ ～ ～い、縦スクロール • 視差効果で、疑似的な遠近感や動き • おもしろさ、「！」という発見
http://www.tokyo-skytree.jp/ http://tokyobookmark.net/
パララックスというか、スクロール でアニメーションさせる jQueryプラグイン 「ScrollTween.js」 http://blog.asial.co.jp/1083
アイコン • ボタンやリンクにアイコン • ナビゲーションにアイコン • 注意点は、「リンク先に合わせて」絵をチョイス
ナビゲーションにアイコンで 雰囲気をアップ http://jomajoma.com/ http://cookpad.com/
http://dribbble.com/shots/1095922-Free-Flat- Icons 「アイコン,フリー」 で検索すると素材あり
フラットデザイン • 立体感、質感、リアルさを無くした「ベタ塗り」 • 「のぺっ」とした平面感・平坦な見ため • 『どこがボタンかわかんない！』(笑)
iOS5 → iOS6
Windows8
Appleサイトのリニューアル →
Flat UI Colors
http://liginc.co.jp/web/design/material/33723
ロングシャドウ
カード型・パネル型 • コンテンツを1つ単位に四角く囲ったもの • パターン化させやすく、見通しやすい • レスポンシブウェブデザインと相性がいい
http://gunosy.com/ http://www.hadalabo.jp/
http://www.uniqlo.com/jp/ http://www.smaheya.com/
アニメ・ムービー • GIFアニメ、CSS3アニメで小さく動きを • 短いムービーをコンテンツに
http://koikeya.co.jp/gankoage/index.html
http://tokyobookmark. net/ 一見写真なのに自動で 動くムービー
シネマグラフ （1部分だけ動くgif） 6秒動画アプリ 「Vine」
CSS3アニメーション http://tympanus.net/Tutorials/OriginalHoverEffects/ http://tympanus.net/Development/IconHoverEffects/
Webフォント • 自由なフォントが使える • Webサーバー側にフォントファイルを • 画像で飾り文字を作らなくていい（軽量化）
FONT PLUS http://webfont.fontplus.jp/
個人的な結論 • 重いので使いどころを見極める • 技術をカバーするフリー素材がある • ふつうの人は、単純でベタな表現がわかりやすい？
ベタなデザイン • 昔ながらで誰でも親しめる • ベタ＝わかりやすい http://www.choshi-dentetsu.jp/ http://park6.wakwak.com/~ikapann/
必須な知識（フリー素材を使う場合も） • HTML5 • CSS3 • JavaScript , JQuery
2）スマホ対応サイトの功罪 功罪 ＝ よい点とわるい点
スマホ対応とは？ 画面の狭いスマホやタブレットでも、 見やすいレイアウトのサイトを準備すること
サイトのスマホ対応の方法 • 別サイトを作る（別のURLで準備） • レスポンシブウェブデザイン（CSSで切替）
サイトのスマホ対応の方法 • 別サイトを作る • レスポンシブウェブデザイン ←現実的な方法
レスポンシブウエブデザイン • CSS3の @media を用い、画面サイズで切替 • URLが一つ（Google推奨、シェアしやすい） • ベストではなく、ベターな手段 • データが重くなるのがネック
http://kansai-elabo.jp/
サイトがスマホ対応してよかった点 小さな画面にページが収まるため • 読みやすい • 使いやすい
サイトがスマホ対応して悪かった点 「あれ？前と違うページに来ちゃったぞ？」 と思ってしまう
「スマホサイトは、コンテンツが少ない」
パソコン版にあったバナーがスマホ版にない https://www.nttdocomo.co.jp/
別の水着を見たいが、ナビゲーションがない http://item.rakuten.co.jp/mizugishop-bt/n2jg422290_l/
バナーばかりで、サイトの主文がどこかへ https://www.mirasapo.jp/
スマホ対応後の不満点 • パソコン版とコンテンツの内容が違う • 調べたい情報が見つからずストレス • 結局、パソコン版へ切り替える
パソコンでもスマホで も、どんなときも 「コンテンツ」提供が いちばん大切では？ by Vince Alongi
by Vince Alongi しかし… 「コンテンツのデザイン」 って、後回しにしてませんか？
3）コンテンツの表現を考えよう
例）三菱東京UFJサイトのデザイン事件
２月の三菱東京UFJ銀行
変更後の三菱東京UFJ銀行
現在の三菱東京UFJ銀行
人に与えた印象はさまざま • 三菱東京UFJ銀行 公式サイトの乗っ取られてる感が凄い フィッシングサイト？頑張りすぎて逆に偽物感が • なぜ緊急時になるとデザインが崩れるのか • サイト上で流れる文字、点滅するアイコン ……三菱東京...
(^.^) 注意喚起としてわかりやすい • ストレートで、必ず目を引く • わかりやすい「注意」でネット初心者もわかる
(-"-) やりすぎて、怪しげなデザイン • ネットなれしてる人なら、逆に怪しむかも • ページが見苦しい、あか抜けてない • ブランド力に傷がつく、使いたくないと思わせる
見る人と、温度を合わせる • 伝える内容にデザインの調子(トーン)は相応しい？ • みんなに不快感を与えないデザイン？
最適な表現を求めて、実際に試してみる Webサイトは、「使われる」ものだから、 使ってわれた後からの改善が大切。
Ａ／Ｂテスト 二つの選択肢から、どちらが効果があるか計測し確かめる
クリックされるボタン • 検証：クリックされる ボタンの色は？ • 「信頼感の青」 「安心できる緑」など 色がマーケティングで 果たす役割とは
訪問者の行動・気持ちをサポート 見ためのカッコよさにとらわれず、 訪問者の「わかりやすい＆使いやすい」に注目する
自動販売機での、ベタなデザイン
相手がすんなり読める表現 • 1行・1段落の文字数 • 文字のデザイン（サイズ、行間、太字、カラー） • 漢字とひらがなの割合 • 語尾や言い回し、専門用語の使い過ぎはないか？
例）○○社のプライバシーポリシー 個人情報の取扱いについて 株式会社○○（以下「当社」といいます）は、当プライバシーポリシーを掲示し、当プライ バシーポリシーに準拠して提供されるサービス（以下「本サービス」といいます）の利用企 業・提携企業...
例）△ △社のプライバシーポリシー プライバシーポリシー 「○○新聞」にお送りいただいたお客さまの個人情報およびプライバシーの保護については、経済 産業省の「個人情報保護に関する法律についての経済産業分野を対象とするガイドライン」（以下、 ...
コンテンツの主役は誰なのか？ • 商品販売ページなら、商品が主役 • スタッフ紹介なら、スタッフが主役 • 辞書なら、説明する言葉が主役
ページまわりの装飾は、 ホントにそれだけ必要？ http://www.1101.com/anti_aging/2014-04-10.html https://note.mu/r360studio/n/nc8c1c83cc927
まとめ）さぁ、振り返りましょう • イマドキのWebデザインのキーワード • スマホ対応サイトの功罪 • コンテンツの表現を考えよう
自分のサイトの 現状はどうでしたか？ これからの行う対策が 見えてきましたか？ by Hamed Saber
きょうから、始めましょう 日々の積み重ねが、つながっていきます
r360studio 森和恵 ご清聴ありがとうございました
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Upcoming SlideShare
Loading in …5
×

知っておきたい「Web制作イマドキの注目ポイント」

6,054 views

Published on

【知っておきたい「Web制作イマドキの注目ポイント」 】セミナーを担当しました。当日使ったスライドを受講していただいた方のフォローアップ目的で公開いたします。

http://r360studio.com/seminar/imedio20140411/index.html

http://r360studio.com/seminar/narass20141007/index.html

Published in: Education
no profile picture user

  • Be the first to comment

知っておきたい「Web制作イマドキの注目ポイント」

  1. 1. 知っておきたい 「Web制作イマドキの注目ポイント」 r360studio 森和恵
  2. 2. 本日の内容 • イマドキのWebデザインのキーワード • スマホ対応サイトの功罪 • コンテンツの表現を考えよう
  3. 3. 自己紹介
  4. 4. r360studio 森和恵 • Web系のセミナー講師 • 書籍執筆「 よくわかるFireworksの教科書 」など • 勉強会 + ガチンコバトル勉強会 + r360study 「 HTML5とCSSを書籍と学ぼう！ 」
  5. 5. 担当セミナーのご紹介 担当セミナーのスケジュールは、下記ページをご覧ください → r360studio セミナー紹介 http://r360studio.com/seminar/
  6. 6. Q) ウオーミングアップに質問です
  7. 7. Q) Webを使って、楽しんで、いますか？ • よく見るサイトがありますか？ • よく使うサイトはありますか？
  8. 8. note https://note.mu/r360studio note（ノート）は、文章、写真、イラスト、 音楽、映像などを手軽に投稿できるクリエイ ターと読者をつなぐサービスです。ブログの ように使うことも、SNSのように使うことも、 コンテンツを販売することも自在に活用いた だけます。
  9. 9. Webを使わなければ、わからない 自社サイト・他者サイトによらず、 作る前にまず、Webを使おう＆楽しもう！
  10. 10. 1) イマドキのWebデザインのキーワード
  11. 11. レスポンシブウェブデザイン • Responsive Web Design • ひとつのHTMLファイルで、マルチデバイスに対応 • ベターなスマホ対応サイト
  12. 12. http://www.sbenergy.jp/ http://tsite.jp/r/cpn/100pt/web/ http://www.regalshoes.jp/week/
  13. 13. パララックス効果 • なが～ ～ ～い、縦スクロール • 視差効果で、疑似的な遠近感や動き • おもしろさ、「！」という発見
  14. 14. http://www.tokyo-skytree.jp/ http://tokyobookmark.net/
  15. 15. パララックスというか、スクロール でアニメーションさせる jQueryプラグイン 「ScrollTween.js」 http://blog.asial.co.jp/1083
  16. 16. アイコン • ボタンやリンクにアイコン • ナビゲーションにアイコン • 注意点は、「リンク先に合わせて」絵をチョイス
  17. 17. ナビゲーションにアイコンで 雰囲気をアップ http://jomajoma.com/ http://cookpad.com/
  18. 18. http://dribbble.com/shots/1095922-Free-Flat- Icons 「アイコン,フリー」 で検索すると素材あり
  19. 19. フラットデザイン • 立体感、質感、リアルさを無くした「ベタ塗り」 • 「のぺっ」とした平面感・平坦な見ため • 『どこがボタンかわかんない！』(笑)
  20. 20. iOS5 → iOS6
  21. 21. Windows8
  22. 22. Appleサイトのリニューアル →
  23. 23. Flat UI Colors
  24. 24. http://liginc.co.jp/web/design/material/33723
  25. 25. ロングシャドウ
  26. 26. カード型・パネル型 • コンテンツを1つ単位に四角く囲ったもの • パターン化させやすく、見通しやすい • レスポンシブウェブデザインと相性がいい
  27. 27. http://gunosy.com/ http://www.hadalabo.jp/
  28. 28. http://www.uniqlo.com/jp/ http://www.smaheya.com/
  29. 29. アニメ・ムービー • GIFアニメ、CSS3アニメで小さく動きを • 短いムービーをコンテンツに
  30. 30. http://koikeya.co.jp/gankoage/index.html
  31. 31. http://tokyobookmark. net/ 一見写真なのに自動で 動くムービー
  32. 32. シネマグラフ （1部分だけ動くgif） 6秒動画アプリ 「Vine」
  33. 33. CSS3アニメーション http://tympanus.net/Tutorials/OriginalHoverEffects/ http://tympanus.net/Development/IconHoverEffects/
  34. 34. Webフォント • 自由なフォントが使える • Webサーバー側にフォントファイルを • 画像で飾り文字を作らなくていい（軽量化）
  35. 35. FONT PLUS http://webfont.fontplus.jp/
  36. 36. 個人的な結論 • 重いので使いどころを見極める • 技術をカバーするフリー素材がある • ふつうの人は、単純でベタな表現がわかりやすい？
  37. 37. ベタなデザイン • 昔ながらで誰でも親しめる • ベタ＝わかりやすい http://www.choshi-dentetsu.jp/ http://park6.wakwak.com/~ikapann/
  38. 38. 必須な知識（フリー素材を使う場合も） • HTML5 • CSS3 • JavaScript , JQuery
  39. 39. 2）スマホ対応サイトの功罪 功罪 ＝ よい点とわるい点
  40. 40. スマホ対応とは？ 画面の狭いスマホやタブレットでも、 見やすいレイアウトのサイトを準備すること
  41. 41. サイトのスマホ対応の方法 • 別サイトを作る（別のURLで準備） • レスポンシブウェブデザイン（CSSで切替）
  42. 42. サイトのスマホ対応の方法 • 別サイトを作る • レスポンシブウェブデザイン ←現実的な方法
  43. 43. レスポンシブウエブデザイン • CSS3の @media を用い、画面サイズで切替 • URLが一つ（Google推奨、シェアしやすい） • ベストではなく、ベターな手段 • データが重くなるのがネック
  44. 44. http://kansai-elabo.jp/
  45. 45. サイトがスマホ対応してよかった点 小さな画面にページが収まるため • 読みやすい • 使いやすい
  46. 46. サイトがスマホ対応して悪かった点 「あれ？前と違うページに来ちゃったぞ？」 と思ってしまう
  47. 47. 「スマホサイトは、コンテンツが少ない」
  48. 48. パソコン版にあったバナーがスマホ版にない https://www.nttdocomo.co.jp/
  49. 49. 別の水着を見たいが、ナビゲーションがない http://item.rakuten.co.jp/mizugishop-bt/n2jg422290_l/
  50. 50. バナーばかりで、サイトの主文がどこかへ https://www.mirasapo.jp/
  51. 51. スマホ対応後の不満点 • パソコン版とコンテンツの内容が違う • 調べたい情報が見つからずストレス • 結局、パソコン版へ切り替える
  52. 52. パソコンでもスマホで も、どんなときも 「コンテンツ」提供が いちばん大切では？ by Vince Alongi
  53. 53. by Vince Alongi しかし… 「コンテンツのデザイン」 って、後回しにしてませんか？
  54. 54. 3）コンテンツの表現を考えよう
  55. 55. 例）三菱東京UFJサイトのデザイン事件
  56. 56. ２月の三菱東京UFJ銀行
  57. 57. 変更後の三菱東京UFJ銀行
  58. 58. 現在の三菱東京UFJ銀行
  59. 59. 人に与えた印象はさまざま • 三菱東京UFJ銀行 公式サイトの乗っ取られてる感が凄い フィッシングサイト？頑張りすぎて逆に偽物感が • なぜ緊急時になるとデザインが崩れるのか • サイト上で流れる文字、点滅するアイコン ……三菱東京UFJ銀行の注意喚起が“懐かしい”
  60. 60. (^.^) 注意喚起としてわかりやすい • ストレートで、必ず目を引く • わかりやすい「注意」でネット初心者もわかる
  61. 61. (-"-) やりすぎて、怪しげなデザイン • ネットなれしてる人なら、逆に怪しむかも • ページが見苦しい、あか抜けてない • ブランド力に傷がつく、使いたくないと思わせる
  62. 62. 見る人と、温度を合わせる • 伝える内容にデザインの調子(トーン)は相応しい？ • みんなに不快感を与えないデザイン？
  63. 63. 最適な表現を求めて、実際に試してみる Webサイトは、「使われる」ものだから、 使ってわれた後からの改善が大切。
  64. 64. Ａ／Ｂテスト 二つの選択肢から、どちらが効果があるか計測し確かめる
  65. 65. クリックされるボタン • 検証：クリックされる ボタンの色は？ • 「信頼感の青」 「安心できる緑」など 色がマーケティングで 果たす役割とは
  66. 66. 訪問者の行動・気持ちをサポート 見ためのカッコよさにとらわれず、 訪問者の「わかりやすい＆使いやすい」に注目する
  67. 67. 自動販売機での、ベタなデザイン
  68. 68. 相手がすんなり読める表現 • 1行・1段落の文字数 • 文字のデザイン（サイズ、行間、太字、カラー） • 漢字とひらがなの割合 • 語尾や言い回し、専門用語の使い過ぎはないか？
  69. 69. 例）○○社のプライバシーポリシー 個人情報の取扱いについて 株式会社○○（以下「当社」といいます）は、当プライバシーポリシーを掲示し、当プライ バシーポリシーに準拠して提供されるサービス（以下「本サービス」といいます）の利用企 業・提携企業・団体等（以下「利用企業等」といいます）および本サービスをご利用になる 方（以下「ユーザー」といいます）のプライバシーを尊重し、ユーザーの個人情報（以下の 定義に従います）の管理に細心の注意を払い、これを取扱うものとします。
  70. 70. 例）△ △社のプライバシーポリシー プライバシーポリシー 「○○新聞」にお送りいただいたお客さまの個人情報およびプライバシーの保護については、経済 産業省の「個人情報保護に関する法律についての経済産業分野を対象とするガイドライン」（以下、 「ガイドライン」と言います）が、現段階における指導的な基準となっています。 「 ○○新聞」（以下、「 ○○」と言います）の運営会社である株式会社△ △ （以下、「当社」と 言います）は、本ポリシーに記述している事柄とガイドラインを合わせて当社のプライバシーポリ シーとします。
  71. 71. コンテンツの主役は誰なのか？ • 商品販売ページなら、商品が主役 • スタッフ紹介なら、スタッフが主役 • 辞書なら、説明する言葉が主役
  72. 72. ページまわりの装飾は、 ホントにそれだけ必要？ http://www.1101.com/anti_aging/2014-04-10.html https://note.mu/r360studio/n/nc8c1c83cc927
  73. 73. まとめ）さぁ、振り返りましょう • イマドキのWebデザインのキーワード • スマホ対応サイトの功罪 • コンテンツの表現を考えよう
  74. 74. 自分のサイトの 現状はどうでしたか？ これからの行う対策が 見えてきましたか？ by Hamed Saber
  75. 75. きょうから、始めましょう 日々の積み重ねが、つながっていきます
  76. 76. r360studio 森和恵 ご清聴ありがとうございました

×