fill away
関係者限定プレビュー
パスワードを入力してください
パスワードが正しくありません
fill away サイト構成 — Prototype v1(榮山さん主体・個人名はほぼ非表示/WF承認済み・画面遷移対応)
配色・書体・モーション・コピー(文言)は未反映。SELECTED WORKSのタイルや「← 実績一覧に戻る」「BACK TO TOP」は実際にクリックしてページ遷移できます。
PAGE
DEVICE
TOP — DESKTOP(想定幅 1440px)1 / 5 SECTIONS
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
企業名は出さず、案件を抽象化したカテゴリのみ表示。実際のクライアントワークに限らず、高品質なテンプレート/イメージ画像を使ってポートフォリオを構築する方針(榮山さん打ち合わせ決定)。コメント指摘(monopo.london のRECENT WORKを参考に、途中で止まる感じ・一つ一つ読ませる感じにしたい)を受けて、フレームを画面に固定(ピン留め)し、フレーム内で01→02→03と1件ずつ切り替わり、全件見終えたら初めてページスクロールに戻る構成に変更。各件は画像→カテゴリ名/タグ/一言コメント/WORK DETAILへの導線という順で表示し、右側の進捗目盛りと件数表示(01/03等)で現在位置を示す。3枠には、添付いただいたブランクのデバイスモックアップ画像(スマホ/ノートPC/タブレット、画面は空白)を仮で入れ、この枠にはこの種のデバイスモックアップ画像が入ることを示した(右上の「モックアップ例」表示は仮置きの目印。実際の実装時はこの表示は外す)。画面が空白のため企業名・具体的な画面内容は写り込んでおらず、「企業名は出さない」方針との矛盾はない。画像エリアをクリック(またはタイル全体クリック)すると「WORK DETAIL」ページ(右上タブで切替可)に遷移する想定。
05 FOOTER
強い営業CTA・問い合わせフォームは今回設置しない。軽い連絡導線のみ。マーク・一言メッセージは「fill away」としての名乗り。榮山さんの個人名はここにも基本的に出さない想定(クレジットとして極小テキストで入れるかどうかは要相談)。
TOP — MOBILE(想定幅 390px)1 / 5 SECTIONS
01 HERO
動くプレビュー:黒背景×光るオブジェクト
(自主制作の生成的アート想定・実績の実写真は不使用/tradedesign.jp参考。実装時はさらに精緻な質感・動きを検討)
[fill away ロゴ / ワードマーク]
Design that fills what's missing.
SCROLL CUE
PC版と同じくグラフィックの上にヘッドコピーを重ねるオーバーレイ構成。左右分割ではなく1枚のビジュアルとして縦積みなしで見せることで、モバイルでも世界観を維持する。
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 →
03 CAPABILITIES

Insight / Architecture / Aesthetic / Craft / System / Production

Strategy / UX・IA / Art Direction / Development / CMS / Direction

図解プレースホルダー(6項目の相互関係を示す図解を想定)
Insight[この項目の特徴・強みを示す説明文が入る想定]
Architecture[この項目の特徴・強みを示す説明文が入る想定]
Aesthetic[この項目の特徴・強みを示す説明文が入る想定]
Craft[この項目の特徴・強みを示す説明文が入る想定]
System[この項目の特徴・強みを示す説明文が入る想定]
Production[この項目の特徴・強みを示す説明文が入る想定]
04 SELECTED WORKS / EXPERIMENTS
01 / 03
05 FOOTER
WORK DETAIL — DESKTOP(想定幅 1440px)実績1件分の詳細ページ案
00 BACK NAV
01 CASE HEADER
[カテゴリタグ]
[ケースタイトル]

[リード文(1〜2行程度)]

ROLE|[—]
SCOPE|[—]
YEAR|[—]
クライアント名・企業名は表示しない前提。カテゴリ名を仮のケースタイトルとして扱う想定。榮山さんの個人名も基本的に出さず、「fill away」としての実績として見せる。
02 KEY VISUAL
メインビジュアル(大)/画像 or 動画
実績の実写真をそのまま使うと、ロゴ・配色・レイアウトからクライアントが特定できる可能性がある。対応案:①ぼかし・モザイク・デュオトーン等の加工を加えて実写真ベースで見せる/②tradedesign.jpのように実写真を使わず、案件ごとに書き下ろした生成的な抽象アートに置き換える(③の個別確認プロセス自体が不要になりうる)/③クライアントに個別許諾を取る/④このページ自体を問い合わせ後の個別共有に限定する。①③は機密性の高い案件(Cuolega・props等)で榮山さんへの個別確認が別途必要になるが、②はその手間を回避できる。
03 OVERVIEW
OVERVIEW
[概要文 1行目]
[概要文 2行目]
[概要文 3行目]
04 PROCESS
画像プレースホルダー
[プロセス説明A 1行目]
[プロセス説明A 2行目]
画像プレースホルダー
[プロセス説明B 1行目]
[プロセス説明B 2行目]
ブロック数は2〜4を想定(仮に2つ配置)。プロセスまで見せるか、成果物ビジュアルのみに絞るかは要検討。
05 GALLERY
枚数は仮。案件によって可変で良い。
06 OUTCOME
OUTCOME
[成果・所感 1行目]
[成果・所感 2行目]
[—]
[指標ラベル]
[—]
[指標ラベル]
[—]
[指標ラベル]
数値指標ブロックは入れるか要検討。「実績の羅列より世界観」という当初方針とのバランスに注意。不要なら丸ごと削除できる構成にしている。
07 NEXT CASE
[← 前の実績] [次の実績 →]
実写真+ぼかし/モザイク加工を基本方針の軸としつつ、機密性が高い案件は榮山さんへの個別確認、または個別共有(問い合わせ後のみ表示)に振り分ける、という段階的な運用を想定。
08 FOOTER
WORK DETAIL — MOBILE(想定幅 390px)実績1件分の詳細ページ案
00 BACK NAV
01 CASE HEADER
[カテゴリタグ]
[ケースタイトル]

[リード文(1〜2行程度)]

ROLE|[—]
SCOPE|[—]
YEAR|[—]
02 KEY VISUAL
メインビジュアル
03 OVERVIEW
OVERVIEW
[概要文 1行目]
[概要文 2行目]
[概要文 3行目]
04 PROCESS
画像プレースホルダー
[プロセス説明A 1行目]
[プロセス説明A 2行目]
画像プレースホルダー
[プロセス説明B 1行目]
[プロセス説明B 2行目]
05 GALLERY
06 OUTCOME
OUTCOME
[成果・所感 1行目]
[成果・所感 2行目]
[—]
[指標ラベル]
[—]
[指標ラベル]
07 NEXT CASE
[← 前の実績] [次の実績 →]
08 FOOTER