Instapage 3.0の紹介：よりスマート、高速、大胆、そしてシンプルに優れています。

Instapageチームは、長年にわたってUIの構築に優れた仕事をしてきました。 しかし、それはもはやユーザーのニーズを満たしていないことに気づき、変化の時が来ました。

Instapage Design SystemLeadのPrzemekCholewaは、ユーザーインターフェイスを更新するこのプロセス中のチームの考えを概説しています。

すべてを使いやすくしつつ、生産性とパフォーマンスを受け入れるには、認識を変える必要があることを私たちは知っていました。 私たちのチームは、UIがユーザーの気を散らすか、ユーザーが目標を達成するのにどのように役立つかを理解していました。 フォームは機能に従う必要があり、その逆ではありません。 Instapage Design Systemは、目を見張るものが少なく、よりミニマルで機能的なものにしたかったのです。

歴史的に、洗練された設計システムを適切に実装するための時間、リソース、知識の余裕がありませんでした。 今、私たちはそうします、そして今日、私たちはそのすべての背後にあるチームからの最大の強化を強調します。

（注：これはUIの最終的な進化ではなく、今後数週間で多くの更新が期待できます。）

InstapageUIのノイズ除去

Instapageでは、反復的なデザインを信じており、デザインの作業は決して行われず、常に進化しています。 最初のUIキットはマテリアルデザインに触発され、製品にうまく機能しましたが、時間の経過とともに、最初のUIキットには必要なすべてのコンポーネントが含まれておらず、Instapageが構築するものに対して制限が多すぎることに気付きました。

新しいInstapageUIで今日目にするのは、常に改善されているユーザーエクスペリエンスを提供するための反復設計の美しいストーリーです。 それは、マテリアルデザインの実装を採用し、それを移行（および一時的）設計システムに進化させることから始まりました。 より明確にすることを目的として、これを「クリスタル」と呼びました。

Crystalは、デザイン言語をあまり変更せずに、マテリアルデザインをInstapageのニーズに適合させることを目的としていました。 それは主な課題に対処しました—必要なすべての設計要素を利用可能にし、文書化し、Angularコードスニペットを用意します。 私たちは2019年半ばに作業を開始し、昨年末に終了しました。最後のステップである「 CrystalClear 」と呼ばれる独自の視覚言語の作業を開始するためです。

Crystal Clearは、移行の最終ステップです。これは、独自のUIであり、Instapageのニーズに合わせて調整され、必要な詳細を慎重に作成した独自の視覚言語です。

UldisLeitertsのチーフデザインオフィサーは次のように説明しています。

反復プロセスとして、作業は決して行われません。 まだ修正、改善、更新中です。 たとえば、グリッドの一部にはまだ作業が必要です。 しかし、私たちは物事を内部に留めるのではなく、私たちの仕事を共有したかったのです。なぜなら、私たちは予想される「最終」バージョンを誇りに思うだけでなく、デザインの反復性とそれが機能をどのように果たすかを誇りに思っているからです。

Crystal Clearの最初のリリースとその後の更新により、私たちが作成するのが大好きな製品であるInstapageのお客様のエクスペリエンスが継続的に向上することを願っています。

Instapage UIの新機能は何ですか？

全体として、以下に示すように、顧客のコンテンツが最初に表示されるように、ユーザーインターフェイス全体のノイズを除去しました。

UXコピー

移行期のCrystalデザインとともに、UXライターを才能のあるデザインチームに紹介しました。 Instapageはエンジニアによって作成されたので、あなたが見たコピーもそうでした。 それは私たちに役立ったが、それはまた改善の余地を残した。

たとえば、ある空の状態のメッセージには「ダッシュボードは孤独です」と書かれていました。それ自体は何も悪いことではありませんが、私たちが目にする本格的なビジネスソフトウェアに最適な言語ではない可能性があります。 InstapageのUX /コンテンツライターであるMateuszSochońは、Crystal Clearを使用して、トーンとメッセージの一貫性を高めました。 マテウスが言うように：

すべてのバンプを解決することで、すべての空の状態とユーザー主導のコミュニケーションをまとまりのあるものにしました。 構文またはメッセージングトーンに厳密に関連する改善の余地がある場合は常に、コピーを変更しました。

新しいスタイルと色

ユーザーの生産性を高めるバランスの取れたインターフェイススタイルを見つけるために、カラーパレットとスタイルをニュートラルなグレースケールトーンに更新しました。 新しいカラーパレットは装飾的ではありませんが、はるかに機能的です。 例として、ロイヤルブルーはアクション専用に予約されており、主にCTAボタンです。

とはいえ、優れたデザインは目に見えず、チームは優れたデザインのルールを作成したディーター・ラムスからインスピレーションを得ました。 ラムズの原則から、チームはインターフェースをより時代を超越するように更新しました。

前：クリスタル

現在：クリスタルクリア

新しいレベルの階層と影の削除

新しいレベル規則により、コンポーネントと要素の階層の概念を、より目的を持って整理された方法でUIに導入できます。 Crystal Designシステムで見つかったさまざまなコンポーネントがさまざまなレベルで表示され、いくつかの要素が強調表示され、視覚的にまとまりのあるコンテキストグループにグループ化されます。

アプリケーションには、次の4つの主要なレベルがあります。

• レベル0：残りのすべてのコンテンツの背景として機能します
• レベル1：コンポーネントの大部分が表示されるレベル
• レベル2：下位レベルの要素をその下でスクロールできるようにします
• レベル3：すべての下位レベルに表示されるオーバーレイ要素

（注：中級1.5レベルは、レベル1、2、または3の一部に表示されているが、それでも上位レベルの下に非表示になるすべてのコンポーネントを収容するレベルです。このようなコンポーネントには、ツールチップ、ポップオーバー、ドロップダウンが含まれます。新しい更新中間状態からシャドウを削除します。レベルに関係なく、より明るく視覚的に一貫性があります。）

さらに、UIをクリーンに保つ要因の1つは、シャドウの使用を最小限に抑えることであることを学びました。 マテリアルデザインは歴史的に装飾に影を使用していましたが、Instapageは影を使用してオーバーレイなどの主要なレベルを分離しています。

一貫性のある輪郭のある図像

アプリ全体で、メニューやドロップダウンなどに図像が表示されます。新しい図像はよりクリーンでシンプルです。

別の間隔グリッド

すべてのインターフェースの背後には、構造とグリッドの両方の強固な基盤があります。 新しい構造グリッドを改善する必要がありました。CrystalClearを使用すると、インターフェイスに余裕ができ、ユーザーがより簡単にスキャンできるようになります。

丸みを帯びた角をなくす

この更新はより微妙ですが、設計チームは丸みを帯びた角を排除することがより最先端であると考えているため、指摘する価値があります。

ビルダーUI

新しいCrystalClearアップデートがビルダーにどのように実装されているかを確認できます。 画像、CTAボタン、ロゴを除いて、グレースケールパレットに注意してください。

私たちが学んだこと

UI開発の責任者であるŁukaszGrądzkiは、チームとテクノロジーがどのように改善されたかを強調しています。 さらに、2016年に行った投資が今どのように報われたか：

過去4年間で、私たちは一般的なコンポーネントを大まかにまとめたものから、今日では本格的な設計システムと呼ぶことができるものに変化しました。 すべての製品と内部ツールで共有されるシステム。

参考までに、2016年には、フロントエンド側でアプリケーション全体を書き直し、UIキットの最初のバージョンを実装していました。 タスクを完了するのに3か月以上かかり、約12人のチームメンバーが関与しました。 また、アプリケーション自体が現在に比べて比較的小さかったことにも言及する価値があります。 これで、1つの開発サイクルで大きな問題なしに完全なInstapageアプリケーションの再設計を展開することができました。

新しいUIを自分でチェックしてください

新しいCrystalClear設計システムは、最も重要なこと、つまりInstapageアプリケーションを使用している理由の本質を明確にします。 私たちはあなたがあなたの毎日のInstapageの使用法で、タスクに集中できるようにしたいと思っています。

新しいUIを使用して改善する方法やフィードバックについてご意見がございましたら、お気軽にお問い合わせください。 ここにサインインして実際に体験し、チームへの参加に興味がある場合は、募集中のポジションを確認してください。