bingo!CMSニュースレター

配信:2022年3月16日

パートナー向けニュースレターのアーカイブです

 
bingo!CMSロゴ画像(ニュースレタートップ用)
こんにちは! bingo!CMS 広報担当の鈴木です。
 
グラデーションの配色は、Webサイトのクオリティを決定する重要な要素のひとつです。
 
ところが、実際に本番サイトに適用したら、「思っていたのと違う!」となり、配色を再調整したご経験はありませんか。
 
そんな手間を省くため、事前にデモサイトで配色を試せるツールをご紹介します!
 
 

ありそうで無かった!グラデーションをテストする「Gradientos」

「Gradientos」のページ画像

Gradientos」は、グラデーションをテストするための、一般的なUI要素を備えた無料のデモサイトです。
 
現在プロダクトハントで公開されています。
 
通常、グラデーションが実際にどのように見えるか確認するには、本番環境に実装するか、別途検証用サイトを用意する必要があります。
 
このツールを使用すれば、様々なグラデーションがデモサイト上でどのように表示されるか、その場で簡単にテストできます。
 
 

使い方

Gradientosのトップページ

まずは「Gradientos」にアクセスします。
 
Gradientosの操作方法1(パネル)

画面左側に表示されるパネルから、グラデーションの始まりと終わりの色を設定します。
 
Gradientosの操作方法2(Color1とColor2の設定)

まず「Color 1」をクリックし、始まりの色を指定します。
 
色はHEX、RGB、HSLで直接指定するか、カラーパネルをクリックして選択します。
選択した色はデモサイト上に即座に反映されます。
 
次に、「Color 2」をクリックして、同様に終わりの色を選択してください。
 
ちなみに、今回の検証では「Color 1」にbingo!CMS、「Color 2」はbingo!CMSクラウドプラットフォームのロゴの色を指定してみました^^
 
 

「Gradientos」で確認できる内容

以下のような場合のグラデーションを確認できます。
  • 幅100%表示
  • 文字の塗り
  • ボタンの枠線
  • 文字の背景にグレースケール
  • 背景画像にレイヤーマスク
  • アイコン
また、ライトモードとダークモードの切替が可能です。
 
ライトモード
Gradientosで作成したグラデーションのイメージ(ライトモード)
ダークモード
Gradientosで作成したグラデーションのイメージ(ダークモード)

実際に確認してみると、今回指定した2色は、背景にグレースケールの画像がある場合やダークモードで閲覧したときに、非常に見づらいことがわかりますね。
 
どうやら配色の再考が必要なようです。
 
 

ごくごく単純な機能ですが、個人的にはすごく便利だなと感じました。
このツールで少しでも皆さまの作業時短になりますように。
 
以上、お役に立てば幸いです。
 
 
それでは!
 

アーカイブに関するご注意

この記事はbingo!CMS広報担当独自の見解を元に執筆しています。
また、記事公開時点での情報に基づいているため内容が最新でない場合があります。

ページトップ