株式会社ココペリでWebデザイナーを務める中尾と申します。私は20年以上にわたり、Webデザインの分野で活動してきました。この長い旅を通じて、プロトタイピングとユーザビリティテストに多くの時間取り組んでまいりました。
- 投稿者略歴（株式会社ココペリWebデザイナー中尾）
-
- 2000年 Flasher（FLASHバナーやFLASHゲーム制作）として活動スタート
- 2005年 i-ch携帯電話（flashベース）のECサイト立ち上げ
- 2008年 スマホ、アプリのサイト立ち上げデザイン責任者
- 2013年 サイトデザイン責任者
- 2017年 予約サイト、デザイン責任者
- 2021年 株式会社ココペリ入社、MVP受賞
- 2022年 ちゃんと請求書リリース
プロトタイピングツールの革新と実践的進化
この数年間で、プロトタイピングツールが実践的な用途に適応する形で大きく進化してきたことは明らかです。
その進化の具体的な内容に触れる前に、まずはプロトタイピングの基本を簡単に説明します。プロトタイピングとは、製品やサービスを設計する段階で、実際の製品に近い機能を持つモデルを作るプロセスのことです。デザイナーはこれを利用してアイデアを形にし、潜在的な問題を特定し、ユーザーからのフィードバックを得ることが可能です。プロトタイピングは製品の機能やデザインを具体化し、開発プロセスの各段階での改善に貢献します。
2016年頃から、これらの手法は業界の標準として確立されました。この変化の背後には、開発コストの増加とプロトタイプ作成ツールの進化が主な要因として挙げられます。
今回は、プロトタイプ作成ツールの進化に焦点を当てます。Adobe XDとFigmaは、その代表的な例です。これらのツールの共通点は、驚くほど簡単に高品質なプロトタイプを作成できることです。数時間、場合によっては数分で完成することができるこれらのツールは、デザイナーにとって画期的でした。
しかし、HTMLコーディングが得意な私にとって、これらのツールの魅力は限られていました。単純なページ遷移は問題ないものの、フォームやアクションを用いてページ内容を動的に変更する必要がある場合、これらのツールでは対応できませんでした。そのような場合、複数のページを作成しシミュレーションするよりも、HTMLを直接編集する方が効率的でした。
しかし、2021年からのFigmaの大幅なアップデートにより、その状況は大きく変わりました。
Figmaのアップデートとデザインプロセスの変革
2021年以降、Figmaは「オートレイアウト」「コンポーネント管理」「バリアブル（変数）」「条件分岐」などの新機能を次々とリリースし、デザインプロセスに革新をもたらしました。特にバリアブルを用いた条件分岐の導入は画期的で、HTMLでしか対応できなかった複雑なフォーム部分の作成が驚くほど容易になりました。これにより、従来はコーディングを必要としていた部分も、Figma内で完結できるようになり、画面制作の効率化が図れました。
オートレイアウトの機能によって、異なるサイズに合わせたザインの作成が容易になり、デザインの一貫性を保ちながら素早い調整が可能になりました。コンポーネント管理システムは、一度作成したデザイン要素を再利用し、異なるプロジェクト間で共有することを容易にしました。これにより、デザインの品質を維持しつつ、プロジェクトの作業時間を大幅に短縮することが可能になりました。
また、バリアブルを活用した条件分岐は、デザインプロセスにおいて、従来はプログラミング知識が必要だった複雑なインタラクションの実現を可能にしました。この機能により、ユーザーのアクションに基づいて動的にコンテンツを変更するインタラクティブなプロトタイプを、より簡単に作成することができるようになりました。
このように、Figmaの新機能により、私のデザインワークフローに革命が起きました。以前は細かい条件分岐やインタラクティブな要素を表示するために多くの時間とリソースを費やしていた作業が、Figmaの進化により格段に簡単かつ迅速になりました。デザインフェーズでの作業効率が上がり、チームとのコミュニケーションもより効果的になりました。コンポーネント管理は、再利用可能なデザイン要素を簡単に作成し、自由度も高まることで、プロジェクト全体の作業速度が向上しました。
ココペリにおけるFigmaの実践的活用
株式会社ココペリでは、Figmaを積極的に活用して、新しいサービスや新機能のプロトタイピングを行い、その結果を次々に市場にリリースしています。Figmaの高度なプロトタイピング機能により、実際に動作するインタラクティブなモデルを作成し、それを利用して新機能を効果的に売り込んでいます。従来はパワーポイントによる機能説明のみでしたが、Figmaを用いることで、実際に動くプロトタイプをデモンストレーションできるようになったことは、営業活動における大きなアドバンテージとなっています。このアプローチにより、クライアントは機能の実用性を直接見て理解することが可能になり、より具体的かつ説得力のあるプレゼンテーションが実現しています。
さらに、Figmaのコミュニティとライブラリ機能は、デザインプロセスにおける大きな助けとなっています。世界中のデザイナーたちが作成し共有した多種多様なテンプレートやアセットを活用することで、新しいアイデアやインスピレーションを得ることができます。これにより、プロジェクトのスタートアップ時間を大幅に短縮し、アイデアの実現にかかる時間も劇的に短縮されます。また、Figmaの広範なライブラリを用いることで、一からデザイン要素を作成する必要が減り、効率的かつ一貫性のあるデザインを迅速に作成することが可能になります。
Figmaの進化は、私たちココペリのデザインアプローチを根本的に変えました。より効率的で、クリエイティブなプロセスを実現することができ、プロジェクトの遂行における柔軟性と速度が飛躍的に向上しました。Figmaの持つ広範な可能性を最大限に活用し、デザインの未来を切り開いていくことに確信を持っています。
