studio02-01

STUDIO

あらかじめサイズを規定してサンプルページを作成

ブラウザの画面が9種類。

▶1920px-Full HD
▶1440px-Laptop L
▶1200px-Laptop M
▶1024px-Laptop
▲768px-iPad
▼414px-iPhone 11/11 Pro Max
▼375px-iPhone 11 Pro
▼360px-Google Pixel 4
▼320px-iPhone SE

ブレイクポイントが(▶PC)(▲タブレット)(▼モバイル)の3種類ですので、
「1024px-Laptop」を基準に画角サイズを決めた上でサンプルページを作成しました。
※サンプルで作成したページですので実際に存在するお店のページではありません。

studio02-02

作成ページを確認する

studio02-03

eyecatch-200614エフェクト/ブラインドを使ったモーショングラフィックス(After Effects)前のページ

背景動画、スクロールアニメーション、CMSの導入をテーマにページを作成しました。次のページstudio03-01

関連記事

  1. studio07-01

    STUDIO

    STUDIOを使って時短で低価格の本格的なホームページを制作します

    ホームページ制作過程におけるコーディング作業の負担は、スマホ対応によっ…

  2. studio13-01

    STUDIO

    マウスオーバーによるボタンアクション集を制作(STUDIO)

    STUDIOの機能を利用して、マウスオーバー時に起こせるアクション…

  3. studio05-01

    STUDIO

    STUDIOにない機能をiframeで読み込んでサンプルページを作成しました

    スライドショーとサムネールからイメージを拡大表示させるコンテンツを…

  4. studio08-01

    STUDIO

    STUDIOでタブ切り替えコンテンツの掲載

    STUDIOでは、タブ切り替えコンテンツの掲載ができます。サン…

  5. studio14-01

    STUDIO

    4×4=16マスで画面全体を構成するトップページのレイアウトサンプル

    4×4=16マスで画面全体を構成するトップページのレイアウトを制作しま…

  6. studio10-03

    STUDIO

    サンプルサイト09/テーマ:コーヒー豆専門店

    STUDIOで歯科医院をテーマにしたサンプルサイトを制作しました。…

  1. Blog-サムネイル20201221

    Premiere Pro

    映像にシェイク効果を簡単に(Premiere Pro/Motion Array)…
  2. Swing-Text

    After Effects

    スウィングするテキストの作り方【Affter Effects】
  3. eyecatch-200410

    After Effects

    リピーター機能だけで作る桜の花が舞うアニメーション(After Effects)…
  4. pop-ups01

    Adobe Muse CCを使ったホームページ制作

    3つの方法でポップアップ(Adobe Muse)
  5. minimal-titles-img

    After Effects

    Filmstocksが提供しているAfter Effectsのエフェクト「Min…
PAGE TOP