• カテゴリー別アーカイブ ブランディングサイト
  • #117 カリオモンズコーヒーロースター

    カリオモンズコーヒーロースターのサイトのファーストビュー
    https://kariomons.com/

    コーヒーショップ カリオモンズコーヒーロースターのサイト
    “カリオモン”とは、コーヒーを飲むことを儀式化した作法の一つで、
    日本の茶道と同様に、コーヒーを飲むという行為に精神的な要素や教養などが
    含まれる文化的な習慣であり、他者に対する感謝ともてなしの精神を表すものです。
    ページの造りは、画面左半分が固定になっている
    スプリットスクリーンレイアウトです。
    「私たちのこと」のページのみ、画面左のイメージ領域を解放し、
    画面を大きく使った文字と画像のレイアウトとなります。
    但し、フッター領域にあるメニューは表示されず、
    画面左上のメニュー以外にページを移行する仕組みを失っています。
    「贈り物・ギフト」のページには、”コーヒーギフトの選び方”という
    選ぶ人のニーズに沿ったフロー図をモーダルで表示し、
    商品へと誘導するユニークな仕掛けが見られます。


  • #116 Vermicular(バーミキュラ)

    vermicularのサイトのファーストビュー
    https://www.vermicular.jp/

    鋳造メーカー 愛知ドビーのブランドサイト Vermicular(バーミキュラ)
    ファーストビューは全画面を使用したスライドとなっており、
    ちょうどフェードアウトで画像が切り替わるタイミングに
    トップページリンクのブランドロゴが画面左上から現れます。
    ナビメニューが固定追従する時にも、
    画面右からオンラインショップとページトップボタンが現れます。
    ナビメニューのドロップダウンの動き、各要素のマウスオーバー時の動きなど、
    間を意識してイベントを設定しているように感じます。
    メニューにある英語版のページは日本版と違う造りになっています。


  • #115 katakata branding

    katakata brandingのサイトのファーストビュー
    https://katakata.don-guri.com/branding/

    オーダーメイドサービス katakata branding のサイト
    ファーストビューの滑らかな背景アニメーションは
    すべて、重なり合う文字が輪になる演出です。
    ビューポート固定の背景が左から右からと方向を変えて現れる動きや、
    コンテンツの角度のついた表示の仕方などで視線誘導を行っています。
    Conceptの見出し以外はジャンプ率は控えめ、余白を活かしたレイアウトとなっています。
    白のベースに背景アニメーションと黒文字のシンプルな色づかいです。