最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利です。
![デザインの参考になる! 最近のWebサイトやスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd2e654348845cfb738998ca4fbd209c96e0a1bd/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202303%2F2023072201%402x.gif)
最近のWebサイトやスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利です。
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。 ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。 そんなModernizrに代わる、モダンCSSに対応したスクリプト、SupportsCSSを紹介します。@containerも@layerも:has()もsubgridもcolor-mix()にも対応しています。 SupportsCSS SupportsCSS -GitHub SupportsCSSはModernizrにインスパイアされたスクリプトで、モダンCSSに使用されるセレクタ・機能・@ルールなどのサポートをライブ検出できます。 CSSの@supportsもサポートしている機能を検出できますが、Sup
レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。
Visual Studio Code(以下、VS Code)を今よりもっと使いこなしたい! そんな人にお勧めの解説書を紹介します。 VS Codeの最大の特徴は、高いカスタマイズ性と豊富な機能拡張。本書では使用する言語に適した開発環境の構築方法、UIや設定のカスタマイズ方法、特にお勧めの機能拡張を軸に、VS Codeを使いこなす方法を解説したものです。 著者の上田 裕己氏(@ikuyadeu0513)はVisual Studio Codeのコントリビュータで、VS Codeの機能拡張なども開発されています。 本書はそんな著者によるVS Codeの実践的な操作方法、言語ごとの開発環境の構築、拡張機能など、幅広い内容が網羅された一冊です。
HTMLやCSSのデモページでコードを見ると、HTMLに自己終了タグ(/>)が使用されているのを見かけたことはありませんか? HTMLにおける自己終了タグの使用、自己終了タグの歴史的背景、自己終了タグの使用に対する賛否両論について紹介します。 The case against self-closing tags in HTML by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに />の歴史的背景 />に対する賛否両論 Prettierには一貫性がない それとも、HTMLは閉じタグをどこでも使用できるのでしょうか? はじめに />について話をしましょう。
ピクセルフォント「マルモニカ」などをリリースされているx0y0pxFreeFontから、新しいピクセルフォントがリリースされました。 ※「マルモニカ」(紹介記事)も漢字対応です。 「マルミーニャ」はかわいさの中にまじめさがある丸ゴシック体のピクセルフォントで、幅広い用途でピクセルの表現を堪能できます。 マルミーニャ マルミーニャ -BOOTH マルミーニャのダウンロード マルミーニャの特徴 x0y0pxFreeFontの他のフォント マルミーニャのダウンロード さっそくフォントのダウンロード方法を紹介します。 まずは、本サイト。「マルミーニャ」リリースのタイミングでサイトがGitHubに移転されました。フォントのダウンロードは、フォント下の「Download」をクリックするだけです。
CSSの解説書というと、通常はWebサイトやスマホアプリを実装するための知識やテクニックですが、今回は『CSSによる本作り』の解説書を紹介します。 原稿の執筆から、本のデザインやレイアウト、データ入稿まで、CSSを活用した本作りのやり方を徹底解説した解説書です。 表紙に「未知の表現力!」とあるように、CSSでこんなこともできるのかと驚きの連続でした。 本書は技術書で評判が高いリブロワークスさんの最新刊。当ブログでもVS Codeの解説書やJavaScriptの解説書を紹介しましたが、今回はCSSによる組版、本作りの解説書です。 マークダウンで原稿を執筆し、それをCSSでレイアウトし、本に仕上げます。本はWeb上でも書籍にもでき、本書自体もCSSで作成されています。
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
最近、インスピレーションが刺激されるデザイン書に出会えていない、そんな人にお勧めするデザイン書を紹介します。 全ページに、魅力的で超高品質なデザインやレイアウトが溢れており、すべてのデザインに使用されているデザインのルールが詳しく解説されています。どれもプロのデザイナーが使用している実用的なデザインのルールです。 海外の美しいデザイン書はよくありますが、国内のは久しぶりです! デザインを見るだけでなく、すべてのデザインにはルールが記されており、長く使えるプロの技も学べます。パラパラとぺーじをめくる度にインスピレーションが刺激され、じっくり読んでも楽しめる一冊となっています。 本書は、先日発売されたばかり!
Kindle Unlimitedで3ヵ月無料キャンペーン(申込は2023/7/12まで)が開催されているので、Unlimited対象となるWeb制作・デザイン・イラスト関連のKindle本をまとめてみました。 こんなに読めれば、十分に元が取れると思います。元といっても0円ですが。Unlimitedは他にも文芸や小説、マンガ、雑誌なども数多く対象となっており、3ヵ月間だけ登録するのもありです。 ※Unlimited対象は、2023/7/5時点の情報です。 まずは、Kindle Unlimitedが3ヵ月無料になるキャンペーンから。 99円とか199円とかはありますが、0円は二度見三度見レベルです。 Kindle Unlimited 3ヵ月無料キャンペーン ※キャンペーンの申込は、7/12まで。 Unlimited対象のカテゴリ別は、下記から。 Unlimited対象: Kindle本全体 U
直感的なインターフェイスで、CSSのbox-shadowを使用した複雑で美しいシャドウを簡単に作成できるツールを紹介します。 シャドウはさまざまなパラメータで正確に調整でき、リアルタイムにシャドウの見た目とCSSのコードが生成されます。CSSの初心者でも経験豊富な人にとっても便利だと思います。 boxshadows.xyz boxshadows.xyzとは boxshadows.xyzの使い方 boxshadows.xyzとは boxshadows.xyzは直感的なインターフェイスで、レイヤー化された複雑なシャドウを正確に、そして簡単に作成できるオンラインツールです。シャドウのタイプ、シャドウのぼかしと広がり、オフセットの調整など、さまざまなパラメータを調整しながらリアルタイムにシャドウを確認しながら作成できます。
「新レトロ丸ゴシック」「築豊明朝」など、オールドスタイルの日本語フリーフォントをリリースされている文字魚さんから新作フォントがリリースされました! 「かもめ明朝」はかもめをイメージしたオールドスタイルの明朝体で、通常版(有料)とフリー版(無料)の2種類があります。 Photo by Unsplashのfrank mckenna 「新レトロ丸ゴシック」「築豊明朝」などは、下記からどうぞ。 2023年用、日本語のフリーフォント670種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 では、まずはフリー版のフォントのダウンロードから紹介します。 下記ページにアクセスし、フリー版(無料)をダウンロードするには「無料ダウンロード」をクリックするだけです。
WebサイトやスマホアプリのUIデザイン用にシンプルで、可読性を最大限に高めたアイコン素材を紹介します。ライン・デュオトーン・ソリッド・フラットの4つのスタイルに、計4,000種類のアイコンが揃っています。 アイコンはオープンソースなので、商用プロジェクトでも無料で利用できます。Figmaで配布されているので、すぐに使用できるのも嬉しいですね。 4,000 Free + Open Source Icons アイコン界のヘルベチカを目指して、可読性を最大限に高めるために14pxのグリッド上に構築されています。Streamlineの10年以上の経験を持つ8人のアイコンデザイナーによって作成されています。 アイコンの利用方法は簡単で、下記ページにアクセスし、「Figmaで開く」をクリックします。
ChatGPT(文章)、 Midjourney(画像)、CREEVO(音楽)、Make-A-Video(動画)、DreamFusion(3Dモデル)をはじめとする生成AIが続々とリリースされ、すでに使用したことがある人も多いと思います。 これら第一線の生成AIの実用的な使用例を通じて、わたし達の生活がどのように変化するか、仕事でどのように役立たせるのか、著作権などの問題点とその解決の流れについてよく分かる解説書を紹介します。 生成AIの動きは非常に激しく、最新の情報に触れるにはWebに頼るしかないのですが、本書は加筆できる最後のタイミングである5月頭のぎりぎりまで対応しています。また、日本語での情報が少ないものも著者自らが実際に試した結果がまとめられています。 生成AIの技術の進化、社会の対応、法整備などもこれからどんどん進められると思いますが、現時点での情報をしっかり知っておきたい人にお
デザインの引き出しを増やすためには、トレンドを押さえておくことは大切です。 デザインの基本となるタイポグラフィ、カラー、形などの要素が詰まった、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 2023 Logo Trend Report by BILL GARDNER 下記は各ポイントを意訳したものです。 ※元サイト様にライセンスを得て翻訳しています。 2023年、ロゴデザインのトレンドの傾向 花々を新しい解釈でデザイン「Wildflowers: ワイルドフラワー」 存在感のある流体の形状「Bloblend: ブロブレンド」 焦点の合った要素と合っていない要素をブレンド「Fades: フェード」 三次元の形を表現する「Foreshort: フォアショート」 上昇を表現する新しいデザイン「Thrust: スラスト」 自然界の神聖な数式から生まれた形「Spirals
Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます。 UI Skeleton Gallery UI Skeleton Galleryは、デザインのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材です。スケルトン素材とは実際のコンテンツは一切含まず、コンテンツが完全に読み込まれる前にページのワイヤーフレームを提供するUI要素です。 素材の利用にあたっては商用プロジェクトでも無料で、クレジットなども必要ありません。詳しくはTerms of useをご覧ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く