非同期スニペット

「デザイン」タグのブログアーカイブ

無料 ご相談承ってます!

電話 078-955-7461(平日 -)お気軽にご連絡ください!
打合せなどで電話に出れない場合がございます。その場合は、フォームもしくは 070-5503-3830までお手数をおかけしますがご連絡ください。

私たちの実績
(→ 実績一覧へ

Webデザインやグラフィックデザインの実績をご紹介しております。

お知らせ

ブログ最新の10件
(→ 記事一覧へ

事務所案内

  • ワサビ株式会社
  • マーケティング部(東京オフィス)
  • 〒142-0041
    東京都品川区戸越1-21-15 創建ビル4F
  • 本社
  • 〒658-0065
    兵庫県神戸市東灘区御影山手4-10-21
  •    
  • マーケティング部・デザイン室・開発室
  • 〒657-0864
    兵庫県神戸市灘区新在家南町1-1
  • TEL. 078-955-7461
  • 受付時間: 平日 -
  • マーケティング部(福岡オフィス)
  • 〒812-0053
    福岡県福岡市東区箱崎2-10
会社の詳細情報は、こちら

Work with us!

私たちのビジネスの成功は、社会に貢献できると確信してます。

ワサビは、才能や情熱を持った方との出会いを待ってます。

インターネットで出来る事、その可能性を仕事にしたい方は、ご連絡ください!

採用の詳細は、こちら

ソーシャルメディア

ビジュアルサーチエンジン、Pinterest(ピンタレスト)とは?

投稿日:

以前Instagram(インスタグラム)をご紹介しましたが、
今回は同じような形の画像共有サービス、ピンタレストのご紹介です。

このピンタレストですが、FacebookやTwitter、などテキストが主なSNS
と違い、画像や動画といった感覚だけで楽しめるものになります。

参考:話題のSNS「Instagram(インスタグラム)」とは?
http://www.wasabi3.com/2015/02/instagram/

ピンタレストとは

image-pinterest

アメリカで2008年にオープンした画像を共有するSNSサービスになります。

インターネット上で見つけたお気に入りの画像や動画を、自分のスペースである「ボード」に、pin=ピン(貼り付け)し、登録したメンバーのボードなどと共有することが出来ます。

感覚としては、スクラップブックに写真や雑誌の切り抜きを貼っていく作業になります。そのスクラップブックのコレクションをネットを通して友人や世間に見て共有するといった形になります。

人気の理由が説明文だけではわかりにくいですが、
主な魅力は下記になります。

  • ワンクリックで画像の投稿・共有が出来るので、コンテンツ作成のハードルが低い
  • シンプルでデザイン性が高いインターフェイスが美しく、閲覧性が良いので、眺めているだけでも楽しい
  • 自分の興味・関心、センスをビジュアルで表現できる

この様に、雑誌や写真集を眺める様にピンタレストを楽しんでいるユーザーも多く、
過度のコミュニケーションを必要としないため、いわゆる「SNS疲れ」を感じさせてないという点も人気の理由になります。

Pinterest(ピンタレスト)とInstagram(インスタグラム)違い

image-pinin

画像を共有するSNSであるピンタレストですが、同じ画像を共有するSNSであるインスタグラムとはどのような違いがあるのでしょうか。

インスタグラムの特徴としては、アプリの利用によって綺麗な写真を撮ることができ、自分の「ライフスタイル」を画像で共有する事ができます。
投稿される写真は「自分で撮影した写真」になります。

一方、ピンタレストで共有されるのは自分の写真だけでなく、自分がウェブサイトやブログで見つけた興味のある写真や、ピンタレスト上にある他のユーザーの写真を共有する為、自分の「興味・関心」を画像で共有する事が出来ます。
ピンタレストに投稿される写真は「お気に入りの画像」になります。

ピンタレストにイメージコンテンツを貼り付ける方法は2種類あります。

・ピン
・リピン

ピンとは、外部の画像共有サービス、Webサイトやホームページ、ブログなどに掲載された写真や動画をピンタレストに貼り付けることです。
リピンとは、ピンタレストに既にピンされた写真・動画を再度別の場所に貼り付けることです。

ユーザーがそれぞれの「ボード」に興味や関心がある画像・動画を収集し共有する事で他のユーザーの新たな興味や関心が生むことが出来るサービスになります。

参考:http://nanapi.jp/web/pinterest

ピンタレストの基本的な使い方

ピンタレストの登録方法

ピンタレストはメールアドレスがあればすぐに登録できます。
既に登録済みのSNSアカウント(Facebook、Twitter等)があれば、スムーズに登録出来ます。
「ユーザー名」「年齢」「性別」を入力をするだけで登録ができます。

登録が完了すると確認のため、登録したメールアドレスに確認メールが送信されています。

image-pin02

ピンタレストでのアクション

フォロー
ピンタレストのタイムラインに自分のお気に入りの写真を流すためには、
自分の興味や関心のあるボードをフォローする必要があります。
また、ボードを所有しているユーザー自体をフォローすることも出来ます。
ユーザー自体をフォローすると様々なボードを所持している為、興味のない画像や動画もタイムラインに流れて来ることもあるので注意しましょう。
Likes
TwitterやFacebookでよく使われている「Likes」になります。
感謝の気持ちや気に入った事を表したいのであれば、「Likes」を使ってみましょう。
リピン
本当に気に入った写真や動画を自分のボードに収集していきます。
カテゴリごとに収集した画像を分けることができるため、自分の興味が詰まったボードを作成する事が出来ます。

ピンタレストコミュニケーション

  • コメント
  • 共有
  • 送信

ピンタレストでは、他のSNSとは違ってあまりユーザー同士でコミュニケーションをする事は少ないですが、
画像や動画に対してコメントを行ったり、自分のFacebookに投稿して共有したり、その画像を友達に紹介する事が出来ます。

ビジネスでの活用

image-pin04

ピンタレストではFacebookのfacebookページと同様なビジネスアカウントがあります。
上記のようなピンタレストの特性や特徴を理解することで、ビジネスに上手く活用することが出来ます。

個人アカウントとの違い

個人アカウントとビジネスアカウントでの使用方法等に違いはありません。
しかし、一番の大きな違いはアクセスの解析が使える点になります。

ピンタレストでは、ユーザーの情報を知る事が出来るアクセス解析ツールも提供しています。
どの様な画像を共有しているか、興味は何なのか、どのような場所によく訪れているのかなど細かくユーザーやコンテンツを観察することで、ブランドのターゲティングやマーケティングに活かす事が出来ます。解析によって自社のボードにどのような画像を投稿すればよいかも見えてきます。

ウェブサイトへの誘導

ピンタレストはFacebookに次ぐサイト誘導率が特徴でもあります。
興味や関心が高いため、参照のリンクから自社サイトに訪れるユーザーが高いとされています。

現在、ピンタレストに適しているビジネスとされるのは、アパレル、食品、建築、インテリア、ウエディング、テクノロジー、スポーツ、ヘルスケア、パーソナルケア、家関連、ペット、子供用おもちゃ商品、旅行などがあげられます。
サイトへの誘導率を高めるための施策の一つとして、自社のあるいは自分のサイトやブログに掲載している写真・動画などのビジュアルコンテンツを見直してみるのもいかかでしょうか。

ビジネスアカウントの活用例

ピンタレストを実際にビジネスアカウントで登録して活用しているサイトと業種を紹介していきたいと思います。

1.ECサイト、小売りショップ

多くの商品を所持しているショップ様では自社サイトとは別の切り口としてピンタレストを活用しています。

image-pin05

参考:楽天市場
http://pinterest.com/rakutenjp/

2.メーカー、ブランドなど

ブランディングのツールの一つとしてピンタレストを活用しています。
商品カタログとしてもレシピ等にも利用できるだけでなく、「自社ブランドの世界観」を伝えるツールとして活用しています。一つの画像で自社のブランドを認知したユーザーが、ページの世界観そのもののファンとなってくれる可能性も期待できます。ファンを獲得するためのツールという効果も期待されています。

image-pin06

参考:ネスレ日本
http://pinterest.com/nestlejp/

3.その他

キャンペーンの一環に、ピンタレストの活用を行っています。
キャンペーンの目的によっては思わぬ効果を生み出す可能性があります。

image-pin07

参考:ローソン 「ウチカフェスイーツの夏フォトコンテスト」
http://pinterest.com/lawsonofficial/uchicafe-sweets-summer/

ビジネスにおいては、ピン、ボード、ユーザーがより多く自分達のコンテンツを検索されるかがポイントになります。そのためには、ユーザーの役に立つ写真・動画などのイメージコンテンツを提供していくことが大切です。

まとめ

image-marke02

新しいSNSをビジネスに活用できるかどうか模索する事は大切なことです。
しかし、TwitterやFacebookと同様に、キチンと目的を立て効果の検証や、修正をおこなう「マーケティング」をしっかり行う必要があります。
それぞれのツールの特性をしっかりと理解し、着実にマーケティングに取り組んでいく事が大切になります。

モバイル対応が検索結果に影響する?

投稿日:

blog-tablet

Googleがスマホ対応のサイトをモバイル検索結果で優遇する事を発表

Googleは、ウェブサイトがスマートフォンに対応しているかどうかを、モバイル検索のランキングの要因の一つとして使用する事を発表しました。

導入の日程として、2015年4月21日からを予定しています。

Googleはモバイルの検索結果において「スマホ対応」といったラベルの表示を行ったり、スマホ対応していないウェブサイトに対して、ウェブマスターツールから警告を行っており、スマホ対応の有無がランキング要因に使用されるのではないかと予想されていましたが、今回導入が正式に決定したようです。

参考:モバイル検索「スマホ対応」ラベル

blog-search02

検索結果への影響はあるのか?

今回の導入によって、検索結果にはかなり大きな影響を与えると予想されています。
具体的な影響範囲は不明ですが、目に見えて変動が起こる可能性もあります。
今回の要因の追加は、PCの検索結果とモバイルの検索結果の両方に影響するわけでなく、モバイルの検索にのみ影響されます。

そのため、PCでの検索結果とモバイルでの検索結果が大きく異なる可能性があるとされています。

検索結果の影響を考えると、モバイルの検索結果に対しては、スマートフォンやタブレットに対してのウェブサイトの修正を行わなければ、モバイルの検索順位が上位に表示されなくなりそうです。

モバイルへの対応方法

ウェブサイトをモバイル対応にするためには、どの様にしていけば良いのかは、
Googleはアナウンスの中で下記のツールを利用していくように推奨しています。

  • ウェブマスター向けモバイルガイド
  • モバイルユーザビリティレポート
  • モバイルフレンドリーテスト

ウェブマスター向けモバイルガイド

Googleが提供している、適切なモバイルサイトを構築するための公式のマニュアルになります。
ウェブサイトをモバイルに最適化する際には、参考にしてください。

参考:ウェブマスター向けモバイルガイド

モバイルユーザビリティレポート

モバイルユーザビリティレポートは、ウェブマスターツールの機能のひとつで、モバイルユーザビリティに関するエラーをレポートする機能になります。
検索ロボットがモバイルに対応しているサイトかどうかの判断を行います。

レポートにでる可能性のあるエラーは6つになります。

  • Flash が使用されています
  • ビューポートが設定されていません
  • 固定幅のビューポート
  • コンテンツのサイズがビューポートに対応していません
  • フォントサイズが小です
  • タップ要素同士が近すぎます

どのページでどのエラーが検出されたかもわかりますので、自身のサイトの問題点を把握する事が出来ます。

それぞれのエラーの詳細や対処法はヘルプを参照してください。

参考:ウェブマスターツール「モバイル ユーザビリティ」

モバイルフレンドリーテスト

このツールは、URLを解析し、ページの設計がモバイルフレンドリーであるかどうかをテストします。
サイトのURLを入力するとサイトがモバイルフレンドリーかどうか判断します。

モバイルフレンドリーの場合は下記の様に表示されます。
freiend-test01

モバイルフレンドリーで無い場合は下記の様に表示されます。
freiend-test02

参考:モバイルフレンドリーテスト

まとめ

今回の検索結果に影響を及ぼすのは、モバイル検索だけと言われています。

自身のサイトがモバイルが全く重要でないと完全に言い切れるならば対応する必要ありません。検索の結果から外されるわけではありませんが、検索結果が上位に表示されなくさる可能性があるため、モバイルからのサイトへの流入が多いウェブサイトは、今回の実施に対して対策行う必要があると思います。

今後、モバイルに対応していないサイトの検索結果への影響はどの様になるのかは、現時点では判断できませんが、まだモバイル対応を行っていない方は長い目で見て必要になる可能性があるという事を意識しないといけません。

facebookページのバナーを作る際の注意

投稿日:

facebookページを作成した後は、ホームページにバナーを貼り付けたり、紙媒体にロゴを掲載したり、といったことを考えられるかもしれません。

青地に白抜き文字で書かれた、「facebook」ロゴデータをダウンロードできればと考えていらっしゃる方も多いと思いますが、気をつけなければならないのが以下の事実。

リンク:facebook ブランドリソースセンター

「Facebookロゴの使用は概して認められません。特定の用途について特別に許可を取得したい場合は、Facebook担当者にお問い合わせください。」

お馴染みの「facebookロゴ」を用いたバナー等を作ることはできないようです。
(なお、この記事上部の画像はダウンロード可能な『「f」ロゴ』です)

そうなってくると代用ロゴを作成してバナー作成といったことが考えられますが、フォントは「Tahoma」や「Verdana」が比較的近いようです。

参考記事:Serandipity blog

ロゴのダウンロードが可能なtwitterとは好対照です。
リンク:twitterロゴダウンロード

Posted by T.fujii

ウェブデザイン

投稿日:

パスワードを入力してください。
パスワードは、弊社のクライアントもしくは、現在商談中のお客様のみ閲覧が可能です。
閲覧したい方は、営業担当もしくはこちらからお問い合わせください。

HTML5時代のhoverの使い方

投稿日:

HTML5の盛り上がりよりも、WPの方が盛り上がる社内ですが個人的に最近ちょっと気になる事がありました。

ソース元は、「Web Design Trends in 2011」です。

2011年のWEBデザインのトレンド!というタイトルの今年の初めに書かれた記事です。

その中の5番目「5. Designing for Touch Screens, Not Mice」です。

hoverを使いメニューがちょっとした挙動を起こしすのをCSSで組んだりしていますが、ここで指摘がある通り

However, there’s no hovering in touchscreen.

タッチスクリーンには、hoverの概念が無いんです。

要するにiphoneの様なやつですよね。

わたし自身、スマートフォンは「電話ではない!あれは小型のPCに電話機能がついたものだ!」と日々言っているほどCPUなどに関しては日々進化し続けている。

もちろん、通信会社にとってはキラーコンテンツになるのですが今後私たちの様な制作会社は、IEやらchromeやらのブラウザチェックの他にスマートフォンも必ず視野に入れなければならないと思っております。

で、hoverにもどりますが、これって今後は力を入れていく所ではない。むしろ、クリック出来るならクリック出来るぞ!と分かりやすいデザイニングをしなければならないという事です。

photoshop パスで切り抜き

投稿日:

丸い画像などをキレイに切り抜くには、パスツールを利用して画像を切り抜くのがおすすめ。

ペンツールで、切り抜きたい画像を囲み、選択範囲として読み込みます。

境界線を調整で、出来るだけ自然に切り抜ける様に調整します。
僕の場合は、ぼかしを1.0pxに設定した状態から徐々に微調整しています。

最終的には、選択範囲をカットしたレイヤーを作り完成です。

ページトップへ