見出し画像

知らないと損をするデザイン論　～UXデザイナーにボコボコにされた話

ファイブ

はじめに

スタートアップの案件に携わった際に、プロのデザイナーの方から自身の制作物に対してレビューをしていただいた経験をもとに、ポートフォリオで好印象を得るコツを書きます。

私が携わった仕事で、「方向性と狙いたいマーケットは決まっているが詳細は全然詰めていないサービスの案があるので、詳細を詰めて、投資家向けにデモをして欲しい」というプロジェクトに参画したことがありました。

私とモックアップ作成担当の後輩エンジニア、オブザーバーで、その領域の業務コンサルタントとデザイナーの計4名のチーム構成でした。基本的な作業は私と後輩が行う。あとの二人は成果物に対するレビューを行うという体制で、企画書とモックアップの制作がスタートしました。

デザインにオリジナリティはいらない。

企画書の作成がひと段落して、はじめてデザイナーにモックアップを見せた際のコメントがこちらです。

あのさ、君のオリジナリティなんて見たくないんだよ。君は近しいサービスを調査したことがあるのかい？デザインは既視感なんだよ。これはどこのサービスをモチーフにしたんだ？

UIデザイナーさんは、大手企業のWebサイトやサービスはトップデザイナーの作品であること、Amazonや楽天のECサイトは全部デザインが似ていること、デザインの類似性はユーザーを迷わせないメリットがあることを述べて、第一回のレビューが終わりました。

模倣するなら、いったん完全トレースを目指す。

GAFAのサイトをはじめ、様々なWebサービス調査をした結果、デザインには暗黙のルールがあることを肌で感じる事が出来た私は、意気揚々として2回目のレビューに臨んだときのコメントがこちらです。

ここ、元サイトの余白部分と君のモックだったらpx数が違う。模倣するっていうのはコンポーネントやコンテンツだけじゃなくて、コンポーネントの位置や余白のサイズ、色まで模倣するんだ。

UIデザイナーさんは、トップレベルのサービスはABテストを繰り替えしていること、ボタンの色が違うだけで売上が1.3倍違うからECサイトのボタンの重要なボタンの色は企業が違っても一緒だという話をして、2回目のレビューが終了しました。

パクリと模倣は違います。こちらはパクリと模倣の違いを述べている素敵だと思ったつぶやきです。


メッセージ性があるものほどシンプルに

コンポーネントの位置や余白のサイズ、色まで模倣するとデザインが格段に良くなる事に快感を覚えた私は、いろいろな機能を乗せたキメラのようなアプリケーションのモックを持って、デザイナーさんのところに行った時のコメントがこちらです。

投資家向けのモックなんだから、説明がないとわからないものは心象が悪いから、シンプルじゃない機能やあいまいなデザインの機能は全部捨てて。

UXデザイナーさんは、Googleの検索エンジンや、Gmailに不要な機能がついていなくて美しいこと。だれが見ても使い方がわかることを熱く語って、レビューが終了しました。

最初にペーパーモックを作ることの大事さ

デザインにはペーパーモックという手法が存在します。

HTMLやCSSの開発前に、実装のイメージをしっかり決めておくことが、結果的に手戻りが少なく進められたという点が大きな反省点でした。

細かい作業の積み重ねが美しい。

では、ポートフォリオに落とし込んで考えてみます。

個人的には、大手企業のキャンペーンサイトを模倣することが狙い目だと思います。メッセージ性がある、シンプルである。という点は自身をアピールするポートフォリオと通じる部分が多々あると思っています。大手企業のサイトはやはり業界のトップが作っているものですから、下手なデザインだと思われることはありません。

オリジナリティのあるデザインのポートフォリオを批判するつもりはありません。ただ、１pxにこだわって仕事をしている人からすると、シンプルで、細部まできちんとpaddingやmarginを整えるという職人気質な渋い仕事を見せられると、「いい仕事していますねぇ」と内心ニヤリとしてしまいます。

この記事が気に入ったらサポートをしてみませんか？