ゆるやかに、思考を運ぶ。「流れ」を形にしたポートフォリオテンプレート『FLOW』で見つける、表現の新しいリズム
視覚的な「静寂」を生む、霧と波の演出
ブラウザを開いた瞬間、まず視界を包み込むのは、穏やかに波打つワイヤーフレームの地平線です。Three.jsによって描かれたこの波は、単なる背景装飾ではありません。
- 霧の奥行き: 背景に霧がかったような演出が施されており、画面の奥へと続く無限の広がりを感じさせます。
- 透き通る質感: 波の透明度は 0.3 に抑えられ、主張しすぎることなく、コンテンツの下で静かに呼吸を続けています。
- グラデーションの境界: 画面下部に向けて施されたグラデーションが、デジタルな背景と現実の情報を滑らかに繋いでいます。
この「動いているけれど、静かである」という矛盾した状態が、閲覧者の集中力を高め、作品へと深く没入させるための下地を作っています。
知性を感じさせる、タイポグラフィと余白の対話
『FLOW』のデザインを支えているのは、モダンなサンセリフ体『Manrope』のミニマルな美学です。
特筆すべきは、ヘッダー部分の「Bio（自己紹介）」エリアの設計です。波の動きをうっすらと感じさせながらも、テキストの可読性をしっかり担保しています。
情報の密度をあえて低く保ち、文字と文字、画像と画像の間に「贅沢な時間」を置く。この設計思想は、機能性を重んじながらも、情緒的な価値を大切にするクリエイターの姿勢を物語っています。
リズムを生む、交互配列のダイナミズム
作品一覧セクション「Selected Works」では、画像とテキストが左右交互に入れ替わるレイアウトが採用されています。
- 視線の誘導: 規則的な「左から右」の読み飛ばしを防ぎ、一つひとつの作品に対して丁寧に視線を留めさせる効果があります。
- スクロールの心地よさ: フェードアップアニメーションにより、スクロールに合わせて作品が「スッと」浮き上がります。
シンプルなコードながら、サイト全体に洗練された躍動感を与えています。
“動いているのに静か”な背景が、集中を生む
FLOWを開くと、画面の奥に、ゆるやかに波打つワイヤーフレーム（線で描かれた）の地平線が広がります。Three.jsで描かれたこの波は常に動き続けていますが、不思議とうるさく感じません。その秘密は、徹底した”引き算”にあります。
波の透明度はわずか0.3程度に抑えられ、霧がかった演出と、画面下に向かうグラデーションで、背景はコンテンツの下へそっと溶け込んでいます。主張せず、静かに呼吸を続けるだけ。だから視線が背景に奪われることなく、作品やテキストに集中できます。
「動いているけれど、静かである」という一見矛盾した状態。これがFLOWの肝です。完全に止まった背景は退屈ですが、動きすぎる背景は気が散る。その中間にある”ちょうどいい揺らぎ”が、見る人を作品へと深く没入させる下地を作っています。
『FLOW』が最も輝く、3つの活用シーン
この清潔感と透明感に満ちたデザインは、特に「実体のある美しさ」を扱う方に最適です。
プロダクト・家具デザイナー
テンプレートのデモでも示されている通り、「木製の椅子」や「セラミックの花瓶」といった、素材の質感を大切にする作品と見事に調和します。余白が作品の周りに「空気感」を生み出し、その物の重さや手触りまでをも想像させます。
建築家・インテリアプランナー
空間の広がりを大切にする建築のポートフォリオにおいて、背景の波と霧の演出は、建物が建つ「土地の気配」や「光の移ろい」を象徴するメタファーとなります。グリッドに縛られすぎないレイアウトが、ダイナミックな建築写真を引き立てます。
クリーンな美学を持つUI/UXデザイナー
デジタルなプロダクトを扱いながらも、人間中心の「心地よさ」を追求するデザイナーにとって、この滑らかな動作と整理されたタイポグラフィは、そのまま自身の仕事の質を証明する鏡となります。
「温度感」を微調整する、カスタマイズのヒント
『FLOW』は、カスタマイズのしやすさも魅力の一つです。コードの深部に入り込まずとも、いくつかの変数を変えるだけで、自分だけの「流れ」を作ることができます。
色彩で季節や時間を表現する
:root で定義されている背景色とアクセントカラーを調整してみましょう。
| スタイル | 背景色 (–bg-color) | 波の色 (color) | 印象 |
|---|---|---|---|
| Morning Mist | #f7f7f7 (default) | #cccccc (default) | 清潔感のある、朝の静けさ |
| Deep Ocean | #0a0f14 | #1e3a5f | 知性的で深い、夜の海のような静寂 |
| Warm Sand | #fdfaf6 | #e2d1c3 | 温かみのある、オーガニックな手触り |
波の「鼓動」をコントロールする
JavaScript内の数値を少し書き換えるだけで、サイトの性格が変わります。
- スピード: time += 0.005 を 0.002 にすれば、よりゆったりとした、瞑想的な雰囲気に。
- 波高: z の計算式の最後にある 1.5 を 0.5 にすれば、さざ波のような控えめな表現になります。
自身の作品が持つ「テンポ」に合わせて、背景の鼓動をチューニングする。そんな細やかなこだわりが、ポートフォリオの完成度を一段上のものにします。
背景の波の”テンポ”を、自分の作品に合わせる
FLOWの面白いところは、背景の波の「鼓動」を自分でチューニングできる点です。設定の数値を少し変えるだけで、波の速さと高さが変わります。速度をゆっくりにすれば、瞑想的で静かな雰囲気に。波の高さを抑えれば、ざわめきのない、おだやかなさざ波のような表現に。自分の作品が持つテンポ——力強いのか、静謐なのか——に背景の鼓動を合わせると、サイト全体に一本の芯が通ります。
あわせて、色のプリセットで時間や季節も切り替えられます。明るいグレーの「Morning Mist（朝の静けさ）」、深い紺の「Deep Ocean（夜の海）」、温かなベージュの「Warm Sand（オーガニックな手触り）」。背景色と波の色をセットで変えるだけで、同じ流れがまったく違う表情になります。
AIに頼むなら「背景をDeep Ocean（深い紺の夜の海）にして、波の動きをゆっくり・控えめにして」と伝えると、静かで知的な雰囲気にまとめられます。
「触れる」という体験をデザインする
フッターに配置されたシンプルなリンクボタンは、ホバーすると色が反転する心地よいインタラクションを備えています。また、作品をクリックすれば、大画面でじっくりと鑑賞できるモーダル機能も標準装備されています。
こうした「当たり前の動作」が、一切の引っ掛かりなく、滑らかに（FLOWに）実行されること。それこそが、ユーザー体験であり、作り手の誠実さの現れではないでしょうか。
『FLOW』というテンプレートに触れて感じるのは、表現とは「足し算」だけでなく、いかに「引き算」の中に豊かさを見出すか、という問いです。
情報を詰め込むのではなく、情報の「通り道」をデザインする。自分の実績を誇示するのではなく、自分の「思考のプロセス」を体感してもらう。
このテンプレートは、あなたが積み上げてきた大切な作品たちを、優しく、そして確実に、次なる目的地へと運んでくれるはずです。あなたのクリエイティビティという名の川が、この『FLOW』に乗って、より広い世界へと繋がっていくことを願っています。
本テンプレートは、有料noteをご購入いただいた方への限定特典（シークレットテンプレート）として公開しております。
→ 無料HTMLテンプレート「EYANCA」ダウンロードページ
