Technical Blog / 知見 chimneys
実務で得た検証と、EC運用の記録
抽象論を排除し、楽天RMS仕様の攻略からデータ分析に基づくUI設計まで、実数値に繋がった実証済みの知見のみをアーカイブしています。
VScodeでfutureshopパーツ管理を劇的に効率化！ローカル擬似プレビュー環境構築ガイド
futureshop（特にコマースクリエイター）でのサイト構築・運用において、「共通ヘッダー」「フッター」「おすすめ商品リスト」といった「パーツ」の管理は頻繁に...
【Nano Banana Pro】生成する画像のアスペクト比を操るテクニック／正攻法とおまけテクニック
Googleが発表したGeminiの『Nano Banana（ナノバナナ）』ですが、凄まじい精度で画像を生成してくれ、中には「Photoshopいらない！」なん...
WordPressのセキュリティをより効果的にするためのプラグイン『SiteGuard』設定方法と非常時の対処法
サイトを作るとなるとWixやStudioなどノーコードツールを使われることが多くなりましたが、Wordpressの利用率はまだまだトップを走り続けています。 特...
WordPressで階層を変更したならRedirectionプラグインでサクッとリダイレクト設定
サイトのドメインを変えたり、ページの階層を変えたときにほぼ必須の作業なのがリダイレクト設定。 でもGoogle検索にすでにインデックスされている場合は、前のUR...
CSSによる「部分一致」でスタイルを一括適用させる方法&効かないときのポイント
CSSで複数のクラスやIDに同じスタイルを適用させるとき、どうしてますか？ .class-name1, .class-name2, #id1 { // 適用した...
Chakra UIの横並び・縦並びしたいとき使うStack（HStack・VStack）・Flexの違いと使い分け
UI・コンポーネントライブラリはWebアプリを作るときに、開発はしたいけどデザインに苦手意識を持っていてなかなか進まない、そんなときに便利な存在ですが、Reac...
HTML+CSSだけでマスク（切り抜き）したいときに参考にしたいテクニック3選
Webデザインをする上でやりたくなるテクニックの一つに切り抜き（マスク）があります。 文字や好きなシェイプの形で背景を切り抜いたりすると、華やかさというかなんか...
シンプル、だけどレスポンシブな日本語テキストの改行テクニック
改行の入る箇所によって、キャッチコピーとか言葉の伝わりやすさや印象というのは変わってきます。 でもWebサイトでは、日本語というのは英語よりも改行が入れにくいも...
YouTube埋め込みの最適解は？Webデザイナーが知っておくべき「埋め込み方法のベストプラクティス」と「縦型動画（ショート動画）」の導入の技術的ポイント
こんにちは、みみほくろです。 Youtubeって面白い動画が多くて時間を忘れちゃいますよね。 自分の動画もみんなに見てほしい！ってことで自分のサイトにYoutu...
要素をスクロールに合わせて表示・非表示させたり切り替える方法
最近スクロールで追従するヘッダーがスタンダードかってほど見かけるようになりました。 グローバルナビゲーションを常に表示させることでページのどこにいても見たいペー...
JavaScriptを使わず、たった2つのCSSスタイルを追加するだけで、簡単にスライダーを作る方法
記事コンテンツでもECでもブランドページでも、Webサイトには多くの情報を載せてユーザーに少しでも伝えたいことってありますよね。 そこで、限られた範囲に多くの情...
空要素に:emptyでスタイルを指定したのになぜか効かない・・・。:emptyの意外な落とし穴
テキストも画像も入っていない空のHTML要素ってありますよね。 特にPHPのような動的に生成したHTMLでは、場合によって中身が空の要素が出てくることが多いと思...