backdrop-filterでホームページの写真にPhotoshopのようなエフェクトを追加

backdrop-filter

こんにちは!雪乃です。

CSSのbackdrop-filterプロパティは、写真に様々なエフェクト(効果)をつけることができます。同じCSSのfilterプロパティと似ていますが、backdrop-filterは、内側のテキストやその他の要素を変更することなく、背景の要素だけにエフェクト(効果)のぼかしなどを適用することができます。

文章で説明してもわかりにくいのですが、今回はbackdrop-filterで何が出来るかご紹介します。

backdrop-filterの使い方

backdrop-filterプロパティを記述するだけで、エフェクト(効果)を追加できます。

div {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

ぼかし

各種ブラウザ対応状況

FireFox以外のほとんどの主要ブラウザでは使用できす。下記のリンク先をご確認ください。

対応ブラウザ

参考:https://caniuse.com/#feat=css-backdrop-filter

10種類のbackdrop-filterのエフェクト(効果)

backdrop-filterでは以下のようなエフェクト(効果)がかけられます。

blur ぼかし pxで指定
brightness 明るさ %で指定
contrast コントラスト %で指定
grayscale モノトーン %で指定
invert 階調反転 %で指定
hue-rotate 色相 degで指定
opacity 不透明度 %で指定
sepia セピア調 %で指定
saturate 彩度 %で指定
drop-shadow ドロップシャドウ pxで指定

ぼかし:blur

div {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

エフェクト(効果)適用画像

明るさ:brightness

div {
backdrop-filter:brightness(170%);
-webkit-backdrop-filter:brightness(170%);
}

エフェクト(効果)適用画像

コントラスト:contrast

div {
backdrop-filter: contrast(200%);
-webkit-backdrop-filter: contrast(200%);
}

エフェクト(効果)適用画像

モノトーン:grayscale

div {
backdrop-filter: grayscale(200%);
-webkit-backdrop-filter: grayscale(200%);
}

エフェクト(効果)適用画像

階調反転:invert

div {
backdrop-filter: invert(70%);
-webkit-backdrop-filter: invert(70%);
}

エフェクト(効果)適用画像

色相:hue-rotate

div {
backdrop-filter: hue-rotate(120deg);
-webkit-backdrop-filter: hue-rotate(120deg);
}

エフェクト(効果)適用画像

不透明度:opacity

div {
backdrop-filter: opacity(65%);
-webkit-backdrop-filter: opacity(65%);
}

エフェクト(効果)適用画像

セピア調:sepia

div {
backdrop-filter: sepia(65%);
-webkit-backdrop-filter: sepia(65%);
}

エフェクト(効果)適用画像

彩度:saturate

div {
backdrop-filter: saturate(50%);
-webkit-backdrop-filter: saturate(50%);
}

エフェクト(効果)適用画像

ドロップシャドウ:drop-shadow

div {
backdrop-filter: drop-shadow(4px 4px 10px black);
-webkit-backdrop-filter: drop-shadow(4px 4px 10px black);
}

まとめ

以上が、backdrop-filterを使ったエフェクト(効果)のかけ方となります。主要なブラウザはほとんどないのが対応していますので、Photoshopや画像編集ソフトがなくてもお手軽にエフェクト(効果)がかけられるので、とても便利ですね。ホームページを制作した際に、簡単なエフェクト(効果)を写真にかけたいなと思って今回のbackdrop-filterを思い出したら、是非使ってみてください。

使い方次第で、半透明のガラスのような表現もできますよ。

日本語ドメインとSEO!メリット・デメリットを紹介!

日本語ドメイン-01

サイト(ホームページ)を立ち上げるときに、ドメインが必要になりますよね?一般的には英数字+ドメインがほとんどですが、実は日本語も利用できることをご存知ですか?

今回は日本語(漢字・カタカナ・ひらがな)で書かれたドメインのSEOについて、導入のメリット・デメリットをご紹介していきます。

日本語ドメインとは?

日本語ドメインとは、JPRS(日本レジストリサービス)が2001年から登録サービスを開始したドメインです。一般的にドメインは英数字+ドメインの組み合わせが知られていますが、日本語ドメインでは、ひらがな、カタカナや漢字などの日本語をドメインに利用できます。

例として弊社のホームページを日本語ドメインにした場合「例:北の国ウェブ工房.jp」となり、すぐ弊社のホームページと認識しやすいですよね~

日本語のドメインを利用しているサイトとして
「日本語.jp」「渋谷駅.jp」などがあります。

日本語ドメインのSEO

日本語ドメインは、SEO効果はほとんど期待できないと考えて問題ないと思います。

日本人にとっては、覚えやすくユーザーからのクリックを誘導する効果は得られるかもしれませんが、最近はコンテンツの中身や専門性、ユーザビリティーを重要視しています。

そのため、質の高いコンテンツでなければ上位表示は期待できないでしょう。

日本語ドメインのメリット

見てすぐわかる

ドメインが日本語だと、パッと見てすぐわかりますよね!
「kitaguniweb.com」場合は脳内変換でキタグニウェブと呼んでいますが、「北の国ウェブ工房.com」ならば見てすぐ理解できますよね。
検索結果でも日本語ドメインだとユーザーの目に留まりやすいです。インパクト!

覚えやすい

日本人である以上、日本語が一番認識しやすいですね。そのため日本語ドメインの場合、ユーザーが理解しやすく、英数字のドメインに比べてとても覚えやすいてす。

国内向けのサイトには有効です。キャンペーンサイトなどキャンペーン名をドメインにするといいかもしれません。

どんなサイトかわかりやすい

「例:八戸美味しいお店紹介.com」という日本語ドメインのサイトがあったとします。

なるほど~八戸の美味しいお店を紹介していくれるサイトなんだなと、サイトの内容が理解できます。キャンペーン名や商品名、サービス名などをドメインにすることで、ユーザーにアピールしやすくはなります。

日本語ドメイン-02

日本語ドメインのデメリット

ブラウザ以外で日本語にならない

日本語ドメインは、「Microsoft Edge」「Google Chrome」「Safari」「Firefox」「Opera」など皆さんがインターネットを利用する際に使用している各ブラウザでは日本語ドメインになりますが、SNSなどで仕様された場合に、ピュニコード(Punycode)と呼ばれる表記に変換されてしまいます。

「例:渋谷駅.jp」は「例:http://xn--i5wq75dpjj.jp」と変換され、逆にわかりにくくなってしまします。怪しいサイトと勘違いされてしまうかもしれません!

メールアドレスは「例:○○○@xn--i5wq75dpjj.jp」となり、スパムと間違われる可能性も、さらにメールに添付するURLも同様に変換されます。

海外の人が使いづらい

日本語ドメインなので、日本国内向けのサイトには良いですが、日本語知らない海外の方、日本国内に住んでいるけど日本語が苦手な方からするととても使い勝手の悪いサイトになってしまいます。海外もターゲットにしているなら日本語ドメインはオススメできません。

日本語ドメインを使えないサーバーもあります

もちろん、日本語ドメインを使えないサーバーもあります。日本語ドメインを取得する前に、日本語が使えるのか、必ず確認してください。特に海外のサーバーは日本語に対応していない場合があります。

日本語ドメイン-03

まとめ

優先すべきは、コンテンツの質です。ドメインはサイト(ホームページ)を立ち上げる際に、必ず必要になります。上記内容をドメイン取得前にしっかりと確認して選んでください。

結論として、私は日本語ドメインをオススメしません。

飲食店などの集客に激変が!!Googleマイビジネスを活用しよう!

ポータルサイトのトレンド

食べログやぐるなびが集客に使えなくなった?

昨年、ぐるなびの業績が8割減というニュースが話題になっていた。

その後、楽天と提携して巻き返しを図っており、少しづつ楽天会員からの流入は増えているらしい。

しかし、以前と比べるとまだまだという。
いまだに、有料加盟店舗数は減少し続け、ぐるなびサイトへのアクセスも減っている。

一方、食べログはトータルでの業績は落ちていないが、有料会員数が減少し続けている。

また、食べログといえば口コミサイトとしての強みもあったが、その位置もGoogleマイビジネスに奪われつつある。こちらも、ぐるなび同様グルメサイトとしての優位性が弱くなってきた。

グルメサイトとしてのアクセスが減った原因として、Googleの仕様が変わり、ネット検索したときに表示される位置が、Googleマップの下に表示されるようになったことが大きい。

最近、若者の行動では、街で居酒屋を探すとき、スマホで検索したとき画面上部へ表示されるマップ部分で複数の店のGoogleマイビジネス情報を比較して決めている。

決めた後の行動として、電話や経路案内を使ってお店へ行ったり、電話で予約することが増えている。

また、以前はポータルサイトにアクセスして店を探していたのが、食べたい料理を検索するだけでその近くの店を表示するようになり、これもGoogleマップの部分でお店探しが完結してしまうので、画面下部のぐるなびや食べログ、ホットペッパーが表示されている部分までユーザーは見なくなってしまった。

ぐるなび・食べログ・ホットペッパーなどポータルサイトにとって代わり、これからの集客方法のスタンダードになると言われているのが「Googleマイビジネス」と「SNS」です。

Google検索結果画面

Googleマイビジネスとは?

Googleマイビジネスにビジネス情報を登録すると、Google検索結果・Googleマップなど、Googleのサイト上に無料で店舗や企業情報を表示でき、最新情報を更新・管理でき、いろいろな機能もあるサービス。

特徴として

基本情報

  • 社名
  • 店名
  • 電話番号
  • 住所
  • 営業時間
  • 会社や店舗の外観・内観写真
  • Googleストリートビュー
  • 取り扱い商品などの写真や動画
  • おすすめメニューなどの写真や動画
  • クーポンの配布
  • ホームページのURL

などの基本的な情報を掲載。

機能

  • Googelマップ上で直接予約ができる
  • お店の混雑状況がわかるのですいてる店を探せる。
  • SNSのようにどんどん投稿もでき、店のイベントやキャンペーンなどお知らせや告知ができる。
  • 自社ホームページと連携可能で、クチコミの管理・返信、閲覧数・閲覧ページ・閲覧写真・アクセス元地域などの簡易分析ができる。
  • Google広告とも連携可能。
  • PC・タブレット・スマートフォンに対応。

など、Googleマイビジネスはいろいろな機能がありネット集客に一押しのサービス。

Googleマイビジネスに登録し、店舗や企業情報をのせ、Googleマップに表示されるようにすることは必須です。Googleマップに載っていないということはお店や会社がないことと同じです。

あなたのお店はGoogleマップに載っていますか?

掲載されていないのであればいますぐにGoogleマイビジネスに登録してください!

そして、他のお店と比較したときに他のお店よりも勝っていますか?

写真は? 口コミは? 360°ビュー(Googleストリートビュー)やホームページなどのしっかりした正しい情報やコンテンツが載っていますか?

他のお店よりもGoogleマイビジネスの内容が勝っていれば他のお店よりも検索上位に表示され、たくさんの人にお店を知ってもらい、結果売り上げ増につながります。

気を付けて欲しい点があります、Googleマイビジネスは他の人でも情報を載せることができるので、時々間違った情報が載っていることがあります。そのため、オーナーは確認する必要があります。

今あるポータルサイト系では大きな予算を持つ大手に検索上位を独占され、

小さなお店は下記のように検索下位に表示されてました。

例:ホットペッパーの場合

  高いお金   上の位置に表示   大手

  少ないお金  下の方に表示    個人店

Googleマイビジネスを活用すると、ネット検索したとき、小さなお店でも大手の店舗より検索上位に表示されることがあります。つまり、お金をかけずに大手に対抗できるのです。

これからは、従来のやり方だけではなく、時代の変化に応じたやり方を模索し、新しい方法で集客していかなければなりません。

いま一番の集客ツール Googleマイビジネスを活用しましょう。

でも、パソコンやスマホは苦手だし、時間もないのでできないというお困りの方、

Googleマイビジネス登録、運営代行は【北の国ウェブ工房】にお任せ下さい。 高品質でリーズナブルな料金で親切にサポートをいたします。

お問い合わせは:北の国ウェブ工房
https://www.kitaguniweb.com/contact/

ブログ内検索

お気に入りリンク

タグクラウド

5月 adobe amazon avi cms flv mt premiere pro twitter WebA Web制作 wordpress wp wpカスタマイズ かぜ さくら つぶやき ひざが痛い カスタマイズ ゴールデンウィーク サイト フォトギャラリー ブログ ブログ作成 プール メタボ 五所川原市 写真 切り株 友人のレストラン 太宰治 家庭菜園 弘前公園 投稿 斜陽館 映像 映像編集 本屋 痛風 老健 腰痛 芦野公園 花見 金木