■ 記事の目的

FlutterでUIを開発する際、デザイナーとエンジニアの間で連携がうまくいかないと、正確な実装が難しくなります。多くのUIの不具合は、コーディング後の確認不足に起因しています。

この記事では、デザインの受け取りから実装・検証までのプロセスを詳しく紹介し、Flutterエンジニアが「正しく・美しく」UIを実装できるようサポートすることを目的としています。

■ 背景

Flutterはクロスプラットフォーム開発においてますます普及しており、UI/UXデザインは主にFigma、XD、Zeplinなどのツールで共有されます。

エンジニアは spacing（間隔）、font、color、layout など、デザインに忠実なUIを実装することが求められます。さらに、実装後には「見た目がデザイン通りかどうか」の確認も欠かせません。

Flutterエンジニアが、デザインを受け取ってからUI完成までの流れを正しく把握し、UI品質を高めることが重要です。

■ 実装手順

1. 準備

• FigmaやXDのデザインファイルを受け取る
• フレームサイズを確認（例：iPhone 11の場合、414×896）
• スタイルガイド（カラー、フォント、パディング等）を確認

2. 実装

以下のような画面を実装するとします。

2.1 デザインの確認

• フレームサイズが 414×896 であることを確認（この情報は後ほど使用）
• 使用フォントが足りない場合は、ローカルにインストールしておく
• デザインがiOS向けかAndroid向けかを確認（今回の例はiPhone）

2.2 実装準備

2.2.1 仮想デバイスの選択 

デザインと同じサイズのデバイスを選びます。2.1では414*896だと確認できましたので、iPhone 11 Pro Maxなどが該当します。

端末サイズに関して、以下のリンクでご参照ください
https://www.ios-resolution.com/

2.2.2 コーディングの実施

a) ライブラリの導入

flutter_screenutil: 5.9.3ライブラリ を使用。
このライブラリは画面サイズや文字サイズの調整をサポートし、異なるデバイスでもレイアウトを維持しやすくなるものです。

b) 分析とUI分解

デザイン全体を見て、同じようなウィジェットが複数あるかを確認します。もし共通するパーツがあれば、それらを再利用しやすいように共通コンポーネントとして切り出しましょう。

デザインの例では、赤枠で囲まれた部分を共通のウィジェットとして切り出し、まずはそのウィジェットのレイアウトから実装していきます。

注意点として、コーディング時には width や height を固定値で指定しないようにしましょう。

デザインに応じて、サイズを固定するかどうかを判断します。もし固定が必要な場合は、数値の後に単位をつける必要があります。

たとえば、width: 190、height: 90 という指定であれば、コード上では 190.w、90.h のように記述します。

今回のUIは比較的シンプルなので、内部ウィジェットに対して四方向に padding を設定する方法を採用します。こうすることで、固定サイズにせず柔軟性のあるレイアウトになり、実際のプロジェクトでも扱いやすくなります。

テキストをレイアウトする際も細かい設定に注意が必要です。以下は、カスタムしたテキスト項目の設定情報です。

コードを実装した結果、以下のような item ウィジェットのコードが完成しました。

ご覧の通り、padding の left や right には常に単位を付けています。
横方向（幅）には .w、縦方向（高さ）には .h、角丸には .r、アイコンサイズには .w を使うようにしています。
それでは、次に下のブロックのレイアウトに進んでいきます。

上部の2つのテキストについては、デザインをしっかり確認して、前述の通りにすべてのパラメータ（フォント、サイズ、間隔など）を正確に反映させてくださいね。

このセクションでは主に画像について説明します。

デザイン上では画像の width と height が両方とも 130 に設定されていますが、こういった 幅と高さが同じ 場合には、どちらにも .w を使うようにしてください。

たとえば：

width: 130.w,  

height: 130.w

こうすることで、画像やViewが縦横でバランスを崩すことなく、常に正方形として表示されます。

また、デザインからエクスポートした画像は、必ず assets フォルダに保存してプロジェクトに読み込んでおいてくださいね。

他のアイテムをレイアウトする際も同様に、各アイテム間の margin、Text のプロパティ、角丸（radius）、padding などの設定値を、デザインと完全に一致させることがとても重要です。

細かい数値ひとつひとつが、全体の UI 品質を左右しますので、丁寧に確認しながら実装していきましょう。

3. UIの確認作業

レイアウトを実装して仮想デバイス上でビルドが完了したら、次のステップは 「UI がデザインと一致しているかのチェック」 です。

見た目だけで判断せず、以下の手順でしっかり検証していきましょう。

• シミュレーターで表示された画面をスクリーンショットし、その画像を自分の XD ファイルにインポートします。
  
  
  インポートした画像は初期状態では高さ（height）のみが反映されていることがありますので、幅（width）と高さ（height）を手動で調整し、デザインと同じサイズ（414 × 896）に揃える必要があります。
• その後、[appearance（外観）] の不透明度を約40〜50％に調整します。
  

• 次に、インポートした画像を元のデザインの画面位置まで移動させ、元のデザインとピッタリ重なるように同じフレーム内に配置します。

このように重ねることで、ズレや違いを視覚的に正確に確認することができます。

• 2枚の画像（スクリーンショットとデザイン）をぴったり重ねた状態で確認すると、ピンク色のボタンがデザインとずれているのが分かります。

このような場合は、marginの設定に誤りがある可能性が高いので、該当箇所のコードをもう一度丁寧に見直しましょう。

• コードを見直して修正を加えた結果、デザインとぴったり一致する完成された画面が出来上がりました。比較が分かりやすいように、デザイン側の背景色を変更して、2枚の画像が完全に重なっていることがはっきり確認できるようにしました。
  
  
  
  
  これで、UI がデザイン通りに実装されているかどうかの確認作業が完了しました。

見た目の一致をしっかり検証することで、より精度の高いUIを実現することができます。

結果とまとめ

 要点の整理

• UI実装には明確なプロセスが必要
• 実装後の比較チェックが品質維持の鍵
• スクリーンショットとデザインを重ねることで、正確に検証可能

■結論

• Flutterで高品質なUIを実現するには、デザイン→実装→検証の一連のプロセスを確実に行う必要があります。
• 「コードを書いたら終わり」ではなく、見た目の一致を確認して初めて「完成」となります。

◼︎参考資料

• https://docs.flutter.dev/cookbook/testing/widget
• https://docs.flutter.dev/get-started/learn-flutter
• https://pub.dev/packages/flutter_screenutil

私たちの会社では、事業拡大に伴いPM・Webディレクターを絶賛募集中です。

この記事を読んで「このチーム、面白そう！」と感じていただけたら、
ぜひ「話を聞きに行きたい」ボタンからお気軽にご連絡ください！

働きたい方や仕事をお願いしたい方でも遠慮なくご相談ください。