光学アライメントとユーザーインターフェイス

こんにちは、私の名前はIvan Grekovです。私はBadooフロントエンドチームで働いており、会社のプロジェクトのユーザーインターフェイスのレイアウトに携わっています。

インターフェイスレイアウトの操作では、Adobe PhotoshopやSketchなどのグラフィックエディターを使用します。 それらでは、すべてのレイヤーはデフォルトで長方形のコンテナです。 あるレイヤーを別のレイヤーに対して中央に配置すると、長方形のコンテナーの中央が配置に使用されます。 この方法は、アイコンを操作するときに非常に不便です。これは、整列した図形が長方形のコンテナとは大きく異なる場合があるためです。 また、非対称図形の面積と座標点が、それが内接する長方形と異なるほど、図形とそのコンテナーの中心の違いが顕著になります。 これにより、インターフェイスアイコンの構成が不均衡になります。

この状況は設計分野の専門家にはよく知られていますが、通常は手作業で解決されるため、特定の知識とスキルが必要です。 そのため、即興のツールを使用してこの問題を解決するレイアウト設計者と開発者に困難をもたらす可能性があります。

例を挙げましょう。 グラフィックエディタでアイコンを作成しましょう-円に刻まれたひし形。 この図は、ダイヤモンドの下部が上部よりサイズが小さいことを示しています。 これはそうではありませんが、ダイヤモンドは画像の中心に対して上方にシフトしているようです。

これが上記の不均衡です。 ユーザーインターフェイス要素のレイアウトの段階で顕著になります。 事前に問題を特定するには、設計を受け入れてレイアウトの品質を評価するときに、アイコンの形状が視覚的にどのように整列されているかに注意を払う必要があります。 アイコン内でバランスが取れていない場合（この例のように）、光学補償が必要になります。

光学補償とは、他のレイヤーと比較して視覚的なバランスを実現するために図をシフトする距離です。 これを行うには、コンテナーの中心の座標をFigureの中心の座標に対応するように変更してから、Figureを新しい中心に合わせます。

図の中心の座標の検索と、この投稿でのレイヤーの後続のアライメントは、光学アライメントと呼ばれます。 この用語は、グラフィックデザイナーがフォントの文字サイズと文字間の距離のバランスを取ることを意味するために使用されます。 ただし、メディアの記事 （ 記事1および記事2 ）では、この方法はレイヤーのグループ内で形状を揃えるのに適していると述べています。

光学的位置合わせは「目で」行うこともできます。優れた経験とバランス感覚を備えたデザイナーはこれを行うことができます。 このアプローチでは、フィギュアの許容距離と寸法に厳密な基準はありません。デザイナーは、スクリーンの光学バランスを達成するためにフィギュアを移動またはサイズ変更する割合を個別に決定します。 しかし、このアプローチはしばしば主観性につながります。デザイナーの意見はユーザーや顧客の意見と一致しない場合があります。 ある場合には画像が視覚的に位置合わせされており、これは疑わないはずであり、もう一方では-図の中心に「目」による作業のために発生した5-10％の誤差があり、アイコン内にオフセットがあることを判断する方法は？ グラフィックデザインでは、グリッド、距離、配置、およびインデントは、ブランドブックまたはガイドラインによって決定されます。これらは、プロジェクトのスタイルとデザイン要素を説明します。 これは、要素の配置に関する論争の解決に役立ちます。 ユーザーインターフェイスの場合、そのようなソリューションは、悲しいかな、どこにでもありません。

プロジェクトにユーザーインターフェイスのドキュメントがない場合、設計システムは使用されず、調整は設計者の責任です。 コーダーや開発者がデザイナーとそのような問題について議論することは重要です。 ただし、これはさまざまな理由で常に実行できるわけではありません。プロジェクトの期限はすでに概説されており、再設計の時間はありません。デザイナーには他のタスクがロードされ、設計プロジェクトは外部委託されました。 私はそのような入門的な状況で多くの状況に遭遇しました。「既製の」設計がファイルで提供され、それを適切かつ迅速に実装する必要があります。 この流れで、レイアウト設計者と開発者向けのアイコンの光学的配置について知っておくべきことについてお話します。これにより、新しいユーザーインターフェイスの開発タスクが、開発速度を落とすことなく効率的に実行されます。

まず、既存のソリューションを理解してみましょう。 以前に光学アライメントについて書いたものに慣れてみましょう。 2015年、前述の2つのメディアのうち、メディアからの1つの翻訳がHabréに掲載されました（ 記事1 ）。 そこでは、単純なアイコンの例が示され、2つの方法でレイヤーを整列することが提案されました。図を円に刻むか、軸の周りに回転させるかです。 これらの方法の主な利点は、使いやすさです。 そして、私はそれを試してみることにしました-異なるプロジェクトでの利点は、異なるアイコンの少なくとも100のバリエーションです。

光学調整の手順

アイコンの配置は、上記の方法およびフクロウの描画プロセスと共通していますか？ 両方の場合で最も興味深いものが裏に残っているという事実。 アイコンについて話をすると、焦点が自動的にずれて、図の中心を決定するという疑問が生じます。 翻訳された記事では、図の配置は読者の裁量で「手動で」行われることがしばしば言及されています。

デフォルトでは、シェイプレイヤーの中心は、シェイプを含む長方形のコンテナの中心点として事前に設定されています。 このアプローチでは、図の中心を検索する機能は提供されません。 そして、コンテナの中心の座標が自動的に決定される場合、図形の中心の座標は光学的位置合わせによって見つけることができます。 図の中心を見つけ、それを基準にして位置合わせします。

指示を出そうとする場合、日常業務で光学アライメントを適用するには、3つの簡単な手順を完了するだけで済みます。

• 目の前の人物がどのような形をしているかを判断します。
• 図の中心を見つけます。
• アライメントを実行します。

2番目のステップの単純な図と合成図では、アプローチが少し異なります。

そのため、最初の段階で各図のタイプを決定する必要があります。 ステップを詳細に分析してみましょう。最初のアプリケーションの後、開発者はすぐに光学アライメントの仕組みを理解できます。

シンプルな図。

ステップ1

グラフィックエディターは、最初に任意のFigureの中心をその長方形コンテナーの中心として定義します。 これは、どのような人物が目の前にいるかを理解するための前提条件です。 比較的単純な図を扱う場合、その中心は重心を決定するための特別な形式で見つけることができます。 三角形、平行六面体、およびその他の非積分図形には、個別の数式があります。 アイコンを中央に配置するポイントを見つけるのに役立ちます。

図形を円の境界に入力すると、その中心をコンテナーに合わせることができます。 このアプローチは、形状が少なくとも1つの平面で対称性を持っている場合に効果的です。

ビデオ再生アイコンのある例を見てみましょう。 それは非常に原始的であり、しばしば光学的不均衡の典型的な例です。 この状況を再現してみましょう。グラフィックエディターを開き、三角形と円を作成します。 次に、2つの形状を自動的に整列させてみます。 何が起こったのか見てみましょう：

アイコンに間違いがあります。 光学的不均衡の理由を理解してみましょう。

シンプルな図。 ステップ2

この図は、左の円の三角形が長方形、または正方形に均等に刻まれていることを示しています。 三角形の幾何学的な中心は、正方形のレイヤーの中心と一致しません。

それを修正しましょう：右の図のように、3番目の形状-円を追加します。 この円に三角形を入力してグループ化します。 次に、この要素グループを背景の円に揃える必要があります。

図の場所を確認します。

これで、図形は互いに対して光学的に位置合わせされます。 わかりやすくするために円形のコンテナを削除して、アイコンを比較してみましょう。

右のアイコンは、光学的に整列しているため、きれいに見えます。 単純な形状の問題に対する迅速な解決策を得ました。

複雑な図。

ステップ1

複雑な図（たとえば、合成図）がある場合、それを調整するには、もう1つのアクションを実行する必要があります。 会社のロゴやソーシャルネットワークなど、顕著な対称性のない人物を扱う場合、このアプローチの適用が必要です。

HotまたはNotのアプリケーションアイコンの例を理解してみましょう。

複雑な図形の場合、必要な円の最小半径を決定する必要があります（整列した図形のすべての詳細が完全に含まれている必要があります）。 単純な形状の場合と同様に、まず形状を円形のコンテナに収めます。 次に、複雑な図形の場合、必要な半径は、図形を中心に対して軸を中心に回転させることによって決定されます。

回転するとき、図形は円の境界を越えてはなりません。 これが発生したら、円の半径を大きくする必要があります。 このような形状の円形コンテナは、ほぼ同じ面積の単純な形状のコンテナよりも常に大きくなります。

複雑な図。 ステップ2

2番目のステップでは、親要素に対して形状の円形コンテナーを位置合わせします。 これでアイコンが整列するはずです。これを見てみましょう。

各コンテナーの内部では、図は中央にあり、コンテナーの境界から同じ距離にあります。 これは、複雑なアイコンの配置を確認する良い方法です。

特定のアイコンを使用する場合、これらの方法を使用すると、形状をすばやく効率的に配置できます。 ただし、デスクトップバージョンのBadooサイトの多数のアイコンを使用してそれらをチェックすると、次のことがわかりました。

• 記事は、異なる図形の中心検索方法を決定するための基準を指定していません（どの方法が三角形に最適で、どの方法が多角形のロゴに最適ですか？）。
• これらのメソッドは異なる座標を示し、その後チェックは「目で」行われます。
• 記事にリストされているメソッドの動作方法の説明はありません（すべてのアイコンではなく、動作します）。
• 記載されている光学アライメントの方法のいずれかが機能する図とその記号の明確なリストはありません（場合によっては、両方の方法が機能しません）。

特定のセマンティックの負荷なしに、誰かがインターフェイスのアイコンとして円に刻まれた円錐形または多角形を使用することはほとんどありません。 しかし、それでもさまざまなアイコンを整列させる方法を理解したいと思います。これは疑いの余地はありませんでした。 上記の方法は万能薬ではなく、グラフィックデザインの専門家でない場合は時間がかかります。 上記のすべてを説明するために、いずれかの方法を使用してみましょう。

ダイヤモンドアイコンを使用して例を続けましょう。 以下は、アイコン内の配置に関する2つのオプションです。左側の図形は長方形に内接し、右側の図形は円に内接し、両方のコンテナーは紫色の円に対して中央に配置されます。

ご覧のとおり、両方のオプションは、図を中央に揃える問題を解決するにはほど遠いです。 左のアイコンを下に、右のアイコンを上に配置したい。 ここでの円によるアプローチは最適ではないことがわかります。 また、アイコンの回転アプローチも試しましたが、3番目の結果が得られました。 3つすべてのケースで、光学補償のために追加のアクションを使用する必要があり、これは「目で」行う必要があります。

しかし、誰もが生来の垂直リズムの感覚と黄金比の感覚を持っているわけではありません。 したがって、「目で」整列する代わりに、あらゆる図形の中心を見つけることができる、普遍的で最大の抽象アルゴリズムから進める必要があります。 理想的には、このような光学アライメントプロセスは自動化する必要があります。 しかし、プロセスを自動化するには、それを理解する必要があります。 そのため、グラフィックデザインの境界を超えて、既存のソリューションと理論を検討して、最小限の時間と労力で光学的アライメントを実行することにしました。

理論のビット

アイコンの光学的配置は、幾何学の分野からの解決策と考えています。 位置合わせするには、幾何学的形状の中心点を見つける必要があります。 幾何学では、これは重心、英語のソースの図または重心の幾何学的中心を見つけるタスクと呼ばれます。 ウィキペディアによると、物理学と幾何学では、重心は中央値の交点です。 任意の2次元領域の幾何学的中心として機能します。

重心は、図のすべての点の位置の算術平均として表すことができます。 重心、重心、私たちの重心は、図の1点と見なされます。 ユーザーインターフェイスで作業するため、このような仮定は可能です。 重心の定義を通じて3Dオブジェクトモデルの中心または地理的境界の中心を探す場合、上記の概念を分離し、一般的な規則に多くの例外を追加する必要があります。 ただし、この投稿では、ユーザーインターフェイスアイコンの光学的な配置についてのみ説明しています。

重心の定義は、n次元空間内の任意のオブジェクトに適用されます。重心は、すべての座標方向での図形のすべての点の平均位置です。 大まかに言って、これは図の平衡点です。 ユーザーインターフェイスの場合、重心を決定するための式を使用して、図を揃える適切なポイントを見つけることができます。

重心の探索は、目の前にある人物を特定することから始まります。 多くのアイコンの場合、タスクは簡単です。

• 正方形、長方形、平行四辺形の重心は対角線の交点にあり、グラフィックエディターはこれらの図を操作するときにデフォルトで正しい座標を設定します。光学的な位置合わせは不要です。
• 円、リング、六角形の重心はこれらの図の中心点にあり、グラフィックエディターはレイヤーの配置に対応しています。
• 楕円の重心は軸の交点にあり、自動アライメントも正しく機能します。

結論：アイコンに対称中心がある場合、その重心は対称中心と一致します。 次の図では、円と正方形に1つの重心があります。 鉛筆-いいえ。

鉛筆の形などの多くの形では、追加の計算が必要です。

• 三角形の重心は中央値の交点にあります（三角形は異なるため、重心の計算後に光学アライメントを適用する必要があります。
• 半円の重心は、式（4 半径）/ 3πによって決定されます。 （この点に関して、図に光学補償を適用できます）;
• 台形の重心は、ベースの中心を結ぶ直線上にあります。

より複雑なまたは複合図の重心は、追加の計算を必要とします。 たとえば、上記の例のひし形のように、図を等しい部分に分割できる場合、重心を見つけるための次の規則が適用されます。

• アイコンに対称軸がある場合、その重心はこの軸上にあります。

さまざまな図の数式のリストは、Wikipediaのページで見ることができます（ ロシア語と英語では若干異なります）。

したがって、軸の1つでの図形の配置の程度を決定できます。 これは戦いのほぼ半分です。 しかし、図が非対称の場合はどうでしょうか？

対称性に関係なく、ほとんどの図形に適用できる重心を見つけるための3つの方法を分析します。幾何分解法、積分法、および有限点の重心の検索です。

最初の方法では、複雑な図をより単純な形式に分割し、この式を適用して座標を検索します。

ここで、単純な図形の重心の座標はGi（それぞれX軸とY軸）で示され、図形の領域はAiで示されます。

ただし、グラフィックエディターを使用し、この問題の解決を自動化する予定なので、図形をプリミティブに分割することを拒否し、対称性を無視して、図形の重心を計算できます。 これを行うには、統合方法を適用できます。

この場合、gはXの内側に1、外側に0をとるサブセットの特徴的な関数です。 この式から、X軸とY軸に沿った座標を取得します。

位置合わせのための図形のポイントの座標とその数が常にわかっているため、自動化のタスクをさらに簡素化できます。 図の幾何学的中心の座標は、次の方法で見つけます。中心の各座標は、すべての値の合計をこの軸に沿った図の座標の数で割ったものです（このアプローチは自動化に最も便利です）。 この段階で、光学アライメントの自動化プロセスと技術的ソリューションの作成の基礎が現れます。 不規則な使用のために、「目で」光学的位置合わせの方法に制限することができます。 ただし、大量のアイコンとユーザーインターフェイス要素を処理する必要がある場合は、自動化について考えるのが理にかなっています。

これを自動化する

インターネット上のソリューションを研究し、Adobe Illustrator CS3に基づくJavaScriptのソリューションを発見しました。

/* JET_Centroid.jsx A Javascript for Adobe Illustrator CS3. Purpose: Finds the centroid (center of gravity) of selected triangles and other straight-sided multigon paths and draws a user-defined circle at that location. To Use: Make a selection which includes normal paths. Call the script. */ var docRef = activeDocument; var markerSize = prompt("How large (in points) do you want the centroid marker to be?", 6); for(s = 0; s < docRef.selection.length; s++){ if(docRef.selection[s].typename == "PathItem"){ var currPath = docRef.selection[s]; var xTotal = 0; var yTotal = 0; for (p = 0; p < currPath.pathPoints.length; p++){ var currPoint = currPath.pathPoints[p]; xTotal += currPoint.anchor[0]; yTotal += currPoint.anchor[1]; } //end if for loop var centroidX = xTotal / currPath.pathPoints.length; var centroidY = yTotal / currPath.pathPoints.length; var marker = docRef.pathItems.ellipse(centroidY + (markerSize / 2),centroidX - (markerSize / 2), markerSize, markerSize, 0, 0); marker.strokeColor = docRef.swatches.getByName("Black").color; marker.filled = false; }//end if }//end for loop
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ソリューションを検討した後、Adobe Photoshop用に最終決定することにしました。幾何学的中心を決定するために、次の一連の手順を実行しました。

1. Photoshopで、図形を自動的に中央に配置します。
2. レイヤーのパレット（パス）で曲線のあるレイヤーを選択します。
3. 「スクリプト」メニューを開きます。
4. 「概要」を選択します。
5. GetCentroid.jsxを実行します。
6. 2つのガイドの交点は位置合わせの基準点であり、図の中心はその座標の上に配置する必要があります。

「内部」スクリプトは、次の手順を実行します。

1. すべての座標をピクセルにリセットします。
2. 曲線を含む選択したレイヤーを検索します。
3. 各レイヤーの各曲線で、ポイントの座標が収集され、各曲線の座標を持つオブジェクトが作成されます。
4. 各オブジェクトの領域を見つけます。
5. 各オブジェクトの重心座標を見つけます。
6. ガイドの値として、ページ幅とX軸に沿った値、Y軸に沿った高さと値の差を適用します。
7. 各座標軸に対して逆にガイドを構築します。

これにより、アライメント前に必要な光学補正量を推定できます。

スクリプトを使用した整列の例。

GitHubの私のリポジトリにあるスクリプトコードに慣れる（そしてダウンロードする）ことができます 。

同様のスクリプトを他のプログラムで使用できます。 D3 JSライブラリには、このようなメカニズムがすでに含まれています。 これは、必要に応じて、会社のアセンブリシステムまたは設計システムに同様の手順を実装できることを意味します。 または、Sketch用のプラグインを使用します。 または、独自に作成します。 プロジェクトのすべてのアイコンを揃えるために手動のソリューションを使用する必要はありません。 グラフィックエディタ用のプラグインとソリューションがあります。たとえば、Sketch用の有料Opticallyプラグインです。

そのような光学アライメントソリューションを作業にまだ適用していない場合は、開発されたユーザーインターフェイスを確認するのが理にかなっています。ほとんどの場合、要素の一部のアライメントを修正する必要があります。

光学アライメントを適用するタイミング

この質問に対する答えは、仕事の組織によって異なります。 可能であれば、デザイナーに渡すことができます。 理論的にはこれは可能ですが、実際には、ユーザーインターフェイス要素の調整が必要になる可能性があるため、開発段階とレイアウト段階で設計を確認する必要があります。

Badooでは、ユーザーインターフェイス用のアイコンを準備する際に、すべての画像が事前に最適化されています。SVGの行は単一のパスに結合され、コンテナーに合わせられます。 これらのアクションの一部は自動化されています。 開発者は、グラフィカルエディターを使用して形状を揃えます。 いくつかのアイコンを使用する場合、これにより、図形の中心が互いに相対的に移動する可能性があります。 この段階では、画像の歪みを避けるために光学的位置合わせを適用する必要があります。

アプリケーションの実践と機能

Badooユーザーインターフェイスは、アクション、ステータス、設定アイコンなど、さまざまなアイコンを使用します。 そして、多くの場合、それらは一列に並んでいるので、それらがすべて揃っていることが重要です。 光学アライメントを使用して、レイアウトと開発のペースを維持しながら、ユーザーインターフェイスの品質を向上させます。

光学配置により、個々のアイコン、同じタイプおよびサイズのアイコンの行のコンポジション内でバランスを維持できます。 3つのアイコンが一列に並んでいるとします。 内部に同じ背景、サイズ、形状の配置がある場合、それらは調和して見えます。 光学的位置合わせは設計上の欠陥を修正するのに役立ちますが、UI設計の基本的なルールに違反する万能薬ではありません-これはデザイナーによって排他的に解決される完全に異なるストーリーです（ページおよび個々のブロックの垂直リズム、画質などに違反することについて話している）。

光学アライメントに関しては、特定の制限と遭遇する困難があります。

たとえば、異なるブラウザのアイコンをスムージングします。 SVGアイコンには、ベクターグラフィックス、ポイント座標、およびシェイプとレイヤーに関するその他の情報が含まれています。 Badooでは、タイプに応じて特定のキャンバスサイズ（16ピクセルまたは22ピクセル）でアイコンを作成します。 そのようなアイコンの内側の図に奇数の座標を持つポイントが含まれている場合、中心に揃えると、SVG画像の鮮明さが失われます。 この場合、アイコンとその要素のサイズを編集できます。

さらに、光学アライメントを使用する場合の機能があります。

• 特定の条件での図の薄い要素または外部要素は、画像のセンタリングに影響しません（この状況は通常、スクリプトによって処理されます）。
• 隣同士にある同じ色の異なる図は、モニター画面に異なる色合いで表示されます。
• 同じ色で同じ幅/高さの図形ですが、形状が異なると、互いに整列していないように見えます。 たとえば、円は視覚的に同じサイズの正方形の隣に小さく表示されるため、円のサイズを大きくする必要があります。

開発者は、自分で最初の制限をバイパスできます。 残りの質問はデザイナーの能力の領域にありますが、ユーザーインターフェイスを使用する場合、開発者はこれらの点にも注意を払う必要があります。これにより、新しいインターフェイスデザインの導入に取り組む際の追加の負担を回避できます。

ページ上の他の要素に対するアイコンの整列は、多くの場合、制限として認識されます。 アイコンが単一レイヤーであり、コンテナに合わせて配置されているとします。 高さや配置が異なるコンテキストや周囲の要素が存在する可能性があるページに埋め込みます。 そうではないはずです。

ほとんどの場合、要素の配置の前にオブジェクトの位置が示され、視覚的な位置合わせが実行され、要素の垂直リズムが観察されるユーザーインターフェイス設計が先行します。 本格的なページデザインを準備すると、ユーザーインターフェイスを開発する際にこのような質問や不正確さを回避するのに役立ちます。開発者はページ上の要素の場所とその表示のコンテキストを明確に把握し、承認されたデザインに従うだけです。

この発言がアイコンの光学的配置にとって重要なのはなぜですか？ 多くの企業には要素ライブラリがあります。 要素のライブラリは、ページのコンテキスト外のユーザーインターフェイスの個々の詳細を表し、その存在により、レイアウトで要素を使用するときに開発を加速できます。 ただし、新しいページデザインまたはデザインプロトタイプが次元グリッド、ライブラリ要素の配置を考慮しない場合、この利点は機能しなくなります。 そのため、要素の設計とライブラリを扱う際に体系的なアプローチが存在することが重要です。

1. プライマリデザインに基づいて、ユーザーインターフェイス要素のサイズとバリエーションに関する情報を含む要素のライブラリが作成されます。
2. 後続のページ設計は、要素のライブラリに基づいています。
3. 設計と行サイズの調整は、要素のライブラリに存在するオプションと矛盾しないようにする必要があります（そうでない場合は、ライブラリを修正する必要があります）。
4. アイコンとユーザーインターフェイスのレイアウトは、要素の設計とライブラリと一致する必要があります。

仕事で光学アライメントを適用する方法？

光学アライメントは、設計またはレイアウトに誤りがあったかどうかに関係なく、ユーザーインターフェイスの欠陥を修正するのに役立ちます。 このメソッドは、ユーザーインターフェイスのリトマステストとして機能します。アイコンを使用した作業がどのように行われるかを実際に評価できます。 設計とレイアウトのプロセス、および完成したユーザーインターフェイスの実装を評価するプロセスの両方で注意する価値があります。

同僚がこのアプローチについて簡単に語ったとき、私は自分の仕事で彼らの推奨事項を積極的に使用し始めました。 光学アライメントを適用するには、その仕組みを理解することが重要です。 Badooに参加する前に私が取り組んださまざまなプロジェクトでこれを判断できます。すべてのタイプセッターと開発者が、テンプレートを作成し、既製のテンプレートとデザインを比較する際にPixel Perfectアプローチに従うわけではありません。 したがって、チームで作業するときは、使用するアプローチの統一について参加者に同意することが重要です。新しいチームメンバーは、シンプルで理解しやすい言語でそれらについて話す必要があります。

結論の代わりに

優れたユーザーインターフェイスは、各チームスペシャリストの作業の結果です。 ユーザーの画面上の要素の視覚的な調和を構築するプロセスで作成されます。 このような調和は、学際的な知識とスキルを適用することで達成できます。 例えば、設計と開発における幾何学のアプローチと方法の有能な応用。 私たちの場合、このアプローチは光学的調整です-出力のユーザーインターフェイスの品質を向上させるのに役立ちます。

PS注意深い読者は、菱形のアイコンがまだ整列していないことに気付くでしょう。 好奇心、盛ですが、これは幾何学的な式を使用して整列するのが難しい形式の1つです。 しかし、いつでも仲間のデザイナーに頼ってコンセンサスを得ることができます。

PPSダイアモンドの角をシャープにすると、アライメント用のスクリプトは良い結果を示します。