【勝手にWEBサイトレビュー#18】シンプルながら印象に残るイギリスの日本旅行企画会社のコーポレートサイト

こんにちは。

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

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

ご紹介Webサイト「Get the picture」

https://www.getthepicture.tours/

今回ご紹介するWebサイトは、イギリスにある日本旅行企画会社のコーポレートサイトです。

こちらのサイトは、CSS Design Awardsを受賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/get-the-picture/33487/

真似したいポイント

メニューのアニメーション

このWebサイトは、右上にメニューボタンがあります。ボタンを押すと背景が円形に広がっていき、メニューが表示されるようになっています。閉じる時も同様に円が小さくなっていきます。

メニューは、横や上からスライドインしてくるものが多いので、このようなメニューの表示は面白みがあると感じました。

ページスクロールに追従するアイコン

旅程を紹介するページは縦に長い構成になっていて、ページの真ん中にスクロールについてくる赤い丸のアイコンがあります。

スクロールに対して少し遅れて追従したり、移動の時は小さい丸、所定の位置についてたら大きい丸になるような動きも細かく設定されていて、とても綺麗な印象を受けます。

すごいポイント

斬新な写真の使い方

まずギャラリーページに入ると「肖像」などのカテゴリーが表示されています。こちらをクリックすると肖像の写真ギャラリーに入ることができます。

カテゴリーページでは、丸い写真が表示されており、こちらをクリックするとその写真が画面全体に広がり、その後にその写真を含む写真一覧になるというアニメーションになっています。写真の使い方が斬新で魅力的だと思いました。

まとめ

シンプルながら動きが細やかで面白いサイトでした。そのほかにも、Webサイト全体の色味は白と赤を基調としていることで、写真が際立って見えるので、ぜひ見てみてください!

関連記事はこちら

0

関連記事

  • 2021.04.16

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

    サイトレビュー

  • 2021.04.15

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

    サイトレビュー

  • 2021.04.11

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

    サイトレビュー

おすすめ記事

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

  • 2019.02.08

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

    CSS

  • 2021.02.06

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

    CSS

    HTML5

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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