• #066 株式会社パラダイムシフト

    株式会社パラダイムシフトのサイトのファーストビュー
    https://paradigm-shift.co.jp/

    株式会社パラダイムシフトのサイト
    左側に固定されたフローティングメニュー下部のリンクは
    スクロール値でSCROLL⇔PAGE TOPのアクションに変わります。
    企業情報、事業紹介、採用情報のページトップには
    スムーススクロールでセクション移動できるリンクのブロックが表示されます。
    文字が揺らめく演出などのアニメーションが多数配置されており、
    各ページに遷移する時もアニメーションします。


  • #065 My Austria Bucket List

    My Austria Bucket List のサイトのファーストビュー
    https://bucketlist.austria.info/jp/

    オーストリア政府観光局が運営する観光サイト
    背景に罫線が引かれてあるなど、手紙を想起させる形のビューポート枠です。
    各要素枠は、四隅が切り取られているか角が丸みを帯びた形でデザインされています。
    li領域を動かして表示されるもの、liにspan指定して一文字ずつ表示されるもの、
    区切り線、動画の埋め込み、動くものが目を引くことを再認識させられます。
    オーストリアの音楽やアートの文化、自然、歴史ある街並みや食文化などを
    実感できる観光コースを、サイト訪問者自身に構築させる造りになっています。
    簡便な観光案内情報、観光局公式サイトへのリンクや
    ジャンル別オススメコースリストのページもあります。


  • #064 VinVie

    VinVieのサイトのファーストビュー
    https://vinvie.jp/

    ワイナリー VinVie(ヴァンヴィ)のサイト
    jQueryのプラグインNiceScrollがサイト全体に適用されています。
    スクロールバーは、ポインタを近づけたりホイールすると表示されます。
    スクロールは、マウスのホイール操作、スクロールバーのドラッグ、
    キーボード操作に対応しており、慣性スクロールします。
    モバイル画面時の下部に固定されたタブメニューや、
    果樹園や料理の画像があるセクションで背景にりんごとぶどうのイラストを固定表示、
    商品一覧部分ではショップへの案内がせり出してくる、などの工夫が見られます。
    PC画面時のGoogleマップ表示が大きいのが少し気になりました。