Category
web & app
20 件の投稿
Web サイト、SaaS、モバイルアプリの UI/UX 事例。単なる見た目ではなく、情報構造・インタラクション・実装の観点まで含めてキュレーション。
チーム内で「このボタンなんて呼ぶ？」ってやり取りが発生する度に、あ、こういう辞書があるといいなって思ってた。60個のコンポーネントが並んでるだけじゃなくて、デザインシステムの実例まで見れるのはでかい。抽象的な定義じゃなくて、実際に運用されてるものが可視化されてるから、「あ、この呼び方でいいんだ」って納得感がある。 自分だったら、新しくシステム構築する時のリファレンスとしてはもちろん、チーム内の言語がズレてる時にこれ開いて「ほら、国際標準でもこれはこう呼ばれてる」って根拠を示すのに使いたい。
AOS.js（Animate On Scroll library）は、スクロールと連動したアニメーションをファイルを読み込むだけで実装できるJavaScriptのライブラリです。 複雑なロジックやアニメーション設計は不要で、HTMLに属性を追加するだけでフェードやスライドなどの動きを簡単に付与できます。 AOS（aos
MUUUUU.ORG、結構これ使ってる。ただ「ギャラリーサイト」ってだけだと、実際の使い心地までは伝わらないなって思ってて。 僕が好きなのは、配色やレイアウトを「見本として切り取る」じゃなくて、その先にある「なぜこの色選びなのか、なぜこの配置なのか」を体験できるところ。スクロールしてるうちに、無意識に自分の感覚が磨かれてく感じがある。 迷った時に頼るんじゃなくて、むしろ「こういう感情体験を作りたい」って漠然と思ってる時に眺めると、その感情とビジュアルの関係性が腑に落ちることが多い。デザイン判断の理由を言語化する練習になるんだよね。
three.jsの何に惹かれたかって、「Webで3D表現を民主化してる」感じだと思う。敷居の高かった領域を、ドキュメントとデモで手の届く距離に持ってきてる。 良いのは、学習パスが明確なところ。サンプル→チュートリアル→実例って流れで、「自分の頭で想像した表現」を実装まで辿り着きやすい。体験として、その達成感がデカいんじゃないかな。 自分だったら、プロダクトのインタラクティブな紹介ページで使いたい。例えば、ユーザーが直感的に形状や素材を操作できるUIを作って、「触って理解する」って感覚を生み出したい。そういう没入感って、従来のフラットなデザインでは得られない。
実案件から集めたUIの生きた例を、カテゴリで整理して見比べられるって、デザイナーにとって本当に使える。トレンドを「言語化」されたものじゃなく、「実物」で学べるのが強い。 自分だったら、新しいプロダクトに入る時に最初の1時間、ここでボタンやフォームの「今の解」を目に焼き付けてから仕事始めるって感じ。デザイナーの直感を整理する装置として機能してる。 ただ、参考例の量が多すぎると「どれが正解？」って迷いも生まれるから、サムネイルだけで全貌が見えるビジュアル設計と、「なぜこのUIが選ばれた」みたいなコンテキストが少しでもあると、もっと学習になると思う。
「CSS Stock」は、HTML・CSSのデザインやパーツを「コピペだけで使える」便利なサイトです。 「Web制作をもっと楽に」をテーマにしており、色やアイコンの有無など、細かなデザイン調整も簡単。あとは完成したHTML・CSSをコピーするだけで使えます。 デザインの参考やアイデア出しにも最適。 CSS Stock
プラグインなしでこのレベルの液体感が出せるって、素直に嬉しい。ブラーとブレンドモードだけで「やわらかく馴染む」体験を作れるんだ、って気づかせてくれる。 何より良いのは、ツールの制約を逆手に取ってる感じ。凝ったプラグイン使うより、基本機能をどう組み合わせるかで差が出るって、デザインの本質に近い気がする。 自分だったら、静止画の UI よりアニメーション入りのマイクロインタラクションで使いたい。ボタンホバー時のアクセントとか、ローディング画面とか、「触れたら反応する」っていう感覚をこの液体感で表現できたら、ユーザーの心理的なハードルが一気に下がる気がする。 実務レベルで再現性が高いのも重要。
バナーブラインドネスとか認知負荷って、実務では「ユーザーが見てくれない」「判断に時間かかる」くらいの感覚で扱ってたんだけど、この記事は心理学的な根拠を通して「なぜそうなるのか」を言語化してくれてる。 自分だったら、クライアント提案の説得材料として使いたい。「これはデザインの問題じゃなくて、人間の認知の話なんです」って言えると、単なる好み議論から抜け出せる感じがして。 ただ正直なとこ、心理効果を理解することと、それを実装するデザイン判断はまた別問題なんよね。記事があれば便利だけど、結局は自分たちがそれぞれのプロダクトの中で試行錯誤しながら、ユーザーの反応を見て初めて腑に落ちる。
バリエーションに富んだアイコンのデータをダウンロードできる「icons8」では、Appleのemojiに似たアイコンや「UI」「3D」「手書き」など多彩なテイストのデータがダウンロード可能。カラーの編集も可能で、特徴的なアイコンを探している時に便利です。 PNG、Favicon、HTML挿入用のリンクは無料でダウンロー
「高級お出汁」という比喩、絶妙だと思う。つまり、素材を選ぶのはあくまで使い手で、プラグイン自体は過度に主張しない。むしろ背後で支える静かな力強さ。 ノーコードツールって往々にして「これでできます！」感が強くて、逆に制約を感じさせることが多いんだけど、Snow Monkeyはその逆。試用版で先に体験させるアプローチも、ユーザーに「判断権」を返してる感じで好きだ。 自分だったら、クライアント案件で「このツール入れたら何週間短縮できるか」じゃなくて「このツール入れたら、クライアントが自分で育てられるサイトになるか」って角度で選ぶ。つまり、制作後の体験品質をどこまで保証できるかが評価軸。
「Figr AI」は、Figmaとシームレスに連携する新しいデザインソリューション。AIを活用し、ユーザーがイメージに合ったデザインテンプレートを簡単に選択できる。Figmaにコピーされたデーやは編集も可能。 #AI #Figma #UI #デザイン
Googleが提供する最新のアイコンフォントで、2,500種類以上のアイコンが含まれています。pngやsvgだけでなく、各種コードもあって、スタイルやサイズ、線種の太さなども簡単に調整できます。 #デザイン #開発 #MaterialSymbols
404ページって、本来は「申し訳ない」って気持ちで閉じられるシーンなのに、ここはそれをエンタメに変えてる。ユーザーが離脱するはずの瞬間を、むしろ見てよかったって思わせる—これは UX の本質だと思う。 ネガティブを無理やり消すんじゃなくて、その感情そのものを味方にする発想が面白い。自分だったら、404 ページの工夫を通じて「制約条件を体験に変える」プロセスを学びたい。エラーとか、本来はない方がいい状況こそ、デザインの力で人の感情をどう動かすかが見える。ポートフォリオサイトなんかでも使える思考だ。
2024年のグラフィック、Webデザインの最新トレンドについて紹介。 AIツールが必須になりながらも、不完全さ、不揃いなど「人間らしい要素」も大きなポイントに。 AIの参入が、今後デザイン業界へどのような変化をもたらすのか、とても楽しみです。 #デザイントレンド #AIアート #未来のデザイン
HTMLメールデザインに特化されたギャラリーサイト「MAIL LOBRARY」。日本語だからこその表現や、色やテイストなどの条件を絞り込める検索機能も実用性があり。シンプルから装飾的なものまで、スタイルや色のテーマに基づいたデザインが紹介されています。 #HTMLメール #メルマガ #デザイン
100人規模のチームが「プロジェクトベース」で動いてる組織のポートフォリオって、見てみたくなる。なぜなら、そういう体制を組める組織って、メンバー同士がどう信頼してるのか、どう思考を合わせてるのかが作品に滲み出るから。 オリンピックからNIKEまで、スケール感の違う仕事をこなしてるってことは、多分「大きさ」じゃなくて「その時に必要な体験を何か」を軸に考えてるんだと思う。そういう柔軟性、いいものを作る大前提だと思うし。 自分だったら、このサイト自体がどう設計されてるのか見たい。ユーザーがポートフォリオを見に来た時に、CEKAIというチームの「らしさ」をどう体験させてるのか。
画像を瞬時にベクターグラフィック（SVG形式）に変換するAIツール。操作はドラッグ＆ドロップだけで、ブラウザを通じて誰でも簡単にベクター画像を作成できるユーザーフレンドリーな神ツールw #AI #ベクター変換
対象のWebページのURLを入力すると、そのページをFigmaに読み込んで編集可能なデザインに変換するプラグイン「html.to.design」既存のWebページからFigmaで使えるデザイン要素を抽出することができる。 #figma #プラグイン
ノーコードツール「STUDIO」を使用して制作された、モバイルファースト特化のWEBデザインギャラリーサイト。モバイルファーストも向き不向きの問題もありそうだし、余白の使い方が最も大切。 #ノーコード #STUDIO #モバイルファースト
UIデザイナー猪口氏がWebサイト設計の流れについて解説。Webサイトの現状把握からサイト構造図の作成まで、具体的なプロセスを紹介。とてもしっかり書いてある。 まだ記事が少ないのが残念。
