Xfolio(クロスフォリオ)|サービスサイト制作

株式会社BookLive株式会社アマナ
Xfolio(クロスフォリオ)|サービスサイト制作
支援内容
要件定義、情報設計、CI/VI開発、デザイン・コーディング(デザインリサーチ・UI/UX開発・テンプレート設計・コンポーネント設計など)、印刷物制作
プロジェクト期間
2021年2月~2022年3月
URL

https://xfolio.jp/

国内最大級の総合電子書籍ストア「BookLive」の運営会社でもある株式会社BookLive様の新規事業、「Xfolio(クロスフォリオ)」のサービスサイト制作を担当いたしました。Xfolioは、『これまでよりももっといろんな人に自分の作品を見てほしい』『たくさんの人にクリエイターとしての自分を知ってほしい』そんな想いを持つ全てのクリエイターのために作られた、統合プラットフォームです。

アウトプット

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

CI/VI開発

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

サービスサイト制作

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

ポートフォリオテンプレート制作

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

印刷物制作

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

まとめ

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

Credits

AC
田中 真之介
PM
河上 智哉
DIR
喜多山 修
AD
モチマス ミサ
DE
伊藤 高生
DE
川村 真也
DE
太田 耕平
DE
野中 昇
DE
町屋 健斗
TD
板鼻 祐治
FE
毛利 雄輝
FE
滝沢 瑞子
FE
橋本 魅大

Contact

制作のご依頼やサービスに関するお問い合わせ、
まだ案件化していないご相談など、
お気軽にお問い合わせください。

お問い合わせはこちら