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

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枚目：サインボード