ホームページ制作会社エスエムティのスタッフブログ

Staff blog

エスエムティの愉快な仲間たち

記事担当
ひらりん

ホームページ制作もダークモード対応に

今年のデザイントレンドはどうなるかな~、と。

Grab 編集部さんの2021年デザイントレンド予測を眺めておりました。

昨年の振り返りからの今年のトレンド、

「なるほどなぁ」が一つありましたね。

2020年のWEBデザイントレンドの一つでしたが「ダークモード」。

######################
2019年9月にリリースされた「iOS13」から、iPhoneの機能に「ダークモード」が導入されました。これはiPhoneの基本的な色調を暗くすることで、目に優しい・バッテリーが長く持つなど、UI/UXを高めるための機能です。
今ではAndroidもダークモードを導入しており、スマートフォンのスタンダードといって良いデザインになりました。またTwitterやYouTube・Instagramなどの主要SNSもダークモードに対応した機能を用意しています。
(Grab 編集部さんから文章引用)
######################

結構使っている方多いのではないでしょうか?

私は常にダークモードでした。眩しくて…。

日中も画面が明るいと目が疲れて…。
就寝前は真っ暗な中スマホを弄るのですがもちろん、ダークモードです。

一日中世の中の大多数がPCかスマホの画面を見ている、
目が疲れる…ダークモードは当然の流れでしょうかね…出るのが遅かったくらいでは。

WEBサイトの場合、ダークモード対応にしていない場合、
サイトを開いた時かなーり、眩しく見えて迷惑です。

…と、言いつつもダークモードに対応しているWEBサイト、あまりないですねえ…。
今後取り入れようかと思っています。

で、そのダークモードの影響もあってか今年のトレンド予測に
「ニューモフィズム」が入っていました。

######################
ニューモーフィズムとは、背景から素材が浮き出て見えたり、逆に凹んでいたり見えるデザインです。色ではなく要素の立体感で役割を与えるため、ミニマリズムなデザインとの相性が良いスタイルです。
最大のメリットはダークモードの導入のしやすさです。普通のデザインなら、ボタンなどいろいろな要素の色をダークモード用に工夫しないといけません。白い背景に赤いボタンと、黒い背景に赤いボタンでは全く印象が違います。
しかし、ニューモーフィズムは色ではなく立体感で表現しているので、極論、色を反転させるだけでダークモードを導入することができます。
######################

うーん…確かに…流行るかもですね。
個人的には好きなデザインではありませんが。

しかし最近だとMacOSにも導入されてます。デスクトップパソコンもダークモード導入となると無視できませんね。

・2021年WEBデザイントレンド予測(Grab 編集部)

 

記事担当
まりりん

新しいパンが新登場!

こんばんは
まりりんです。


生食パンが人気の今、新たな新ジャンルが登場しました。

焼成の工程で蒸し焼きにすることにより、
もっちり&しっとりした食感の”スチーム生パン”です。

2月10日に恵比寿にオープン予定の
「STEAM BREAD EBISU(スチームブレッド エビス)」で
スチーム生食パンを購入することができます。

こちらのお店では、生食パンだけではなく、
「焼いておいしいトースト#スチパン」も販売されます。

私は、こんがり焼きたい派なので、
生食パンで焼いても美味しいのは
とても興味深いので一度食べて見たいです。

HPに「オンライン購入」のボタンもありますので、
買えるのを楽しみに待ちたいと思います。
記事担当
ばさっち

Chromeの拡張機能「HTML Validator」で簡単にバリデーション

こんばんはばさっちです。
コーディング後のバリデーションってどうしてますか?

昔だったらhttps://validator.w3.org/とかhttp://www.htmllint.net/で行っていたと思うのですが、今はChromeなどのブラウザで簡単にできちゃいます!!!

まずはここからChromeにインストールします。
■HTML Validator

開発者ツールを出して下記のHTML validatorをクリック!!


あとは右側に表示されるので注意文に従って修正していけばOK!!


別ウィンドウで表示してやると更にやりやすいですよ!!
記事担当
ぴのこ

CSSの圧縮サービス

ばさっちが画像の圧縮サービスを紹介していましたが、
私はCSSの圧縮サービスでも改めて書いてみようかなと。

◆SHRTHND
http://shrthnd.volume7.io/

昔からあるこちらのサービス。
CSSのショートハンドを自動で行ってくれます。

左側の「INPUT」にソースを突っ込むと、
右側の「OUTPUT」に出力されます。

例えば背景画像の指定に関して、

——————–
background-image: url(../images/point_09.gif);
background-repeat: no-repeat;
background-position: left top;
——————–

↑このように分けて指定した場合には

——————–
background: url(..images/point_09.gif) no-repeat left top ;
——————–

↑のように一瞬で変換してくれます。

◆CSS Minifier
https://syncer.jp/css-minifier

あとはこちらのサービス等で圧縮。
コードを貼れば一瞬で出力されます。

表示速度改善の為、お試しください!

ぴの子
記事担当
部長

内々なのだと驚いた部長

雨が好き
雪も好き
雷はもっと好き
でも風は大嫌いな
エスエムティの部長です。

 

「愉快な仲間達」と称しながら、
実はそんなに愉快でも無いブログへようこそ

と、誰にも頼まれてないのに
勝手に個人情報を開示しております。

さてさて。
本日は節分。
なんでも124年に2月2日が節分の日になると言われても
何の得も感じないのは部長だけでしょうか?


そんな節分に関して
面白いツイートを発見しました。


 


 




ほぉおおおお。

痛く納得した部長なのであります。


ではでは。


節分と言えば赤塚先生のお面が浮かぶ同志はクリックお願いなのであります…


クリックしていただけると幸いです

http://www.smt-net.co.jp/


ページの先頭へ戻る

ページの先頭へ戻る

お問合せ

キャンペーン

pay-per-click