SMALLSHIFT
← サイト事例に戻る

WEBSITE STUDY / 海外

Rafael Derolez

左に自己紹介と連絡先、右に縦長の写真や画面を置くデザインエンジニアの一画面。

公式サイトを見る ↗
公式サイト / 掲載確認用
Rafael Derolezの公式サイト画面

DESIGN NOTES

このサイトの設計を読み解く。

01

細い自己紹介欄と大きな縦長画像を分ける

確認した画面では左側の細い欄に自己紹介がまとまり、右側の広い領域に縦長の画像が並ぶ。長いページを読み進めなくても、人となりと視覚的な作例を同時に見られる。情報をたくさん積むより、一画面の中で文章と画像の役割を明確に分けている。

02

人物写真と画面の作例を同じ形で並べる

右側は角を大きく丸めた縦長の画像を使い、スマートフォンの画面と本人の日常写真を隣接させる。二つの証拠画面では中央の人物写真が異なる場面になっている。同じ縦長の形で仕事と私生活の写真をそろえ、ばらばらな素材にもまとまりを与えている。

03

青い受付表示を小さな行動入口にする

左上の名前とAboutの隣に、青いFor hireの小さな表示が置かれる。背景や本文の色が抑えられているため、仕事を依頼できることが色で見つかる。大きな営業見出しを加えず、現在の受付状況を紹介欄の近くで知らせる方法が参考になる。

04

業界経験の後に仕事への姿勢を書く

自己紹介では拠点と職種の後に、これまで扱った業界を挙げ、利用する人の体験を良くしたいという姿勢を述べる。職歴を長い年表にする代わりに、経験の幅と大事にする基準を短くまとめている。分野をまたいで仕事をする個人の説明方法として読み取れる。

05

連絡先を紹介文の直後にまとめる

紹介文の末尾にTwitter、GitHub、LinkedInとメールがまとまり、人物情報を読んだ流れで連絡先へ進める。SNSごとの大きなカードを増やさず、本文内のリンクで情報量を抑える。確認画面の範囲では、別の連絡ページを探す必要がない位置に入口がある。

APPLY TO YOUR PROJECT

自分の制作に取り入れるなら

個人の紹介サイトは、短い人物説明と数点の大きな画像だけでも輪郭を示せる。仕事の受付状況と連絡先は、自己紹介を読み終える位置から見つけられるようにしたい。

そのまま真似する前に

分析は提供された一画面型のPC表示に限定する。画像の切替機構や別項目の操作、実績の担当範囲は確認しておらず、写真があることだけで制作能力や成果は判断できない。

次に見ておきたい参考

一覧へ →
Rafael Derolezの公式サイト画面