eye_sns_icon

各種サービスロゴの利用ガイドラインまとめ

SNSをはじめとする各種サービスのロゴには色や大きさの指定をはじめ、権利や利用条件があります。ウェブサイトにバナーやボタンを自作で掲載する際の参考として、利用ガイドラインをリンクにまとめました。
※読み込みに時間がかかる場合がありますが、ご了承ください。

Twitterのブランドガイドライン

https://about.twitter.com/ja/press/brand-assets

https://about.twitter.com/ja/press/brand-assets

Facebook Brand Resources

https://www.facebookbrand.com/

https://www.facebookbrand.com/

Google+ ブランディングに関するガイドライン

https://developers.google.com/+/branding-guidelines?hl=ja

https://developers.google.com/+/branding-guidelines?hl=ja

LINE ロゴの利用について

http://line.me/logo/ja

http://line.me/logo/ja

Tumblr ロゴを自由に使おう

http://www.tumblr.com/logo

http://www.tumblr.com/logo

WordPress › Logos and Graphics

https://wordpress.org/about/logos/

https://wordpress.org/about/logos/

ブランドガイドライン | 法人向け Pinterest

http://ja.business.pinterest.com/brand-guidelines/

http://ja.business.pinterest.com/brand-guidelines/

Evernoteトレードマークの利用に関して

http://evernote.com/intl/jp/trademark/

http://evernote.com/intl/jp/trademark/

このエントリーをはてなブックマークに追加
LINEで送る

eye_webdesign_site

WEBデザインまとめサイトの一覧

WEBデザインのデータベースやリンク集は数多くありますが、カテゴリ別や配色別などの分類やレスポンシブに特化したものなどそれぞれの特徴があるため、主なサイトをコメント付きでまとめました

straightline™_bookmark

http://bm.straightline.jp/

http://bm.straightline.jp/

登録すると my bookmarkmy favorites などの機能が使えるだけでなく、カラーやカテゴリのほかにレイアウトでの抽出もできる、優れモノのサイト。

I/O 3000

http://io3000.com/

http://io3000.com/

カラー,カテゴリのほかにタグでタイプやコンテンツ別での抽出もできる便利なサイト。

S5-Style

http://bm.s5-style.com

http://bm.s5-style.com

カテゴリーやタグのほかにAND検索とOR検索も可能。お気に入りサイトの一時的な保存にも対応。

Web Design Clip

http://www.webdesignclip.com/

http://www.webdesignclip.com/

カラー,カテゴリーのほか、テクノロジーやレイアウト別に閲覧可。評価を付けることもできます。

bookma!

http://bookma.org/

http://bookma.org/

カラー,テイスト,カテゴリーのほか、新着順/ツイート順/いいね!順などからも閲覧可。審査がありますが、サイトの投稿も可能です。

Design Link Database

http://www.designlinkdatabase.net/

http://www.designlinkdatabase.net/

カラー,コンテンツ,テイスト,テクノロジーのほかランキング別で閲覧可。サイト評など詳細情報もあり、参考になります。

イケサイ

http://www.ikesai.com/

http://www.ikesai.com/

カテゴリー,カラー別に分類。業種カテゴリーが豊富なので、業種別にサイトデザインを見ることができます。

Webデザインの見本帳

http://www.web-mihon.com/

http://www.web-mihon.com/

印象,カラー,ジャンル別に分類。サイトのサムネールとタイトル+概要が掲載されています。サイトの登録も可。

ズロック

http://www.zzrock.net/

http://www.zzrock.net/

業種,レイアウト,カラー/イメージ,種類別に閲覧可。サムネールの大きさを S/M/L と切り替えることができます。

WEB de DB

http://www.webdedb.com/

http://www.webdedb.com/

カテゴリー,カラー別に分類。企業をはじめ、ショッピングやファッション系のサイトが豊富です。

Responsive Web Design JP

http://responsive-jp.com/

http://responsive-jp.com/

カテゴリー,カラー,テクニック,タイプ別に分類。レスポンシブWebデザインに特化されており、参考になります。

4db

http://4db.cc/

http://4db.cc/

地域,業種別に分類。地域別のカテゴライズが新鮮で、集められたサイトも粒ぞろいです。

ブブンデザインアーカイブ

http://bubundesignarchive.jp/

http://bubundesignarchive.jp/

デザイン性に優れたWebサイトのパーツをアーカイブしているまとめサイト。分類もヘッダ,デザイン/装飾系,機能,コンバージョン,フッターと部分デザインに特化しており、デザインのネタとして活用したいサイトです。

このエントリーをはてなブックマークに追加
LINEで送る

eye_tw_analytics

Twitter Cards とアナリティクスの設定・2

tw-analytics_01s

Twitter Cards 設定の完了後、承認されたらアナリティクスも使えるようになります…が、ヘッダーに “@***** does not have access to Twitter Analytics. If you’re a publisher, developer, or advertiser, learn how to get access.” と表示された状態で使用できないため、リンク先のガイドラインを読んでみると「ツイートがコンテンツにリンクされてから24時間後にレポートが利用できるようになる」とあったのでツイート後24時間待ってみましたが、やっぱりまだ使えない。いろいろ検索してみたところ、こちらにて次のように掲載されていました。

Twitter Cards が表示されたツイートが一週間以内に最低10個ないと起動しない

■ Twitter Analyticsにアクセスできない理由 – Genx Beats

…というわけで、別のTwitterアカウントを使って幾つかのツイートから Twitter Cards を表示してみたところ、ようやく Twitterアナリティクス にアクセスできるようになりました。

tw-analytics_02s

アナリティクスを開くと、ツイート, フォロワー, Twitterカード 別に、ツイートの反応やフォロワーの興味分野、性別など情報を見ることができます。

Twitterアナリティクス の詳細については下記の記事が詳しいので、そちらをご参照ください。

このエントリーをはてなブックマークに追加
LINEで送る

eye_tw_cards

Twitter Cards とアナリティクスの設定・1

2014年1月からスタートした、Twitter Cards アナリティクス を利用するために Twitter Cards を設定してみました。

Twitter Cards とは? Twitter Cards を設定するとツイート内にURLが含まれている場合、左下の[開く / 詳細]が[概要を表示]に変わり、そのページのタイトルや概要、アイコン写真などが表示されるため、ツイートの内容もより充実したものになります。

1. Developer(開発者)ページから、Twitter Cards を選択

https://dev.twitter.com/

Developer(開発者)ページ にアクセスし、左端の Twitter Cards をクリックします。

2. Twitter Cards から Card Catalog を選択

https://dev.twitter.com/cards

Twitter Cards ページ内 Four simple steps の① から、Try them をクリックすると、Card Catalog が開きます。

tw_cards_02

Summary=一般向き, Product=ショップ, Photo,Gallery=ギャラリー系, Player=ムービー…など、配信内容に適したカードのレイアウトを選びましょう。

3. Card Validator – カード情報の検証・1

tw_cards_03

Twitter Cards の Try Cards に必要な内容を入力し、生成した Sample Embed Code を 〈head〉 に追記します。必須項目は titledescription ですが、Facebook の OGP を先に設定している場合は cardsite のみ 〈head〉 内に追記すれば完了です。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ユーザー名">

4. Card Validator – カード情報の検証・2

tw_cards_04

〈head〉 に追記できたら Validate & Apply タブに切り替えてプレビューを確認し、エラーがなければ Request Approval ボタンをクリックします。

5. Request Domain Approval – Twitter Cards の承認

tw_cards_05

登録する Twitterアカウントと連結するウェブサイト情報の入力画面が表示されるので、必須項目*を入力後、Request Approval ボタンをクリックすると Twitter への申請は完了です。

6. 承認メールと Twitter の表示

tw_cards_06

申請後、数時間で承認メールが届きます。承認後のツイートから Twitter Cards が反映されるようになりました。

【承認前のツイート】

tw_cards_07

「開く」の表示が…

【承認後のツイート】

tw_cards_08-1

「概要を表示」に変化。

tw_cards_08-2

「概要を表示」のクリックで、リンク先ページの概要や画像が表示されます。

tw_cards_08-3

スマートフォンの表示はこちら。

Twitter Cards が設定できたら、次に Twitter Cards アナリティクス を設定します。
※ ツイートがコンテンツにリンクされ、24時間後にレポートが利用できるようになるため、続きは明日以降の公開予定です。

【追記】
・24時間経ちましたが、未だに Twitter Cards アナリティクス は使えません…(4/18 P.M.6:00)
・問題解決して Twitter Cards アナリティクス にアクセスできるようになりました…(4/19 P.M.8:00)

このエントリーをはてなブックマークに追加
LINEで送る

eye_fb_ogp

FacebookのOGP設定

FacebookのOGP設定をすると、Facebook外のウェブページに設置した「いいね!」ボタンのアクションなどがニュースフィードに表示され、記事を見てもらう機会が多くなります。また、Twitter Cards を設定する際にも便利なので、今回設定してみました。

【設定方法】

1:HTMLの文頭に以下の要素を追加

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
2:<head>~</head>内に以下のHTMLタグを追加

<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="website,article または blog" />
<meta property="og:description" content="ページの概要" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="フェイスブックに投稿したときに表示するサムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="fb:admins" content="fb:adminsナンバー" />

補足:fb:adminsナンバーの探し方

プロフィール写真のリンクにある5桁の数字が fb:adminsナンバー です。プロフィール写真のマウスオーバー時に表示されるブラウザのアドオンバーまたは右クリックの要素の検証から確認できます。

fb_admin-num_472

href=”https://www.facebook.com/123456789012345/photos/a.123456789012345.12345.123456789012345/123456789012345/?type=1&source=11″

※ URL内の数字は仮のものです。

<a class="profilePicThumb" id="u_0_1l" href="https://www.facebook.com/123456789012345/photos/a.123456789012345.12345.123456789012345/123456789012345/?type=1&source=11" rel="theater">
なお、Wordpressでの設定は下記のサイトが参考になりました。
■ Facebook投稿時にサムネイルを表示するためのOGP設定-WordPressカスタマイズ – Web Shufu

3:Facebook Developers のデバッガーでチェック

fb_admin-debug-st

設定が済んだら、Facebook Developers のデバッガーでチェックします。

fb_admin-debug

デバッガーでエラーがなければOK。これでFacebook外のウェブページに設置した「いいね!」ボタンのアクションもニュースフィードに表示されるようになりました。

このエントリーをはてなブックマークに追加
LINEで送る