情報整理から視線誘導まで、レイアウトに関するテクニックがこれでよく分かるデザイン書 -知りたいレイアウトデザイン

※本ページは、アフィリエイト広告を利用しています。

Webサイトやスマホアプリをはじめ、バナー、カード、雑誌やカタログなどで、情報を分かりやすく整理し、的確に伝えるためにもっとも重要なことはレイアウトを工夫することです。

テキストや画像、図版などのさまざまな情報の要素をどのようにデザインして配置するか、レイアウトデザインのルールとテクニックを学べ、そしてアイデアも満載の解説書を紹介します。

知りたいレイアウトデザイン Second Edition

続きを読む

CSSはこんなにも進化していたのか! CSSのかなり高度なテクニック -Expert CSS: The CPU Hack

当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。

CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。

もう私が知っているCSSをはるかに超えたCSSです。

CSSのかなり高度なテクニック -Expert CSS: The CPU HackCSSのかなり高度なテクニック -Expert CSS: The CPU Hack

Expert CSS: The CPU Hack
br Jane Ori (@Jane0ri)

続きを読む

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

WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。

カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。

UI要素のさまざまなカラースキームをまとめた配色サイト -Spectrum.Art

Spectrum.Art

続きを読む

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

スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか?

ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。

スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。

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

参考: Scroll-Driven Animations Debugger
by Bramus!

続きを読む

Kindleセールが突然、開催! SBクリエイティブのデザインやイラスト関連の良書がたくさん、50%オフで超お買い得です

※本ページは、アフィリエイト広告を利用しています。

SBクリエイティブのデザインの良書、同人誌・絵師さん向けのイラスト関連の良書がたくさん対象になったKindleセールを紹介します。

セールは先週の金曜日から開催されましたが、終了期間は不明です。

Kindle本 50%オフセールの対象書籍

続きを読む

動画の編集テクニックや表現の幅が広がるアイデアが満載! 一からしっかりと学びたい人にぴったりの解説書 -Premiere Pro よくばり入門 改訂版

動画の案件が増えてきた、YouTubeやSNSで動画をアップしたい、動画編集のテクニックを一からしっかりと学びたい人向けにぴったりのPremiere Proの解説書を紹介します。

Adobe Premiere ProはYouTubeをはじめ、映画やCMにも使用され、デファクトスタンダードといえるソフトウェアです。本書は入門書ですが、初心者向けの入門書と思って軽い気持ちで読んでみたら、間違いでした。ページを読み進める度に、これやりたい! あっ、これも! とワクワク感が止まらなくなります。

初心者にお勧めなのはもちろん、Premiere Proをすでに使用されている人にも表現の幅を広げてクオリティをアップするためのさまざまなテクニックは必見です。

Premiere Pro よくばり入門 改訂版

続きを読む

CSSアニメーションの実装がこれで簡単に! Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ

先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。

今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をアニメーションさせたり、本文テキストのレイアウトを自動で最適化したりできます。

Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ

Chrome 117 beta

続きを読む

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

Webサイト制作者・スマホアプリ開発者向けに、iPhone, iPad, Apple WatchなどのAppleデバイスの画面サイズ、各サイズを採用しているモデル、ノッチのサイズ、解像度、PPI、表示タイプ、比率、セーフエリア、ウィジェットのサイズなど、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。

2023年の最新モデル、iPhone 15シリーズ、Apple Watch Series 9シリーズをはじめ、iPhone, iPad, Apple Watchの最新から初代までの情報が網羅されています。

iPhone, iPad, Apple Watchなど、Appleデバイスの画面サイズや機能のまとめ -Screen Sizes

Screen Sizes

続きを読む

top of page

©2023 coliss