本文へ移動
実績一覧

Mihai Popa · デジタルデザイナー

02 / Webデザイン制作事例

cipmars.

Ciprian Stănilă
写真家 · ブカレスト

写真家のポートフォリオを、使いながら磨く。

写真家Ciprian Stănilăの作品、プロフィール、問い合わせ先をまとめたWebサイトをデザイン・制作しました。その後も実際にサイトを使いながら、閲覧や操作がより心地よくなるよう、細かな改善を重ねています。

公開サイトを見る
海辺のモノクロ写真にCiprianの名前を重ね、ナビゲーションにグリーンのアクセントを使ったcipmarsのトップページ。
写真を大きく見せ、ナビゲーションをコンパクトにまとめたcipmarsのスマートフォン版トップページ。
PC・スマートフォン
01 / トップページFramer上の現行デザイン · 2026年11月撮影
担当
Webデザイン・開発
撮影
Ciprian Stănilă
制作環境
Framer
制作内容
写真家のポートフォリオ

プロジェクトについて

作品と写真家を知り、問い合わせる

Ciprianは、都市や自然の風景を撮る写真家です。サイトでは作品とともに人柄も伝え、興味を持った方が問い合わせに進める構成を目指しました。トップページでは大きな写真から作品紹介へとつなぎ、作品一覧、プロフィール、お問い合わせには、それぞれ専用のページを設けています。

Figmaでのデザイン検討やWebflowでの実装などを経て、現在のFramer版に至りました。その都度サイトを使い直し、全体の流れの中で細部を見直してきました。

01 / 見せ方

写真を引き立てる余白

構成
冒頭には、撮影中のCiprianを写した写真を配置しています。その下では、落ち着いた背景と規則的なグリッドを使い、色や被写体の異なる写真を、統一感のあるレイアウトで見せています。
デザインの意図
見慣れたレイアウトにすることで、使い方を考え込まずに、紹介から作品へと見ていけるようにしています。写真それぞれの色や被写体が引き立つように、グリーンのアクセントはナビゲーションや問い合わせへのリンクに使いました。

03 / 使いながら見直すアニメーション

気づいた点を直し、もう一度試す

実際に見つけた問題
確認中、一部のテキストがアニメーション開始前に一瞬表示され、消えてから再び現れる問題が見つかりました。本来はさりげなく見せたい動きが、ちらついて見える状態でした。
修正と確認
初期表示の処理を修正して、テキストが現れるまでの動きを再確認し、ちらつきが解消されたことを確かめました。そのほかにも、画面に固定したボタンの周囲の余白や、注意書きが複数行になったときの配置を調整しました。
一貫性を保つために
共通の色やスタイル、操作時の反応は、内部用のデザインガイドに記録しています。改善した内容をルールとして残すことで、別のページやボタンにも一貫して適用できます。

04 / 振り返り

一連の操作を通して使い心地を確かめる

現在の仕上がり

cipmarsは、写真作品とその撮影者の紹介を一つにまとめた、レスポンシブなWebサイトです。ここで紹介した改善は、デザインと実装を確認する中で行ったものです。問い合わせ数やコンバージョン率への効果を測定したものではありません。

今後、確かめたいこと

次はPCとスマートフォンで、作品を見て、Ciprianについて読み、問い合わせフォームへ進む流れを確かめたいと思っています。キーボードでも操作し、迷うところや不要なスクロール、リンクによって反応が違うところを探します。修正した後は、同じ流れをもう一度試します。

Create a free website with Framer, the website builder loved by startups, designers and agencies.