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デザイナーが考えておきたいSEOのこと

2,607 views

Published on

2015/9/12 名古屋で行われたWCAN 2015 Autumnのセッションの際に使用したスライドです。

Published in: Design

Webデザイナーが考えておきたいSEOのこと

  1. 1. Webデザイナーが考えて おきたいSEOのこと 2015/09/12 WCAN 2015 Autumn
  2. 2. 自己紹介
  3. 3. 自己紹介 井畑徹也 (いはたてつや) Web デザイナー&Web ディレクター 株式会社 WEB 企画所属 入社 2 年目・Web 歴は全体で 6 年目くらい twitter @tihata だんだんひよっことか 言ってられないお年ごろだよ!
  4. 4. ブログ書いてます。 クリエイティブメモメモ http://creativememomemo.com/ WCAN 2015 Summer LT 登壇しました。 「Web デザイナーブログのすすめ」 http://slides.com/tetsuyaihata/web-1-2-3 自己紹介
  5. 5. お話する内容 本日 クリエイティブメモメモの運営や WEB企画で学んだ サイト作りや Google が言っていることを元に SEOの事を考えたサイトづくりについてお話します。 デザインと SEO 重要なテキストはわざと重要に見せない 重要なテキストは画像にしない よろしくお願いします。 サイト内リンクのテキスト alt の付け方 画像を使わないデザイン
  6. 6. セッションの前に...
  7. 7. なぜ WebデザイナーもSEOの 勉強しなくちゃダメなの? セッションの前に そもそも
  8. 8. 超きれいなサイト≠価値のあるサイト ( 商業サイトの場合 ) サイトの価値
  9. 9. サイトの価値 価値のあるサイト=売上のあげられるサイト ( 商業サイトの場合 ) 儲かってなんぼや!
  10. 10. サイトの価値 売上のあげられるサイトの指標 デザインが良い ( 会社・商品にマッチしている) コンバージョン率が高い・離脱率が低い SEO ができている etc... どれも必要不可欠な事だよなー
  11. 11. SEOを理解しておくと良い点 Web デザイナーが 良いことたくさん! がんばっていこうぜ! 他の部署との連携もスムーズになる。 サイト成功のために協力していくデザイナーに! SEO のことを考慮した価値のあるサイトが 作れる! デザインに説得力が増す。
  12. 12. デザインとSEO
  13. 13. SEO テクニカルなこと ユーザーに分かりやすく正しいサイトを つくり、それを検索エンジンに伝えること
  14. 14. テキスト大切に デザイナーさんが一番気をつけたいこと
  15. 15. テキストを大切に 紙デザインと違う点。 Web サイトはテキストデータである。
  16. 16. 重要なテキストは 画像にしない 具体的には
  17. 17. 重要なテキストは画像にしない 重要なテキストを、リンクページの見出しやメニュー項目 などの要素の画像に埋め込まないでください。ユーザー によっては、その要素にアクセスできないことがあるから です。 重要なテキストベースのコンテンツにすべてのユーザーが 確実にアクセスできるようにするには、通常の HTML 内 に記述してください。 画像 - Search Console ヘルプ https://support.google.com/webmasters/answer/114016?hl=ja
  18. 18. テキストの画像化が良くないワケ テキストデータより重い (デバイスの高解像度化によりさらに顕著に) 全てのユーザーがアクセスできないかもしれない (alt 属性では確実ではない) コピペできない (電話番号や住所などコピーしたい時にできない。 ユーザビリティ悪い) 必要以上に文字データを 画像にするのは良くないのかー
  19. 19. 重要なテキストとは? 見出し・メニュー h1,h2,... グローバルナビ、パンくず、 a( サイト内リンク)
  20. 20. でも... 画像使わないと キレイにデザインできないよ!
  21. 21. 回避方法2つ。 1. 画像以外でデザインする。 できるかも しれない 2. わざと小さくテキストを扱う。
  22. 22. その1 画像を使わないデザイン
  23. 23. 問題です ! 突然ですが、 Q.ブログ [ クリエイティブメモメモ] は 画像をいくつ使っているでしょうか? クリエイティブメモメモ http://creativememomemo.com/ 記事のサムネイル以外の 基本的なデザインでの 画像数を答えてくれよな!
  24. 24. 画像を使わなくても 意外とデザイン作れるんだなー 正解は ... 3つ!!
  25. 25. 画像以外でデザインするには? CSS3を使う1. 2. Webフォントを使う
  26. 26. 画像の角丸にできる border-radius テキストや画像に影をつけるられる text-shadow, box-shadow 背景色をグラデーションにできる background プロパティの linear-gradient 画像に境界線をつける border CSS3 で実装できるデザイン四天王 CSS3で実装できるデザイン
  27. 27. border-radius box-shadow linear-gradient border 角丸長方形 (レイヤースタイルではなく、シェイプレイヤー) ドロップシャドウ シャドウ ( 内側 ) 光彩 ( 内側 ) 光彩 ( 外側 ) グラデーションオーバーレイ 境界線 Photoshopの場合「レイヤースタイル」を使おう! Photoshop のプラグイン「CSS3Ps」で CSS が自動で書き出せる CSS3で実装できるデザイン
  28. 28. Webフォントを使う Webフォントって? ユーザー側の環境にとらわれず、サーバーからフォントを 読み込ませて任意のフォントを表示できる仕組み デザイン性の高いフォントも使えるので、 画像でしか出来なかったデザインも可能に! しかもテキストなので検索エンジンに正しく 情報を伝えられる。 テキストなのに グラフィカル!
  29. 29. Webフォントを使ったサイト紹介 WEB 企画 https://webkikaku.co.jp/homepage/ coneri(こねり) http://coneri.jp/ チラシ・特売情報 [ クックパッド ] https://cookpad.com/bargains/about/
  30. 30. 日本語対応のWebフォント ・FONT+ https://webfont.fontplus.jp/ ・TypeSquare http://typesquare.com/ ・Adobe Typekit https://typekit.com/fonts/ ・Fonts.com http://www.fonts.com/ja/web-fonts/ ・amanaimages http://amanaimages.com/font/download/index.aspx ・もじでぱ http://mojidepa.com/login/ ・デコもじ http://decomoji.jp/ etc...
  31. 31. ただ欠点もある... 日本語 Webフォントはまだまだ重い ...
  32. 32. Webフォントの使いどころ 欧文のみ使う 日本語フォントに比べ動作軽い GoogleWebフォントは導入も簡単なので初めてでもオススメ。 アイコンフォント スマホサイトなどに特にオススメ。 世界感の統一には気をつけたい。 デザインは細部に宿る!
  33. 33. font の自体の見え方を制御する CSS 蛇足 font-smoothing http://codepen.io/tihata/pen/avogGv フォントのアンチエイリアスについての指定ができる。 font-kerning http://codepen.io/tihata/pen/RWbzyZ letter-spacingと違って特定の文字組み文字間調整をしてくれる。 ( 英文のみ ) 対応ブラウザは注意!
  34. 34. 画像を使わないデザインのまとめ 画像以外 (Webフォント、CSS3) で デザインすることを考えてみる。 Photoshop でデザインする時はレイヤースタイルを活用 日本語 Webフォントは重いので注意 欧文のみやアイコンフォントで使うのオススメ
  35. 35. わざと 小さくテキストを扱う その 2
  36. 36. わざと小さく扱う 例えば h1
  37. 37. h1タグの基本 h1は会社名などではなく、それぞれのページにオリジナルの文章を h1はそのページを表した大見出しや要約を入れる。(もちろん単語の羅列×) 文字数に制限は特になし (20 文字程度で入れることが多い) 画像の alt 要素で指定するよりも、 テキストデータのがいい 何度も言うけど、 重要な部分は テキストがベター !!
  38. 38. でも... そんな h1テキストで かっこよく入れられない !!
  39. 39. よくやっていること h1をあえて小さくデザインする。 犬山セントラルホテル http://www.inuyama-central-h.co.jp/ 洪内科クリニック http://kohnaika.or.jp/
  40. 40. よくやっていること h1 h2 h3 h1をあえて、 小さくするわけだね!
  41. 41. h1タグをを入れるポイント 文字サイズは大きくても小さくても問題ない ページの上の方に置く テキスト量が上下しても大丈夫なようなスペースを
  42. 42. わざと小さくテキストを 扱う際のまとめ h1を考えるならワイヤーフレーム段階から 関わってサイト全体の把握が大切 文字量が変わっても大丈夫なスペースを作る 重要なテキストはわざと小さく扱うのも一つの手。
  43. 43. 言いたい事の7 割 言いました! ここまでで
  44. 44. 残り3割 行きます! Let s GO!!
  45. 45. サイト内リンクのテキスト
  46. 46. サイト内リンクのテキスト 代表的なサイト内リンク グローバルナビ、サイドバーリンク、パンくずリスト 画像よりテキストのがベター テキストリンクとリンク先の内容を一致させる
  47. 47. リンク先と内容の一致 「詳しく見る」はよくない !
  48. 48. リンク先と内容の一致 リンク先とテキストリンクの 内容は合致していた方が良い。 検索エンジンに情報を正しく伝えられる グローバルナビ フッターリンク (サイドバーリンク) デザインと 要相談
  49. 49. TOP ページを「TOP」にするより 「サイト名」TOPとする方が リンク先との内容の一致を図る クリエイティブメモメモ http://creativememomemo.com/ wcan2015autumn_speaker/ 芝人 http://shibancyu.jp/item/ あとパンくずも一工夫
  50. 50. あとパンくずも一工夫 逆に、現在地のテキストは 重要でないので省略可 クレジットカード大学 http://card-professor.jp/entry-79/ ユーザビリティ的には 省略しない方が 良いこともあるぞ
  51. 51. サイト内リンクのテキストのまとめ サイト内リンクはリンク先の内容を含めたテキストに パンくずのTOP へののリンクテキストは 「TOP」ではなく「サイト名」に
  52. 52. alt の付け方
  53. 53. alt属性って? img 要素の中に記述される 画像の代替となるテキスト情報。 テキストブラウザや音声読み上げブラウザでは、 画像ではなくalt 属性に記載された内容が テキストとして表示、または読み上げられる。 正しく書くことで検索エンジンに正しい 情報を伝えられます。
  54. 54. 全ての img に alt 属性を付けましょう! alt属性は必須 絶対入れてね!!
  55. 55. そのサイト内での 画像の役割を端的に説明するテキスト 文脈を意識する!! alt属性に何を書くか ? それっぽい言葉で言うと コンテキストを 意識したいね。
  56. 56. 例えば ... この img になんてaltをつけますか? 綺麗だわねー
  57. 57. 例えば ... この img になんてaltをつけますか? ひまわり畑 一例 黄色いひまわり
  58. 58. 文章がつくと... 5年ぶりに帰ってきた、何も変わらないこの景色を見ると、 「おかえり」と言われたような気がする。ぼくは目を細めて辺り一面を見渡した ... 文脈によってalt の内容も変化する 「ひまわり畑」に対して 「地元の」とか「懐かしい」とか キーワードを追加したいわね
  59. 59. 意味情報を持たない画像 意味情報を持たない画像 ( 装飾 ) には altを空白にしておく alt= ※html5では alt 自体なくてもいい場合がある。 個人的に装飾は before after 要素で やるの好きよ!
  60. 60. altのまとめ alt 属性は非テキストコンテンツの意味情報を 正しく伝える手助けをする alt 属性はそのサイト内での画像の役割を端的に 説明するものを書く( 文脈によって変わる) 意味がない装飾画像については空白にする (alt= )
  61. 61. 最後に
  62. 62. まとめ テキストを大切に
  63. 63. まとめ 特に見出し (h1) など重要なものはなるべくテキストに Web サイトはテキストデータである 画像の alt はそのサイトでの役割を端的に示したものに。 Webフォントや CSS3を使ってテキストでもグラフィカルに 重要なテキストをデザイン的にわざと小さくみせるのも一つの手
  64. 64. ご清聴 ありがとうございました THANK YOU!!

×