entry-header-eye-catch.html
entry-title-container.html

entry-header-author-info.html
Article by

新卒デザイナーが「pixiv最大規模のユーザー企画」のプロジェクトを任された話

自己紹介

こんにちは、pixivでデザイナーをしているganchanです。元々は福岡オフィスでデザイナーとしてアルバイトをしていて、2018年4月に新卒で入社しました。 本記事ではpixiv最大規模のユーザー企画、「pixivファンタジア」の10周年イベントに新卒デザイナーが携わって得られた経験について紹介します。

きっかけ

pixivファンタジア10周年を記念して、pixivが開催を支援することが正式に決まったときに、「興味があるならやってみないか」と声をかけてもらいました。

案件の下調べをするため、pixivファンタジアの歴史や今までに投稿されたイラストを眺めているうちに、どんどんこの企画に興味が湧いてきました。私自身が絵を描いていることもあり、「この企画に参加したい!そしてデザインも担当したい!」と強く思いました。

しかし、その時はまだ新卒7ヶ月目でしたので、pixiv内の大型プロジェクトやゲームライクなデザインは担当したことがありませんでした。そのため、私がやり遂げられるか不安でしたが、こんな面白そうな企画にチャレンジしないのはもったいないと思い、挑戦することにしました。

pixivファンタジアについて

「pixivファンタジア」はarohaJさんが主催する「ファンタジーイラストを盛り上げる」ユーザー企画です。参加作品の閲覧数によって競われるバトルと、その結果によって変化するストーリーが特徴です。また、参加者が新たな設定を創造し、自由に世界観を拡張できます。

2018年でシリーズ10周年を迎え、pixiv事務局が開催に協力しました。現在10シリーズ累計の投稿数は約25万作品を超え、毎回の平均参加者は約5,000人を超えるpixiv内最大規模のユーザー企画となっています。

今回開催したpixivファンタジア Last Sagaでは、新たな物語の舞台「ラスト大陸」で三国にわかれ、大陸の覇権を争いました。

ペーパープロトタイピング

今回の企画をリリースするために、下記の手順で作業を進めました。

  • 目標定義
  • 企画内容決め
  • ユーザーペルソナ定義
  • ユーザーのモチベーション定義
  • 情報設計
  • 画面設計
    • ペーパープロトタイプ
    • デザインツール「Figma」でデザイン
  • 開発
  • リリース

本記事では、主に画面設計でやったことについて詳しく説明します。

画面設計をはじめるにあたり、プロダクトマネージャーからペーパープロトタイプについて説明された本を紹介されました。

プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法

ペーパープロトタイプとは、デザインや実装を始める前に紙とペンを使ってデザインの試作品をつくるものです。パソコンでデザインするよりもすばやく試作と改善を繰り返せます。

まずはこの本を読みながら、実際に自分でペーパープロトタイプを作成しました。ペーパープロトタイプを一度作った後、様々な人にレビューをしてもらっては改善をすることを繰り返し、徐々に完成度を上げていきました。

ペーパープロトタイプで大まかな仮枠を作った後は、デザインツール「Figma」を使って、ブラッシュアップしていきました。

Figmaのメリットを2つ紹介します。

  • 1つのファイルを複数のデザイナーがWebブラウザ上でリアルタイムに編集できる
  • エンジニアがWebブラウザ上でリアルタイムでデザインを閲覧できるため、ファイルの共有や管理コストが低い

Figmaはとても便利なデザインツールで、このおかげでエンジニアやディレクターとのコミュニケーションも円滑に行うことができました。

世界観を壊さないために

この企画のデザインをする際に気をつけていたことは、pixivファンタジアの主催がpixivだと勘違いされないようにすることです。 あくまでもpixivファンタジアの主催者はarohaJさんであり、pixivはarohaJさんの企画に協力している立場であることが、誤解なく伝わるように努めました。

まずは、pixivファンタジアのページにarohaJさんが主催であることを明記しました。加えて、LPにはarohaJさんからメッセージを頂戴し、記載することにしました。

さらに、arohaJさんが10年間で作り上げたpixivファンタジアのブランドを壊さないように、細心の注意を払いました。 このことについて上司に相談したところ「デザインルールを定めるといいよ」とアドバイスをもらいました。そのため、まずはデザインルールを定めることにしました。

過去10回開催されたpixivファンタジアから、今回の企画にテイストが近いものを参考にし、button, font-size, color など、様々な要素のデザインルールを決めました。ルールを決める際には、arohaJさんとも念入りに打ち合わせをして、arohaJさんの考える世界観やテイストにマッチするように微調整を繰り返しました。 このデザインルールに従うだけで、自然とpixivファンタジア Last Sagaのテイストが表現できる仕組みができました。

失敗から学んだ要件を明文化する大切さ

プロジェクトの開始当初は「なぜこのデザインなのか」を言語化しておらず、デザインの作り直しが何度も発生するという失敗がありました。 例えば、「これあると良さそう」という直感で新しい要素を追加したことがありました。しかし、新規要素をなぜ追加したのか開発メンバーから質問されたときに答えられず、デザインを作り直すことがありました。

こういった失敗を繰り返さないためにプロダクトマネージャーに相談し、毎回以下の要件を定義してから、デザイン要素の追加をするようにしました。

  • 概要 (作りたい機能を1行で説明したもの)
  • その機能で実現する三箇条
  • ターゲットユーザー (この機能を使ってくれるユーザーは誰か)
  • ワークフロー (ユーザーがどんな手順でこの機能を使ってくれるか)

この4つの要件を明文化した後にデザインすることで、以下の3つのメリットがありました。

  • デザインするときに考えやすくなり、手戻りが減る
  • デザインの理由を開発メンバーに説明できる
  • チームで議論するときの基準がある

要件を明文化する仕組みを利用することでデザインの作り直しがなくなり、デザインスピードが上がりました。

まとめ

イベント全体の結果として

  • 総投稿数:45010枚
  • 参加者数:4984人
  • 1人あたりの平均投稿枚数:9.56枚

と多くのユーザーの皆様に楽しんでいただけました。特に1人あたりの平均投稿枚数は歴代最高となり、(※前回の『pixivファンタジア Revenge of the Darkness』では6.64枚)直近では一番盛り上がったシリーズとして締めくくることができました。

この企画に携わってみて、デザインを作成する前に要件を明文化するべきことを学びました。その後の他のプロジェクトを担当するときにも要件の明文化をまず行っています。その度に、pixivファンタジアの開発に携わった経験が役に立っていると実感しています。

入社一年目でpixivファンタジア Last Sagaのデザインをやり切ることができたのは、「チームで助け合い、チームで仕事をする」というピクシブの環境があったからだと考えています。この経験を活かし、自身も他のチームメンバーをフォローできるデザイナーとして成長していきます。

20191219010642
ganchan
2018年4月に新卒入社。pixivのUI/UXを担当。趣味はイラストを描くこととアニメ鑑賞。