デザイナーがアプリケーションをデザインする際に、描画した内容が GeneXus でどのように解釈されるのかを説明します。
注: この記事を読む前に、優れたデザインのアプリケーションを一度で実現するためには、次の 2 つのルールがあることを覚えておいてください:
1. デザインはシンプルにします。
2. デザインする際には整理整頓を心がけます。
これらのルールを守ることで、スムーズなコラボレーションが促進され、デザイナーと開発者の足並みが揃い、効率的なワークフローが実現します。
共通のエレメントをデザイン内で再利用する場合に使用します。
GeneXus では、これらのデザインエレメントが
Stencil オブジェクトとして解釈され、デザインで付けた名前が使用されます。
関連情報:
Sketch のシンボル、
Figma のコンポーネント。
デザイナーがアプリケーションのパネルを描画する領域を定義します。
GeneXus では、これらのデザインエレメントが
Panel オブジェクト (モバイルアプリケーションの場合) または
Web Panel オブジェクト (Web アプリケーションの場合) と解釈され、デザインで付けた名前に接頭語「View」を付加した名前が使用されます。
関連情報:
Sketch のアートボード、
Figma のトップレベルフレーム。
デザイナーは、アニメーションを含むアートボード間の関係を定義できます。
GeneXus では、アートボード間のリンクがパネル間の
呼び出し、またはバックリンクの場合は
Return コマンドとして解釈されます。
フォームの [ Enter Effect ] / [ Exit Effect ] トランジションが設定されている場合はそれが使用されます。
関連情報:
Sketch のリンク、
Figma の操作。
注:
- これらの操作は GeneXus で、リンクが設定されたレイヤーを表すコントロールのイベントを通じてモデル化されます。
- アートボード間のリンクを通じて操作をデザインするときは、ループにならないようにします。
- Figma ファイルでは、アニメーションはサポートされていません。
デザイナーがデザインエレメントを整理し、構造化できるようにします。
GeneXus は、含まれるエレメントが不連続でセル内に配置できる場合、デザイン内のこれらのコンテナエレメントを
テーブルコントロールとして解釈します。一方、エレメントが重なっている場合、GeneXus はコンテナを
キャンバスコントロールとして解釈します。さらに、コンテナは意味的な構造 (グリッド、ボタン、チェックボックス、コンボボックス、ラジオボタンなど) を表すことができるため、GeneXus は適切なコントロールを解釈するための
表記規則を必要とします。
関連情報:
Sketch のレイヤーのグループ化、
Sketch のスマートレイアウト、
Figma のフレーム、
Figma のグループとフレーム、
Figma の自動レイアウト。
画像は、どのようなアプリケーションでも、ユーザーエクスペリエンスを改善し、ユーザーの関心を引くために重要なリソースです。また、複雑なコントロール (カレンダーなど) や描画 (アイコンなど) は、エクスポート可能とマークし、画像を生成したほうがいい場合があります。そうすれば、開発者が実際のコントロールを容易にアプリケーションに統合できます。
GeneXus では、いずれのリソースも
Image オブジェクトとして解釈され、ナレッジベースに格納されます。その後、以下のものとしてターゲットパネルにロードされます:
関連情報:
Sketch の画像、
Sketch のエクスポート可能なレイヤー、
Figma の画像、
Figma のエクスポート可能なレイヤー。
注:
- GeneXus は、.png、.jpg、.jpeg、.gif、および.svg の画像形式をサポートしています。
- PNG/JPEG 形式の画像としてエクスポートされるレイヤーには、少なくとも 1 倍の解像度が必要です。
- コンテナに収まる画像変数定義が必要でも、background-image の参照 (静的な動作) にはしたくない場合は、その画像だけの Group/Frame を作成する必要があります。
テキストは、エンドユーザーに情報を伝達するためにデザインに欠かせないエレメントです。内容だけではなく、サイズ、色、配置、フォント、大文字/小文字、固定化 (レスポンシブ動作) などの表示方法も情報の伝達に影響します。それぞれのビジュアル情報を再利用するためには、Text-Styles の使用をお勧めします。
GeneXus では、テキストは
VarChar データタイプの変数として解釈され、開発者が必要に応じて変更できます。ただし、テキストレイヤーが
Static 規則で定義されている場合は、テキストは
テキスト ブロック コントロールとして解釈されます。一方、すべてのテキストに
デザインシステムの [ Styles ] エレメントでスタイルクラスが定義されます。ただし、テキストスタイルを定義した場合は、同じテキストスタイルを持つテキストレイヤー間で同じ
[ Class ] プロパティ値が共有されます (つまり同じスタイルクラス)。テキストスタイルで色を定義すると、対応する
デザインシステムの [ Tokens ] エレメントの #color グループに追加され、ターゲットのスタイルクラスから参照されます。
また、テキストにカスタムフォントがある場合、GeneXus では
File オブジェクトとしてインポートされ、
@font-face rule として
デザインシステムの [ Styles ] エレメントに含められ、対応するスタイルクラスで設定されます。
関連情報:
Sketch のテキストレイヤー、
Sketch のテキストスタイル、
Figma のテキストレイヤー、
Figma のテキストスタイル。
注:
- GeneXus は、.ttf、.otf、.eot、および .woff のフォントファイル形式をサポートしています。
デザインに .ttc または .otc フォントファイルがある場合は、「DesignOps - よくある質問とトラブルシューティング」を参照してください。
- コンテンツの長さや大きさがさまざまである場合は、テキストボックスに十分な水平方向と垂直方向のスペースを確保してください。
スタイルは、ビジュアルデザインを再利用する手段として用意されており、次の ２ つのカテゴリがあります: テキストスタイル (上記) とレイヤースタイルです。レイヤースタイルの場合、デザイナーは塗りつぶしと境界線のスタイルを定義できます。
GeneXus では、テキストとレイヤーのスタイルが
デザインシステムの [ Styles ] エレメントのスタイルクラスとして解釈されます。
関連情報:
Sketch のスタイル、
Figma のスタイル。
カラーは、デザイン用に色スキームを定義することが目的です。カラーはデザインの印象を左右し、アプリケーションや操作方法の理解に役立ちます。
GeneXus は、
デザインシステムの [ Tokens ] エレメントで、カラースタイルを #color グループのエレメントとして解釈します。これは、
デザインシステムの [ Style ] エレメントで定義されるターゲットのスタイルクラスから参照されます。一方、raw カラー定義 (16 進数表現を使用) は、レイヤーにリンクされた
デザインシステムの [ Styles ] エレメント内でそのまま保存されます。
関連情報:
Sketch の色変数、
Figma の色ペイント。
注:
-
塗りつぶしのカラーの解釈はレイヤーの種類によって異なります:
- フレームレイヤーと長方形の図形が背景色を定義します。
- テキストレイヤーはフォントカラーを定義します。
サイズ変更の制約は、レスポンシブデザインの処理に重要な機能です。アプリケーションが、サイズや解像度が異なるデバイスで実行される可能性を考慮に入れます。レイヤーが拡大/縮小に対応していない場合は固定サイズを使用し、位置を変更できないエレメントは端に固定します。
GeneXus では、デザイナーが描画したコントロールを含める
テーブルコントロールの生成時に、サイズ変更の制約が解釈されます。設定する制約に応じて、すべてのコントロールがテーブル内のセルに、相対的 (%) または絶対的 (dip/px) なサイズと位置で配置されます。コントロールが重なる場合、GeneXus では
キャンバスコントロールが生成されますが、重なりの順番を定義する
[ Z-Order ] プロパティも適用されます。
関連情報:
Sketch のサイズ変更の制約、
Figma の制約、
Figma 自動レイアウトサイズ変更。
注:
- Group/Frame がテーブルとして定義され、含まれるエレメントがアンカーを持つ場合、セルとコントロール自体の間の残りのスペースがマージンとして定義されます。
[ Fix position when scrolling ] プロパティは設計プロパティであり、これにより、オブジェクトの位置を固定し、スクロールしても同じ位置に表示されるようになります。たとえば、ヘッダー、フッター、フローティングボタンに使用します。
GeneXus は、デザインのエレメントのうち [ Fix position when scrolling ] プロパティが選択されたものすべてをメインテーブル (キャンバスコントロールとして設定) の一部として解釈します。このプロパティが選択されていないエレメントは、テーブルコントロールの一部になります ( [ Control Name ] プロパティには「Scrollable」の接尾語が付きます)。
モバイルでは、スクロール時の固定位置がないエレメントを含むテーブルは、
[ Auto Grow ] プロパティが False で、
[ Overflow Behavior ] プロパティの値が Add Scroll になります。
Web では、
Design System オブジェクトで [ Fix position when scrolling ] プロパティが定義されているエレメントのスタイルが「position: absolute」と設定されており、それぞれの位置/サイズは、top、left、bottom、right、width、height のプロパティで指定されます。
関連情報:
Sketch での固定エレメントの作成、
Figma での固定オブジェクトの作成。
注:
- [ Fix position when scrolling ] プロパティがチェックされていないエレメントが重なった場合、スクロール可能なテーブル ( [ Control Name ] プロパティが「Scrollable」の接尾語を持つ) は必ずキャンバスになり、テーブルのラッピングはキャンバル上で実行されます。
- シンボルまたはコンポーネントに対しては [ Fix position when scrolling ] プロパティは適用しないでください。位置はシンボルに対して定義されます。インスタンス化されるアートボード (またはトップレベルフレーム) に対しては定義されません。
このセクションは、
GeneXus 17 以降に適用されます。
開発者向けガイド