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

1. Webデザイナーが考えて
おきたいSEOのこと
2015/09/12 WCAN 2015 Autumn

2. 自己紹介

3. 自己紹介
井畑徹也 (いはたてつや)
Web デザイナー＆Web ディレクター
株式会社 WEB 企画所属
入社 2 年目・Web 歴は全体で 6 年目くらい
twitter @tihata
だんだんひよっことか
言ってられないお年ごろだよ！

4. ブログ書いてます。
クリエイティブメモメモ
http://creativememomemo.com/
WCAN 2015 Summer LT 登壇しました。
「Web デザイナーブログのすすめ」
http://slides.com/tetsuyaihata/web-1-2-3
自己紹介

5. お話する内容
本日
クリエイティブメモメモの運営や WEB企画で学んだ
サイト作りや Google が言っていることを元に
SEOの事を考えたサイトづくりについてお話します。
デザインと SEO
重要なテキストはわざと重要に見せない
重要なテキストは画像にしない
よろしくお願いします。
サイト内リンクのテキスト
alt の付け方
画像を使わないデザイン

6. セッションの前に...

7. なぜ WebデザイナーもSEOの
勉強しなくちゃダメなの？
セッションの前に
そもそも

8. 超きれいなサイト≠価値のあるサイト
( 商業サイトの場合 )
サイトの価値

9. サイトの価値
価値のあるサイト＝売上のあげられるサイト
( 商業サイトの場合 )
儲かってなんぼや！

10. サイトの価値
売上のあげられるサイトの指標
デザインが良い ( 会社・商品にマッチしている)
コンバージョン率が高い・離脱率が低い
SEO ができている etc...
どれも必要不可欠な事だよなー

11. SEOを理解しておくと良い点
Web デザイナーが
良いことたくさん！
がんばっていこうぜ！
他の部署との連携もスムーズになる。
サイト成功のために協力していくデザイナーに！
SEO のことを考慮した価値のあるサイトが
作れる!
デザインに説得力が増す。

12. デザインとSEO

13. SEO
テクニカルなこと
ユーザーに分かりやすく正しいサイトを
つくり、それを検索エンジンに伝えること

14. テキスト大切に
デザイナーさんが一番気をつけたいこと

15. テキストを大切に
紙デザインと違う点。
Web サイトはテキストデータである。

16. 重要なテキストは
画像にしない
具体的には

17. 重要なテキストは画像にしない
重要なテキストを、リンクページの見出しやメニュー項目
などの要素の画像に埋め込まないでください。ユーザー
によっては、その要素にアクセスできないことがあるから
です。
重要なテキストベースのコンテンツにすべてのユーザーが
確実にアクセスできるようにするには、通常の HTML 内
に記述してください。
画像 - Search Console ヘルプ
https://support.google.com/webmasters/answer/114016?hl=ja

18. テキストの画像化が良くないワケ
テキストデータより重い
（デバイスの高解像度化によりさらに顕著に）
全てのユーザーがアクセスできないかもしれない
（alt 属性では確実ではない）
コピペできない
（電話番号や住所などコピーしたい時にできない。
ユーザビリティ悪い）
必要以上に文字データを
画像にするのは良くないのかー

19. 重要なテキストとは？
見出し・メニュー h1,h2,...
グローバルナビ、パンくず、 a( サイト内リンク)

20. でも...
画像使わないと
キレイにデザインできないよ！

21. 回避方法２つ。
1. 画像以外でデザインする。
できるかも
しれない
2. わざと小さくテキストを扱う。

22. その1
画像を使わないデザイン

23. 問題です !
突然ですが、
Q.ブログ [ クリエイティブメモメモ] は
画像をいくつ使っているでしょうか？
クリエイティブメモメモ
http://creativememomemo.com/
記事のサムネイル以外の
基本的なデザインでの
画像数を答えてくれよな！

24. 画像を使わなくても
意外とデザイン作れるんだなー
正解は ...
3つ！！

25. 画像以外でデザインするには？
CSS3を使う1.
2. Webフォントを使う

26. 画像の角丸にできる
border-radius
テキストや画像に影をつけるられる
text-shadow,
box-shadow
背景色をグラデーションにできる
background プロパティの
linear-gradient
画像に境界線をつける
border
CSS3 で実装できるデザイン四天王
CSS3で実装できるデザイン

27. border-radius
box-shadow
linear-gradient
border
角丸長方形
(レイヤースタイルではなく、シェイプレイヤー)
ドロップシャドウ
シャドウ ( 内側 )
光彩 ( 内側 )
光彩 ( 外側 )
グラデーションオーバーレイ
境界線
Photoshopの場合「レイヤースタイル」を使おう！
Photoshop のプラグイン「CSS3Ps」で CSS が自動で書き出せる
CSS3で実装できるデザイン

28. Webフォントを使う
Webフォントって？
ユーザー側の環境にとらわれず、サーバーからフォントを
読み込ませて任意のフォントを表示できる仕組み
デザイン性の高いフォントも使えるので、
画像でしか出来なかったデザインも可能に！
しかもテキストなので検索エンジンに正しく
情報を伝えられる。
テキストなのに
グラフィカル！

29. Webフォントを使ったサイト紹介
WEB 企画
https://webkikaku.co.jp/homepage/
coneri（こねり）
http://coneri.jp/
チラシ・特売情報 [ クックパッド ]
https://cookpad.com/bargains/about/

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. ただ欠点もある...
日本語 Webフォントはまだまだ重い ...

32. Webフォントの使いどころ
欧文のみ使う
日本語フォントに比べ動作軽い
GoogleWebフォントは導入も簡単なので初めてでもオススメ。
アイコンフォント
スマホサイトなどに特にオススメ。
世界感の統一には気をつけたい。
デザインは細部に宿る！

33. font の自体の見え方を制御する CSS
蛇足
font-smoothing http://codepen.io/tihata/pen/avogGv
フォントのアンチエイリアスについての指定ができる。
font-kerning http://codepen.io/tihata/pen/RWbzyZ
letter-spacingと違って特定の文字組み文字間調整をしてくれる。
( 英文のみ )
対応ブラウザは注意！

34. 画像を使わないデザインのまとめ
画像以外 (Webフォント、CSS3) で
デザインすることを考えてみる。
Photoshop でデザインする時はレイヤースタイルを活用
日本語 Webフォントは重いので注意
欧文のみやアイコンフォントで使うのオススメ

35. わざと
小さくテキストを扱う
その 2

36. わざと小さく扱う
例えば h1

37. ｈ1タグの基本
h1は会社名などではなく、それぞれのページにオリジナルの文章を
h1はそのページを表した大見出しや要約を入れる。(もちろん単語の羅列×)
文字数に制限は特になし (20 文字程度で入れることが多い)
画像の alt 要素で指定するよりも、
テキストデータのがいい
何度も言うけど、
重要な部分は
テキストがベター !!

38. でも...
そんな h1テキストで
かっこよく入れられない !!

39. よくやっていること
h1をあえて小さくデザインする。
犬山セントラルホテル
http://www.inuyama-central-h.co.jp/
洪内科クリニック
http://kohnaika.or.jp/

40. よくやっていること
h1
h2
h3
h1をあえて、
小さくするわけだね！

41. h1タグをを入れるポイント
文字サイズは大きくても小さくても問題ない
ページの上の方に置く
テキスト量が上下しても大丈夫なようなスペースを

42. わざと小さくテキストを
扱う際のまとめ
h1を考えるならワイヤーフレーム段階から
関わってサイト全体の把握が大切
文字量が変わっても大丈夫なスペースを作る
重要なテキストはわざと小さく扱うのも一つの手。

43. 言いたい事の7 割
言いました！
ここまでで

44. 残り3割
行きます！
Let s GO!!

45. サイト内リンクのテキスト

46. サイト内リンクのテキスト
代表的なサイト内リンク
グローバルナビ、サイドバーリンク、パンくずリスト
画像よりテキストのがベター
テキストリンクとリンク先の内容を一致させる

47. リンク先と内容の一致
「詳しく見る」はよくない !

48. リンク先と内容の一致
リンク先とテキストリンクの
内容は合致していた方が良い。
検索エンジンに情報を正しく伝えられる
グローバルナビ
フッターリンク
(サイドバーリンク)
デザインと
要相談

49. TOP ページを「TOP」にするより
「サイト名」TOPとする方が
リンク先との内容の一致を図る
クリエイティブメモメモ
http://creativememomemo.com/
wcan2015autumn_speaker/
芝人
http://shibancyu.jp/item/
あとパンくずも一工夫

50. あとパンくずも一工夫
逆に、現在地のテキストは
重要でないので省略可
クレジットカード大学
http://card-professor.jp/entry-79/
ユーザビリティ的には
省略しない方が
良いこともあるぞ

51. サイト内リンクのテキストのまとめ
サイト内リンクはリンク先の内容を含めたテキストに
パンくずのTOP へののリンクテキストは
「TOP」ではなく「サイト名」に

52. alt の付け方

53. alt属性って？
img 要素の中に記述される
画像の代替となるテキスト情報。
テキストブラウザや音声読み上げブラウザでは、
画像ではなくalt 属性に記載された内容が
テキストとして表示、または読み上げられる。
正しく書くことで検索エンジンに正しい
情報を伝えられます。

54. 全ての img に
alt 属性を付けましょう!
alt属性は必須
絶対入れてね！！

55. そのサイト内での
画像の役割を端的に説明するテキスト
文脈を意識する!!
alt属性に何を書くか ?
それっぽい言葉で言うと
コンテキストを
意識したいね。

56. 例えば ...
この img になんてaltをつけますか？
綺麗だわねー

57. 例えば ...
この img になんてaltをつけますか？
ひまわり畑
一例
黄色いひまわり

58. 文章がつくと...
５年ぶりに帰ってきた、何も変わらないこの景色を見ると、
「おかえり」と言われたような気がする。ぼくは目を細めて辺り一面を見渡した ...
文脈によってalt の内容も変化する
「ひまわり畑」に対して
「地元の」とか「懐かしい」とか
キーワードを追加したいわね

59. 意味情報を持たない画像
意味情報を持たない画像 ( 装飾 ) には
altを空白にしておく
alt=
※html５では alt 自体なくてもいい場合がある。
個人的に装飾は
before after 要素で
やるの好きよ！

60. altのまとめ
alt 属性は非テキストコンテンツの意味情報を
正しく伝える手助けをする
alt 属性はそのサイト内での画像の役割を端的に
説明するものを書く( 文脈によって変わる)
意味がない装飾画像については空白にする (alt= )

61. 最後に

62. まとめ
テキストを大切に

63. まとめ
特に見出し (h1) など重要なものはなるべくテキストに
Web サイトはテキストデータである
画像の alt はそのサイトでの役割を端的に示したものに。
Webフォントや CSS３を使ってテキストでもグラフィカルに
重要なテキストをデザイン的にわざと小さくみせるのも一つの手

64. ご清聴
ありがとうございました
THANK YOU!!