フロントエンド開発におけるUI実装への思考プロセス

Writer： otsubo　更新日：2024/12/24

こんにちは、デジナーレ福岡オフィスの大坪です。

エンジニアの皆さん、デザイナーから受け取ったモックを見て「早く実装したい」とうずうずしたり、はたまた「これって技術的に実装できるのか？」と不安になることはありませんか？
本記事では、エンジニアにとっては「どのようなプロセスでUIをモック通りに実装するのか」というUI実装のアプローチを考え、デザイナーにとっては「エンジニアは実装する前にどんなことを考えているのか」を知ることで相互理解につながり、より創造的で実りある協働が実現できると考えています。
それでは、さっそくプロセスを見ていきましょう。

 

実装の前にまずは「考える」

フロントエンド開発においてUIの実装は、見た目の再現だけでなく、使いやすさ、保守性、パフォーマンスなど、多くの要素を考慮する必要があります。「まずはコードを書いてみよう」というアプローチは、一見スピーディに見えるかもしれませんが、後々の修正や調整のコストが大きく増やしてしまう可能性があります。計画的に「考える」ことで、効率的かつ高品質なUIを実現することが可能になるのです。

 

モックを読み解く

モックと仕様書を確認する上では視覚的な要素だけでなく、インタラクションの流れや状態の変化なども含めて確認します。例えば、ボタンをクリックした後の画面遷移や、フォーム入力時のバリデーション、エラー表示の仕様などが明確に定義されているかを見ていきます。

さらに重要なのは、実装の観点から機能の必要性を検討することです。デザイン的に使いやすように見えても、実装が複雑になりすぎたり、パフォーマンスに影響を与えたりする可能性がある場合は、代替案を提案することも検討します。また、アクセシビリティの観点からも、すべてのユーザーが問題なく利用できるかを考慮する必要があります。

他にも、レスポンシブデザインの対応があります。異なる画面サイズでのレイアウトの変化や、モバイルでの操作性なども含めて確認します。これらの要素は仕様書に明確に記載されていない場合もあるため、デザイナーと早めに相談することが望ましいでしょう。また、実装時の技術的な制約についても考慮が必要です。使用するフレームワークやライブラリの制限、ブラウザの互換性など、技術的な実現可能性も含めて検討します。これにより、開発段階での手戻りを最小限に抑えることができます。

 

デザインの一貫性をチェックする

各UI要素がデザインガイドラインに沿っているかを確認することはマストです。デザインシステムが存在する場合は、そこで定義されているカラー、フォントサイズ、スペースなどとモックを比較し、統一されたデザインが保たれているかをチェックしましょう。また、ボタンやカードなどのコンポーネントに複数のバリエーションが存在する場合、それぞれのバリエーションがどのようなシチュエーションで使用されるのかを明確に理解する必要があります。
インタラクション要素、例えばボタンのホバー時やフォーカス時のデザインなどが見落としがちですが、これらも仕様に沿っているかどうかを確認することが大切です。インタラクション要素がよく分からないという方はこちらのブログから「UI Stack」の考え方を身につける事をお勧めします。

UI Stackとは

レスポンシブデザインについても確認を怠らないようにしましょう。モックに明示的に記載がなくても、ユーザーが様々なデバイスで閲覧することを考慮し、タブレットやスマートフォン向けのレイアウト調整が必要になる場合があります。これにより、各コンポーネントのサイズや配置も適切に調整されるべきです。

 

コンポーネントの命名規則を確認する

ここでは各コンポーネントの名前が意味を持ち、実装に適しているかを確認します。適切な命名規則を採用することで、コードの可読性が向上し、チーム内でのコミュニケーションがスムーズになります。

具体的なポイントとして、命名規則を統一し、同じ種類のコンポーネントには同じ接頭辞や接尾辞を使用されているか確認します。例えば、すべてのボタンコンポーネントに「Button」を含めるなどがされているか見てみるといいでしょう。

コンポーネントの役割や機能が一目で分かる命名になっているか確認します。この時点で分かりにくいと感じたのであれば直ちに変更するべきでしょう。この時点で分からないという事は、既にデザイナーとエンジニア間で解釈が異なっているという事になります。ぜひ変更を検討してみてください。

 

再利用可能な要素を探す

Figmaでモックを作成されていれば、要素がコンポーネント化されていることが多いです。再利用されているUI要素を見つけることで、実装前にどの程度の共通コンポーネントが必要かを洗い出すことができます。共通コンポーネントは汎用性が高く、異なる場面で再利用できるように設計することが求められます。そのため、各コンポーネントがどのようなデータや状態を受け取る必要があるかを検討することが重要です。

汎用的なコンポーネントの作成方法についてはここでは説明しません。以前すでに紹介しておりますので、もし興味があれば、以下のブログをご覧ください。

Reactで実践する汎用コンポーネント設計の考え方

また、再利用可能なコンポーネントでなくても、もし似たような機能を持つコンポーネントが存在するなら、何故分けて作成されているのかそれは統一できないのか、ユーザーにどういう影響を与えるのかを考えることも大事です。もし統一することが出来ればその分工数も減り、別の実装を行うことが出来ます。仕様書やモックを確認しながら「これは何のために作られている？本当に必要？」というのを常に考える必要があります。

 

コンポーネントを階層に分割する

モックを観察して必要な情報を整理した後は、コンポーネントの階層設計に取り掛かります。これは、拡張性や保守性を高めるために非常に重要なステップです。コンポーネントを親子関係で考えると整理しやすくなります。このようなLPがあったとしましょう。

 

これを階層に分割するとこのように分けられると考えられます。

まず、ページ全体や大きなセクションが親に該当します。(LandingPage）このコンポーネントはページ全体のレイアウトを管理し、ヘッダーやフッター、主要なセクションを包含します。

子コンポーネントは、親コンポーネント内のサブセクションや特定の機能ブロックを担当します。例えば、Header、 HeroSection、ServicesSectionなどが該当します。これらはさらに細かい要素を含むことが多く、複数の小さな孫コンポーネントを組み合わせて構成されます。

孫コンポーネントは、ボタンや入力フィールド、アイコンなどの細かいUI要素です。これらは再利用性が高く、複数の場所で使われることが多いです。例えば、Button、Icon、Cardなどが該当します。

このように各コンポーネントがどのように組み合わさっているかを明確にすることで、コード全体の構造が見えやすくなり、後からの修正や機能追加がスムーズに行えるようになります。また、依存関係を整理することで、特定のコンポーネントがどこでどのように使用されているかを一目で把握でき、不要な依存関係を避けることができます。

 

コンポーネントの設計

コンポーネントの設計では、各コンポーネントの責務と範囲を定義し、必要なpropsを設計します。この際、状態管理の方針やコンポーネント間の依存関係も整理します。特に重要なのはコンポーネントの粒度です。細かすぎると管理が煩雑になってしまい、大きすぎると再利用性が低下してしまいます。適切なバランスを見つけることが、保守性の高いコードベースを作る鍵となります。どのような粒度で分けるのかを考えるためにも、一つ前でお伝えしたコンポーネントを階層で分割する作業は大事になってきますし、それを元にチームでどういう風にコンポーネントを分けるのか話し合いをするべきでしょう。まずはチーム内で共通認識を持つことが何よりも重要です。とはいえコンポーネントの設計で判断に悩むこともあるでしょう。そういった時はMaterial UIやReact BootStrapといったUIコンポーネントライブラリ参考にすると解決の糸口が見つかるかもしれません。また、Reactの公式ドキュメントを読むのも参考になるはずです。

 

技術的な実装方針を固める

実装に入る前の技術的な検討は、プロジェクトの成功を左右する重要な要素です。まず、スタイリング手法の選択から始めます。Tailwind CSSやStyled Componentsなど、複数の選択肢の中からプロジェクトに最適なものを選定する必要があります。

状態管理についても慎重な検討が必要です。例えばReactを使用する場合、Reduxなどのグローバルな状態管理ライブラリーとuseStateによるローカルな状態管理の使い分けを、チームやプロジェクトのルールに基づいて決定します。

また、アニメーションの実装方法やレンダリングの最適化、アクセシビリティ対応など、パフォーマンスと使いやすさに関わる技術的な判断も重要です。これらの決定はプロジェクト全体の品質に直接影響を与えます。

さらに、ディレクトリ構成の設計も重要な検討事項です。プロジェクトの規模やチームの開発スタイルに合わせて、コードの可読性と保守性を高める最適な構造を選択します。これは将来的なメンテナンスの容易さにも大きく関わってきます。

 

まとめ

フロントエンド開発におけるUI実装は、単なるデザインの再現に留まらず、ユーザーエクスペリエンス、アクセシビリティ、パフォーマンス、そして保守性といった多岐にわたる要素を総合的に考慮する必要があります。
すぐにコードを書き始めるのではなく、しっかりとした設計と準備を行うことで、後々の修正や機能追加が容易になり、結果として高品質なUIを効率的に実装することが可能になります。

また、コンポーネントの粒度や命名規則、依存関係の整理といった細部にまで注意を払いながら設計を進めることで、コードベース全体の可読性と保守性を高めることができます。これにより、チーム全体での開発効率も向上し、ユーザーにとって魅力的で使いやすいアプリケーションを提供することができるでしょう。

弊社では、最新ツールの利点を最大限に活用しつつ、UI/UXデザインから開発、ビジネスサポートに至るまで、プロフェッショナルな視点でプロセス全体をトータルにサポートしています。特に、人間ならではのクリエイティビティや細部への徹底したこだわりを大切にすることで、クライアントに寄り添った本当に価値あるITストレスフリーなサービスを提供しています。

今後も最新のデザインツールや開発手法について、引き続き情報を発信してまいりますので、ぜひお楽しみに！