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

More Related Content

What's hot

だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
Yasufumi Nishiyama
 
1日でつくる WordPressEC(stripe決済)
1日でつくる WordPressEC(stripe決済)1日でつくる WordPressEC(stripe決済)
1日でつくる WordPressEC(stripe決済)
Takeharu Kato
 
Director's Night 20130921
Director's Night 20130921Director's Night 20130921
Director's Night 20130921
Yasufumi Nishiyama
 
Sakenomyの開発経緯と内容をできるだけ公開しちゃいます
Sakenomyの開発経緯と内容をできるだけ公開しちゃいますSakenomyの開発経緯と内容をできるだけ公開しちゃいます
Sakenomyの開発経緯と内容をできるだけ公開しちゃいます
Yo Otagawa
 
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
 
Tbmu 20140611 oregadget
Tbmu 20140611 oregadgetTbmu 20140611 oregadget
Tbmu 20140611 oregadget
Terumasa Okabe
 
Webディレクターの実績を可視化する方法
Webディレクターの実績を可視化する方法Webディレクターの実績を可視化する方法
Webディレクターの実績を可視化する方法
Yasuji Takase
 
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ αこれが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
タカシ キタジマ
 
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
Daisuke Koshimizu
 
Webサービスを作るときの9の間違い
Webサービスを作るときの9の間違いWebサービスを作るときの9の間違い
Webサービスを作るときの9の間違い
Yusuke Katsuki
 
WordCamp Tokyo 2015 リアルフォーラム
WordCamp Tokyo 2015 リアルフォーラムWordCamp Tokyo 2015 リアルフォーラム
WordCamp Tokyo 2015 リアルフォーラム
Hajime Ogushi
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
INFOBAHN.inc(株式会社インフォバーン)
 
業種問わずおすすめしたい!恋したwebサービス7選
業種問わずおすすめしたい!恋したwebサービス7選業種問わずおすすめしたい!恋したwebサービス7選
業種問わずおすすめしたい!恋したwebサービス7選
Reimi Kuramochi Chiba
 
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
Daisuke Koshimizu
 
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoテーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyo
Hidekazu Ishikawa
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
 
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
Yoshinori Kobayashi
 
2015年のWebを考える
2015年のWebを考える2015年のWebを考える
2015年のWebを考える
kenji goto
 
TBMU#28 ブログのトラブル・困ったを解決
TBMU#28 ブログのトラブル・困ったを解決TBMU#28 ブログのトラブル・困ったを解決
TBMU#28 ブログのトラブル・困ったを解決
Tomaki Maeda
 
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディングディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディング
eriko yamada
 

What's hot (20)

だから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Zだから、Webディレクターはやめられない Z
だから、Webディレクターはやめられない Z
 
1日でつくる WordPressEC(stripe決済)
1日でつくる WordPressEC(stripe決済)1日でつくる WordPressEC(stripe決済)
1日でつくる WordPressEC(stripe決済)
 
Director's Night 20130921
Director's Night 20130921Director's Night 20130921
Director's Night 20130921
 
Sakenomyの開発経緯と内容をできるだけ公開しちゃいます
Sakenomyの開発経緯と内容をできるだけ公開しちゃいますSakenomyの開発経緯と内容をできるだけ公開しちゃいます
Sakenomyの開発経緯と内容をできるだけ公開しちゃいます
 
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
 
Tbmu 20140611 oregadget
Tbmu 20140611 oregadgetTbmu 20140611 oregadget
Tbmu 20140611 oregadget
 
Webディレクターの実績を可視化する方法
Webディレクターの実績を可視化する方法Webディレクターの実績を可視化する方法
Webディレクターの実績を可視化する方法
 
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ αこれが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
これが長崎生まれ長崎育ち!スーパーお問い合わせフォーム MW WP Form だ!+ α
 
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
 
Webサービスを作るときの9の間違い
Webサービスを作るときの9の間違いWebサービスを作るときの9の間違い
Webサービスを作るときの9の間違い
 
WordCamp Tokyo 2015 リアルフォーラム
WordCamp Tokyo 2015 リアルフォーラムWordCamp Tokyo 2015 リアルフォーラム
WordCamp Tokyo 2015 リアルフォーラム
 
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
 
業種問わずおすすめしたい!恋したwebサービス7選
業種問わずおすすめしたい!恋したwebサービス7選業種問わずおすすめしたい!恋したwebサービス7選
業種問わずおすすめしたい!恋したwebサービス7選
 
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
 
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyoテーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyo
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
 
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
愛があれば発信できる!WordPressで作る焼き鳥ポータルサイト~公式テーマ・プラグインと子テーマの活用~|WordCamp Tokyo 2015
 
2015年のWebを考える
2015年のWebを考える2015年のWebを考える
2015年のWebを考える
 
TBMU#28 ブログのトラブル・困ったを解決
TBMU#28 ブログのトラブル・困ったを解決TBMU#28 ブログのトラブル・困ったを解決
TBMU#28 ブログのトラブル・困ったを解決
 
ディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディングディレクターが身につけておきたいチームビルディング
ディレクターが身につけておきたいチームビルディング
 

Viewers also liked

10分でわかるデザインの基本
10分でわかるデザインの基本10分でわかるデザインの基本
10分でわかるデザインの基本
笹川 純一
 
デザインとコミュニケーション
デザインとコミュニケーションデザインとコミュニケーション
デザインとコミュニケーション
anzu matsui
 
HTMLに学ぶ夫婦円満のコツ
HTMLに学ぶ夫婦円満のコツHTMLに学ぶ夫婦円満のコツ
HTMLに学ぶ夫婦円満のコツ
Hisateru Tanaka
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
Ayaka Sumida
 
React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話
React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話
React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話
Akira Fukuoka
 
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
正樹 平野
 
綺麗なデザインの盛り付け方 -超小ネタ編-
綺麗なデザインの盛り付け方 -超小ネタ編-綺麗なデザインの盛り付け方 -超小ネタ編-
綺麗なデザインの盛り付け方 -超小ネタ編-
wariemon
 
しごと大好きフリーランスWebデザイナーが子どもを持ったらどうなる?「わたしのライフワークバランス」
しごと大好きフリーランスWebデザイナーが子どもを持ったらどうなる?「わたしのライフワークバランス」しごと大好きフリーランスWebデザイナーが子どもを持ったらどうなる?「わたしのライフワークバランス」
しごと大好きフリーランスWebデザイナーが子どもを持ったらどうなる?「わたしのライフワークバランス」
Ayaka Sumida
 
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
Ayaka Sumida
 
関西☆フリ女会議
関西☆フリ女会議関西☆フリ女会議
関西☆フリ女会議
Ayaka Sumida
 
フリーランスデザイナーの「つくること、はたらくこと」
フリーランスデザイナーの「つくること、はたらくこと」フリーランスデザイナーの「つくること、はたらくこと」
フリーランスデザイナーの「つくること、はたらくこと」
Ayaka Sumida
 
人類の進化とデザイン
人類の進化とデザイン人類の進化とデザイン
人類の進化とデザイン
Ayaka Sumida
 
[UX]は投げ捨てろ!
[UX]は投げ捨てろ![UX]は投げ捨てろ!
[UX]は投げ捨てろ!
c-mitsuba
 
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付きデザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
 
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClipアプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
 
自分と向き合うセルフブランディング
自分と向き合うセルフブランディング自分と向き合うセルフブランディング
自分と向き合うセルフブランディング
wariemon
 
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
Shuichi Tsutsumi
 
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみたPhotoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
Tomoyuki Arasuna
 
大規模スクラムの失敗から学んだこと #AgileJapan2015
大規模スクラムの失敗から学んだこと #AgileJapan2015大規模スクラムの失敗から学んだこと #AgileJapan2015
大規模スクラムの失敗から学んだこと #AgileJapan2015
Itsuki Sakitsu
 
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
 

Viewers also liked (20)

10分でわかるデザインの基本
10分でわかるデザインの基本10分でわかるデザインの基本
10分でわかるデザインの基本
 
デザインとコミュニケーション
デザインとコミュニケーションデザインとコミュニケーション
デザインとコミュニケーション
 
HTMLに学ぶ夫婦円満のコツ
HTMLに学ぶ夫婦円満のコツHTMLに学ぶ夫婦円満のコツ
HTMLに学ぶ夫婦円満のコツ
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜 おかわり!
 
React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話
React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話
React+Redux+Node.js+Raspberry Piで ビデオプレイヤーを作りたかった話
 
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
 
綺麗なデザインの盛り付け方 -超小ネタ編-
綺麗なデザインの盛り付け方 -超小ネタ編-綺麗なデザインの盛り付け方 -超小ネタ編-
綺麗なデザインの盛り付け方 -超小ネタ編-
 
しごと大好きフリーランスWebデザイナーが子どもを持ったらどうなる?「わたしのライフワークバランス」
しごと大好きフリーランスWebデザイナーが子どもを持ったらどうなる?「わたしのライフワークバランス」しごと大好きフリーランスWebデザイナーが子どもを持ったらどうなる?「わたしのライフワークバランス」
しごと大好きフリーランスWebデザイナーが子どもを持ったらどうなる?「わたしのライフワークバランス」
 
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
 
関西☆フリ女会議
関西☆フリ女会議関西☆フリ女会議
関西☆フリ女会議
 
フリーランスデザイナーの「つくること、はたらくこと」
フリーランスデザイナーの「つくること、はたらくこと」フリーランスデザイナーの「つくること、はたらくこと」
フリーランスデザイナーの「つくること、はたらくこと」
 
人類の進化とデザイン
人類の進化とデザイン人類の進化とデザイン
人類の進化とデザイン
 
[UX]は投げ捨てろ!
[UX]は投げ捨てろ![UX]は投げ捨てろ!
[UX]は投げ捨てろ!
 
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付きデザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード  +  現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
 
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClipアプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
 
自分と向き合うセルフブランディング
自分と向き合うセルフブランディング自分と向き合うセルフブランディング
自分と向き合うセルフブランディング
 
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
 
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみたPhotoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
 
大規模スクラムの失敗から学んだこと #AgileJapan2015
大規模スクラムの失敗から学んだこと #AgileJapan2015大規模スクラムの失敗から学んだこと #AgileJapan2015
大規模スクラムの失敗から学んだこと #AgileJapan2015
 
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
 

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

デザイン屋なりにいろんな人を応援してみた結果
デザイン屋なりにいろんな人を応援してみた結果デザイン屋なりにいろんな人を応援してみた結果
デザイン屋なりにいろんな人を応援してみた結果
Kazunori Tateyama
 
ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!
Yuma Tahara
 
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
Naoki Yamada
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
 
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.30からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
Yasuji Takase
 
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒント
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒントユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒント
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒント
Kazunori Tokoo
 
これからはじめるWebプロジェクトマネジメント
これからはじめるWebプロジェクトマネジメントこれからはじめるWebプロジェクトマネジメント
これからはじめるWebプロジェクトマネジメント
webcampusschoo
 
これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方
Reimi Kuramochi Chiba
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
 
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
Keisuke Imura
 
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
Kyo Kaji
 
Webディレクター用ポートフォリオテンプレート
Webディレクター用ポートフォリオテンプレートWebディレクター用ポートフォリオテンプレート
Webディレクター用ポートフォリオテンプレート
toksato Tokunaga
 
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
Fuminori Mori
 
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
祐磨 堀
 
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティ株式会社
 
20150404 講演資料
20150404 講演資料20150404 講演資料
20150404 講演資料
Kenta Nakamura
 
エンジニアによるグロースハック〜SEO編〜
エンジニアによるグロースハック〜SEO編〜エンジニアによるグロースハック〜SEO編〜
エンジニアによるグロースハック〜SEO編〜
ssuser73d5e4
 
プログラミングに恋する方法
プログラミングに恋する方法プログラミングに恋する方法
プログラミングに恋する方法
Reimi Kuramochi Chiba
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方
kenji goto
 
エンジニアのためのUser Centered Designの考え方(入門編)
エンジニアのためのUser Centered Designの考え方(入門編)エンジニアのためのUser Centered Designの考え方(入門編)
エンジニアのためのUser Centered Designの考え方(入門編)
Katsumi Tazuke
 

Similar to Webデザイナーが考えておきたいSEOのこと (20)

デザイン屋なりにいろんな人を応援してみた結果
デザイン屋なりにいろんな人を応援してみた結果デザイン屋なりにいろんな人を応援してみた結果
デザイン屋なりにいろんな人を応援してみた結果
 
ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!ビジュアルエディタ用CSSで 快適なブログライフを!
ビジュアルエディタ用CSSで 快適なブログライフを!
 
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
 
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.30からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
 
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒント
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒントユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒント
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒント
 
これからはじめるWebプロジェクトマネジメント
これからはじめるWebプロジェクトマネジメントこれからはじめるWebプロジェクトマネジメント
これからはじめるWebプロジェクトマネジメント
 
これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方
 
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
 
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
 
習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます習ったことはありませんがこんな感じでWebデザインを教えてます
習ったことはありませんがこんな感じでWebデザインを教えてます
 
Webディレクター用ポートフォリオテンプレート
Webディレクター用ポートフォリオテンプレートWebディレクター用ポートフォリオテンプレート
Webディレクター用ポートフォリオテンプレート
 
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
 
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
 
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
 
20150404 講演資料
20150404 講演資料20150404 講演資料
20150404 講演資料
 
エンジニアによるグロースハック〜SEO編〜
エンジニアによるグロースハック〜SEO編〜エンジニアによるグロースハック〜SEO編〜
エンジニアによるグロースハック〜SEO編〜
 
プログラミングに恋する方法
プログラミングに恋する方法プログラミングに恋する方法
プログラミングに恋する方法
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方
 
エンジニアのためのUser Centered Designの考え方(入門編)
エンジニアのためのUser Centered Designの考え方(入門編)エンジニアのためのUser Centered Designの考え方(入門編)
エンジニアのためのUser Centered Designの考え方(入門編)
 

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