01 HERO
動くプレビュー:黒背景×光るオブジェクト
(自主制作の生成的アート想定・実績の実写真は不使用/tradedesign.jp参考。実装時はさらに精緻な質感・動きを検討)
[fill away ロゴ / ワードマーク]
Design that fills what's missing.
足りないものを、満たすデザイン。
SCROLL CUE
最重要セクション。開いた瞬間の第一印象を作る。方向性として、黒background×1点だけ光る生成的な抽象オブジェクト(tradedesign.jp的な表現)を置く案が有力(配色・質感・モーションは次工程で検討)。このサイトは「fill away」として打ち出す前提。テキストとグラフィックを左右分割せず、グラフィックの上にヘッドコピーを重ねるオーバーレイ構成に変更(本番では可読性のため下部に暗いグラデーション/スクリムを敷く想定=グレーの帯で仮表現)。
02 STATEMENT
Good design doesn't add noise.
It fills the gap that was already there.
Nothing extra, nothing missing.
That's fill away.
View more →
短い数行のみ。長文説明はしない。本番では背景色を反転しリズムを作る想定。tradedesign.jpのように、この数行の下に「View more」を置き、興味がある人だけ長めの思想文を読める構成(普段は短いままで圧迫せず、興味がある人だけ長めの思想文を読める)を、下の「View more」プレースホルダーで表現。
03 CAPABILITIES
Insight / Architecture / Aesthetic / Craft / System / Production
Strategy / UX・IA / Art Direction / Development / CMS / Direction
図解プレースホルダー(6項目が並列ではなく相互に関係し合う構造であることを示す図解を想定)
Insight[この項目の特徴・強みを示す説明文が入る想定]
Architecture[この項目の特徴・強みを示す説明文が入る想定]
Aesthetic[この項目の特徴・強みを示す説明文が入る想定]
Craft[この項目の特徴・強みを示す説明文が入る想定]
System[この項目の特徴・強みを示す説明文が入る想定]
Production[この項目の特徴・強みを示す説明文が入る想定]
上段(Insight / Architecture / Aesthetic / Craft / System / Production)が本命のラベル案。下段は元になった実務区分(料金プランの費用項目に対応)を小さく添えて、初見でも意味が伝わるようにした構成。Insight=Strategy/Architecture=UX・IA/Aesthetic=Art Direction/Craft=Development/System=CMS/Production=進行管理・検証・公開。6項目は一方通行の工程ではなく相互に影響し合う関係性を持つため、下に相関図・循環図等の図解を配置する想定。現時点では図解の内容は作り込まず、配置予定であることを示すプレースホルダーのみ。図解の下には、各項目ごとの特徴・強みを説明する短文が入ることを示すプレースホルダーを追加(文言は未確定)。
04 SELECTED WORKS / EXPERIMENTS
01 / 03
[カテゴリ名]
[タグ]
[一言コメント(1行)]
WORK DETAILへ →
[カテゴリ名]
[タグ]
[一言コメント(1行)]
WORK DETAILへ →
[カテゴリ名]
[タグ]
[一言コメント(1行)]
WORK DETAILへ →
企業名は出さず、案件を抽象化したカテゴリのみ表示。実際のクライアントワークに限らず、高品質なテンプレート/イメージ画像を使ってポートフォリオを構築する方針(榮山さん打ち合わせ決定)。コメント指摘(monopo.london のRECENT WORKを参考に、途中で止まる感じ・一つ一つ読ませる感じにしたい)を受けて、フレームを画面に固定(ピン留め)し、フレーム内で01→02→03と1件ずつ切り替わり、全件見終えたら初めてページスクロールに戻る構成に変更。各件は画像→カテゴリ名/タグ/一言コメント/WORK DETAILへの導線という順で表示し、右側の進捗目盛りと件数表示(01/03等)で現在位置を示す。3枠には、添付いただいたブランクのデバイスモックアップ画像(スマホ/ノートPC/タブレット、画面は空白)を仮で入れ、この枠にはこの種のデバイスモックアップ画像が入ることを示した(右上の「モックアップ例」表示は仮置きの目印。実際の実装時はこの表示は外す)。画面が空白のため企業名・具体的な画面内容は写り込んでおらず、「企業名は出さない」方針との矛盾はない。画像エリアをクリック(またはタイル全体クリック)すると「WORK DETAIL」ページ(右上タブで切替可)に遷移する想定。