非デザイナーでもできる。Google Stitchがだいたい理解できるハンズオンマニュアル｜すぅ | AI駆動PM
Google Stitch、話題になってますよね。 ただ、デザイナーじゃない自分からすると 「すごそうだけど、結局なにができるの？」 がよくわからなかった。触ってみたいけど、何から手をつければいいかもわからない。 同じように感じている人、けっこういるんじゃないかと思います。 なので、非デザイナーの私が実際に触りながら「こういうやれば、だいたいわかる」というハンズオンマニュアルを作りました。 あくまで"だいたい"です！！ この記事の通りに手を動かしてもらえれば、Google Stitch がどんなものか、なんとなーく掴めると思います。よければ使ってください。 そもそも Google Stitch って何が話題なの？Google Stitch のすごいところは、簡単にいうと3つだと私は思っています。 AIネイティブなデザインキャンバス: テキストや音声で指示するだけで、無限キャンバス上にUIデ
【Claude Code】マネできる！個人開発するときに最初に用意したドキュメント24種と機能要件書を全公開 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 最近、Claude Codeで本格的に個人開発アプリを3つほど作ってきました。 ただ、毎回同じような設計で悩んだり、ライブラリの使い方でしばらくハマったり、AIエージェントに同じ説明を繰り返したりしていました。 そこで新しいプロジェクトでは、開発着手前に設計ドキュメントを徹底的に準備するという実験をしてみました。 結果、なんと 24個ものドキュメント ができあがったので、今回はその全貌と、なぜこれらが必要だったのかをお伝えします！ 【追記】 おかげさまで大反響で、たくさんの方に読んでいただいたようで嬉しいです！
MermaidでAWS構成図を作成するテクニック - Qiita
はじめに テキストからダイアグラムを生成できるMermaidを使ってAWS構成図を作成する際のテクニックを、いくつかピックアップしてご紹介します。 Mermaidを使えば、構成図内のテキスト検索はもちろん、アイコンを使って見やすく表現したり、アイコンをクリックしてマネジメントコンソールなどに遷移させたりすることもできるため、実用性の高い構成図が作成できます。 本記事が、Mermaidを活用したAWS構成図の作成に少しでもお役に立てば幸いです。 AWS構成図の使用例 Mermaidで作成したAWS構成図の使用例を紹介します。 例えばQiitaでも以下のように表示できます。(リンクはサンプルです) mermaid記法 --- title: 000000000000-xxxxxxxx環境 config: theme: neutral flowchart: nodeSpacing: 10 rank
ケーキ屋でバイトしてた時に店前に置く新作ケーキ看板をチョークで描くようにしたら、それまで全く売れてなかったのがめちゃくちゃ売れるようになった話
森聖華 @diderot24da 本ではないけどケーキ屋でバイトしてた時店前に置く新作ケーキ看板をチョークでよく描いてたんだけどそれまで全く売れてなかったのがめちゃくちゃ売れるようになったりしたから色んな人にどんなものを売ってるのか知ってもらうのは大事なんだなと思った pic.x.com/mPT50ugB24 x.com/conathumuriboo… 2025-05-18 12:09:42 こな・つむり @CONATHUMURIBOOK POPを書いたぐらいじゃ本は売れない話題で持ちきりですけど 書店員時代、POPを設置する前と後を 売り上げの推移を数字で1円単位まで追いかけて、表を作ってっていうのを毎月、 何10冊も2店舗分、算出させられていたので分かるんですけど 売り上げは上がります。 沢山売れます。 2025-05-16 07:42:43
万博「こみゃく」の色合い、「青と赤なのにヴァ―っと展開しても毒々しくないのはなぜ？」→プロのデザイナーじゃなきゃ見逃しちゃう趣向が凝らされていた
cell @irodorist_m 万博のデザインシステムで一番いい仕事をしてるのは、この色なんだよぉ。C5K20の青みがかったグレー。主張の激しい赤と青のこみゃくたちを「ひとつ」に繋ぎ合わせてくれている、そんな色。だから万博コーデにもこの色入れてあげて♬ なかなかないけど。 pic.x.com/y97WC6o1HO 2025-05-16 19:44:44 引地耕太 | VISIONs CEO / COMMONs 代表 @kouta_hikichi 最も地味で、最も重要な役割。それがこのグレーです。この色は、ロゴにもミャクミャクにも入っていません。一般の方からすれば誰も気づかない可哀想な色でもあるのですが笑、多分プロのデザイナーであればその意味や役割がわかると思います。赤と青だけだと、全体に展開した時に目がチカチカして毒々しく強すぎます。だから一番最初に決めたのは、このグレーをデザインシス
管理画面のデザインに役立つ。テンプレート「Phoenix」とは。｜MAKOTO｜Designer
管理画面のデザインに携わることがあり、やってみて気付いたこと、試してみたことの紹介です。 管理画面のデザインは難しい見た目をつくる力だけでは管理画面は作れません。 競業調査・使いやすさ・本当に必要な機能かの議論・新たな案の提案・注力する箇所の調整など、限られた時間とリソースの中で、最適な管理画面を制作するのは、経験値の高いデザイナーでも苦難すると思います。 機能（ユーザーストーリー）・情報が整理され、社内議論も終わり、ワイヤーフレームもあり、「準備万端。さぁデザイナーさんお願いします。」といった、情報が充分揃って依頼が来るといった理想な状態はありません。（デザイナーなら分かると思いますが、文言・構成が決まってない状態で依頼が来ることが多いです。サービスの管理画面の場合は関わるメンバーも多く、残念ながらカオスが極まります。） そのため、まだ整理が終わっていないところはデザイナーも携わり、要件
Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応
Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応 AIにフルスタックアプリの生成を指示できるサービス「Bolt.new」を提供するStackBlitzは、Bolt.newの新機能としてFigmaで作ったデザインのインポートに対応したと発表しました。 Introducing Figma to Bolt Go from Figma to pixel-perfect full stack app — just put bolt․new in front of the URL & start prompting! pic.twitter.com/r78vjraVms — bolt.new (@boltdotnew) March 13, 2025 Figmaで作成した画面デザインをBolt.newへインポート可能に これまでBolt.ne
「メダリスト」原作漫画の動きの描写が、いかに凄いのかの考察。「矢口高雄の水の描写に匹敵する」
うぃっちわっち(丁稚) @Witchwatch99 「メダリスト」が面白い、と聞いてアニメの方から入った訳ですが、そうこうしてるとTLに「メダリストは原作の方が動きにキレがある」なんて話が流れて来て「漫画は動かないよ？」と思いつつ原作読んでみたら原作は化け物級だったって話をいつもの調子で長文↓ 2025-03-03 07:29:01 うぃっちわっち(丁稚) @Witchwatch99 もう何年か前の話ですが、とある漫画家さんが某大先生の所にアシスタントに行った時に言われた愚痴というかお叱りがバズって他の同業者の話にまで波及した事がありました。 そのお説教の内容はこんな感じ。 「最近のアシスタントは車に人が乗り込んで車体が沈み込む描写を描けない」 …そんな描写が可能なんですか？ってのが私の初見の感想。 その御大曰く、車に縦のパースをかける事で縦の動きを表現するのだとか。 そう言われてみれば確
スライドに適した「ニュートラルでデフォルト感のない」フォントを考える - いなにわうどん
先日，深夜に友人と話している際に「スライドのフォントに結局 Noto Sans（≒ 源ノ角ゴシック）を選んでしまう」という話題が出ました*1．Noto Sans がオープンソースであり，Google スライド等のアプリケーションで最初から使用できるという理由も勿論あるのですが，個人的にはそれだけが理由でないように感じます． ときに，プレゼンテーション用のスライドにはどのような書体が適しているのでしょうか？ 遠くから見えるように，視認性が高いフォントを使いましょう！ ――という教科書的な回答はさておき，これは結構難しい問題に思えます．というのも（特に，洒落た発表ではなく研究発表のようにお堅い）スライドは，視認性のほかに，ある主の無味乾燥さが求められるように感じるからです．個人的には，「視認性」「ニュートラルさ」「デフォルト感がない」の 3 つを兼ね備えた書体が適切であると感じています．このあ
【イカしたUIを見る】Vol.2 これは発明だ！と思ったUIパーツ10選｜Goodpatch Blog グッドパッチブログ
知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 ▼ユーザー視点のUI/UX改善方法がよくわかるお役立ち資料（グッドパッチ） Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポ
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
Figmaでちょっとしたデザインをつくるときに使っているプラグイン8選 - ICS MEDIA
アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？ そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると
ToDoリストを作っても動けない、締め切り直前に急いで対処… 時間管理における課題と、忙しくて“後回しになりがちなこと” | ログミーBusiness
効果的に時間管理を行うには？篠田真貴子氏（以下、篠田）：私の課題はさておき、例えば1週間の中で日にちを割っていくとか、1日の中での時間の使い方もあるし、そもそも時間をどのユニットでとらえて、どうチャンク分けすると自分は心地良いのかって、けっこう人によって違うと思うんですよ。 倉貫義人氏（以下、倉貫）：わかるわかる。違いますね。 篠田：お二人はどうなのかなって、今日は聞いてみたいなと思いました。 倉貫：最近はやれてないんですが、僕はストレングスファインダーで言う「達成欲」を持ってるので、朝に1日の予定を自分で立てるんですよ。1時間ごとに「こういうことやる」と書いて、それを達成できたらその日は気持ち良く寝れるというのをやっていて。 でも、そうするとすごくがんばらなきゃいけないので、最近はちょっと体力も落ちてきて（笑）。「そんなにがんばれなくなったな」というところがあって、そこまでやらなくなっち
テーブル・DB設計するときの極意 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 「テーブル・DBを設計するときのさいきょうの極意」を完全に理解したので 初心者（私）向けに共有する記事です。 どうぞ揉んでいただければ幸いです。対戦よろしくお願いします。 さいきょうの極意 初心者が「テーブル・DB設計して」と言われると、 「アソシエーションってあったよね・・・バリデーションも？中間テーブルを使うときと使わないときと・・・」と大変に混乱し、何から手をつけていいかわからなくなります。 そんなあなたにこれ！ ・テーブル・DB設計は「属性」と「関係」の２つだけ ・「属性」は必要なものを書くだけ ・「関係」は 1:1
知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 なお、こちらの記事の内容は順次YouTube
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactの内部構造を知っておく (React Tokyo #6 - @calloc134)
日本大学商学部イラストアクセスマップ | 日本大学商学部
スタバの紙袋には日本で2社くらいしか印刷できない最高峰の技術が詰め込まれている「デザイナーの知見と技術者両方擦り合わせないと作れないレベル」
イラストレーターさん「蟹缶がカニロボに変形するおもちゃ欲しいな〜」デザイナーさん「実物できました」
名建築ホテルの実測スケッチがエモいとSNSで話題！ 朝食やアメニティも実測する遠藤慧さんの制作現場に密着 「all day place shibuya」東京都渋谷区
