【サイトレビュー#45】 色や図形を上手に使ってカメラの撮り方を解説するWebサイト

こんにちは！

Webデザインアワードで入賞しているWebサイトのご紹介第45回です。

今回も引き続き「CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます！

ご紹介Webサイト「Say Cheese」

https://saycheese.almeida.work/

今回ご紹介するWebサイトは、「Say Cheese」です。

ブラジル、サンパウロを拠点とするシニアデザイナーArthur de Almeida(アーサー・デ・アルメイダ)氏が制作した、カメラ撮影の基本を教えるサイトです。

写真があまりに好きすぎて、これからカメラを始める人のために制作されたそうです！

サイトには下層ページがなく、1ページ完結型のWebサイトになっています。

ところどころ横スクロールが織り交ぜられていたり、スクロールによって図形が動くなど、Appleの公式サイトと似ているな～という印象を受けました！

こちらのWebサイトは、CSS Design AwardsとAwwwardsどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/say-cheese/39195/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/say-cheese

真似したいポイント

ホバー動作で撮影設定を変更した時のビフォー・アフターが確認できる！

こちらのサイトでは、写真撮影の重要な3つの設定「絞り」「シャッタースピード」「ISO」について解説しています。

各セクションで、画像の上に配置されている「＋」にマウスカーソルを合わせると撮影設定を変更した場合の写真の違いを確認することができます。

たとえばシャッタースピードのセクションでは、天井のファンの写真が載っています。

シャッタースピードが遅い場合は、ファンのプロペラがブレてスピード感がある写真になっています。速くした場合はプロペラの羽根を認識することができ、止まっているような印象の写真になっています。

ホバー動作でパッと違いを確認できるのは、とてもわかりやすくていい仕様ですね。

おすすめフォトグラファーのプロフィール画像をホバー動作で表示

ページ下部で、アルメイダ氏がおすすめするフォトグラファーのInstagram紹介コーナーがあります。

名前と国籍がリンクとなってリスト化されており、一見するとごく普通のリンク集だなという印象です。しかしホバーさせると右側のフォトグラファーのプロフィール画像が表示されるという仕様になっています！

プロフィール画像と名前をリスト化する場合、紹介する量が多いとどうしてもスペースを多く使うことになります。

このサイトのようにホバーさせて写真を表示させる仕様であれば、狭いスペースでたくさん紹介することができますね！

すごい！と思ったポイント

各撮影設定を色で表している

上述した通り、こちらのサイトでは、写真撮影の重要な3つの設定「絞り」「シャッタースピード」「ISO」について解説しています。

各設定は、以下のようにテーマカラーが決まっています。

絞り：ブルー
シャッタースピード：イエロー
ISO：ピンク

かなり縦長のサイトになっていますが、各項目を色で明確に分けることで今何の説明をしているのかがとてもわかりやすいです。

図形を使ってカメラの撮影設定の解説をしている

上記のポイントに補足です！

図形を使って各撮影設定の説明をしています。

たとえば、絞りはボケ味を調整する設定になりますが、青い図形を使ってボケ味の違いを表現しています。

写真のビフォーアフターもわかりやすかったですが、図形を使っての解説もシンプルでわかりやすい！

どこまでも初心者にやさしいWebサイトです！

まとめ

魅力的なポイントはたくさんありますが、特にホバー動作の使い方がとても上手なサイトでした。

図形や色を巧みに使ったデザインはぜひとも参考にしたいです！

前回のレビューはこちら！

【サイトレビュー#45】 色や図形を上手に使ってカメラの撮り方を解説するWebサイト