UXPin Merge による レスポンシブデザイン

レスポンシブなWebサイト、モバイルフレンドリーなデザイン、アダプティブな画像は、UX（ユーザーエクスペリエンス）にとって重要です。 そのため、レイアウトを複数使用せずに、これらのような画面のサイズに合わせたプロトタイプを即応的にデザインできる機能があると時間の節約につながり、開発フローで有益となるでしょう。実はこれは、UXPin Mergeが持つ 実際のReactコンポーネントを使ってコードとデザインするという機能性によって実現可能なのです。

 Mergeが持つ機能をさっそく試してみたいという方は、ぜひこちらからアクセスしてください。認証プロセスとセットアップ完了後、すぐにレスポンシブなプロトタイピングを開始可能です。 MergeではGitを使用しているためデータの保存場所は関係なく、GitHubとの統合も必要ありません。お好きなコードベースプラットフォームをお使いください！  

 レスポンシブデザイン の問題

  最近のプロトタイピングツールの一般的な要件に、「デバイスの種類に合わせた切り替え機能」や「プロトタイプ内のコンポーネントを利用可能な範囲で自動調整できる機能」があります。これらの レスポンシブデザイン 機能は、UXPinを含むその他プロトタイピングツールのデフォルト設定では備わっていません。多くの場合で、複数のレスポンシブレイアウトを、テストしたいデバイスサイズごとに１つずつ作成するしかありません。ただ、このやり方の場合だとプロトタイプにインタラクティブ性がなく、特にモバイルデバイスやレスポンシブなサイトを日常的にデザインしていては生産性が低くなってしまいます。

例として、Material UIライブラリを使って、上記で述べた問題を説明します。下のビデオでは、Gridコンポーネントをx-smallのデバイスサイズで12 列、smallデバイスで6列になるように設計しています。しかし、このレイアウトコンポーネントとUXPinのキャンバスは関係ないので、コンポーネントでの変更はキャンバス上には反映されません。

Material UIコンポーネントは全て最初からレスポンシブですが、基本的にデフォルトでキャンバスサイズが固定されているため、UXPin Mergeはコンポーネントのメディアクエリを使えません。そのため、ページの更新やキャンバスサイズを変更しても、コンポーネントのレイアウトには反映されず、元のデザインのままとなります。

 Mergeの「 Code-to-Design 」ソリューション

  そこで UXPin Mergeの出番です。 Mergeでは実際のReactのコードを使ってデザインできます。コードでデザインすることで、ベクターベースのデザインツールのような制限に縛られることはなくなります。想像力と直感的なプログラミングを組み合わせることで、制限を越えて自由にコードを作成できます。それが Merge の魅力です。

そのため、レスポンシブなプロトタイピングでの問題を解決するには、さまざまなデバイスのサイズに対応可能なコンポーネントを作成し、キャンバスにある全てのコンポーネントのレイアウトを管理するプロトタイプの親コンポーネントとして使いましょう。本記事では、レスポンシブコンポーネントの作成方法を紹介し、コード化したデザインシステムを今日からレスポンシブにすることができます。

レスポンシブコンポーネントの作成

  まず、ラッパーとして機能する「DeviceViewer」という名前の React コンポーネントを作成します。ネストされたサイズ変更可能な IFrameコンポーネントにプロップとスタイルを渡します。コンポーネントがIFrame内にネストされると、キャンバスサイズを固定する必要なくなるため、すべてのメディアクエリ、レスポンシブプロパティ、およびスタイリングが完全に機能します。複数のページを作成することなくレスポンシブなプロトタイプをテストできるようになります。

下の画像は、DeviceViewerの簡略化された構造です。

const useStyles = makeStyles((theme) => ({···
}));
 
function DeviceViewer(props) {
 const classes = useStyles(props);
 const [frameWidth, setframeWidth] = React.useState(0);
 const [frameHeight, setframeHeight] = React.useState(0);
 const [deviceView, setdeviceView] = 
 React.useState(props.defaultView);
 
 React.useEffect(() => {···
 }, [props]); 
 
 const handleChange = (event) => {
   setdeviceView(event.target.value);
 };
 
 const setViewportDimensions = () => {···
 };
 
 const IFrameResize = () => {···
 };
 
 return (
   <div className={classes.root}>
     <Grid···
     <Box pb={3}>
       <IFrame···
     </Box>
   </div>
 );
}

お分かりかもしれませんが、これはMaterial UIライブラリを使ったReactコンポーネントのかなりシンプルなものです。スタイル、ステートメント、onChangeイベントハンドラ、HTML要素を構造化する 「return文」があります。

return文の内部には、Grid、Box、IFrameコンポーネントがあります。Gridコンポーネントは、デスクトップ、モバイル、タブレットなどの選択可能なビューポートサイズのドロップダウンリストであり、Boxは、基本的に IFrame コンポーネントを含むためのスタイリングラッパーです。

useEffect()

useEffectとデフォルトのプロップを使って、デバイスのビューサイズはステートの読み込みと更新時に変更され、その都度、ネストされたコンポーネントのプロップとスタイルが「前のIFrame」 から「新しいIFrame」 に渡されます。

if文（擬似コードで以下にあります）は、ユーザーがUXPinのエディタまたはプレビューモード（Preview）に合わせて、キャンバスに追加するスタイリングを決定します。

React.useEffect(() => {
   setdeviceView(props.defaultView);
 
   // We’ve redacted this code for readability 
   // UXPin mode change CSS handling
   if (in EDITOR mode)) {
     // remove drop-down styling
   } else if (in PREVIEW mode)) {
     // Change canvas margin properties
   }
 }, [props]);

handleChange()

IFrameを更新するときにデバイスのサイズを追跡するのに、ドロップダウンリストの値を参照する onChangeのhandleChange()関数をターゲットの値を渡します。

const handleChange = (event) => {
   setdeviceView(event.target.value);
 };

setViewportDimensions()

これらの値は、setViewportDimensionsで行ったようにハードコードすることもできますし、動的なキャンバスサイズが必要な場合はjsonとして渡すこともできます。

const setViewportDimensions = () => {
   switch (deviceView) {
     case "desktop":
       setframeWidth(1280);
       return;
     case "tablet":
       setframeWidth(768);
       setframeHeight(1024);
       return;
     case "tablet-landscape":
       setframeWidth(1024);
       setframeHeight(768);
       return;
     case "mobile":
       setframeWidth(375);
       setframeHeight(667);
       return;
     case "mobile-landscape":
       setframeWidth(667);
       setframeHeight(375);
       return;
     default:
       return;
   }
 };

ちなみにUXPinのプレビューモードで、setViewportDimensionsで設定したセレクトメニューはこのような表示となります。

IFrameResize()

IFrameResizeは、ステート読み込み時と更新時にIFrameコンポーネントから実行されます。IFrameResizeは、setViewportDimensionsを呼び出して、ステートのプロップに基づきIFrameのサイズを変更し、現在のIFrame（#target）のコピーを作成し、そのプロップとスタイルを新しいIFrameに渡します。こうすることで、新しいIFrameが読み込まれると、プロップとして渡されたコンポーネントが、新しい IFrameの寸法内に配置されます。

実際のIFrameコンポーネントとドキュメントを比較してすると、内部にネストされる子コンポーネントにデータとCSSを渡すために必要なプロップ全てが用意されており、サンドボックスタグは、Frameがキャンバス自体と通信できるようにするために追加されています。

そしてFrameContextConsumerは、jssを全て受け取り、指定された場所にcssルールを挿入し、子コンポーネントに渡します。

IFrameコンポーネントにプロパティを渡すラッパーコンポーネント（DeviceViewer）であり、ページの更新やレイアウトを直接変更することなく、子要素を更新したり変更したりすることができます。

まとめ

ここまで紹介したUXPin Mergeでのソリューションは他社のデザインツールと比較してみると、非常に画期的なアイデアであることがお分かりいただけると思います。Mergeでは、プラグインの作成または編集、APIを呼び出してデザインツールに追加機能を追加する必要はありません。代わりに、実際のReactコンポーネントで実装できるものは全てMergeで全く同じように使うことができます。これによって、デザインプロセスは促進され、レスポンシブなWebデザインにすぐに対応できる柔軟で直感的なコンポーネントを自由に作成できます。

UXPin Mergeが、提供開始当初では想像できないほど、国内外問わず多くの皆様にデザインワークフローで採用していただいており、さまざまなユースケースもいただきました。本記事で、少しでもUXPin Merge について知っていただけると幸いです。

 Merge を最大限に活用するために、ぜひこちらのUXPinのコミュニティでアイデアを共有してください！

まずは14日間の無料トライアルを始めたい方はこちらより。