Xfolio（クロスフォリオ） サービスサイト制作

Xfolioは、豊富なデザインテンプレートからオリジナルのポートフォリオを作成するポートフォリオ機能をはじめ、クリエイターが作成したコンテンツを販売するダウンロード販売機能・自家通販機能、自分を応援してくれる人との交流基盤となるファンコミュニティ機能などのたくさんの機能で、クリエイターの作品がこれまで以上に輝けるよう、情熱的かつスマートにサポートする統合プラットフォームです。今回弊社では、XfolioのCI/VI開発からWebサイト制作、印刷物作成まで、幅広くご支援させていただきました。

Xfolioのブランドイメージを形成する最も基本的な存在のため、要件整理からブランドコンセプトの定義、目指す方向性などをBookLive様と協議し、CI/VI開発をいたしました。 ※1枚目：ヒアリング・提案資料（一部抜粋） ※2枚目：ロゴデザインのパターン出し資料（一部抜粋） ※3枚目：完成したロゴデザイン ※4枚目：ブランドガイドライン（一部抜粋）

Xfolioのサービスサイトは、大きく分けて以下のコンテンツで構成されています。 - 1. グランドページ：クリエイターが作成したポートフォリオ含め、全ユーザーが閲覧できるページ。 - 2. マイページ：お気に入りユーザーの登録や商品購入（決済）ができるページ。 - 3. クリエイター設定ページ：クリエイターとしてポートフォリオ作成（作品登録や商品登録など）ができるページ。 今回、BookLive様からのRFPをもとに、情報精査や必要画面の洗い出し、サイト上のUXを担保しつつも、いかに機能が損なわれないかをプロジェクトメンバー一丸となり考え、制作に取り組みました。 実際には、画面設計・データ設計・実装可否の確認から、ライブラリ・仕様の検討、場合によってはモックアップを作成し、BookLive様と合意形成を図りプロジェクト進行をいたしました。 デザインは、クリエイターの作品を際立たせるために白ベースでロゴのブルーをアクセントカラーで使用。シンプル且つ洗練されたデザインに仕上げました。クリエイター設定ページのみ、他ページとの切り分けをはっきりさせるために、黒ベースでまとめております。 コーディングにおいては、協業したシステム会社様の組み込み作業を考慮いたしました。 タスクランナーの中核としてWebpackを使用し各種タスクを実行、そのタスクはテンプレートや設計に合わせて構築しております（Node.js 実装）。 また、テンプレート化しやすいようなページ構成・コンポーネント設計にて実装いたしました。 ※1枚目：実際に公開されたXfolioのサービスサイト画面 ※2枚目：RFPをもとに整理・検討された画面一覧とコンポーネント資料（一部抜粋） ※3枚目：機能要件もまとめられたワイヤーフレーム ※4枚目：Node.jsを用いて実装された仮データを用いたテンプレート

Xfolioのポートフォリオ機能を使えば、ユーザーは様々なテンプレートをカスタマイズし、自分だけのオリジナルポートフォリオサイトを制作することができます。 今回弊社では、トーン＆マナーの異なる合計10個のポートフォリオテンプレートを定義・制作いたしました。 テンプレートごとにデザインシステムをプランニングし、Webサイトにおいて一貫性を担保しつつ、ユーザーが期待する機能性やユーザビリティを実現。 コーディングにおいては、共通化部分やテンプレート独自の装飾などをCSS設計としてルール化し、多彩でありながら統一された実装となっております。 ※1枚目：各種ポートフォリオテンプレート ※2枚目：テンプレート01のカラーバリエーション（一部抜粋） ※3枚目：テンプレート01のデザインシステム（一部抜粋）

Webサイト制作とあわせて、東京国際展示場で開催されたコミティア（プロ・アマを問わないクリエイターが作成した作品を発表・販売する展示即売会）での展示用ポスターや配布用リーフレット、原宿駅構内に掲出するサインボードのデザイン制作もいたしました。 ※1枚目：展示用ポスター（左）と配布用リーフレット（右） ※2枚目：サインボード

Xfolioという業界初の総合プラットフォームをローンチさせたことにより、クリエイターの持続的な創作活動の直接的な支援、モノづくりを行う人々（クリエイター）と、閲覧を楽しむ人々（ファン）の関りの場を提供することが出来ました。 クロスフォリオという名前は「クリエイターの表現の結晶であるポートフォリオを中心にして、ファンとの交流や作品の収益化のデジタル・トランスフォーメーションを推進する」というサービスミッションから来ておりますが、このミッションを達成できるだけのサービスになっていると自負しております。 今後、クリエイター一人ひとりの個性が輝ける場所としてサービスが育っていき、一人でも多くの新しい才能がスポットライトを浴びるきっかけになることを願っています。