先輩ポートフォリオから学ぶ。Inc.コラム先輩ポートフォリオから学ぶ。先輩ポートフォリオから学ぶ。「制作したUIデザインをポートフォリオにまとめたい!」......だけど魅力的な見せ方がいまいちよく分からない。そんな風に悩んでいる人はいませんか?今回はそんな悩みを解消すべく、現役UIデザイナーや内定者のポートフォリオとともにUIデザイン作品の魅せ方テクニックをご紹介します!就職活動とはいえ、自分の作品をまとめるポートフォリオは細部までこだわりたいですよね。始めに、UI作品のポートフォリオを作る際に入れるべきポイントをご紹介します。全て入れなければいけないというわけではありませんが、以下のポイントを押さえておくと作品の要点が明確になり、わかりやすく伝えることができるでしょう!▲「朝の時間を有効活用するためのカフェ予約アプリ」の紹介ページ。1コンセプト文まず、どういったアプリ(サービス、ゲーム)で、どのような意図で作られたものなのかをなるべく簡潔に説明しましょう。キャッチコピーなどがあるとより伝わりやすいです。2ロゴ・アイコンデザイン実際に使われることをイメージしてロゴデザインやアイコンも載せましょう。UIデザイナーはロゴデザイン業務も行うことがあるので、凝っているとアピールにもなりまよ!3モックアップの写真・デザインモックアップ素材を使用することで、より使用イメージが伝わりやすくなります。4要所の遷移図そのUIデザインの中でもより大切だと思う箇所をピックアップし、どのように画面が遷移していくのか、どこにこだわったのかを説明しましょう。5プロトタイプの映像(webの場合)Webポートフォリオを作成する際は、上記の要素に加えてプロトタイプの映像を載せることもおすすめです。どこまで使用感をイメージして作っているかをより明確に伝えられますよ。作っておいて損することはないでしょう!▼プロトタイプの映像は、こんなイメージです。続いて、UI作品を魅力的に説明する見せ方アイデアを、現役デザイナーや内定者のポートフォリオからご紹介。自分の作品に適している見せ方はどのパターンを考えて、いろいろなアプローチを試してみてください。●シンプルに並べる......UIデザインをモックにはめて、シンプルに横に並べたもの。背景にテーマカラーを入れたり、画面の解説を添えたりしています。一目でUI画面に目がいきますね。(▶このポートフォリオをもっとくわしく見る)●複数並べて配置する......画面の楽しさ、デザイン性が演出されています。画面が複数あり、変化のあるUIデザインの場合に向いています。(▶複数配置の別のポートフォリオ例を見る)●モックアップの背景にイメージビジュアルを添える......この例は「気温」や「天気」にまつわるアプリのため、後ろに空のイメージが。そのUIデザインのコンセプトやテーマ、世界観が演出できます!●リッチにデザインして配置する......商品広告のようなアプローチで、見栄えが良いです。世界観とUIデザインが一目でわかります。●実際に使っている写真を添える......どのような環境でこのアプリ使用するのか、また、アイコンのサイズ感などがとらえやすくなります。写真を添えることで画面の華やかさがアップしますね。プロタイプをスマホに映して写真を撮るか、スマホを触っている写真にUI画面を合成するかの方法がとれます。●そのアプリを使う人のイメージ画像を添える......前述のものと似ていますが、こちらはより“使う人”にフィーチャーしています。ペルソナが分かりやすく、実際の商品広告のようなアプローチが可能です。どんな人がどんな環境で使うのかが一目で伝わりますね!●ペルソナの行動やイメージをイラストにする......どんな人が使うのか、アプリの用途を解説するページです。どんな人の課題を解決するサービスなのかを説明できるので、アプリの企画面をアピールする要素にもなります。文章でなくグラフィックやイラストだと、見るのも楽しいですね!3.企業が見ているポイントは?会社ごとに違うってホント?UI作品のいろいろな見せ方をご紹介しましたが、結局企業はUI作品のどこを見ているのでしょうか。ここからは、筆者や周りのデザイナー内定者が就活中に実感したこと、企業の方に聞いたポイントを紹介させていただきます。見ているポイント1ポートフォリオとしての完成度UIデザイナーは細かなデザインから一つのタイトル(やサービス)のアートディレクションまで幅広く携わることがあります。会社によっては「ポートフォリオ自体が一冊の本として完成されているか」「目次や見出しがきちんと統一されているか」といったプロデュース能力も問われるそうです。見ているポイント2レイアウトやディティールUIデザイナーはとくに丁寧な仕事を求められるので、UIの作品部分だけでなく、ポートフォリオのページ一つ一つのフォントやジャンプ率、カーニング、情報の整理整頓ができているか......というような細かい部分まで見られていることが多いです。ユーザーインターフェースというユーザーに寄り添ったデザインを作るのだから、ポートフォリオを見てくれる人に対しても寄り添ったデザインができるよう、丁寧な仕事を心がけましょう。職業としてデザイナーを選ぶのであれば、自分が作りたいデザインだけをする......なんてことは不可能です。自分の引き出しを増やすためにもさまざまな作風にチャレンジし、多様な表現が出来ることを企業にアピール出来ると良いでしょう。ポートフォリオは量よりも質。まあまあなUI作品が5つ入っているよりも、これぞ!という作品が3つ!というほうが見栄えが良いですね。過程を見せる?ビジュアルで見せる?どんなUI作品のポートフォリオが求められているかは「企業によって異なる」と言っても過言ではないです。文字を少なくしてビジュアルだけで見せてほしい企業や、過程や背景を重視してラフの段階からの構想を見たい企業などさまざま。「説明文はほとんど読まないので必要最低限しかいらない」という企業もあれば、「作られた過程が大事なので、ラフスケッチ案なども入れてほしい」という企業も。自分はどちらのスタイルが合っているのか、また志望する企業はどういった表現を好むのか、エントリー前に説明会などでデザイナー社員の方に直接意見を聞きに行くと、よりポートフォリオが作りやすくなるのではないでしょうか。最後にUIデザインの見せ方アイデアは見つかりましたか?UIデザイナーに内定した筆者も、UI作品のレイアウトにはすごく悩みました。「モックアップやロゴ、アイコンのデザインと並べるとそれっぽく見えるな」なんて思いつつ、手探りで作ったのを覚えています。今回の記事ではレイアウト方法についてご紹介しましたが、UI作品は肝心の画面部分の完成度が何よりも重要です。今回はご紹介できませんでしたが、自信のある複雑なオリジナルゲームUIデザインなどは大きく1ページにドンと載せてしまっても良いかもしれません。イカしたデザインをイカしたレイアウトで魅せる!それがUI作品のポートフォリオを作るうえで大事なことだと個人的に思うので、「おっ、使ってみたい!」と思わせるようなデザインが出来るといいですね。イラストを使用したさまざまなデザインを制作しています。癒しキャラが好きです。@vivivit_jpあわせて読みたいはたらくビビビットは、クリエイターを目指す学生のための、キャリア教育メディアです。はたらくデザイナーのポートフォリオや関わっているプロジェクトについて知ることができます。