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