単位変換計算機とダークモードUI改善

こんにちは！hafutureチームです。

本日は、新しく追加された単位変換計算機と、サイト全体のダークモードUI改善についてご紹介します。

1. 単位変換計算機の追加

日常生活や仕事でよく必要になる単位変換を簡単かつ迅速に行える単位変換計算機を追加しました。

サポートする12種類の単位

• 長さ (m, km, ft, inch, mile など)
• 重さ (kg, g, lb, oz など)
• 面積 (㎡, acre, ha など)
• 体積 (L, mL, gallon, cup など)
• 温度 (°C, °F, K)
• 圧力 (Pa, bar, psi, atm など)
• 速度 (m/s, km/h, mph, knot など)
• エネルギー (J, cal, kWh, BTU など)
• 時間 (秒, 分, 時間, 日, 週 など)
• データ (B, KB, MB, GB, TB など)
• 料理 (カップ, 大さじ, 小さじ など)
• 衣類サイズ (S, M, L, XL など)

主な機能

• リアルタイム変換: 値を入力すると即座に変換結果を確認できます
• クイック入力ボタン: よく使う値を素早く入力できるボタンを提供
• 変換公式の表示: どのような公式で変換されるかを確認できます
• 完全ガイド: 各単位タイプごとに詳細な使用ガイドを提供
• 多言語対応: 韓国語、英語、日本語すべてに対応

2. ダークモードUI全面改善

ユーザー体験を向上させるため、ダークモードUIを全面的に改善しました。

改善されたカラースキーム

従来の半透明で読みにくいダークモードスタイルを、Zincカラーパレットベースで完全に再設計しました。

• カード背景: dark:bg-zinc-900 (クリーンなダークグレー)
• ボーダー: dark:border-zinc-700/60 (さりげない区切り線)
• 本文テキスト: dark:text-zinc-100 (高い可読性)
• 補助テキスト: dark:text-zinc-300 (適切なコントラスト)

改善されたコンポーネント

• フッター: テキストの視認性向上と不透明な背景の適用
• お知らせカード: 透明度を削除し明確な背景色を適用
• 関数電卓: ボタンの色とコントラストを改善
• カロリー計算機: 結果表示エリアの可読性向上
• 連絡先/紹介ページ: 一貫したダークモードスタイルを適用

単位変換機ガイドエリア

単位変換機のガイドカードはダークモードで白い背景で表示され、情報密度の高いガイドコンテンツをより読みやすくしています。

3. その他の改善事項

• HowToUseコンポーネント: ツール使用方法案内カードのダークモードスタイル改善
• CSS変数の活用: --foreground、--backgroundなどのCSS変数を活用した一貫したテーマ適用
• 透明度の削除: backdrop-blur、bg-white/xxなどの透明背景を不透明色に置き換えてコントラストを向上

おわりに

hafutureは、ユーザーの皆様がより便利にツールを活用できるよう、継続的に改善しています。 単位変換が必要な際は、ぜひ単位変換計算機をご活用ください！

フィードバックやご提案はいつでも歓迎です。ありがとうございます！