本当は教えたくないWebデザイン参考ギャラリーサイト37選
ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS
クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイルをさまざまな要素に適用できるCSSを紹介します。 clay.css clay.css -GitHub 「クレイモーフィズム」とは clay.cssの特徴 clay.cssのデモ clay.cssの使い方 「クレイモーフィズム」とは 「クレイモーフィズム（Claymorphism）」は、UIデザインのフレッシュで新しいコンセプトです。呼び名はMichał Malewicz氏によって作られたもので、デザイナーはUIデザインへのこのアプローチの可能性を探求することに興奮しています。 メタバースやN
4 Design Patterns In Web Development
Have you ever been on a team and you need to start a project from scratch? That's usually the case in many start-ups and other small companies. There are so many different programming languages, architectures, and other concerns that it can be difficult to figure out where to start. That's where design patterns come in. A design pattern is like a template for your project. It uses certain conventi
Webデザイン100トレース | Hypertext Candy
こんにちわ！最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデザインを学ぼうと思ったのか デザイントレースについて 100トレースして学んだこと なぜWebデザインを学ぼうと思ったのか ざっくりですが、実務を行いながら以下のように思うことがありました。 細部のデザイン指示がなく、開発の手が止まってしまう どう実装するか目線の発想・提案しか浮かばない 綺麗なコードだけではなく、視野を広げてより良いものを作りたい などなど... デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効
Google Fonts + 日本語を使用して、Webサイトやブログがどのように表示されるか試すことができるツール -Fonty | コリス
2018年9月にGoogle Fontsは日本語が正式にサポートされ、既に利用されている人、検討されている人も多いと思います。当ブログでも早期アクセスから使用しています。 日本語の正式サポートに伴い、Google Fontsを使用したさまざまなツールも日本語が利用できるようになりました。 自分のWebサイトやブログに、Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールを紹介します。 参考: Google Fonts + 日本語 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語の使い方 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールはこちら、Fontyです。 登録
20+ CSS Page Transitions
This collection, updated in July 2024, features over 20 hand-picked code examples, meticulously sourced from trusted platforms like CodePen and GitHub. From classic fade-ins to creative 3D flips, you'll find a wide variety of transitions to seamlessly connect your web pages and keep your visitors engaged. Dive into unique effects like morphing shapes and particle animations to add an extra layer o
ホームページの印象を左右するファーストビューの改善ポイント
せっかく検索やリンクを経由してホームページに訪れてきてくれたのに、最初の1ページ目を見てすぐにどこかへ行ってしまう。 このように、ホームページに集客ができてもなかなかコンバージョンにつながらず悩んでいるWeb担当者も多いのではないでしょうか。 この場合ユーザーは、「このホームページには自分が求めている情報はない」と判断している可能性があります。このホームページには自分にとって有益な情報が載っていると思ってもらえるホームページ作りを目指すべきでしょう。 今回は、好印象を与えるためのファーストビュー改善ポイントを解説します。 ファーストビューとは 「ファーストビュー」とは、ホームページにアクセスしたときにスクロールせずに最初に目に入る部分になります。 Webサイトのトップページをイメージするかもしれませんが、検索エンジンからアクセスしているのか、ソーシャルや広告からアクセスしているのかなど、訪
Webデザインのアイデア満載！創造力をアップさせる最新サイト50選
ウェブサイト制作におけるアイデア出しに困ったときに確認したい、最新ウェブデザインをまとめてご紹介します。 レイアウトや配色、書体などの見た目はもちろん、サイトの雰囲気や印象などデザイントレンドの動向を知ることもできます。さまざまな業種の中から、パーツ別に参考にしたくなるそんなサイトを中心にまとめています。これからサイトを作成しようというひとや、打ち合わせでのきっかけ作りなどに活用してみてはいかがでしょう。 2018年に流行しそうな、注目Webデザイントレンド20個を大予想 Webデザインのアイデア満載！創造力をアップさせる最新サイトまとめ The School of Sustainability 物語を支えたるようにストーリーが進んでいく、まさに体験型のウェブサイト。地図上に表示されたポイントをクリックすると、それぞれのストーリーが動画や音声などを交えて開始されます。 The Greate
SVG can do THAT?!
//variable declaration for the global repeated animations const gear = $("#gear1, #gear2, #gear3"); ... //animation that's repeated for all of the sections function revolve() { let tl = new TimelineMax(); tl.add("begin"); tl.to(gear, 4, { transformOrigin: "50% 50%", rotation: 360, ease: Linear.easeNone }, "begin"); ... return tl; } const repeat = new TimelineMax({repeat:-1}); repeat.add(revolve())
なぜ、ユーザー体験においてWebフォントが重要なのか？
Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 Bill Gates氏は「コンテンツは王様だ」と言いました。オンラインのユーザー体験において、これは紛れもない真実です。しかし、素晴らしいユーザー体験を提供することは、単に素晴らしいコンテンツを発信することだけではありません。便利で使いやすいフォーマットでコンテンツを提供することも意味するのです。これによって、読みにくいことが原因でユーザーがサイトから離脱することを防ぎ、閲覧やインタラクションを促進することができます。 そのため、Webサイトにおけるタイポグラフィは、デザイナーの仕事の中でも非常に重要です。適切なフォントを選択したり、そのフォントを正確に表示したりする作業は、ほかのデザインの作業以上にユーザー体験を大きく左右します。 『タイポグラフィの完璧な
シンプルで美しい！Google発のUIフレームワーク「Material Components for the Web�」とは？
シンプルで美しい！Google発のUIフレームワーク「Material Components for the Web�」とは？更新日: 2018年05月28日UI ここ最近、GoogleのMaterial ComponentsのGitHubページが頻繁に更新されています。 Material Componentsとは、Googleが推奨しているデザインフレームワーク*「マテリアルデザイン」(Material Design)*をさまざまなプラットフォームで簡単に取り入れることができるフレームワークです。 ゼロからマテリアルデザインのドキュメントに沿ってパーツを作らなくとも、Material Componentを組み込むだけで、簡単にマテリアルデザインのUIを取り入れたWebアプリケーションを作成することができます。 もともとはMaterial Design Light(MDL)としてリリースさ
クオリティーが凄い！最近話題になったウェブデザイン40個まとめ 2017年5月度
さまざまな想いやメッセージを伝えるウェブサイトは、クリエイティブなアイデアの宝庫です。まるで思いつかないようなユニークなアイデアが使われていたり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイトなど、参考したいポイントがたくさんあります。 この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。 ブックマークしておきたい海外/国内Webデザインギャラリーまとめ30選【2017年改訂版】 これでもう悩まない！2017年のデザイントレンド完全ガイド クオリティーが凄い！最近話題になったウェブデザインまとめ Freelance TV 世界各地で活躍するフリーランスたちに、普段のライフスタイルや仕事術などをインタビューしながら紹介する新しいメディアの取り組み。コンテンツも定期的にアップされており、今
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Expanding card page transition effect
Material Design
https://qiita.com/RinoTsuka/items/1a86fbb719e0a76a3784
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT