Shapes and Elements – OptiSigns

この記事では、デザイナーでシェイプとエレメントを作成・追加するためのすべてのオプションについて説明します。

デザインにシェイプとエレメントを追加することは簡単ですが、デザイナーには文字を際立たせるための豊富なオプションがあります。

デザイナーの基本要素についての詳細は、デザイナー入門ガイドをご覧ください。

シェイプとエレメントの追加

シェイプオプションを使用すると、既製のシェイプやエレメントをデザインに追加できます。

トップメニューからシェイプを選択すると、サイドメニューにエレメントタブが開きます：

ここで、デザインに追加するシェイプとエレメントのどちらかを選択できます。これらは非常に多くの種類があるので、ニーズに合ったものを選んでください。

シェイプまたはエレメントをクリックすると、デザインに追加されます：

シェイプは反応的で、自由にサイズ変更や回転ができます：

シェイプとエレメントのオプション

シェイプまたはエレメント自体には、完全なオプションセットがあります：

複製 - 選択したシェイプまたはエレメントの正確な複製を作成します
削除 - 選択したシェイプまたはエレメントをデザインから削除します
その他
- コピー - 選択したシェイプまたはエレメントを後で貼り付けるためにコピーします
- スタイルをコピー - 選択したシェイプまたはエレメントのスタイルをコピーして、別のシェイプまたはエレメントに転送します
- 貼り付け - クリップボードからエレメントを選択したシェイプまたはエレメントに貼り付けます
- 複製 - 選択したシェイプまたはエレメントの正確な複製を作成します
- コンポーネントを追加 -
- 削除 - 選択したシェイプまたはエレメントをデザインから削除します
- レイヤー - 選択したシェイプまたはエレメントのレイヤーを変更するオプション
  - 前面へ移動 - 選択したシェイプまたはエレメントを1つ上のレイヤーに移動します
  - 最前面へ移動 - 選択したシェイプまたはエレメントを最上層レイヤーに移動します
  - 背面へ移動 - 選択したシェイプまたはエレメントを1つ下のレイヤーに移動します
  - 最背面へ移動 - 選択したシェイプまたはエレメントを最下層レイヤーに移動します
- エレメントの整列 - 選択したシェイプまたはエレメントの配置を変更するオプション
  - 左
  - 中央
  - 右
  - 上
  - 中間
  - 下
- リンク - 選択したシェイプまたはエレメントにURLを追加します。
- アニメーション - 選択したシェイプまたはエレメントにアニメーションを追加します。

シェイプまたはエレメントをクリックすると、トップメニューが変更され、選択に直接適用されます：

カラー

カラーオプションを選択すると、サイドメニューにカラーセクションが開きます。これらのカラーのいずれかを選択すると、選択したシェイプまたはエレメントに適用されます：

ここで、プリセットカラー、このデザインですでに使用されているカラー、またはカラーピッカーオプションから選択できます。

カラーピッカー

カラーセレクター
現在選択されているカラー
カラースライダー
不透明度/透明度スライダー
カラーコード入力
コードスイッチャー - 16進数、RGB、およびHSLAカラーコードを切り替えます
以前使用したカラー

注意

不透明度/透明度スライダーは、カラーピッカーが適用される要素（シェイプ、テキスト、背景、またはカラーピッカーを使用できるその他の領域）に適用されます。

カラードロップツールを使用すると、任意のカラーを簡単に選択できます。

注意

カラーピッカーは特定のブラウザでは利用できません。

背景

背景オプションを選択すると、サイドメニューに背景セクションが開きます。これらのカラーのいずれかを選択すると、シェイプまたはエレメントの背景に適用されます：

ここで、プリセットカラー、このデザインですでに使用されているカラー、またはカラーピッカーオプションから選択できます。

リンク

リンクオプションを選択すると、シェイプまたはエレメントをハイパーリンクに変換できます。サイドメニューにリンクオプションセクションが開きます：

リンクを追加をクリックすると、URLを入力するか、アセットを選択するよう求められます：

リンクまたはアセットが選択されると、リンクオプションセクションにさらに多くのオプションが表示されます：

スケールセクションを展開すると、アセットに対するこのオプションが提供されます：

ここで、画像がどのようにスケーリングされるかを選択します。3つのオプションがあります：

フィット（デフォルト） - 画像を画面に合わせます。
ストレッチ - 画像を引き伸ばして画面全体を埋めます。
ズーム - 画像をズームインして画面全体を埋めます。大型ディスプレイの小さな画像にはお勧めしません。ぼやけてしまいます。

注意

URLが提供されている場合、スケールオプションは表示されません。ファイル/アセットを選択した場合にのみ、このオプションが提供されます。

設定セクションを展開すると、URLまたはアセットに対するこれらのオプションが提供されます：

表示時間（秒）- リンクがクリックまたはタップされたときに、メインデザインに戻るまでリンクまたはアセットが表示される時間。
プリロード - チェックすると、デザインと同時にウェブサイトまたは画像がロードされます。これにより、リンクがクリックされたときにウェブサイトがポップアップするまでの時間が短縮されます。ただし、ロードする必要のあるリンクが多数ある場合は、遅延が発生する可能性があります。

閉じる＆ナビゲーションバースタイラーセクションを展開すると、URLまたはアセットに対するこれらのオプションが提供されます：

このセクションは、画面にプッシュされたときに表示されるボタンを指します。このボタンをクリックまたはタップすると、元のデザインに戻ります。

アイコンの位置 - このアイコンが表示される場所を示します。デフォルトは下部中央ですが、上部または下部の任意の場所に配置したり、完全にオフにすることもできます。
アイコンスタイル - アイコンのスタイルを設定できます。ラベル、ソリッド、ラウンド、またはデフォルト（上記参照）から選択します
アイコンサイズ - アイコンのサイズを変更できます。小、中、大、またはデフォルト（上記参照）から選択します
アイコンカラー - デザインに合わせてアイコンの16進数HTMLカラーを変更します。
背景色 - デザインに合わせてアイコン背景の16進数HTMLカラーを変更します。
不透明度 - スライダーを使用して、アイコン背景の不透明度または透明度を変更できます。
ナビゲーションバーを表示 - チェックすると、アイコンに小さなナビゲーション矢印が追加されます。複数のリンクをすばやくナビゲートできます。次のように表示されます：