EditorXを使用して強力なレスポンシブWebサイトを構築して起動する方法

これは、すべてのものの設計に精通している熱心なデザイナー、開発者、および製品の専門家のチームによる高度なWebビルダーであるEditorXをレビューするスポンサー記事です。 ご協力ありがとうございます！

デザイナーとして、私たちはツール内で多くの創造的な自由を持っていることに慣れています。 私たちは直感的に物事を選択、移動、微調整して、見栄えが良くなるようにします。 作業が設計ツールを離れると、このレベルの制御を予測不可能で多様で流動的なブラウザー環境に渡します。 そこで、私たちの決定のいくつかは突然洗練される必要があり、変更を導入したいので、コードに飛び込む必要があります。 または、今後の誤解を避けるために、これらの変更を明確かつ明確に説明してください。 後者の部分は、関係するすべての関係者にとって苛立たしいものになる可能性があります。

Webビルダーは長い間存在していましたが、プロとして使用できるようになったのはつい最近のことです。 多くの企業にとって、設計とコードのギャップを埋めることは最重要事項であり、多くの場合、この問題は、すべてのチームが独自の方法で解決しようとする最も重大な問題点と見なされています。

この記事では、専門家や代理店がWebサイトを構築するための洗練されたプラットフォームであるEditor Xについて説明します。これは、ギャップを永久に埋めるという野心的な目標に基づいています。

エディターXとは何ですか？

過去にWebビルダーに出くわした可能性は高く、多くの場合、これらのツールの結果について懐疑的で疑問があります。 このようなビルダーの多くは、ある程度のカスタマイズが施された事前に作成されたテンプレートに大きく依存しています。 Editor Xは、プロのデザイナーやエージェンシーがさまざまな柔軟なコンポーネントと一連の高度な機能を備えたWebエクスペリエンスを作成するためのプラットフォームを提供することにより、それをはるかに超えています。

Editor Xの機能を確認する最良の方法は、Editor Xを使用して何かを構築することです。この記事では、最初からWebサイトを作成します。

ツールに慣れる

Editor Xを初めて開くと、新しいサイトを作成するための最初のステップがガイドされます。 ゼロから開始するか、プラットフォームが提供する多くのテンプレートの1つを選択するかを選択できます。

Editor Xは確立されたパターンに従っており、設計経験のある人なら誰でも数分以内に快適に使用できます。 ほとんどの場合、要素を追加し、キャンバス上で要素を移動し、プロパティを調整するという同じワークフローを繰り返します。

左上には、要素の追加、レイヤーのナビゲート、ページの管理に役立つパネルのトグルがあります。 次に、ワークスペースの中心にキャンバスがあり、ページのデザインを直接操作します。 キャンバスのサイズも変更できるため、さまざまなビューポートを簡単に試すことができます。 キャンバスから何かを選択すると、右側に[インスペクター]パネルが開きます。

チーム全体が新しい設計についての会話に早く参加するほど、より多くの問題を早期に解決できます。 多くの場合、スクリーンショットを撮ってSlackに貼り付けるか、別のツールを使用してクリック可能なプロトタイプを介してデザインについて話し合う必要があります。 Editor Xでは、チームメートをプロジェクトに招待し、チームメートに個別の役割と権限を割り当てることができます。 ページまたは特定のコンポーネントにコメントを残すことで、チームとリアルタイムで通信するオプションもあります。

ウェブサイトの構造を作成する

コンテンツの追加を開始する前に、ページのスケルトンとして機能するセクションを作成します。 Editor Xのセクションは、基本的にコンテンツを保持する大きなコンテナーです。 新しいページを作成するとすぐに、ヘッダーとフッターのセクションがすでにキャンバスに追加されているのがわかります。 新しいセクションを追加するには、既存のセクションをクリックすると、その端に青い「+」アイコンが表示されます。

新しいセクションを追加するたびに、使用するレイアウトについて尋ねられます。 単純なセクションの場合は、空白を選択します。 より複雑なものが必要な場合はいつでも、グリッドとレイアウトのどちらかを選択できます。 どちらもCSSグリッドとフレックスボックスの概念に似ており、違いを理解する必要がある場合は、ここで詳細を学ぶことができます。

また、既存の事前に設計されたセクションのいくつかを調べて、必要に応じてそれらを使用することもできます。これらは、すぐに使用できる応答性があり、テーマに自動的に適応します。

コンテンツの追加とページのスタイリング

EditorXに要素を追加するのは簡単です。 「追加」パネルを開き、要素をキャンバスにドラッグします。 そのパネル内には、さまざまな要素、コンポーネント、およびセクション全体があり、これらがWebサイトの構成要素になります。

キャンバスにドロップするすべての要素は、簡単に移動および整列できます。 「ドッキング」機能を使用して、画面サイズの変更に要素がどのように反応するかを制御することもできます。 画面のサイズが変更されると、ドッキングオプションによって、さまざまなタイプのコンテナ内の要素の垂直方向と水平方向の位置が決まります。

タイトル、段落、ボタンを追加して、ヘッダーセクションの作業を開始します。 それらをキャンバスに配置したら、小さい画面サイズでの重複を防ぐために、それらをスタックに変換します。

スタッキングは、キャンバス上で上下に配置されている要素間の関係を制御する簡単な方法です。 要素のグループをスタックするには、それらを一緒に選択し、上部に表示される[スタック]オプションをクリックする必要があります。

セクションの右側に、イラストに置き換える画像を追加します。 これを機能させるには、[画像の変更]をクリックして、アセットをメディアライブラリにアップロードするだけです。 追加したアセットとは別に、無料のストックフォトと事前にデザインされたイラストの大規模なライブラリに直接アクセスできることに気付くでしょう。

「仕組み」セクションの3つのステップを実装するために、3つのアイテムと間に20pxのスペースがあるリピーター要素を使用します。 リピーターは基本的にアイテムのリストであり、最初のアイテムのスタイルとレイアウトが残りのアイテムに対して自動的に繰り返されますが、コンテンツは異なる場合があります。

まず、最初の項目にタイトルと段落を追加して、それらがリアルタイムで繰り返されることを確認します。 その上に、[クイック追加] →[コンテナ] →[インスペクター] →[デザイン]→[コーナー]に移動して、コンテナー内に境界線とテキスト要素を持つコンテナーを追加します。

ヘッダーのコンテンツができたので、次はいくつかのスタイルをヘッダーに適用し始めます。 通常のルートで要素ごとにスタイルを適用することもできますが、 「テーママネージャー」を使用して、これらの変更をあらゆる場所で自動的に定義するグローバルなタイポグラフィとカラースタイルを作成することもできます。 これはページの範囲を超えているため、サイト全体のスタイルに一致させるために使用できます。

エディターのトップバーにあるテーママネージャーアイコンをクリックします。 そこから、サイトのグローバルテキストとカラースタイルを管理できます。 まず、背景色を＃030F1Dに変更し、アクションアイテムの色を＃ #030F1Dに変更します。 次に、見出しのフォントをSoraに変更し、パレットに合わせてタイポグラフィの色を調整します。

ツールを使用して作成するすべてのWebサイトで使用できるデザインライブラリにテーマを保存できるため、この概念はさらに進んでいます。 これにより、チームは設計システムを簡単に実装および管理できます。 また、さまざまな製品で再利用したい、またはクライアントのために一連の製品を維持したい場合に、一連のテーマやデザインに取り組むことを想像してみてください。 これにより、かなりの時間を節約でき、1つの中央の場所から管理できます。

次のセクションは、製品のショーケースとして機能します。 まず、見出し、サブ見出し、および画像要素をキャンバスに追加し、それらをスタックに変換します。 次に、それらを中央にドッキングし、セクションの高さを増やします。

オーバーラップ効果を実現するために、2つの別々の画像要素にパーティクルを追加し、それらを背面に表示されるように配置します。

最後に、パレットに一致するように色を更新します。背景には#FFECE4を使用し、サブヘッドラインの色は#836153になります。

フォームはほとんどのウェブサイトに不可欠であり、私たちの場合、私たちの製品に興味を持っている訪問者の連絡先情報を収集するためにフォームが必要になります。

フォームを作成するには、[追加]パネルに移動し、[連絡先とフォーム]を選択する必要があります。そこから、開始点として使用できるさまざまなテンプレートを確認できます。 このページでは、キャンバスにドラッグして「お問い合わせフォーム」を選択します。

「フォーム設定」を選択することでカスタマイズできます。 そこから、フィールドを編集して、名、名前、メールアドレス、会社名を入力します。 最後に、フォームを選択して[新しいフィールドの追加]をクリックし、連絡先フィールドのリストから[用語]チェックボックスを選択して、2つの同意チェックボックスを追加します。 これにより、GDPRなどの規制への準拠を維持できます。

最後のステップでは、Webサイトにメニューを追加します。 このツールを使用すると、シームレスなナビゲーションによって多くのページを結び付けた複雑なWebサイトを作成できますが、この場合、この特定のページのセクション間を移動するだけで済みます。 この目的のために、 「アンカー」と呼ばれる機能を使用します。 メニューの一部となるセクションを確認し、後でメニュー設定で使用するアンカーを追加します。

任意の要素を選択し、エディターの右側にあるインスペクターパネルの「アンカー」セクションをクリックします。 次に、トグルをクリックして、アンカーに名前を付けます。 ナビゲーションに含めるすべてのセクションについて、これを繰り返します。

メニューに追加するには、[メニューの管理]、[リンクの追加]の順にクリックします。 そこから。 リンクするアンカーオプションとアンカーを選択する必要があります。

サイトを生き生きとさせる

サイトをよりインタラクティブで特徴的なものにする1つの方法は、要素にアニメーションを追加することです。 もちろん、プラットフォームにアニメーションを追加して、キャンバス上の任意の要素またはセクションに適用することもできます。 これを実現するには、アニメーション化する要素を選択してから、[アニメーション]アイコンをクリックする必要があります。

箱から出して使用できるプリセットはたくさんありますが、継続時間や遅延などの変数を微調整するオプションもあります。

この例では、キャンバス上のすべての見出しと画像に微妙なフェードインアニメーションを追加したいと思います。

さまざまな画面サイズのデザイン

デスクトップファーストまたはモバイルファースト用に作成されたモックアップを見るのは一般的ですが、実際には、両方を同時に作成する必要があります。 コンテンツブロックに定義する優先順位は、画面サイズごとに変更する必要があるかもしれませんが、適切な要素に適切な重点を置き、デスクトップとオンの両方に適切な方法で配置する方法を検討する必要があります。モバイル。 このツールを使用すると、個々のブレークポイントを設計し、流動的で相対的なサイズの測定単位を使用することで、これを実現できます。

明らかに、必要な場合にのみブレークポイントを追加することをお勧めします。これにより、小さなビューポートから大きなビューポートに成長するサイトをプレビューするときに、カスタムブレークポイントを追加できます。 もちろん、ツールを離れることなくそれを行うことができます。 ブレークポイントが必要なときはいつでも、ブレークポイントの横にある3つの点線のメニューをクリックして、ブレークポイントを追加（または既存のブレークポイントを編集）できます。

その時点まで相対サイズを使用している場合、要素の多くはすでに適切にサイズ変更されています。 残りの部分では、さまざまなブレークポイントを通過し、デザインオーバーライドを作成して、すべてが期待どおりに表示されることを確認します。 行った変更は、選択した特定のブレークポイント範囲に適用され、それらもカスケードされます。

実世界でのサイトの公開とテスト

もうすぐ着きます！ この時点で、「公開」ボタンをクリックして公開する必要があります。 そこから、私たちのページにはドメイン名が割り当てられ、誰でもアクセスできます。 無料利用枠には上部にバナーが付いていますが、ツールが提供する機能を試すには十分です。 もちろん、それは有料のティアで消えます。これはおそらくほとんどの企業が使用するティアです。

それとは別に、ページはうまく機能しています。 目立ったパフォーマンスの欠点はありませんが、より深刻なストレステストを行う必要があります。 この目的のために、GoogleによるLighthouse監査を使用します。これにより、速度、アクセシビリティ、SEOパフォーマンスなどの特性の概要がわかります。

ただし、事前に作成されたビルディングブロックだけに依存する必要はないことに注意することが重要です。 プロジェクトに複雑な機能を組み込む必要がある場合は、それを行うこともできます。 実際、独自のJavaScriptを追加し、 APIに接続し、npmパッケージを使用して、Webモジュールとのクライアントからサーバーへの対話を自動化することができます。 これらの機能は、 Veloと呼ばれる統合開発プラットフォームを介して利用できます。

しかし、この記事の範囲では、コードを書き直したり修正したりせずにいくつかの要素を組み合わせましたが、Webサイトビルダーに通常期待されるものと比較すると、結果は非常に安定しています。 全体として、特にデスクトップでのパフォーマンスとアクセシビリティのスコアは非常に高くなっていますが、モバイルデバイス用にサイトをさらに最適化する必要があるかもしれません。

まとめ

Webビルダーに関して言えば、結果に失望することは珍しくありません。アクセシビリティとパフォーマンスの問題がたくさんあり、マークアップがかさばって乱雑で、CSSが過度に具体的で、JavaScriptが遅いのです。 Editor XでのWebサイト作成プロセスを調べると、コラボレーション機能、レスポンシブテスト、およびかなりの要件が必要になる可能性のあるいくつかのコンポーネントを含めながら、優れたWebサイトを構築するための簡単な環境を提供するためにかなり進んだプラットフォームのようです。プロトタイプを作成するか、別の方法でセットアップするための少しの時間。

コンポーネントの再利用を計画している代理店や組織と協力している場合、またはさまざまなクライアント向けにサイトを迅速にセットアップして保守する必要がある場合は、EditorXを検討する価値のある興味深いオプションになる可能性があります。 個人およびビジネスプラン、オンライン支払い、eコマース、ドメインとストレージのサポート、オンライン予約、チケットとイベントの管理、およびビデオの現金化が付属しています。 迅速なプロトタイプと広範なクライアント作業の両方で、必要なものが見つかる可能性が高くなります。

Editor Xアカウントを無料で作成し、文字列を添付せずにすべての機能をテストできます。