デザインコンペを乗り切るとっておきの手段

纐纈 佳奈

Summary

はじめまして、ディレクターグループの纐纈(こうけつ)です。

Pomaloでは様々なコンペのお声がけをいただくのですが、今回はコーポレートサイトリニューアルのデザインコンペを対応した時のお話についてです。

コンペは制作時間が足りないことが多い

コンペっていつも時間が足りなくて、バタバタするのが悩みです。この時も予想以上に時間がない中で、複数ページのデザイン作成がありました。まずはスケジュールを立てるところから始まります。一旦仮組みしてみたたものの、やっぱりスケジュールが足らなすぎる、どうしよう......といった状況でした。

日々の業務でもスケジュールがはまらないことはよくある話なので、ディレクターとしてはここからどう調整するか、がとても大事な作業になってきます。

そもそもWebサイト作成の作業工程は、要件定義(ヒアリング、課題設定、戦略策定まで)を行い、設計部分(サイトマップ・ワイヤーフレームの作成)、その後にデザインといった工程で進みます。初動の要件定義フェーズが最も重要なポイントとなるので、しっかり時間を確保したい。となると、やはり設計・デザインパートでなんとか日数調整するしかなさそう......。

設計はディレクターで対応し、デザインはWebデザイナーへと繋いでいきますが、その引き継ぎに時間を取られない方法はないのだろうか。

Pomaloの標準デザインツールについて

そもそもPomaloで使用するデザインツールは特に決まりはなく、クライアント事情やその時々に応じてPhotoshopやAdobe XDで対応していることが多いです。今回時間が取れない事情をデザイナー相談してみたところ、設計のワイヤーフレーム作成からデザインまでをFigma(フィグマ)というツールを使ってみてはどうだろうか、という話になりました。

『ヒグマ?』何で動物のネーミングなんだろう...と思っていたほど私はFigmaのことを全く知らず、まずはFigmaが何なのかを調べるとこから始まりました。(単なる聞き間違で動物との関連はありませんでした、正しくはフィグマです)

高機能デザインツールFigma(フィグマ)とは

  • ブラウザ上で簡単にデザインができるツール
  • 1つのファイルを複数人で同時に編集することが可能
  • メンバーの編集している様子がリアルタイムでわかる
  • 共同編集でのコンフリクト(データ競合)もほぼ起きない

調べてみるととても画期的なツールで、上記以外にも様々な便利機能がありました。

Figmaオフィシャルサイト:https://www.figma.com/

デザインツールFigmaに初チャレンジ

操作方法もわかっていないし、これで本当に時短に繋がるのだろうか......という不安がありましたが実際操作してみると、UIはパワポに似ていて、これなら簡単に使えそう!!

動作も軽くサクサク動いてくれて、予期せぬアプリの強制終了での保存漏れも無く、ワイヤーフレームも簡単に作成することができました。

その後作成したワイヤーフレームをプロデューサーにチェックしてもらい、認識齟齬がないか擦り合わせを行い、デザイナーへ引き継ぎます。デザインが仕上がってきたところで、キャッチコピーはエディターに考案と入力をお願いして、みんなでFigmaで作業を行っていきました。

Figmaは誰が何を作業しているのかがリアルタイムで分かるので、他のプレイヤーが操作してる箇所は避けて、別のページの修正を先に行うといった配慮もできちゃいます。提出期限の直前となるとみんな焦っているのも操作の動きでわかります、それも面白くってチーム力もかなり高まりました。

肝心なコンペ結果はというと......
Pomalo案で採用となりました〜、チームのみんなが頑張ったおかげです。

まとめ

今回コンペで使用したFigmaは、誰でも簡単に操作ができるので、デザイナー以外も活用できるデザインツールとして他には無く、大活躍してくれることがわかりました。

今ではマニュアルやプレゼン資料もFigmaで作成するほど、私は惚れ込んでしまっております〜。

Pomaloでは使用ツールもその時々の状況に応じてフレキシブルな対応をとることが多く、今後も様々なツールを導入してみたお話などをご紹介していけたらと思っています。

では今日も一日頑張ります☆

Contact