Gemini CLIやClaude Codeみたいなロゴを出力するoh-my-logoというツールを作りました
塗りつぶされたアスキーアート、もしかして流行る？ 今月プログラマーたちの間で最も話題になったトピックの一つがClaude Codeだと思います。 そして、昨晩はGemini CLIが登場しました。他にもOpenHands CLIなどCLI系ツールもすっかり戦国時代に突入した感があります。 私はこれらのAIコーディングエージェント系のツールを見ていて思いました。 起動時のロゴがみんなデッカイなと... 特に昨晩発表されたGemini CLIは明らかにClaude Codeを意識した、塗りつぶされたアスキーアートじゃないですか...もしかしてこのスタイル、絶対流行るのでは...？ そんな非常に邪な考えがきっかけでこんなツールを作りました。 このロゴは以下のコマンドで実行できます。 ツールとしての要件などをある程度固めた上で、コードはClaude Codeを用いてVibe Codingで作り切り
FigmaデザインをHTMLコードへ自動変換する方法 - GMOインターネットグループ グループ研究開発本部
1. はじめに こんにちは、次世代システム研究室のT.D.Qです。 デザインとコーディングの間にあるギャップを埋める新しいアプローチとして、FigmaでデザインされたウェブUIを自動的にHTML/CSSコードに変換する方法が注目されています。特に、オープンソースのFigma Context MCP（GLipsが公開）と、Visual Studio Code用AIエージェント拡張のRoo Codeを組み合わせることで、デザインからコーディングへのプロセスを大幅に効率化できます。 本記事では、FigmaでデザインされたウェブUIを、GLipsが提供する「Figma Context MCP」とVisual Studio Code拡張「Roo Code」を用いて、効率的かつ正確にHTML/CSSコードに変換・取り込む方法を解説します。 2. MCPとRoo Codeの概要 2-1. Roo Cod
なぜ僕はデザイナーの作ったデザインを「見づらい」と感じてしまうのか
「PLAID Design Advent Calendar 2024」の1日目の記事です。 僕はこれまでフロントエンドの開発者として働いてきた傍ら、自身をウェブデザイナーとしても自認して、自分なりのやり方でデザインに携わってきました。この記事は、特定の組織での経験をテーマにしたものではなく、そうした自分の成り立ちを省みるためのものです。 また記事は、書籍『ビジュアル・シンカーの脳』の内容をもとにした自分の感想や思索についてまとめたものです。特定の属性の人物やその主義主張に優劣をつける意図はありません。 デザイナーが作ったデザインを見たとき、「見づらい」や「わかりにくい」といった印象を抱くことが僕にはそれなりにある。おおまかに言って、そう感じるのには大きく2通りの原因がある。 一つは、視覚的にボヤッとして見づらいとき。主要な文字のサイズが小さすぎたり色が薄すぎたり、周辺空間が騒々しくて目的の
デザインシステムのダークモード対応 - enechain Tech Blog
こんにちは。enechainで働いている takurinton です。 これまでのenechainのデザインシステムではdark modeの提供はしておらず、プロダクト側で必要に応じて状態とデザイントークンを保持した上で切り替えてもらうという方式をとっていました。 しかし、事業拡大やプロダクト側からの要望によりdark modeのデザイントークンをデザインシステム側で管理し、chakra-uiのColorModeProviderを用いて切り替える方法を提供することにしました。 今回は、その移行の過程と方法について書きます。 デザイントークンについて 移行の手法 将来的に light/dark 以外の種類のトークンも定義する可能性がある 古いトークンはstylesで、新しいトークンはvariablesで管理している light モードしか使わないプロダクトは特別な手順なく移行可能にしたい デ
翻訳記事：デザインシステムのジレンマ：見た目は似ているが、機能が違う｜Nobuya Sato
読むときについでに訳してしまおう活動。今回は、UX Collectiveに投稿されたこの記事。デザインシステムを作るときのジレンマです。 コンポーネントは、見た目が似ていても機能が違う場合があり、デザイナーや開発者はあえて使い分けて作っている場合があります。しかし、デザインシステムの健全性を機能させるには、しっかりとそれらを明文化する努力（投資とも言う）が必要で、プロダクトがスケールすればするほど管理がおざなりになり、亜種なのかそうではなく意図があるのか曖昧になりシステムが破断する危険性があります。アセットを作るだけなく、文書化と布教（教育）活動を怠らないようにしましょう。 ということで以下翻訳（著者許諾済み） Deanさんは今日本語勉強中だそうです😁 デザインシステムのジレンマ：見た目は似ているが、機能が違うなぜ異なる要素がユーザー体験にとって重要なのか By Dean Harriso
「Bluesky」「Python」「Vim」「404」「ぬるぽ」などIT関連のかわいい高品質ロゴを作りまくる人物現る、BlueskyやReact公式が早速ロゴを実装するなど爆発的な盛り上がり
IT関連の高品質な自作ロゴを大量に含むGitHubリポジトリが、プログラマーやゆっくり実況者として活動するさわらつき氏によって公開されました。当該リポジトリは公開直後から大きな注目を集めており、すでにBlueskyでは「Kawaiiモード」の実装が進んでいるほか、Reactの公式サイトにもさわらつき氏のロゴを表示する隠しモードが実装されています。 GitHub - SAWARATSUKI/ServiceLogos: ロゴを可愛く作ろう 節度を持って利用してくださいね🫠 https://github.com/SAWARATSUKI/ServiceLogos さわらつき氏が作成したロゴの例は以下の通り。これはPythonのロゴです。 C言語 Vim Visual Studio Code Discord GitHub 404エラー 「ぬるぽ」のロゴもあります。 これはBlueskyのロゴ。 2
「ステップ・フロー」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPや提案資料などでよく使用されるデザインパーツ「ステップ・フロー」のUIを集めてみました。 「パーツ別デザインまとめ」シリーズも第３弾となりました。 今後も地道にUIパーツの収集・調査を続けていく予定です！ （前回までの記事も是非ご覧ください ↓） はじめに「ご利用の流れ」や「お申込の流れ」など、時系列に並んだ項目をわかりやすく可視化する手段として用いられるステップ・フローのセクションは、サービスやプロダクトを訴求するLPや提案資料にかかせない存在です。 今回はそのステップの整列パターン別に、PC・SPでどのようにレスポンシブされるのか？という調査も含めデザインを収集しました。 💡横に整列宅トラカードの中に手順の概要やイラストをまとめている形式です 中身の情報量によりますが、4ステップ程度だと丁度よいサ
ChatGPTを活用したデザイン制作
ChatGPTを活用したデザイン制作ChatGPT、使っていますか？私は有料プランでほぼ毎日利用しています。Google検索が最近アレなんで、ちょっとした調べ物にも、お仕事の簡単な作業にも使っていますよ。今回はデザインに焦点をあてて、日頃のデザイン作業に使っている方法をいくつか紹介します。 ChatGPT デザインを 0 から 10 までやってもらうのはまだ難しい結論から言うと、まったくなんの情報もないところから、デザインの完成まで頼むのは、まだ難しいかなと思います。ダミーの Web サイトの画面を作ってもらうとかならまぁまぁなクオリティで作ってはくれますが、それをクライアントに提案できるレベルかと聞かれると、うーん…と唸ってしまいます。 なので、最初から最後まで、素晴らしいクオリティで作ってもらうことは 1 年後くらいにまた試すとして、2024 年現在ではデザイナーのサポート役というのが
「CTAボタン」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPにおいてCV（コンバージョン）に大きく影響を与えるUIパーツ「CTAボタン」周りのデザインをパターン別に集めてみました。 はじめに前回の記事で予告をした通り、今後、LPやWebサイトを構成する様々な要素を１つずつ特化して調査をしていきたいと思っています。 今回はその「パーツ別デザインまとめ」シリーズ２本目です。 ↑ こちらの記事、たくさんの方に読んでいただけており嬉しいです！ パターン別 CTAボタン一覧サイト閲覧者に特定の行動を促すよう誘導する（Call to Action）ためには、CTAボタンに視線を集める必要があります。 そこで今回は「目に留まりやすいCTAボタンにはどんな特徴があるのか？」という観点で、見つけた特徴別にCTAボタン周りのデザインを一覧化しました。 💡差別化された背景色CTAボ
おもちゃ箱のようなアプリBaaaaのUI/UXが凄すぎた件｜Yusui Hoshino
【はじめに】この記事はBaaaaと何の関係もないただの学生（25卒）が執筆しています。 【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。 日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。 【感動した5ポイント】1.UIのサイズが激しく変化する下部にあるフッターナビゲーションの大きくサイズが変化するボタンを見て欲しい。選択されている場所を色、サイズ、テキストで強調できており、分かりやすい。また、指からはみ出すアニメーションはダイナミックでワクワクする。 フッターナビゲーションそして、一体感がすごい。フッターナビゲーションを左右にスワイプすることによって、指、ボタン、中央画面が全て同じ方向に動く。まるで指で引っ
東急東横線横浜駅のトイレの設計は悪手？「こういう分け方と色使いをすると人間って先入観で左が男子トイレだと思い込んでしまう」
Ryo Nakagome @moraqualitas @saru787 仮に日本人でも、こういう場合先入観で間違えることってあるんですよね。 店員がいるレジは受付可能である。みたいな。 そういうところを考慮しない設計者がいるんだろうなぁと思います。 2024-02-16 16:52:12 Ryo Nakagome @moraqualitas なんかいろんなこと言われてるので何が言いたかったかご説明すると ピクト見りゃわかるだろ、文字見りゃわかるだろということではなく 一つの区画の入り口でこのような分け方と色使いをすると、人間って先入観で左が男子トイレだと思い込んでしまうんですね。 実際間違えて引き返す人間結構いたので。 2024-02-17 08:38:09 Ryo Nakagome @moraqualitas 改札側から入ると男子トイレが脇の方にはあるのは当然見えると思いますが、 ホーム
非デザイナーにも知っていて欲しい「色」と「特性」 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS
知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 なお、こちらの記事の内容は順次YouTube
エンジニアが画面設計（Figma）を担当してみた振り返り
Thinkings株式会社 では sonarATS の開発にあたり、基本的にはデザイナーがFigmaを作成し、それに基づいてエンジニアが開発するというフローを取っています。 そんな中、先日エンジニアサイドで画面設計を行ってみるという実験的な取り組みをしました。 本記事では画面設計を行うことになった経緯と具体的な取り組み内容を振り返り、エンジニアが画面設計をすることのメリットと課題感について考えたことをまとめたいと思います。 エンジニアサイドで画面設計をするきっかけとなった要因 エンジニアサイドで画面設計をすることとなった理由として、大きく分けて以下３つの要因がありました。 デザイナータスク削減の目標 あるマスタ画面を開発したときの課題感 上述の通り、『簡単なマスタ画面の開発』のような共通的な画面設計になる機能については、できるだけデザイナーが介入せずエンジニア主導で開発している → 実際に
非デザイナーは「生成AI」でどこまでUIデザインを作れるのか？ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Technology部の永松です。 私が在籍しているTechnology部ではさまざまなシステム・アプリ開発を手がけています。 しかし、部内にはデザインやUIUXの知見がまだ足りていないのが実情です。 実際にデザインをするときは、他部署のデザイナーに力を借りることがほとんど。 ……近年こんなに生成AIが進化しているのであれば、これらを使って自分でデザインを作成することはできないものでしょうか？ WF（ワイヤーフレーム）の作成だけでもいいんです。これらが誰でもできるようになれば、もっとお引き受けできる案件も増えるはず。 というわけで、今回はクライアント提案に耐えうるデザインを生成AIでどう作るのか、試行錯誤した結果を紹介します。以下のツールについて感想をまとめていますので、ぜひ参考にしてください。 今回試したサービス ChatGPT Midjourney(+Vary Region) Fram
Figma でデザイン、そのままデモ、そのまま実装！ - Qiita
みなさん、デザインツールの Figma を使っていますか？ 私はまだ「使っている」と言えるほど使えていません というわけで勉強会を開催して勉強します Figma とは 公式の紹介文は以下のとおりです デザインの追求からプロトタイプ作成、制作物のコーディングまで、Figmaはチームがコラボレーションして製品開発するためのプラットフォームです 本記事のタイトルと同じように、「デザインからデモ・実装までチームで製品開発できる」旨が書かれています まさにその通りで、ブラウザ上で UI をデザインし、そのまま動かしてみることができ、最終的にはコードの生成までできてしまうツールです Figma の人気 2022年に世界中のデザイン関係者を対象としたアンケートでも Figma は圧倒的な人気です いずれのランキングでも2位の10倍以上の得票数になっています メインで使っている UI デザインツール第1位
スーパーマリオの左右論（1） インターフェイス由来説
なぜ『スーパーマリオ』は左から右へ進むのか。この大問題は長い間、ゲーマーたちを悩ませてきた。 我がサイトでも新しい説が唱えられる度に話題にしてきたが、そろそろ総括してみようと思うのだ。そこで、私オロチの見解も交えつつ、ひとつひとつぶった切っていこうと思う。名づけて「スーパーマリオの左右論」。第1回目は「インターフェイス由来説」についてまとめてみたよ！ ●ゲームが先か？レバーが先か？ 主人公が左→右にすすむゲームは『スーパーマリオブラザーズ』（1985※／任天堂）だけではない。ジャンルを問わず同時期の多くのゲームは基本的に進行方向が→だったようだ。 その理由について当時のアーケード筐体が左側に操作レバーがあったからというインターフェイス由来説が古くから唱えられてきた。 ※『スーパーマリオブラザーズ』はファミコン版が1985年、アーケード版は1986年に登場した 『ソンソン』（カプコン／198
QRコードをデザインする新しい方法で、かなり自由にデザインしてQRコードを作成できるオンラインツール -QR code designer
QRコードをかなり自由にデザインして作成できるオンラインツールを紹介します。他の今までのツールはエラー訂正レベルを使用していましたが、本ツールは違います。 先日リリースされたばかりの最新ツールです！ カラーを変更したり、文字や図形を加えたり、画像やパターンなどを加えてデザインすることもできます。日本語を使用してデザインすることもできるので、非常に便利です。 QR code designer QR code designer -GitHub QR code designerは、QRコードの中央部分にカスタマイズしたデザインを加えてQRコードを作成できるWebアプリです。文字・図形・背景だけでなく、画像・パターンなどを加えて自由にQRコードをデザインできます。 MITライセンスで、商用プロジェクトでも無料で利用できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - SAWARATSUKI/ServiceLogos: このリポジトリは移動されました
このデザインにOK出したデザイナーがQRコードを一生読み込めない呪いにかかりますように→「これは孔明の罠」
