WebサイトやアプリケーションのUIをデザインする際、テキストの色や背景色にどのような「黒」を使っていますか？ CSSでとりあえず color: #000000; や color: black; と指定しているエンジニアの方も多いかもしれません。しかし、多くのサービスでは、テキストや背景に「完全な黒（#000000）」が使われていません。黒に近いグレーが使われています。 一見すると些細な違いに思えますが、実はこの「黒の選び方」には、人間の視覚や画面の特性に基づいたロジックが存在します。 今回は、なぜUIデ

はじめに 初めまして、2025年度新入社員の岡嵜健太です。 現在私は、HTMLやCSS、（極まれにJS）を用いてflexboxの便利さに感動しながらモック作成やエンハンス業務などを行っています。 さて、早速ですが皆さんは以下のようなレイアウトを組むときはどのように実装しますか？ Flexbox？CSS Grid？Marginで調整？ 私はFlexbox大好き人間でしたのでなんとなくFlexboxを使いがちでした。←よくない そんな私が、業務で１からCSS Gridを学び、Flexbox・CSS Grid大

はじめに セーフィー株式会社 開発本部 ソリューション開発部の土井 慎也です。 皆さん、他人のプロジェクトや、あるいは自社のサービスのリリースノートって、隅々まで読んでいますか？ 正直に告白すると、私は面倒くさくてしっかりとは読めていません。 「新機能が追加されました！詳細は以下の箇条書きをチェックしてください」 ……いや、文字が多くてパッと見で何が変わったのか分からないな。 そんな風にブラウザのタブを閉じてしまった経験は、誰しもあるのではないでしょうか。 せっかく開発者が心血を注いで実装した機能も、伝わ

はじめに こんにちは、新卒一年目エンジニアの藤原です。 大学では主にメディア工学を学んでおり、プログラミング経験はあまりありませんでした。研修ではJavaをメインに学び、HTML,CSS,JavaScriptはほんの少し触れた程度です。 しかし、8月に部署に配属されて以降は、React/Next.jsを用いて社内システムのフロントエンドを開発しています。そのため、右も左も分からず、常に「分からない」が頭をよぎる毎日です。 簡単なパーツ作成から始まり、画面のデザイン取り込み、バックエンドのAPI繋ぎこみへと

はじめに はじめまして。2025年4月に新卒でニフティに入社した宮村です。 ニフティのエンジニア職には On-the-Job Training（OJT） という制度があり、私が入社した年度では入社後の約1年間で 3つの異なるチーム を経験しました。各期約3ヶ月、実際の業務に携わりながら技術とチームワークを学んでいく仕組みです。 この記事では、私がOJTで経験した3つのチームでの業務内容や、やりがい・苦労した点をエピソードベースでお伝えします。 「ニフティのOJTって実際どんな感じなの？」 という疑問を持つ

PSSLの佐々木です。 E2Eテストは重要だとわかっていても、Playwrightのコードを書くのが面倒で後回しにしていませんか？ 本記事では、 Markdownファイルに日本語で操作手順を書くだけで、Playwrightが自動実行してくれるE2Eテストフレームワーク の作り方を、実際のプロダクション事例をもとに解説します。 この記事でわかること Markdownシナリオ駆動のE2Eテストの全体アーキテクチャ 自然言語ステップをPlaywrightアクションに変換する仕組み フォーム入力の多段フォールバッ

ども！ HTML図解の自動生成シリーズ を書いている龍ちゃんです。 AIコーディングでデザインの修正依頼を出すとき、「なんか違う」を言葉にするのに苦労していませんか？　僕もずっとそうでした。出来上がった図解を 自分のイメージ通りに仕上げたい んだけど、テキストだけだと伝わらない。 画像を一緒に渡すだけで、これが解決しました 。マルチモーダルな入力で言語化できなかった感覚がそのままAIに伝わって、総当たりの修正ループがディスカッションに変わります。 今回の内容です。 レビューは人間の感覚が起点。でも言葉にす

MNTSQ プラットフォーム部の藤原です。 本記事では、PythonとLibreOfficeを組み合わせたオフィスファイルのpdf変換について解説します。 LibreOffice はオープンソースのオフィススイートです。 Microsoft Officeで作成した各種ファイル（docxや、xslx、pptx）を読み込み、編集できます。 LibreOfficeにはこれらファイルをpdfでエクスポートする機能も存在しています。 GUIからの実行はもちろんCLIでも実行可能です。 soffice --headl

本記事は、Claude Code + さくらのAI EngineではじめるAgentic Codingを加筆修正したものです。 いまやAIは仕事に欠かせない存在になりました。数あるAIサービスの中でもプログラミングにおい […]

Mermaidの見た目、もうちょっとなんとかならんか ども！Mermaidで図を作るたびに「構造は最高なんだけど、見た目がなぁ…」と思ってた龍ちゃんです。 「 Claude CodeでMermaid図を作成する 」でMermaid図の自動生成について書きました。Mermaidはコードで構造を書けるから、フローチャートやシーケンス図がサクッと作れます。AIに「こういう図作って」って言えば一発で出てくるんですよね。 ただ、デフォルトのデザインがシンプルすぎるんですよね。設計書やブログに貼るにはちょっと素朴。

本ブログは、三菱電機株式会社 電力システム製作所 電力ICTセンター 小森様と、アマゾン ウェブ サービス ジャパン合同会社 ソリューションアーキテクト稲田、GitLab 合同会社 ソリューションアーキテクトの小松原様の共著です。三菱電機 電力ICTセンターにおける Kiro と GitLab を組み合わせたソフトウェア開発効率化の取り組みについてご紹介します。 電力ICTセンターについて 三菱電機 電力システム製作所 電力ICTセンターは、再生可能エネルギーの拡大や電力自由化に対応する電力×ICTの専門

この記事は、合併前の旧ブログに掲載していた記事（初出：2022年1月19日）を、現在のブログへ移管したものです。内容は初出時点のものです。こんにちは、LINE フロントエンド開発センターの玉田です。突...

Figmaの手作業から脱却したい ども！最近は図解の自動化にハマっている龍ちゃんです。 技術ブログの図解、みんなどうしてますか？ 僕は以前、Figmaで人力で図を作ってたんですよね。アーキテクチャ図とかフロー図とか、1つ作るのに結構な時間がかかる。ブログの本数が増えるほど、だんだん図を作るのが億劫になってきて。 で、 SVG図解自動生成 、 HTML図解自動生成 と試行錯誤を重ねてきました。過去記事を読んでなくても今回の記事だけで完結するので、安心してください。 やっていることはシンプルで、Claude

急成長を遂げるメガベンチャー企業の現場では、マイクロサービス化やインフラの複雑化に伴い、「サーバーは正常に稼働しているはずなのに、なぜかユーザーから『使えない』という報告が届く」といった課題に直面することが増えています。 従来の内部リソース（CPUやメモリなど）を対象とした監視だけでは、ネットワーク経路の不備やフロントエンドの描画トラブルといった「ユーザー側の体感品質」までを把握することは困難です。 そこで注目されているのが「シンセティックモニタリング（外形監視）」です。 そこで今回は疑似ユーザーを用いて

こんにちは、NRIネットコム新入社員・ツーシーム投げ代表の池部です。 高校時代から夢中になっていた微生物研究からWebへ転身し、現在はHTML/CSSのコーディングで奮闘中！ 今日も元気に社会人という名のマウンドに立っています。 さて、コーディングをするにあたり、 デザイン通りの見た目にならない 意図していない部分にスタイルが当たる など、もやもやした経験はありませんか？ 特に、私と同じように未経験でIT業界に飛び込んだ方は、このような壁にぶち当たることも多いのではないでしょうか？ 本記事では、未経験から