2IPがリニューアル：新しいデザインとロゴ、使い慣れたツールはそのままに
2IPをリニューアルしました。ロゴやナビゲーションから、サービスやチェック結果の見せ方まで刷新しています。見た目はよりモダンになりましたが、サイトの目的は変わりません。必要なツールをすぐに見つけ、ネットワークに関する情報をすばやく得られるようにすることです。
2IPは長年のあいだに大きく成長してきました。新しいサービスや機能、ツールが増えるにつれて、統一感があって使いやすいインターフェースが必要になりました。今回の変更点と、リニューアルに込めた考えをご紹介します。
「スピード」を表現した新しいロゴ
デザインとあわせて、2IPのロゴも新しくなりました。長年サイトの顔だったおなじみの円形のマークに代わり、動きを感じさせるライン、アクセントカラー、2IPの名前を組み合わせた新しいロゴが登場しました。
新しいマークのテーマはスピードです。インターネット回線の速さと、必要な情報にすばやくたどり着けることを表しています。
IPアドレスの確認、ドメイン情報の検索、DNSのチェックをはじめ、さまざまなネットワークツールを1か所で利用できます。こうしたサービスへのすばやいアクセスを、新しいロゴで表現したいと考えました。
ラインが動きを感じさせ、コンパクトな形は、パソコンでもスマートフォンでも新しいインターフェースによくなじみます。
ライトテーマ用とダークテーマ用のバージョンも用意しました。ブラウザーのタブでは、小さく表示されても見分けがつくよう、名前を省いてグラフィックのマークだけを使っています。
使い慣れた2IPが、新しい装いに
以前のデザインは長年にわたって使われてきました。サイトが発展し、サービスの数が増えるにつれて、ページごとに独自の表示要素が少しずつ加わっていきました。
そこで、それらを共通のシステムにまとめ、どのツールも同じように快適に使えるようにすることにしました。
トップページの基本的な考え方は変わりません。ご自身のIPアドレスがすぐ目に入り、必要なツールがすぐそばにある、というものです。
ブロックの配置、余白、見出し、サービスのカードを見直しました。情報に目を通しやすくなり、操作も見つけやすくなっています。
おなじみのサービスの構成やレイアウトはそのままに、アイコンをMaterial Design 3のスタイルで統一しました。デザインはよりモダンでまとまりのあるものになりましたが、必要なツールはこれまでどおり簡単に見つけられます。
すべてのサービスに共通のスタイル
今回のリニューアルでは、Material Design 3の原則をベースに、2IP独自のスタイルに合わせて調整しました。
ボタン、入力欄、メニュー、表などの要素は、共通の表示ルールに従うようになりました。
その効果は、ツールを行き来するときに実感していただけるはずです。IP情報、DNS、ポートの開放状況のどれを確認する場合でも、見慣れた操作要素がいつもの場所にあり、予想どおりに動作します。
目指したのは、余計な装飾を省いた、落ち着いたデザインで統一感のあるインターフェースです。
わかりやすくなったナビゲーション
2IPにはたくさんのツールがあるため、目的のツールをすばやく見つけられることは、チェックそのものと同じくらい大切です。
サイドバーを刷新し、サービスのカテゴリーを整理して、カテゴリー間を移動しやすくしました。
パソコンでは、メインのセクションを表示したまま、ツールのグループを追加のメニューで開けます。
言語とテーマの切り替え、アカウントへのアクセスは、ページ上部にまとめました。
ライト、ダーク、自動から選べるテーマ
さまざまな明るさの環境でサイトがどう見えるかにも、特に気を配りました。
ライトテーマ、ダークテーマ、そしてデバイスの設定に合わせて切り替わる自動テーマから選べるようになりました。
ダークテーマには専用のカラーパレットを用意しました。情報が読みやすく、おなじみの2IPらしさが伝わるよう、背景、文字、カード、ボタンの色合いを選んでいます。
選んだテーマはブラウザーに保存されるので、毎回設定し直す必要はありません。
使いやすくなったフォームと、わかりやすくなった結果表示
2IPのほとんどのサービスは、IPアドレスやドメインなどの値を入力するというシンプルな操作から始まります。
入力欄、ラベル、ヒント、ボタンを見直し、より使いやすくしました。
色も操作の意味を伝える手がかりになっています。通常のボタンには青、保存や成功した状態には緑、エラーや削除には赤を使っています。
チェック結果の表示にも手を加えました。表、メッセージ、情報ブロックの見せ方に統一感が出ています。
結果を表示するということは、その結果を理解する手助けをすることでもあります。たとえばポートチェックが正常に実行され、ポートが閉じていると報告されることがあります。これはチェックによってわかった事実であり、サービスが動作しなかったわけではありません。
そこで、チェックの実行状態と、チェックによって得られた情報とを区別して表示するようにしました。
スマートフォンでの2IP
モバイル版のインターフェースも新しくなりました。
ナビゲーションを作り直し、タップできる領域を広げ、カード、フォーム、結果を小さな画面に合わせて調整しました。
メニューは独立したパネルで開き、サービスのカテゴリーは別のページに移動せずに展開できます。
余白や操作要素の配置も見直し、片手でも快適にツールを使えるようにしました。
細部へのこだわり
スクリーンショットを見ただけでは、すぐにはわからない変更もあります。
メニューがなめらかに開くこと、操作中の要素がわかる表示、キーボードでの操作、読み込み中にページが揺れないことなど、インターフェースの動きにも手を入れました。
必要がない限り操作要素の位置が動かないようにし、テーマの切り替えもスムーズになるよう配慮しています。
こうした小さな改善の積み重ねで、日々のサイトの使い心地がより快適になります。
大切なことは変わりません
見た目は大きく変わりましたが、2IPの目的は変わりません。ネットワークの情報をすばやく得て、それを確認するためのツールを使っていただくことです。
これまでどおり、IPアドレスをすぐに確認でき、DNSをチェックし、WHOISでドメイン情報を調べ、ポートの開放状況を確認し、ほかにも数十種類のサービスを利用できます。
外観は新しくしましたが、2IPで皆さまに評価していただいているもの、つまりシンプルさ、速さ、必要なツールが1か所にそろっていることは、そのまま大切にしています。
これから
2IPはこれからも成長を続けます。新しいデザインは、今後のアップデート、新機能、サービスの改善の土台となるものです。
日々の作業で2IPを使いやすく、速く、信頼できるものにするため、これからも改善を続けてまいります。
いつも2IPをご利用いただき、ありがとうございます。これからも一緒に成長していきましょう。