Mihai Popa · デジタルデザイナー
02 / Webデザイン制作事例
cipmars.
写真家 · ブカレスト
写真家のポートフォリオを、使いながら磨く。
写真家Ciprian Stănilăの作品、プロフィール、問い合わせ先をまとめたWebサイトをデザイン・制作しました。その後も実際にサイトを使いながら、閲覧や操作がより心地よくなるよう、細かな改善を重ねています。
公開サイトを見る

- 担当
- Webデザイン・開発
- 撮影
- Ciprian Stănilă
- 制作環境
- Framer
- 制作内容
- 写真家のポートフォリオ
プロジェクトについて
作品と写真家を知り、問い合わせる
Ciprianは、都市や自然の風景を撮る写真家です。サイトでは作品とともに人柄も伝え、興味を持った方が問い合わせに進める構成を目指しました。トップページでは大きな写真から作品紹介へとつなぎ、作品一覧、プロフィール、お問い合わせには、それぞれ専用のページを設けています。
Figmaでのデザイン検討やWebflowでの実装などを経て、現在のFramer版に至りました。その都度サイトを使い直し、全体の流れの中で細部を見直してきました。
01 / 見せ方
写真を引き立てる余白

- 構成
- 冒頭には、撮影中のCiprianを写した写真を配置しています。その下では、落ち着いた背景と規則的なグリッドを使い、色や被写体の異なる写真を、統一感のあるレイアウトで見せています。
- デザインの意図
- 見慣れたレイアウトにすることで、使い方を考え込まずに、紹介から作品へと見ていけるようにしています。写真それぞれの色や被写体が引き立つように、グリーンのアクセントはナビゲーションや問い合わせへのリンクに使いました。
03 / 使いながら見直すアニメーション
気づいた点を直し、もう一度試す
- 実際に見つけた問題
- 確認中、一部のテキストがアニメーション開始前に一瞬表示され、消えてから再び現れる問題が見つかりました。本来はさりげなく見せたい動きが、ちらついて見える状態でした。
- 修正と確認
- 初期表示の処理を修正して、テキストが現れるまでの動きを再確認し、ちらつきが解消されたことを確かめました。そのほかにも、画面に固定したボタンの周囲の余白や、注意書きが複数行になったときの配置を調整しました。
- 一貫性を保つために
- 共通の色やスタイル、操作時の反応は、内部用のデザインガイドに記録しています。改善した内容をルールとして残すことで、別のページやボタンにも一貫して適用できます。
04 / 振り返り
一連の操作を通して使い心地を確かめる
現在の仕上がり
cipmarsは、写真作品とその撮影者の紹介を一つにまとめた、レスポンシブなWebサイトです。ここで紹介した改善は、デザインと実装を確認する中で行ったものです。問い合わせ数やコンバージョン率への効果を測定したものではありません。
今後、確かめたいこと
次はPCとスマートフォンで、作品を見て、Ciprianについて読み、問い合わせフォームへ進む流れを確かめたいと思っています。キーボードでも操作し、迷うところや不要なスクロール、リンクによって反応が違うところを探します。修正した後は、同じ流れをもう一度試します。

