今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか！ と驚きました。 🧙‍♂️ CSS trick: transition from height 0 to auto! by Fra

折れ線グラフを描画するためのフォント「Linefont」、波形・スペクトル・ダイアグラム・ヒストグラムなどの棒データを描画するためのフォント「Wavefont」が、Google Fontsで利用できるようになったので紹介します。 Linefont | Wavefont フォントのライセンスはSIL Open Font Licenseで、個人でも商用プロジェクトでも無料で利用できます。 まずは、Linefont。 Linefontは中小規模の折れ線グラフ（時系列など）を描画するためのフォントです。値は0～100の範囲でさまざまな文字に割り当てられます。範囲、値、ウェイトはWavefontと互換性があり、視覚的な一貫性を維持しながらフォントを交換できます。

個人でも商用でも完全に無料で利用できる、さまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、全部ダウンロードすると時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。1年くらい前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティフリーとなっています。詳しくはダウン

※本ページは、アフィリエイト広告を利用しています。 Webサイトやスマホアプリをデザイン・実装するときに取り組むべきUXデザインにどのように対応していくのか、必要な知識を一通り身につけることができるオススメの解説書を紹介します。 UXデザインにこれから取り組もうとして人は本書を通じてUXデザインの理解が深まり、実務レベルでの知識や思考のプロセスが分かります。 特にデザイナーやコーダーさんにかなり勉強になる一冊です。 本書は2023年3月に発売された「Universal Principles of UX」の翻訳版で、訳書が半年後に発売というのは非常に嬉しいですね。また、お値段も原書の現地価格とほぼ同じです（国内での洋書はお高いです！）。今年発売されたばかりなので、訳書にありがちな少し古いといったことは全くなく、今注目されているUXデザインの知識を学べます。 UXデザイン100の原則 ISBN

当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。 CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。 もう私が知っているCSSをはるかに超えたCSSです。 Expert CSS: The CPU Hack br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのエキスパート: The CPU Hack 5つの観測可能性 The CPU Hackの始まり The CPU Hack 終

商用でも完全に無料で利用できる、SVGとPNG完備のおしゃれなイラスト素材を紹介します。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、あらゆるメディアで無料で利用できます。 イラストはすべて手描きのベクターで、80年代のSF映画や日本のイラストにインスパイアされて描かれています。 Transhumans さっそく、イラスト素材のダウンロード方法から。 イラストをクリックすると各イラストのページに移動するので、「download SVG」「download PNG」ボタンをクリックすると、ダウンロードできます。登録など面倒なことは一切不要です。

最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利です。

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 これまでの中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of the Best by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 細いフォントは暗いカラーにする 2. 長いフォームは常にラベルを上部に配置する 3. ボタンのラベルは一貫性を保つ 4. 不要なテキストでフォームのUIを乱雑にしない 5. フォームはインタラクションの後、すぐにフィードバックを提供 6. 次のステップの情報を提供する 7. CTA用にカラーを1つ確保しておく 8.

HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。 HTMLメールの最近の実装方法を解説します。 Modern HTML email (tables no longer required) by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLメールの実装でもっとも頭を悩ませている問題 今日、HTMLメールをどのように実装すべきか？ 電子メール用のAMPについて 終わりに はじめに MailChimpによるHTMLメール実装のベストプラクティ

UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確

HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。 Windows, macOS, Linux対応の無料アプリで、今までオンラインであちこちの各ツールを利用していた人とかにかなり便利なツールだと思います。 He3: Modern Developer Toolbox He3の特徴 He3のダウンロードとインストール He3の使い方 He3の特徴 He3は、200種類以上のWeb制作に役立つ便利ツールが詰め込まれたデベロッパー向けのツールボックスです。 200種類以上あるツールは、カテゴリ別にまとめられており、スマート検索機能ですぐに

「ブロックテーマ」とは、WordPressのサイトエディタのために用意された新しいテーマのフォーマットで、Gutenbergのブロックを使用してテンプレートを構成するものです。WordPressが後方互換を考慮するかぎり、今までのクラシックエディタや初期のGutenbergも使用できると思いますが、これからWordPressのテーマを制作するなら、このブロックテーマが必須になります。 WordPressのこれからのテーマ制作の標準「ブロックテーマ」をしっかり学べる解説書を紹介します。 著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。 本書もWordPressのブロックテーマをその基礎知識から実践的なテクニックまで詳しく解説されてお

商用でも無料で使用できる、かわいくてシンプルなおしゃれな海外のイラスト素材をまとめました。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、さまざまなメディアで無料で利用できます。 イラスト素材の多くはオープンソースで利用でき、ほとんどはクレジット表記の必要が無しなので、使いやすいと思います。

3人のWebデザイナーがインハウスデザイナーとして、三井住友銀行のスマホアプリやWebサイトのリニューアルを通してデザインによるDXをどのように浸透させたのか、その経験が惜しみなく明かされた良書を紹介します。 「銀行」は自分とは関係ないやと思った人は間違いです。スマホアプリやWebサイトのUI/UXをユーザー目線で使いやすく洗練されたデザインにするテクニックなども詳しくていねいに解説されており、UIデザインの学びがたくさんあります。 一読するだけでなく、何度も繰り返し読みたくなる優れたデザインの解説書です。 3人の経歴は、金澤氏はフリーのWebデザイナーを経て制作会社に入社、金子氏は知人とWeb企画・制作、堀氏は企業でUIデザインを担当、そして三井住友銀行のインハウスデザイナーとしてUI/UXデザインを担当しています。 デザインの必要性や重要性を社内からどのように理解してもらったのか、スマ

11/30（日本時間）にリリースされたChrome 108では、CSSの新しい機能がたくさん含まれています。また、変更・削除された機能もあります。特に、Android版のChromeでposition: fixed;を使用している要素の配置が期待通りにならない可能性があります。 Chrome 108の新機能、変更・削除された機能を紹介します。 chrome-108-beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 Chrome 108のCSSの新機能 変更・削除された機能 Chrome 108のCSSの新機能 Chrome 108でデフォルトで有効になったCSSの新機能は、下記の通りです。 新しいビューポート単位（lvh, svh, dvhなど) 新しいプロパティ（break-after, break-before, break-insid

待ち望んでいた人も多いと思います！ フォント制作の王道ソフト「Glyphs（グリフス）」初の解説書がついに発売！！ 執筆陣も非常に豪華、Glyphs日本語版を監修した書体デザイナーの大曲 都市氏、GlyphsのTipsを公開している照山 裕爾氏、Glyphs用のテンプレートを多数公開している丸山 邦朋氏、アドビの書体デザイナーである吉田 大成氏、ベジェ曲線の基本から実際のフォント制作の入門までカバーした解説書です。 「Glyphs（グリフス）」が気になっていたけど、どこから手をつけてよいのかさっぱりだったという人にお勧めの解説書です。Glyphsのダウンロード・インストールから、購入方法、インターフェイス・基本操作、ベジェ曲線のさまざまなパス操作、記号フォント・欧文フォント・和文フォントの作り方まで詳しくていねいに解説されています。 Glyphsの練習用ファイルや完成ファイルをサポートサイ

先日ローンチされたばかり、500種類以上のランディングページのデザインをまとめたLandingsを紹介します。 ランディングページのデザインは、テーマやカラーでフィルタリングができ、アイデアを膨らませるのに役立つと思います。 Landings Landingsは今月の初めにローンチされたばかりのランディングページのまとめサイトです。現在のところ、500種類以上のランディングページのデザインがまとめられており、これからも定期的に追加していくとのことです。 Landings Landingsの利用は簡単で、登録など面倒なことは一切不要。 ページは無限スクロールに対応しているので、そのままスクロールしてもよし、上部でテーマやカラーでフィルタリングすることもできます。 フィルタリングを見てましょう、まずはライトテーマ。 各サムネイルをクリックすると、ページ全体のキャプチャ画像とランディングページの

控えめに言って、これはかなりお勧めのデザイン書です！ レイアウト・文字・配色・イラスト・画像など、デザインの原則から応用テクニックまでていねいに分かりやすく解説されており、しかも全ページが非常に美しくレイアウトされています。 書名でパワーポイントと聞いて、関係ないかな、と思った人は大間違い。私も最初は興味があまりなかったのですが、中を見てみたら、間違いに気がつきました。本書は「伝わるビジュアル」づくりを身につけられるデザイン書、ノンデザイナーから中堅デザイナーにお勧めします！ 本書はC96の『PowerPoint Re-Master』を継承しつつ、ゼロから再構成された新刊書。全文がリライトされ、解説も大幅に増強、「誰もがビジュアル-コミュニケーション-デザインができる」世界を目指し、ノンデザイナーが「伝わる」デザインを学べる解説書です。 全ページが非常にかっこよく美しくデザインされているの

Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。 コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの特徴 The Component Galleryの利用方法 各UIコンポーネントのまとめ The Component Galleryの特徴 The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。 The Component Gallery コンポーネントや要素に名前を付けるの

アイコンをクリックして、コードをコピペ アイコンのライセンスはCC 4.0のオープンソース、商用プロジェクトでも無料で利用でき、改変、再配布もOKです。 以下にアニメーションで動くSVGアイコンをいくつか、コピペしてみました。 SVGなので、サイズは簡単に変更できます。 「Send」アイコン <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> <style> .send { animation: send 2s cubic-bezier(1, -0.47, 0.01, 1.37) infinite both; } @keyframes send { 0% { transform: translateY(0) translateX(0); } 100%