Color Collectorのツールをスマホ向けに最適化しました

Color Collector の各ツールを、スマートフォンで使いやすいUIに調整しました。これまでもレスポンシブ表示には対応していましたが、PC版の画面構成を小さな画面に収める形に近く、操作パネルや結果表示の見通しが悪い部分がありました。今回の更新では、スマホでは「入力する」「結果を見る」「必要な設定だけ開く」という流れを優先しています。

主な改善内容

スマホ専用のタブUIを追加
下部にメニュー、テーマ、メモ／保存へアクセスできる固定メニューを追加
カラーピッカー、カラー抽出、パレット、WebP変換の各画面を縦スクロール中心に整理
ボタンやコピー操作のタップ領域を広げ、片手でも操作しやすいサイズに調整
ライト／ダークの切り替えを、太陽と月のアイコン付きトグルに変更

カラーコレクター

画像から色を抽出する Color Collector では、画像操作を優先して使えるようにしました。スマホでは「画像」タブと「結果」タブに分け、アップロードした画像を見ながら操作できます。スポイトで色を拾ったときは、画面を結果一覧へ移動せず、下から小さな結果パネルを表示する形にしました。画像を確認しながら、拾った色と近いPANTONE候補をその場で見られます。

カラーコンバーター

Color Converter は、基本変換、配色、コントラスト、DJコメントのように情報量が多いため、スマホではタブで分けました。最初に必要な HEX / RGB / CMYK / PANTONE の変換を見やすくし、補助情報は必要なときに切り替えて確認できるようにしています。

カラーパレットメイカー

Color Palette Maker は、色を探す画面と作成したパレットを見る画面を分けました。検索、HSLフィルター、候補色の一覧をスマホ幅でも扱いやすくし、選んだ色をパレット側で確認しやすい構成にしています。

WebP Bulk Converter

WebP Bulk Converter は、スマホでファイル一覧が横に広がりやすかったため、変換後のファイルをカード形式で確認できるようにしました。ファイル名、形式、サイズ、変換後サイズ、状態、個別ダウンロードを1つのカード内にまとめています。横スクロールしなくても、個別DLボタンまで確認できます。

今回の方針

URLやSEO設定は変えず、既存のPC版デザインとツール機能は維持しています。その上で、スマホでは情報量を整理し、必要な操作にすぐ届くようにしています。 Color Collector は、PCでは作業用ツールとして、スマホではカラーアプリのように使える形を目指して、引き続き改善していきます。