サイト構築 -制作

地味だけど嬉しい新機能! フォームのセレクトボックスで区切り線にhrを使用できるようになりました

Post on:2023年11月14日

先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでC

...記事の続きを読む

UIデザインにも最適! アナログ印刷のインクと紙からインスピレーションを得たカラースキーム -Flexoki

Post on:2023年10月18日

デジタルのスクリーンで文章やコードの読み書きのためにデザインされた、アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキームを紹介します。 WebサイトやスマホアプリのUIデザインに使用した

...記事の続きを読む

CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce

Post on:2023年10月17日

スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロー

...記事の続きを読む

Webデザインの配色に悩んだときの参考になる! UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art

Post on:2023年9月27日

WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、そ

...記事の続きを読む

スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger

Post on:2023年9月26日

スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか? ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認でき

...記事の続きを読む

Appleデバイスの歴代モデルすべてを比較できて便利! iPhone, iPadなどの画面サイズや機能のまとめ

Post on:2023年9月20日

Webサイト制作者・スマホアプリ開発者向けに、iPhone, iPad, Apple WatchなどのAppleデバイスの画面サイズ、各サイズを採用しているモデル、ノッチのサイズ、解像度、PPI、表示タイプ、比率、セーフ

...記事の続きを読む

朗報! リニューアルされたGoogle Fontsがかなり使いやすくなってる、フリーフォントとアイコンを探すときに便利

Post on:2023年9月12日

先週、Google Fontsがリニューアルされました! サイトのデザインは一新され、フォントやアイコンがこれまで以上に簡単に探せ、すぐにダウンロードしたりコードを簡単に利用できます。 新しくなったGoogle Font

...記事の続きを読む

Monotype、フォントワークスの買収を完了! フォントワークスのユーザーはGothamなど人気フォントが利用可能になるって

Post on:2023年9月6日

2023年9月1日に、Monotype社とフォントワークス社からそれぞれ「フォントワークスの買収を完了」「Monotypeの傘下に」のリリースが発表されました。 これによりフォントワークスの従業員と1,000種類以上のフ

...記事の続きを読む

全部、商用利用も無料! Google Fontsの中でも可読性・判別性に優れたフォントのまとめ、UIデザインにも最適

Post on:2023年9月4日

Google Fontsには日本語フォントや英語フォントをはじめ、さまざまな言語のフォントをすべて無料で使用できます。いやー、いい時代ですね。 そんなGoogle Fontsの中からリーダビリティ、レジビリティに優れた、

...記事の続きを読む

最近のUIデザインのテクニックを解説! より使いやすいボタンをデザインするときのポイント

Post on:2023年8月24日

WebサイトやスマホアプリのUIに使用されているボタンをデザインするときに気をつけるポイント、より使いやすくするためのポイントを紹介します。 UIのボタンは色だけに頼らない明確な視覚的階層が必要で、同じスタイルの場合は区

...記事の続きを読む

top of page

©2024 coliss