作品 · Web / エンジニアリング · 2023

Keisuke Fujiwara

インテリアデザイナー 藤原敬介氏のポートフォリオサイト

概要

インテリアデザイナー 藤原敬介氏のポートフォリオサイト。空間の写真が画面いっぱいに出て、余白と細い文字だけがそれを支える。レイアウトからコードまで、1人で通してつくった。

背景

空間のデザインは、写真の中の光や奥行きで判断される。サイト側が主張を始めると、その情報がまず削られる。だから、インターフェースが写真の邪魔をしないことを最初の条件にした。

方法

レイアウトの決まりごとを最初からコードで書いた。モックを実装に訳す工程がないので、余白も文字も動きも同じ規則から出ている。写真は画面幅いっぱいに置き、UI は視界から引いた。スマートフォンでも、写真の縦横比を崩さずに収まるよう組んでいる。

結果

1人で両方を持ったぶん、細部までズレが出ない。公開後の手入れも軽く済んでいる。

一覧 — 作品が画面いっぱいに出る
Fig. 01 — 一覧 — 作品が画面いっぱいに出る
詳細
Fig. 02 — 詳細
スマホでの表示
Fig. 03 — スマホでの表示