レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im

スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt

Photoshop, Illustrator, InDeign, Animate, Lightroom, Dreamweaver, After Effects, Auditionなど、Adobe系ソフトの代替ソフトウェアを紹介します。 有名なものからあまり知られていないものまで、買い切り、オープンソースで無料、日本語対応のものなどいろいろあります。 Photoshopの代替ソフトウェア Illustratorの代替ソフトウェア InDesignの代替ソフトウェア Animateの代替ソフトウェア Lightroomの代替ソフトウェア Dreamweaverの代替ソフトウェア After Effectsの代替ソフトウェア Auditionの代替ソフトウェア 下記ツイートの代替ソフトウェアをまとめたグラフィックはAffinity Designerでデザインされています。 With the re

個人でも商用でも無料、Webでも紙でもプロダクトのデザインにも利用できる、ポリゴンでデザインされた動物・鳥・魚・昆虫・恐竜などのデザイン素材を紹介します。

そのデザインを前に見たことがある、自分では気がつかずに利用していた、そういった経験、または聞いたことがあると思います。 デザインをはじめ、Web制作のコード、ロゴやイラストなどを盗むこと、コピー、模倣すること。クリエイターにとって、常に意識しておきたいことを紹介します。 Your logo is copied by Ferdinand Vogler 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 そのデザイン見たことある 気づかずに再利用している 盗むとコピーの違い コピーのコピーの、そのまたコピー セマンティクスはコピーを利用する あなたはどう思いますか？ そのデザイン見たことある 「ちょっと待って！ そのロゴ、前に見たことあるよ。 そのデザインにどうして、なじみがあると思いますか？」 左:Airbnb、右: Azuma Dr

デザインやイラストのワンポイントに、背景やオーバーレイさせたり、拡大・縮小・着色して利用できるベクター完備の曼荼羅（まんだら）の素材を紹介します。 利用にあたっては、Webでもアプリでも動画でも紙でもプロダクトでも無料です。 素材のフォーマットはカスタマイズが可能なベクター完備、手軽に使える透過PNGも揃っています。 .ai .eps .png（透過） Mandala Collectionは通常は有料素材（Mandala Collection 有料版）ですが、無料版として100種類の曼荼羅がダウンロードできます。有料版は630種類です。 無料版では、サークル状の曼荼羅が美しく緻密にデザインされています。

眺めているだけで創作意欲がどんどん沸いてくる、アイデア満載のクリエイティブなロゴデザインを紹介します。 最近はロゴデザインのよくないニュースしか聞きませんが、本来の楽しさを感じてもらえたらなと思います。