
こんにちは!雪乃です。
CSSのbackdrop-filterプロパティは、写真に様々なエフェクト(効果)をつけることができます。同じCSSのfilterプロパティと似ていますが、backdrop-filterは、内側のテキストやその他の要素を変更することなく、背景の要素だけにエフェクト(効果)のぼかしなどを適用することができます。
文章で説明してもわかりにくいのですが、今回はbackdrop-filterで何が出来るかご紹介します。
backdrop-filterの使い方
backdrop-filterプロパティを記述するだけで、エフェクト(効果)を追加できます。
div {
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}

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を思い出したら、是非使ってみてください。
使い方次第で、半透明のガラスのような表現もできますよ。
2020年7月1日 3:30 PM|
カテゴリー:日常生活|
コメント (0)

サイト(ホームページ)を立ち上げるときに、ドメインが必要になりますよね?一般的には英数字+ドメインがほとんどですが、実は日本語も利用できることをご存知ですか?
今回は日本語(漢字・カタカナ・ひらがな)で書かれたドメインのSEOについて、導入のメリット・デメリットをご紹介していきます。
日本語ドメインとは?
日本語ドメインとは、JPRS(日本レジストリサービス)が2001年から登録サービスを開始したドメインです。一般的にドメインは英数字+ドメインの組み合わせが知られていますが、日本語ドメインでは、ひらがな、カタカナや漢字などの日本語をドメインに利用できます。
例として弊社のホームページを日本語ドメインにした場合「例:北の国ウェブ工房.jp」となり、すぐ弊社のホームページと認識しやすいですよね~
日本語のドメインを利用しているサイトとして
「日本語.jp」「渋谷駅.jp」などがあります。
日本語ドメインのSEO
日本語ドメインは、SEO効果はほとんど期待できないと考えて問題ないと思います。
日本人にとっては、覚えやすくユーザーからのクリックを誘導する効果は得られるかもしれませんが、最近はコンテンツの中身や専門性、ユーザビリティーを重要視しています。
そのため、質の高いコンテンツでなければ上位表示は期待できないでしょう。
日本語ドメインのメリット
見てすぐわかる
ドメインが日本語だと、パッと見てすぐわかりますよね!
「kitaguniweb.com」場合は脳内変換でキタグニウェブと呼んでいますが、「北の国ウェブ工房.com」ならば見てすぐ理解できますよね。
検索結果でも日本語ドメインだとユーザーの目に留まりやすいです。インパクト!
覚えやすい
日本人である以上、日本語が一番認識しやすいですね。そのため日本語ドメインの場合、ユーザーが理解しやすく、英数字のドメインに比べてとても覚えやすいてす。
国内向けのサイトには有効です。キャンペーンサイトなどキャンペーン名をドメインにするといいかもしれません。
どんなサイトかわかりやすい
「例:八戸美味しいお店紹介.com」という日本語ドメインのサイトがあったとします。
なるほど~八戸の美味しいお店を紹介していくれるサイトなんだなと、サイトの内容が理解できます。キャンペーン名や商品名、サービス名などをドメインにすることで、ユーザーにアピールしやすくはなります。
日本語ドメインのデメリット
ブラウザ以外で日本語にならない
日本語ドメインは、「Microsoft Edge」「Google Chrome」「Safari」「Firefox」「Opera」など皆さんがインターネットを利用する際に使用している各ブラウザでは日本語ドメインになりますが、SNSなどで仕様された場合に、ピュニコード(Punycode)と呼ばれる表記に変換されてしまいます。
「例:渋谷駅.jp」は「例:http://xn--i5wq75dpjj.jp」と変換され、逆にわかりにくくなってしまします。怪しいサイトと勘違いされてしまうかもしれません!
メールアドレスは「例:○○○@xn--i5wq75dpjj.jp」となり、スパムと間違われる可能性も、さらにメールに添付するURLも同様に変換されます。
海外の人が使いづらい
日本語ドメインなので、日本国内向けのサイトには良いですが、日本語知らない海外の方、日本国内に住んでいるけど日本語が苦手な方からするととても使い勝手の悪いサイトになってしまいます。海外もターゲットにしているなら日本語ドメインはオススメできません。
日本語ドメインを使えないサーバーもあります
もちろん、日本語ドメインを使えないサーバーもあります。日本語ドメインを取得する前に、日本語が使えるのか、必ず確認してください。特に海外のサーバーは日本語に対応していない場合があります。
まとめ
優先すべきは、コンテンツの質です。ドメインはサイト(ホームページ)を立ち上げる際に、必ず必要になります。上記内容をドメイン取得前にしっかりと確認して選んでください。
結論として、私は日本語ドメインをオススメしません。
2020年5月22日 6:19 PM|
カテゴリー:日常生活|
コメント (0)
食べログやぐるなびが集客に使えなくなった?
昨年、ぐるなびの業績が8割減というニュースが話題になっていた。
その後、楽天と提携して巻き返しを図っており、少しづつ楽天会員からの流入は増えているらしい。
しかし、以前と比べるとまだまだという。
いまだに、有料加盟店舗数は減少し続け、ぐるなびサイトへのアクセスも減っている。
一方、食べログはトータルでの業績は落ちていないが、有料会員数が減少し続けている。
また、食べログといえば口コミサイトとしての強みもあったが、その位置もGoogleマイビジネスに奪われつつある。こちらも、ぐるなび同様グルメサイトとしての優位性が弱くなってきた。
グルメサイトとしてのアクセスが減った原因として、Googleの仕様が変わり、ネット検索したときに表示される位置が、Googleマップの下に表示されるようになったことが大きい。
最近、若者の行動では、街で居酒屋を探すとき、スマホで検索したとき画面上部へ表示されるマップ部分で複数の店のGoogleマイビジネス情報を比較して決めている。
決めた後の行動として、電話や経路案内を使ってお店へ行ったり、電話で予約することが増えている。
また、以前はポータルサイトにアクセスして店を探していたのが、食べたい料理を検索するだけでその近くの店を表示するようになり、これもGoogleマップの部分でお店探しが完結してしまうので、画面下部のぐるなびや食べログ、ホットペッパーが表示されている部分までユーザーは見なくなってしまった。
ぐるなび・食べログ・ホットペッパーなどポータルサイトにとって代わり、これからの集客方法のスタンダードになると言われているのが「Googleマイビジネス」と「SNS」です。
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/
2020年2月21日 10:54 PM|
カテゴリー:日常生活|
コメント (1)