サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖Figma MCPとはFigma MCPについては、こちらの記事が非常にわか
「Order allow,deny」は「最初は許可（allow）を書いて、次に拒否（deny）を書くよ」という宣言。 「allow from all」は「とえあえず全部アクセス許可するよ」という建前。 そして、コピーしてきた「deny fromIPアドレス」で「この人たちは許可しないよ、さようなら」という無慈悲な本音。 # BEGINWordPress # ENDWordPress Order allow,deny allow from all deny from 1.0.1.0/24 deny from 1.0.2.0/23 deny from 1.0.8.0/21 ・ ・ 長いので省略 ・ deny from 223.255.248.0/22 deny from 223.255.252.0/23WordPressを使っているならば、「# BEGINWordPress」「# E
HTMLHTMLの仕様策定には複雑な歴史があります。詳細は他の解説記事に譲りますが、簡単に述べるとW3CとWHATWGのダブルスタンダード状態が長い間続いていました。2022年現在はWHATWGによってLiving Standardとしてまとめられた仕様が実質的な標準となっています。Living Standardという名前が示す通り、バージョンはなくエディターによって随時更新されています。CSSCSSの仕様はW3Cが策定しています。現在は、CSSとして1つの標準仕様があるわけではなく、数多くのモジュールに分かれて標準仕様の策定が進められています。草案、勧告候補などを経て勧告に至るプロセスと、Levelという概念で整理されたバージョン管理が特徴です。年に1度、SnapShotとしてその時点での標準化の概況が公開されています。JavaScriptJavaScriptは主にWebブラウ
昨日は暑い夜だった。 そして熱い夜でもあった。そう。一晩中ドラクエ5に没頭していたからだ。 なんと! ついに「はぐれメタル」が仲間になったのだ。
社内メンバー全員が、ユーザーエクスペリエンスをざっくり理解するための資料。（注: 以下は、ざっくり最速で基礎知識を説明するものです。厳密な定義は、ちゃんとした資料をご覧ください）。 5秒でわかる雑なUXモデルまず「だいたいあってる、ざっくりした概念図」を出します。 美味しいすき焼きを、お箸で食べて、ニッコリ「すき焼き（コンテンツ）を、お箸（インターフェース）で、食べたら美味しかった（エクスペリエンス）！」 シンプルに示せば、UXとはこれだけです。（注）ここのコンテンツはモノ、サービス、概念なども含みます。 そして「よいエクスペリエンス（雑）」とは、「ユーザーの精神活動をポジティヴにしていくこと」の積み重ねです。 ユーザーの精神が、左から右にシフトしたら、だいたいよいエクスペリエンスもうちょっと広げると、生活や人生をいい感じにすることも含みます。肉体的な変化とか、スキルアップとか…専門家に細
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。本記事ではフォントに関わるここ最近の出来事を取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial, "Hir
Web制作の要は、上がってきたデザインカンプに込められた意図をしっかり読み解いてからコーディングに取り掛かることです。今回はWebサイトクリエイターの千貫りこさんによる『プロのコーディングが身につくHTML/CSSスキルアップレッスン』（翔泳社）から、カンプから画像を書き出す手順とポイントを紹介します。プロが実際の業務で行っている工程や見方がそのまま解説されているので、Web制作に携わる方にはまさに現場のノウハウが身につく内容です。 カンプを見るときに気をつけるポイント 早くコーディングに取りかかりたい気持ちはいったん抑えて、まずはカンプデータを詳細に確認しましょう（図1-1、図1-2）。早い段階でカンプ上の不明点を解消しておくと、後の工程をスムーズに進められます。ここでは、多くのカンプに共通するチェックしておくとよいポイントを3つ紹介します。 図1-1 まずはカンプを念入りに確認しよう（
はじめに最近、AIによる画像生成サービスが多く出てきて、デザインを含めたクリエイティブにかかわる方は関心があるのではないでしょうか。 議論が起こっている、AIの学習元データの著作権の問題も気になります。 ただ、今回は純粋に、自分の専門スキルであるUIデザインをAIは行うことができるのか気になり、実際に試したことをまとめました！ 結論「取って代わることはない。専用の学習をさせれば、グラフィックのアイディエーションに使うことができそう。」 上記の結論に至った理由を、検討過程とともに説明していきます。 検討過程使用ツールAI生成ツール：MidjourneyUIデザインツール：Figma Midjourneyの様子 検証ⅠAIにUIはデザインできるのかMidjourneyにUIの画像を生成してもらいます。 今回は未来のUIデザインを目指してそれとなくプロンプトで指示をします。 （noteにイン
ホームページ制作で補助金・助成金を使いたいと考えているものの、どの補助金・助成金が使えるのか分からず、お困りではないですか？本記事では、 ・ホームページ制作で申請できる補助金・助成金の種類 ・手続きの仕方 などを詳しく解説しています。この記事を最後まで読めば、補助金・助成金を活用し、お得にホームページを制作できるでしょう。 注意 この記事で紹介する補助金の中には、単なるホームページ制作という名目では審査が通らないものもあります。補助金の対象は複雑なので、よく記事をご覧になったうえで申請をしてください。 ※簡単な質問に答えるだけ！さくっと見積もりが知りたい方はこちらのシミュレーションがおすすめです。回答内容をもとに、Web幹事に登録されている5,000社の料金データから見積もりを算出します。 【無料】費用をシミュレーションする 制作依頼・見積依頼に必要な無料のガイドブックもご用意しておりま
WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。html.to.design -Figma URLを入力するだけでFigmaに変換html.to.designの利用方法html.to.designの使い方 URLを入力するだけでFigmaに変換html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン
HTML5廃止されたって聞いたんですが、それでも勉強する必要ありますか？ あと、働くまでに何年かあるので今習っても将来ならったのが廃止されたら意味なくなっちゃわないですか…？ >HTML5廃止されたって聞いたんですが、それでも勉強する必要ありますか？ HyperText Markup Language https://ja.wikipedia.org/wiki/HyperText_Markup_Language 初期のツール群は別として、HTML1～HTML5はほぼ上位互換(後方互換)です(そうしないと古いWebページが表示できなくなるので)。HTML5から「HTML Living standard」もほぼ上位互換(後方互換)です(そうしないと古いWebページが表示できなくなるので)。HTML Living Standardとは？廃止されたHTML5との違いなど徹底解説！ https:
こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1.フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー
試作で形状やサイズ、機能面などは確認できたものの、量産の納期、コストに問題が出てしまい、新たに量産可能な会社様を探しているときに出会いました。 ご相談に至るまでの背景も含めてご説明したところ、用意した図面の仕様だけでなく、制作方法までご提案いただきました。おかげ様で納期内に量産品を納品し終えることができました。 ご相談した当初はアクリルの加工のみのお取り扱いと思っておりましたが成形品との組み合わせなど、ものづくりに対する経験値が多く、今でもお付き合いを続けております。 自社商品の企画をしていましたがサンプルを製造している段階でどうしても製品仕様と量産方法に折り合いがつかず、困っていました。 なんとか量産が出来ないものかと、様々な会社に相談している中に、プラスティックスさんがありました。これまで想定していた製造方法ではなく、異素材を組み合わせた製造方法を設計変更も含めてご提案いただきました。
BtoBの製品・サービスサイトを作る場合、どんなページをそろえればいいのでしょうか？ この記事では、これからBtoBのサイトを作ろうと思われている方、または、リニューアルを検討されている方に向けて「BtoBサイトを作るなら、これだけはそろえておきたいページ」について解説します。 サイト設計の考え方についてまとまった下記の資料も合わせてご覧ください。 ■あわせてよく読まれている資料 →BtoBマーケティングのためのサイトリニューアルガイド Webサイト構成とはWebサイト構成とは、Webサイトの設計図のことです。 Webサイトの設計図は「サイトマップ」と「ワイヤーフレーム」に分かれており、この2つの設計図を組み合わせることでWebサイトができあがります。それぞれについて詳しく見ていきましょう。 Webサイトの全体の構成：サイトマップサイトマップとは、サイト全体のページ構成を地図のように配置決
はじめに本投稿は**『VSCodeが最強のエディタだ!!』などといったことを伝える記事ではありません。** 数あるエディタの中の『VSCode』に焦点を当てて、作業効率化できるための使い方をまとめたものです。 いくつかのテーマに分けて、ご紹介させていただきますので、興味のあるところを拾い読みしていただければと思います。 (スクリーンショットについては、随時更新させていただきますが、古い場合があります。ご容赦ください。) 1.ショートカット ショートカットはかなりの数があるので、今回は**『1日の作業の中で登場頻度が多そうな操作』**に焦点をあてて、効率化を目指していきます。 ショートカットを覚えることで、ある程度の操作はマウスに触らずにできるようになります。 1つ1つの効果としては微々たるものですが、操作頻度の多いものであればあるほど、効果が期待できるので、覚えることをオススメします！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
