情報整理から視線誘導まで、レイアウトに関するテクニックがこれでよく分かるデザイン書 -知りたいレイアウトデザイン
Post on:2023年9月29日
※本ページは、アフィリエイト広告を利用しています。
Webサイトやスマホアプリをはじめ、バナー、カード、雑誌やカタログなどで、情報を分かりやすく整理し、的確に伝えるためにもっとも重要なことはレイアウトを工夫することです。
テキストや画像、図版などのさまざまな情報の要素をどのようにデザインして配置するか、レイアウトデザインのルールとテクニックを学べ、そしてアイデアも満載の解説書を紹介します。

CSSはこんなにも進化していたのか! CSSのかなり高度なテクニック -Expert CSS: The CPU Hack
Post on:2023年9月28日
当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。
CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。
もう私が知っているCSSをはるかに超えたCSSです。


Expert CSS: The CPU Hack
br Jane Ori (@Jane0ri)
Webデザインの配色に悩んだときの参考になる! UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art
Post on:2023年9月27日
WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。
カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。

スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger
Post on:2023年9月26日
スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか?
ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。
スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。

参考: Scroll-Driven Animations Debugger
by Bramus!
Kindleセールが突然、開催! SBクリエイティブのデザインやイラスト関連の良書がたくさん、50%オフで超お買い得です
Post on:2023年9月25日
※本ページは、アフィリエイト広告を利用しています。
SBクリエイティブのデザインの良書、同人誌・絵師さん向けのイラスト関連の良書がたくさん対象になったKindleセールを紹介します。
セールは先週の金曜日から開催されましたが、終了期間は不明です。

動画の編集テクニックや表現の幅が広がるアイデアが満載! 一からしっかりと学びたい人にぴったりの解説書 -Premiere Pro よくばり入門 改訂版
Post on:2023年9月22日
動画の案件が増えてきた、YouTubeやSNSで動画をアップしたい、動画編集のテクニックを一からしっかりと学びたい人向けにぴったりのPremiere Proの解説書を紹介します。
Adobe Premiere ProはYouTubeをはじめ、映画やCMにも使用され、デファクトスタンダードといえるソフトウェアです。本書は入門書ですが、初心者向けの入門書と思って軽い気持ちで読んでみたら、間違いでした。ページを読み進める度に、これやりたい! あっ、これも! とワクワク感が止まらなくなります。
初心者にお勧めなのはもちろん、Premiere Proをすでに使用されている人にも表現の幅を広げてクオリティをアップするためのさまざまなテクニックは必見です。

CSSアニメーションの実装がこれで簡単に! Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ
Post on:2023年9月21日
先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。
今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をアニメーションさせたり、本文テキストのレイアウトを自動で最適化したりできます。

Appleデバイスの歴代モデルすべてを比較できて便利! iPhone, iPadなどの画面サイズや機能のまとめ
Post on:2023年9月20日
Webサイト制作者・スマホアプリ開発者向けに、iPhone, iPad, Apple WatchなどのAppleデバイスの画面サイズ、各サイズを採用しているモデル、ノッチのサイズ、解像度、PPI、表示タイプ、比率、セーフエリア、ウィジェットのサイズなど、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。
2023年の最新モデル、iPhone 15シリーズ、Apple Watch Series 9シリーズをはじめ、iPhone, iPad, Apple Watchの最新から初代までの情報が網羅されています。
