便利な機能

サイトの見た目にちょっとだけ差がつくコーディングの小技

お疲れ様です!制作部の姫野です(^ω^)

最近こんなホームページを見つけました。

イラストが印象的なかわいらしいページです。

実はこのホームページのある部分で「他のホームページではめったに実装されていない機能」を見ることができます!
ぜひ探してみてください。

キャプチャ

訪問型美容室|Door&Q(ドア・アンド・キュー)
http://door-and-q.jp/

 

さあ、どこでしょうか?(゚∀゚)
ヒントは「スマホ表示」です!

.

.

.

.

.

【答え】

私が持っているAndroid(ブラウザ:Chrome)で見てみます。

Screenshot_2017-02-22-08-11-50

 

この違和感に気づくでしょうか?

そう、アドレスバーがどピンクになっていますね!

 

Screenshot_2017-02-22-08-11-50

 

どうやったらこんなふうになるんだろう…と調べてみたところ、
meta情報を記述する部分に

 

<meta content="#カラーコード" name="theme-color">

を追記することで実装できることが分かりました!

 

さっそく弊社のブログにも実装してみました↓

Screenshot_2017-02-24-18-52-47


面白い!(;゚∀゚)=3ハァハァ

 

 

小ネタではありますが、ちゃんとしたメリットもあると思います。
「このホームページちょっと違う!」というポイントの1つになりますし、タブをいっぱい開いている時にもけっこう目立ってくれます。
また、コーポレートカラーの訴求にもなります。

 

Screenshot_2017-02-24-18-42-50

 

簡単にできるけど、他サイトとの差別化に役立つハックなのではないかと思います!

 

 

 

ただ…!!どういうわけかAndroid Chrome限定の機能なのです(;´Д`)エェー

iOSに実装されていないからか、認知度もいまいちです。
ただ、浸透していない今が逆にチャンスかもしれませんね!

 

デザイナーにとってはアツい機能なので、もっと対応ブラウザが増えてくれないかなーと思っています(´ )౪ (`)ニッ

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

【Webデザイナー募集!】D-Gripで一緒に働きませんか?
ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ