backdrop-filterでホームページの写真にPhotoshopのようなエフェクトを追加
こんにちは！
CSSのbackdrop-filterプロパティは、写真に様々なエフェクト（効果）をつけることができます。同じCSSのfilterプロパティと似ていますが、backdrop-filterは、内側のテキストやその他の要素を変更することなく、背景の要素だけにエフェクト（効果）のぼかしなどを適用することができます。
文章で説明してもわかりにくいのですが、今回はbackdrop-filterで何が出来るかご紹介します。
backdrop-filterの使い方
backdrop-filterプロパティを記述するだけで、エフェクト（効果）を追加できます。
div {
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
各種ブラウザ対応状況
FireFox以外のほとんどの主要ブラウザでは使用できす。下記のリンク先をご確認ください。
10種類の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を思い出したら、是非使ってみてください。
使い方次第で、半透明のガラスのような表現もできますよ。
ファビコンの重要性
こんにちは！
企業、店舗のホームページを、ご自身や制作会社にお願いして制作・公開し、インターネットでホームページをご覧になった際に、上の方にロゴやシンボルマークがありますよね？それがファビコン（favicon）です。
今回はそのファビコン（favicon）についてご紹介します。
ファビコン（favicon）とは？
ファビコン（favicon）とは“favorite icon”の略語で、ホームページのシンボル的な役割をしています。
検索結果のタイトルの横や、ブラウザのタブ、お気に入りやブックマークなどに、ファビコン（favicon）が表示されます。スマートフォンのショートカットにもファビコン（favicon）が表示します。
ファビコン（favicon）って重要なの？ファビコンは重要なものです！
ファビコン（favicon）のメリット
ファビコン（favicon）とは？で記載した通り、検索結果、タブ、お気に入りやブックマークなど様々なところに表示するため、サイトをユーザーに覚えてもらい易くなります。
ブックマークなど複数登録している場合に、ファビコン（favicon）により見つけやすく、多くのユーザーはブックマークしたサイトのファビコンを目印にしているので、サイトへ再び訪れる可能性が上がります。複数のタブを開いている際に、ファビコン（favicon）が設置されていると、見つけやすいメリットもあります。
ファビコン（favicon）を設置することで、良い印象をユーザに与えることになります。ファビコン（favicon）の有無によって成約率が倍近く違うというデータもあるそうです。
ファビコン（favicon）の作成について
サイズについて
faviconのサイズはブラウザにより様々です。画像編集ソフトなど使用して作成してください。
- 16×16（IEブラウザ）
- 32×32（Chrome,Firefox,Safari）
- 180×180（iPhone＆iPad）
- 256×256（Android）
主にPCで使用するfavicon（ファビコン）は“ico”ファイルを、スマホ対応する際は“png”ファイルで画像を用意する必要があります。
Googleのガイドライン
検索結果の横にファビコンを表示するには、次のガイドラインに準拠する必要があります。なお、すべてのガイドラインが満たされても、ファビコンが検索結果に表示されるかは保証されません。
- Google がファビコンのファイルとホームページをクロールできること（Google をブロックしないこと）。
- ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
- ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。
- ファビコンの URL は固定されている必要があります（URL は頻繁に変更しないでください）。
- わいせつな表現やヘイト表現に関連するシンボル（例: かぎ十字章）などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます
まとめ
ファビコン（favicon）は不要そうに見えて、実はとっても大事なものです。Googleの検索結果にも表示されるようになり、サイトのクリック率（CTR）が上がる場合があります。
PCよりもスマートフォンの検索が多い最近では、ファビコン（favicon）をPC用だけではなくスマートフォン用も用意する必要があります。
ファビコンをまだ設置していない方は、複雑なデザインはさけ、ファビコン（favicon）を作成し、この機会に設置してみてはいかかでしょうか。
ホームページ制作の相場は？
ホームページ制作の相場
いまやホームページを持っていない会社は少なく、あって当たり前になってきました。まだ、ホームページを持っていない会社はホームページを作りたいけどホームページ制作費の相場はどのくらいだろう？と気になっていることと思います。
多いのは20～50万円位です。色々な機能とかこだわりを持つと70～100万円位、または、それを超えることも珍しくありません。下記の一覧を参考にして下さい。
ホームページ制作費一覧表
|
制作内容 |
制作費用 |
|
1ページもののランディングページタイプ |
3万円～15万円 |
|
テンプレートデザインにあわせた制作 （5ページ程度） |
5万円～10万円 |
|
テンプレートをカスタマイズした制作 （10ページ以上） |
20万円～50万円 |
|
オリジナルデザインでの制作 |
20万円～100万円以上 |
|
ネットショップや予約システムの機能を備えたホームページ制作 |
50万円以上 |
|
独自のシステムや機能を実装するホームページ制作 |
100万円以上 |
※ページ数などコンテンツのボリュームにより費用は異なってきます。
ホームページのご用命は「北の国ウェブ工房」へ
ホームページを持つメリットとデメリット
ホームページを持つメリットとは
1. 売上げアップにつながる
ホームページを制作しても作ったきり更新など何もしないでほっと置けばアクセスも少なくなり役に立たなくなります。いつも手をかけて常に良い状態を心掛ける必要があります。そのようにすることで売り上げアップにつながるホームページになっていきます。
2. 集客に効果的
最近はSNSのユーザーが増え中には総人口の80％を占めるSNSもあり、SNSとホームページを連動させることでお客を集めることができます。
3. 問い合わせが増加
ホームページを作成ホームページの大きな目的に問い合わせをもらうことがあります。お問い合わせをホームページのどの場所に表示するかが大事です。
4. お客様からの信頼アップ
会社やサービスの内容をしっかり説明しているホームページは信頼されます。また、同業の会社でもホームページのある会社とない会社であれば、ある会社の方が信頼されやすいです。
5. 企業の顔であり看板
良いホームページはそれだけで企業のイメージを向上させ、企業の顔となり、看板になる。
6. 代わりに営業
ユーザーが検索し見つけて問い合わせてくれ、ホームページが営業してくれる
7. 営業ツールとして使える
いろいろな資料やパンフレットの代わりに使える。
8. タイムリーに自社の情報を発信できる（ブログ運営）
いつでもどこでも出先からPCやスマホで発信できる
9. 求人募集
会社の内容を知ってもらえて応募につながる
10. SNSと連携
ホームページとSNSを連携させ会社の情報を拡散し多くの人に知ってもらう。
11. ホームページのアクセス状況把握
アクセス数や閲覧者の傾向など様々なデータで確認できる
ホームページを持たないデメリットとは
1. 多少コストがかかる
・サーバー料 月500円～1,000円
・ドメイン料 年1,900円～
・ＨＰ保守料 月5,000円～
2. 公開後の活用ができない場合がある（ほっておくと）
3. 担当者が必要になる、または、業者へ運営を依頼が必要。
4. 運営のノウハウが必要・・・・運用・更新
5. 時間と人と費用
6. サイトデザイン、SEO・MEOなどの検索対策、コンテンツ制作、運営のノウハウなどやることが多い。
7. 自分で作るのは大変、またできない。
8. どこの業者が良いのか分からないので、自社に合ったホームページ制作会社が見つからない
9. 顧客からの自社に対するイメージが悪くなってしまう
10. ホームページを持っている競合他社に負ける。
11. 商品やサービスを持続的にPRできない。
12. お問い合わせの対応が電話やFAXだけでは時代遅れ、時間や経費もかかってしまう
13. 新入社員を集められない
国内のインターネット利用者数は１億人を突破し、人口の８割を超え、さらに増加しています。生まれたときから周辺にはネット用のデバイスがある状態で育ってきた世代は着実に増えており、多数派になっています。
現代のようなネット社会において、ネットでの露出がないということはこの世に存在しないことになると言っても過言ではありません。ホームページはあって当たり前とみられ、無いことによるデメリットは計り知れない。
まだ自社のホームページをお持ちでないという場合は、早めに開設の検討を強くお勧めします。
ホームページが必要と言われても、どのように作ればいいのか見当がつかないし、わからないという場合は是非、八戸のホームページ制作会社【北の国ウェブ工房】へお問い合わせください。
【北の国ウェブ工房】は地元八戸市及び近郊の階上町・南部町・三戸町・十和田市・三沢市などのお客様とウインウインの関係を大切にホームページ制作をしています。
リーズナブルな料金で最新の技術を組み込んだ高品質なホームページをご提供いたします。
まずはお気軽にお問い合わせくださいませ。
北の国ウェブ工房 ： https://www.kitaguniweb.com/
お知らせ！ Googleマイビジネス登録代行サービス始めます！！
近日中に新サービス【Googleマイビジネス登録代行サービス】を始めます！
弊社ホームページに新サービスとして【Googleマイビジネス登録代行サービス】のページを追加します。
内容は下記のようなものになります。
************************************************************************************
Googleマイビジネス登録代行サービス
Googleマイビジネスの登録はお済みですか?
こんな悩みを抱えたオーナー様におすすめのサービスです。
1. Googleマイビジネスの登録の仕方がよくわからない、設定を任せたい。
2. 忙しくて更新できない、更新を任せたい。
3. お金をかけないで新規顧客を集客したい。
4. 間違った情報が載っているのを直したい。
5. 必要なことはわかっているが、忙しくて後回しにしている。
登録に必要な様々な作業をお客様に代わって行います！
Googleマイビジネス登録代行サービス始めました！
Googleマイビジネスを活用しないと損！
Googleマイビジネスは新しいお客様を連れてきます！
店舗への集客方法が、以前はぐるなび・食べログ・ホットペッパーなどが主流だったが、
最近はスマホで店舗を探すことが多くなった。
スマホで検索したとき最初にGoogleマップの部分が表示されるため、マップを見て店舗を決めることが多くなっている。
従来のポータルサイトからGoogleマイビジネスが集客のスタンダードになってきたのである。そんなにすごいのになんと無料で使える。店舗の経営者や運営者などには大変ありがたいサービスである。
Googleマイビジネスを使わない手はない！
使わないのは損です！
Googleマイビジネスとは？
Googleマイビジネスにビジネス情報を登録すると、Google検索結果・Googleマップなど、Googleのサイト上に無料で店舗や企業情報を表示でき、最新情報を更新・管理でき、いろいろな機能もあるサービス。
特徴として
基本情報
l 社名
l 店名
l 電話番号
l 住所
l 営業時間
l 会社や店舗の外観・内観写真
l Googleストリートビュー
l 取り扱い商品などの写真や動画
l おすすめメニューなどの写真や動画
l クーポンの配布
l ホームページのURL
などの基本的な情報を掲載。
機能
l Googelマップ上で直接予約ができる。
l お店の混雑状況がわかるのですいてる店を探せる。
l SNSのようにどんどん投稿もでき、店のイベントやキャンペーンなどお知らせや告知ができる。
l 自社ホームページと連携可能で、クチコミの管理・返信、閲覧数・閲覧ページ・閲覧写真・アクセス元地域などの簡易分析ができる。
l Google広告とも連携可能。
l PC・タブレット・スマートフォンに対応。
Googleマイビジネスはいろいろな機能がありネット集客に一押しのサービス。
Googleマイビジネスに登録し、店舗や企業情報をのせ、Googleマップに表示されるようにすること
は必須。Googleマップに載っていないということはお店や会社がないことと同じです。
インバウンド対策にも最適！
GoogleマイビジネスはGoogleマップの中のサービスですので、74言語に対応しており外国人ユーザーにとっても自分の国の言語で利用でき大変便利です。
北の国ウェブ工房の英語版Googleマイビジネス
Googleマイビジネスの使われ方をyoutubeでご紹介！
Googleマイビジネス登録代行サービス 料金
基本サービス内容
l Googleアカウント取得サポート
l Googleマイビジネスの作成
l メインカテゴリの設定
l オーナー確認認証の代理認証
l オーナー権限者の登録（1アカウント）
l プロフィール画像の登録設定
l カバー画像の登録設定
l マイビジネス登録後の運用サポート
l 活用方法のアドバイス
l 写真登録（最大20枚、不足の場合弊社で撮影）
■Googleマイビジネスにアップする写真の「基準」
² 外観写真・・・２～3枚
² 内観写真・・・２～3枚
² 商品の写真・・・２～５枚
² サービスの内容をあらわす写真・・・２～3枚
² メニューの写真（飲食店）・・・２～3枚
² スタッフの写真・・・２～3枚
※写真品質や大きさに問題あるものは使えません。
料金20,000円 （税別）
オプション
ホームページ1ページプラン（ランディングページ）
低コスト＋短時間でホームページを作成
l ライトプラン 50,000円
l ミディアムプラン 100,000円
l ラージプラン 150,000円
ホームページ制作
いちからオリジナルでホームページを制作いたします。
Googleストリートビュー撮影
l Sプラン （～3ポイント） 30,000円
l Mプラン （～７ポイント） 60,000円
l Lプラン （～１０ポイント） 80,000円
※10ポイント以上は別途お見積り
MEO対策
Googleマップ検索上位表示のための施策を行います。
成果報酬で成果があった分だけ費用が発生します。
初期費用：15,000円
成果報酬：1,000円／日
ドローン空撮
基本料金：30,000円～
※表示料金はすべて税抜きです
Googleマイビジネスの登録代行サービスは北の国ウェブ工房へ！