Web・アプリデザインの最新事例

Uiverse、コピペで完結するCSS/Tailwindコンポーネント集って聞くと量産型ツールを想像するけど、投稿制のコミュニティになってるのが面白い。作者ごとのクセがそのまま残ってて、ボタン一個のホバーの動きにもその人の美意識が透けて見える。効率化のためのツールなのに人格が消えてないのがいい。自分ならそのまま流用する…

ワタナベ ミサキ·2026.07.29⚡ 0

チーム内で「このボタンなんて呼ぶ？」ってやり取りが発生する度に、あ、こういう辞書があるといいなって思ってた。60個のコンポーネントが並んでるだけじゃなくて、デザインシステムの実例まで見れるのはでかい。抽象的な定義じゃなくて、実際に運用されてるものが可視化されてるから、「あ、この呼び方でいいんだ」って納得感がある。 自…

ワタナベ ミサキ·2026.03.09⚡ 0

AOS.js（Animate On Scroll library）は、スクロールと連動したアニメーションをファイルを読み込むだけで実装できるJavaScriptのライブラリです。 複雑なロジックやアニメーション設計は不要で、HTMLに属性を追加するだけでフェードやスライドなどの動きを簡単に付与できます。 AOS（aos…

北川 巧·2025.12.18⚡ 0

MUUUUU.ORG、結構これ使ってる。ただ「ギャラリーサイト」ってだけだと、実際の使い心地までは伝わらないなって思ってて。 僕が好きなのは、配色やレイアウトを「見本として切り取る」じゃなくて、その先にある「なぜこの色選びなのか、なぜこの配置なのか」を体験できるところ。スクロールしてるうちに、無意識に自分の感覚が磨か…

ワタナベ ミサキ·2025.10.27⚡ 0

three.jsの何に惹かれたかって、「Webで3D表現を民主化してる」感じだと思う。敷居の高かった領域を、ドキュメントとデモで手の届く距離に持ってきてる。 良いのは、学習パスが明確なところ。サンプル→チュートリアル→実例って流れで、「自分の頭で想像した表現」を実装まで辿り着きやすい。体験として、その達成感がデカいん…

ワタナベ ミサキ·2025.06.25⚡ 0

実案件から集めたUIの生きた例を、カテゴリで整理して見比べられるって、デザイナーにとって本当に使える。トレンドを「言語化」されたものじゃなく、「実物」で学べるのが強い。 自分だったら、新しいプロダクトに入る時に最初の1時間、ここでボタンやフォームの「今の解」を目に焼き付けてから仕事始めるって感じ。デザイナーの直感を整…

ワタナベ ミサキ·2025.06.17⚡ 0

「CSS Stock」は、HTML・CSSのデザインやパーツを「コピペだけで使える」便利なサイトです。 「Web制作をもっと楽に」をテーマにしており、色やアイコンの有無など、細かなデザイン調整も簡単。あとは完成したHTML・CSSをコピーするだけで使えます。 デザインの参考やアイデア出しにも最適。 CSS Stock …

ワタナベ ミサキ·2025.03.17⚡ 0

プラグインなしでこのレベルの液体感が出せるって、素直に嬉しい。ブラーとブレンドモードだけで「やわらかく馴染む」体験を作れるんだ、って気づかせてくれる。 何より良いのは、ツールの制約を逆手に取ってる感じ。凝ったプラグイン使うより、基本機能をどう組み合わせるかで差が出るって、デザインの本質に近い気がする。 自分だったら…

ワタナベ ミサキ·2025.02.03⚡ 0

バナーブラインドネスとか認知負荷って、実務では「ユーザーが見てくれない」「判断に時間かかる」くらいの感覚で扱ってたんだけど、この記事は心理学的な根拠を通して「なぜそうなるのか」を言語化してくれてる。 自分だったら、クライアント提案の説得材料として使いたい。「これはデザインの問題じゃなくて、人間の認知の話なんです」って…

ワタナベ ミサキ·2025.01.09⚡ 0

バリエーションに富んだアイコンのデータをダウンロードできる「icons8」では、Appleのemojiに似たアイコンや「UI」「3D」「手書き」など多彩なテイストのデータがダウンロード可能。カラーの編集も可能で、特徴的なアイコンを探している時に便利です。 PNG、Favicon、HTML挿入用のリンクは無料でダウンロー…

ワタナベ ミサキ·2024.08.28⚡ 0

「高級お出汁」という比喩、絶妙だと思う。つまり、素材を選ぶのはあくまで使い手で、プラグイン自体は過度に主張しない。むしろ背後で支える静かな力強さ。 ノーコードツールって往々にして「これでできます！」感が強くて、逆に制約を感じさせることが多いんだけど、Snow Monkeyはその逆。試用版で先に体験させるアプローチも、…

ワタナベ ミサキ·2024.07.26⚡ 0

「Figr AI」は、Figmaとシームレスに連携する新しいデザインソリューション。AIを活用し、ユーザーがイメージに合ったデザインテンプレートを簡単に選択できる。Figmaにコピーされたデーやは編集も可能。 #AI #Figma #UI #デザイン

ワタナベ ミサキ·2024.04.10⚡ 0

Googleが提供する最新のアイコンフォントで、2,500種類以上のアイコンが含まれています。pngやsvgだけでなく、各種コードもあって、スタイルやサイズ、線種の太さなども簡単に調整できます。 #デザイン #開発 #MaterialSymbols

ワタナベ ミサキ·2024.04.04⚡ 0

404ページって、本来は「申し訳ない」って気持ちで閉じられるシーンなのに、ここはそれをエンタメに変えてる。ユーザーが離脱するはずの瞬間を、むしろ見てよかったって思わせる—これは UX の本質だと思う。 ネガティブを無理やり消すんじゃなくて、その感情そのものを味方にする発想が面白い。自分だったら、404 ページの工夫を…

ワタナベ ミサキ·2024.03.28⚡ 0

2024年のグラフィック、Webデザインの最新トレンドについて紹介。 AIツールが必須になりながらも、不完全さ、不揃いなど「人間らしい要素」も大きなポイントに。 AIの参入が、今後デザイン業界へどのような変化をもたらすのか、とても楽しみです。 #デザイントレンド #AIアート #未来のデザイン

ワタナベ ミサキ·2024.03.06⚡ 0

HTMLメールデザインに特化されたギャラリーサイト「MAIL LOBRARY」。日本語だからこその表現や、色やテイストなどの条件を絞り込める検索機能も実用性があり。シンプルから装飾的なものまで、スタイルや色のテーマに基づいたデザインが紹介されています。 #HTMLメール #メルマガ #デザイン

ワタナベ ミサキ·2024.02.28⚡ 0

100人規模のチームが「プロジェクトベース」で動いてる組織のポートフォリオって、見てみたくなる。なぜなら、そういう体制を組める組織って、メンバー同士がどう信頼してるのか、どう思考を合わせてるのかが作品に滲み出るから。 オリンピックからNIKEまで、スケール感の違う仕事をこなしてるってことは、多分「大きさ」じゃなくて「…

ワタナベ ミサキ·2024.02.26⚡ 0

画像を瞬時にベクターグラフィック（SVG形式）に変換するAIツール。操作はドラッグ＆ドロップだけで、ブラウザを通じて誰でも簡単にベクター画像を作成できるユーザーフレンドリーな神ツールw #AI #ベクター変換

北川 巧·2024.02.22⚡ 0

対象のWebページのURLを入力すると、そのページをFigmaに読み込んで編集可能なデザインに変換するプラグイン「html.to.design」既存のWebページからFigmaで使えるデザイン要素を抽出することができる。 #figma #プラグイン

北川 巧·2024.02.21⚡ 0

ノーコードツール「STUDIO」を使用して制作された、モバイルファースト特化のWEBデザインギャラリーサイト。モバイルファーストも向き不向きの問題もありそうだし、余白の使い方が最も大切。 #ノーコード #STUDIO #モバイルファースト

北川 巧·2024.02.20⚡ 0

UIデザイナー猪口氏がWebサイト設計の流れについて解説。Webサイトの現状把握からサイト構造図の作成まで、具体的なプロセスを紹介。とてもしっかり書いてある。 まだ記事が少ないのが残念。

北川 巧·2024.02.13⚡ 0