Adobeの株価上昇が僕たちWeb制作者に突きつける「残酷な現実」おつかれさまです。小畑です。 大阪の片隅で、Web制作という仕事にもう24年も向き合っています。大学を卒業してすぐ東京で会社を作り、がむしゃらに走ってきた僕ですが、最近、あの頃と同じような、ゾクゾクする感覚を味わっています。 先日、一本のニュースが世界を駆け巡りました。 クリエイターなら誰もがお世話になっているAdobe社の株価が、AI投資の成功で記録的に跳ね上がった、という知らせです。 彼らの第3四半期の売上は59.9億ドル。AI製品が生み出す年間経常収益（ARR）は、なんと50億ドル…日本円にして約7500億円を超える見込みだといいます。もはや天文学的な数字です。 「へぇ、Adobeは景気がいいんだな」。 多くの人が、まるで遠い国の経済ニュースのように、そう感じたかもしれません。 でも、もしあなたがWebサイト制作やデザ

はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか

ホームぺージを開設するなら今！ 国内シェアNo.1のレンタルサーバー※ ＼ エックスサーバーのお得な情報 ／ ※ 2025年12月時点、W3Techs調べ。

「Order allow,deny」は「最初は許可（allow）を書いて、次に拒否（deny）を書くよ」という宣言。 「allow from all」は「とえあえず全部アクセス許可するよ」という建前。 そして、コピーしてきた「deny from IPアドレス」で「この人たちは許可しないよ、さようなら」という無慈悲な本音。 # BEGIN WordPress # END WordPress 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/23 WordPressを使っているならば、「# BEGIN WordPress」「# E

HTML HTMLの仕様策定には複雑な歴史があります。詳細は他の解説記事に譲りますが、簡単に述べるとW3CとWHATWGのダブルスタンダード状態が長い間続いていました。2022年現在はWHATWGによってLiving Standardとしてまとめられた仕様が実質的な標準となっています。Living Standardという名前が示す通り、バージョンはなくエディターによって随時更新されています。 CSS CSSの仕様はW3Cが策定しています。現在は、CSSとして1つの標準仕様があるわけではなく、数多くのモジュールに分かれて標準仕様の策定が進められています。草案、勧告候補などを経て勧告に至るプロセスと、Levelという概念で整理されたバージョン管理が特徴です。年に1度、SnapShotとしてその時点での標準化の概況が公開されています。 JavaScript JavaScriptは主にWebブラウ

社内メンバー全員が、ユーザーエクスペリエンスをざっくり理解するための資料。（注: 以下は、ざっくり最速で基礎知識を説明するものです。厳密な定義は、ちゃんとした資料をご覧ください）。 5秒でわかる雑なUXモデルまず「だいたいあってる、ざっくりした概念図」を出します。 美味しいすき焼きを、お箸で食べて、ニッコリ「すき焼き（コンテンツ）を、お箸（インターフェース）で、食べたら美味しかった（エクスペリエンス）！」 シンプルに示せば、UXとはこれだけです。（注）ここのコンテンツはモノ、サービス、概念なども含みます。 そして「よいエクスペリエンス（雑）」とは、「ユーザーの精神活動をポジティヴにしていくこと」の積み重ねです。 ユーザーの精神が、左から右にシフトしたら、だいたいよいエクスペリエンスもうちょっと広げると、生活や人生をいい感じにすることも含みます。肉体的な変化とか、スキルアップとか…専門家に細

ウェブサイトのフォントは何を指定すればよいのでしょうか？　CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近の出来事を取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial, "Hir

はじめに最近、AIによる画像生成サービスが多く出てきて、デザインを含めたクリエイティブにかかわる方は関心があるのではないでしょうか。 議論が起こっている、AIの学習元データの著作権の問題も気になります。 ただ、今回は純粋に、自分の専門スキルであるUIデザインをAIは行うことができるのか気になり、実際に試したことをまとめました！ 結論「取って代わることはない。専用の学習をさせれば、グラフィックのアイディエーションに使うことができそう。」 上記の結論に至った理由を、検討過程とともに説明していきます。 検討過程使用ツールAI生成ツール：Midjourney UIデザインツール：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つの効果としては微々たるものですが、操作頻度の多いものであればあるほど、効果が期待できるので、覚えることをオススメします！