勝手にWEBサイトレビュー

【勝手にWEBサイトレビュー #14】イラストが可愛らしいギリシャのデザインスタジオのコーポレートサイト

こんにちは。

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

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

ご紹介Webサイト「Phantom」

https://www.phantom.house/

今回ご紹介するのはギリシャにあるデザインスタジオのコーポレートサイトです。
CSS Design Awards、Awwwardsのどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/phantom/37341/
▼Awwwards掲載ページ
https://www.awwwards.com/sites/phantom-design

真似したいポイント

まず、このWebサイト見て、真似したい・参考にしたいと感じたポイントをご紹介いたします。

上から降りてくる検索窓

右上の虫眼鏡マークを押すと、上から検索窓が現れる仕様になっています。
ヘッダーなどに検索窓が常に表示されているWebサイトも多いですが、画面幅が狭くなった時や、検索窓に打ち込みたい文字が多い時などを考慮すると、このような表現も良いと感じました。

マウスホバーで画面全体の背景色が変わる

TOPページに真ん中から少し下のメニュー選択セクションでは、メニューにホバーすると、画面全体の背景色が変わるようになっています。どのメニューを選択状態になっているのかが分かりやすいですね。

文字の選択で変わる文字色と背景色

Webサイト内の文字を選択状態にすると、その部分の文字色と背景色が変わるようになっています。
このような細やかな配慮がされているWebサイトは、ほかにはどのような仕掛けがあるかと探すのが楽しくなりますね。

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

ページを読み込む度に変わるFV

このWebサイトは、ページを読み込む度にランダムで異なるFVが表示されます。Webサイトを訪れる度の楽しみになるので、このような仕掛けも良いですね。

イラストアニメーション

ハンバーガーメニューを開いたところや、メニューのホバーで表示されるイラストは、可愛らしいアニメーションが施されています。
Webサイト全体の雰囲気ともマッチしていて、とても良いと思いました。

まとめ

全体的に可愛らしいコンセプトで統一されており、また細やかな配慮がされていて面白いサイトでした。
ほかにはどのような仕掛けがされてあるのか、ぜひ探してみてください!

0

関連記事

  • 2021.04.16

    【勝手にWEBサイトレビュー#28】画像の枠にこだわりのあるポートフォリオサイト

    サイトレビュー

  • 2021.04.15

    【勝手にWEBサイトレビュー#27】画面スクロールで楽しめるWPテーマコレクションサイト

    サイトレビュー

  • 2021.04.11

    【勝手にWEBサイトレビュー#26】細かな工夫・こだわりがすごい!フランスのインタラクティブデザイナーのポートフォ……

    サイトレビュー

おすすめ記事

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!