本文へ移動
PC・スマートフォン01 / トップページFramer上の現行デザイン · 2026年11月撮影 トップページに掲載した写真
実績一覧Ciprian Stănilă
写真家 · ブカレスト
Mihai Popa · デジタルデザイナー
02 / Webデザイン制作事例
cipmars.
写真家 · ブカレスト
作品と問い合わせ先をまとめた写真家のWebサイト。
写真家Ciprian StănilăのWebサイトをデザイン・制作しました。作品、プロフィール、問い合わせ先を掲載し、その後もリンク、ボタン、余白、アニメーションを見直しました。
公開サイトを見る- 担当
- Webデザイン・開発
- 撮影
- Ciprian Stănilă
- 制作環境
- Framer
- 制作内容
- 写真家のポートフォリオ
プロジェクトについて
サイトに掲載した内容
Ciprianは都市や自然の風景を撮影する写真家です。トップページには大きな写真と主な作品を配置し、作品一覧、プロフィール、お問い合わせのページを別に用意しました。作品を見た人が、撮影者について読み、問い合わせできる構成です。
Figmaでデザインを検討し、Webflowでの制作を経て、現在のFramer版を制作しました。各段階でサイトを操作し、配置やボタンの動きを確認して修正しています。
01 / 写真の配置
写真の並べ方
- 制作した内容
- トップページの冒頭にCiprian本人の写真を置き、その下に作品を縦横の列にそろえて並べました。背景をシンプルにし、被写体や色の異なる写真も同じ構成で表示しています。
- この配置にした理由
- 見慣れた配置にすることで、特別な操作を覚えなくても作品を見られるようにしています。ページ移動や問い合わせのリンクには、目印となる緑色を使いました。
03 / 表示の不具合修正
読み込み時の文字のちらつきを修正
- 起きていた問題
- 一部の文字がアニメーションの開始前に表示され、一度消えてから再び現れていました。そのため、読み込み時に文字がちらついて見えていました。
- 修正した内容
- 文字の初期表示を修正し、ちらつきがなくなったことを確認しました。画面に固定したボタンの周囲の余白や、注意書きが2行以上になったときの配置も調整しました。
- 今後の編集に使う資料
- 共通の色、文字やボタンのスタイル、操作時の反応を内部用のデザインガイドに記録しました。別のページやボタンを編集するときにも、この内容を参照できます。
04 / 現状と今後の確認
現在のサイトと今後の確認
現在できていること
PCとスマートフォンで、Ciprianの作品、プロフィール、問い合わせ先を確認できるサイトです。ここで紹介した変更は、制作中に表示や操作を確認したものです。問い合わせ件数への効果は測定していません。
次に確認したいこと
PCとスマートフォンで、写真を見て、Ciprianについて読み、問い合わせフォームを探してもらいたいと考えています。キーボードでの操作も確認し、わかりにくいボタン、不要なスクロール、反応の不統一がないかを調べます。問題を直した後は、同じ操作で再確認します。