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サイト改善のポイント」

4,487 views

Published on

先日実施したセミナーのスライドを公開します。▼フォローアップページ
http://r360studio.com/seminar/imedio20150409/index.html

Published in: Education
  • Be the first to comment

知っておきたい「これからのWebサイト改善のポイント」

  1. 1. 森和恵 知っておきたい これからの Webサイト改善のポイント
  2. 2. このスライドについて iMedio主催セミナー 知っておきたい 「これからのWebサイト改善のポイント」 http://www.sansokan.jp/events/eve_detail.san?H_A_NO=18991 の資料として制作し 参加された方へのフォローアップ目的で公開しています スライドだけではわかりにくい部分もありますが ご了承ください 音声などを含め、フォローアップページでも公開中です http://r360studio.com/seminar/imedio20150409/index.html
  3. 3. 本日の内容 • サイト集客のための改善 + これからのSEO対策とSNS連携で必要なコードについて • コンテンツの魅力を改善 + 読まれて、好きになってもらうための記事表現について • シンプルで効くデザイン改善 + 無駄を省きシンプルになったサイトデザインについて • 2015年iMedio担当講座について
  4. 4. r360studio 森和恵 • Web系のセミナー講師『 自己紹介スライド 』 • 書籍執筆『 よくわかるFireworksの教科書 』など • 勉強会 + ガチンコバトル勉強会 + HTML5とCSSを書籍と学ぼう! • r360studio.com Twitter @r360studio
  5. 5. サイト集客のための改善 これからのSEO対策とSNS連携で必要なコードについて
  6. 6. 「4月21日」に変わる
  7. 7. 4月21日以降、スマホ対応かどうかで 表示順位に影響がでる http://googlewebmastercentral-ja.blogspot.jp/2015/02/finding-more- mobile-friendly-search.html
  8. 8. Googleスマホ検索の閲覧結果 • スマートフォンから Google検索した場合に スマホに対応した結果が表示 • スマートフォンでの閲覧に 最適化されているサイトは [スマホ対応]と表示 • [スマホ対応]サイトは 表示順位が優遇されていた …ここまでは既に対応済み
  9. 9. Googleモバイルフレンドリーテスト https://www.google.com/webmasters/ tools/mobile-friendly/
  10. 10. Googleモバイルガイド • モバイルガイドをみる https://developers.google.co m/webmasters/mobile-sites/ • 「ウェブサイトをモバイル フ レンドリーにする理由」とし て、スマホの閲覧者数の増加 があげられている • 「モバイルSEO」のページで 具体的な手法を確認
  11. 11. モバイルSEO • Googleが提唱する モバイルに対しての検索対策 • 「モバイル設定を選択する」 レスポンシブ or 動的配信 • システムを使わず手軽になら レスポンシブウェブデザイン • ビューポート指定が必要 <meta name="viewport" content="width=device-width"> • 表示スピードが遅いとだめ
  12. 12. レスポンシブWebデザイン • 機器の表示幅に合わせて CSSでレイアウトや見ためを 切り替える • CSS3の「@media」で指定
  13. 13. Google関連のURL • Google検索サービス / Google が掲げる 10 の事実 • ウエブマスター向け公式ブログ • ウェブマスターツール • Google developers • Google ウェブマスター コミュニティ • ウェブマスター オフィスアワー/ウェブマスター ハングアウト • 検索エンジン最適化スターターガイド
  14. 14. OGPコードについて SNS連携に必要なコーディング
  15. 15. OGPコードをサイトに指定 <meta property="og:site_name" content="サイト名" /> <meta property="og:title" content="ページタイトル" /> <meta property="og:type" content="website" /> <meta property="og:url" content="ページURL" /> <meta property=“og:image” content=“サムネイル画像" /> <meta property=“og:description” content=“ページ概要"/> <meta property=“fb:app_id” content=“FBアプリID" /> <meta name="twitter:card" content="summary" /> <meta name=“twitter:site” content=“@Twitterアカウント" />
  16. 16. OGPとは? • OGPコードは、他サイトで ページを紹介した時に、 基本情報(画像/タイトル/詳 細)を表示するためのコード • FacebookやTwitterでリンクを 紹介した時には、OGPの情報 が利用される • <head>タグ内に記述 • サムネイル画像は、 1200×630ピクセル以上 • キャッシュクリアは facebook OGP Debugger
  17. 17. 【まとめ】サイト集客のための改善 SEO対策とSNS連携に必要なコーディングについて • Googleのスマホ対応は、4月21日 から • 「モバイルフレンドリーテスト」でチェック • 「モバイルガイド」を一読 • 手軽に導入するなら、レスポンシブWebデザイン • SNSでページがシェアされた時のためにOGPコードを <head>内に設定しておく
  18. 18. コンテンツの魅力を改善 読まれて、好きになってもらうための 記事表現について
  19. 19. 最近、サイトデザインがシンプルに
  20. 20. ごちゃごちゃしている3カラムから… http://gigazine.net/ http://liginc.co.jp/
  21. 21. シンプルなサイトに https://kinarino.jp/ http://hokuohkurashi.com/
  22. 22. 全体的なデザインで覚える から コンテンツの内容で覚える に変化
  23. 23. コンテンツが増加している • ニュースサイトやSNSなどで、 一日に出合うコンテンツの量 は増えている • 記事に『独自の切り口』を • 『共感』『シェアしたい』 『役に立つ』と思わせる必要 • タイトルやサムネイルが 最初の勝負 • ざっと流し読みしたときが 次の勝負
  24. 24. タイトル と サムネイル • タイトルとサムネイル画像で まずひきつけられるか? • すくない文字数でも主題が伝 わるように • 固有名詞、専門用語、数字、 日付などをどう使うか? • 先が気になる工夫
  25. 25. コンテンツのビジュアルを工夫 • 文中に見出しをつける (流し読みのため) • 段落の文章量 (ひと息で読める程度) • 改行のタイミング • 漢字とひらがなのバランス • 説明的な文語にするか 語りかける口語にするか • 図版や写真 • 箇条書き • 公開日付とライターの名前 https://movabletype.net/blog/
  26. 26. 文章を書くときの注意 • 『主題』『相手にして欲しいこと』 を明確にし、ぼかさない • 『共感』してもらうために 結論を押し付けない • ファンになってもらうために 文章に『個性』をだす • 読み手の心を反発させない 『~すべき』『~はダメ』 など強い言葉は避ける • 『言葉を削ってシンプルに』かつ 『誤解なくわかりやすく』 • 主題や結論など核心部分を先に もったいぶらない 簡単だけど、誰も教えてくれない 77のテクニック 文章力の基本 http://www.amazon.co.jp/dp/4534045883/
  27. 27. PREP法で記事を書く 【 Point 】文章の主題(結論、引きつけるポイント) 【 Reason 】理由(結論づける理由・背景・根拠・効果) 【 Example 】例示(事例や裏付ける情報・数字や具体例) 【 Point 】主題の再確認(念押し、クロージングへ誘導)
  28. 28. どこでコンテンツを作るか • 自サイトだけでなく 他のサイトも利用する (他からの流入・ファン) • 検索結果に表示されるため 気を抜かない • YouTube や SlideShare など専用サイトを利用する • ブログサービスを利用する https://note.mu/r360studio
  29. 29. 【まとめ】コンテンツの魅力を改善 読まれて、好きになってもらうための記事表現について • コンテンツが増加し、目にされる機会が減っている • まずは、タイトルとサムネイルで目を引く • 主題を誤解なく伝えるための文章 • コンテンツで覚えてもらうための個性 • PREP法で流れのあるコンテンツに • 自サイトだけでなく、他のサービスも使う • 糸井重里さん、村上春樹さん、清田いちるさんの文章
  30. 30. シンプルで効くデザイン改善 無駄を省きシンプルになった サイトデザインについて
  31. 31. http://online.actus-interior.com/
  32. 32. http://www.seojapan.com/blog/google-mobile-update-analysis
  33. 33. https://note.mu/r360studio/n/nf103318089b0
  34. 34. コンテンツが主役になるシンプルデザイン • 型にはめないことで 『コンテンツを大きく・広く』あつかえる • レイアウトの自由度があがり、 『コンテンツごとに違った演出をする』ことも可能 • レイアウトを脇役にすることで、 『マルチデバイス対応しても混乱が少ない』 • フラットデザインとも呼ぶ 『伝わりやすく、無駄な要素を削除したヴィジュアル』
  35. 35. OSもフラットデザインに Project Spartan https://youtu.be/EH3QrHdAZvA
  36. 36. Google マテリアルデザイン
  37. 37. シンプルデザインのコツ • コンテンツが主役になるよう に脇役に徹する • ユーザーインターフェースを よくあるパターンにする ※BootstrapなどCSSフレーム ワークを使う • フラットデザインを知る • ポイント部分で特徴をだす
  38. 38. 【まとめ】シンプルで効くデザイン改善 無駄を省きシンプルになったサイトデザインについて • コンテンツが主役になるシンプルデザイン • シンプルにすることで、コンテンツが注目される • OSも変化し、今後は主流になる • フラットデザインを知ること
  39. 39. 2015年iMedio担当講座について • r360studio担当講座の紹介で告知 http://r360studio.com/seminar/ • iMedioメルマガでコラム • 2015年5月以降、毎週金曜日に実施 • 今後の予定 6/5 Illustrator入門 6/12 レスポンシブサイト 6/19 WordPress実践 6/26 jQueryで作るWebサイト 7/X Bootstrapで作るサイト 7/X PHP入門…
  40. 40. r360studio.com

×