CREATIVE STUDIO
伝わるデザインを、
ていねいに届ける。
ファーストビューに見えている物は全部、読み込み直後に読み順で時間差に出します。見出し、説明文、ボタン、写真、飾り、スクロール案内の順です。ヘッダーは最初は透明で、少しスクロールすると半透明の帯になります。
Scroll
ABOUT
見出し・本文・カードの3段で出す
見出しが出て、本文が出て、そのあとカードが左から順に出ます。1行ずつ・1枚ずつには付けません。
コンセプト設計
伝えたいことを整理し、言葉と形にします。
ウェブ制作
読みやすさと動きやすさを両立させます。
撮影・運用
公開したあとも一緒に育てていきます。
UNIT
「ひとつの箱」は箱ごと、写真は1枚でも動かす
背景や角丸で囲まれた板は中身を分けず箱ごと上がります。写真・イラストは1枚でも出します。互い違いや傾きの装飾は残ります。
SERVICE 01
箱ごと上がるパネル
写真と文章が2列に並んでいても、板として囲まれていれば箱ごと動きます。中の要素には印を付けません。
互い違いのカード
デザイン側の transform のずらしを壊さずに出ます。
2枚目は下がる
元の位置のまま順番に出ます。
3枚目は少し傾く
傾きも残ります。
画面幅いっぱいの写真は拡大→等倍で出す
FAQ
アコーディオン
高さが0から実寸へ伸び、プラス印が90度回ってマイナスになります。読み込むものが増えないよう、素のJavaScriptで動かしています。
できます。開いておきたい項目に印を付けるだけです。上の1つ目が最初から開いた状態です。
開ききったあとは高さの指定を自動に戻すため、画面幅が変わって行数が増えても崩れません。文章が長い場合の確認用に、この回答は少し長めにしてあります。開閉のたびに高さを測り直す作りです。
TABS & MODAL
タブとモーダル
下線が選んだタブへ横に滑り、中身は少し上へ動きながら現れます。矢印キーでも切り替えられます。
切り替えの時間は部品共通の0.35秒です。長くすると重く、短くすると素っ気なくなります。
右下のパネルで時間を変えると、この切り替えにもすぐ反映されます。
OPTIONAL
色の帯が流れて写真が出る
色の帯が左から右へ流れるのと同時に、写真の枠が下から上へ少し動きます。
背景がゆっくり動く
スクロールすると、写真だけが本文よりゆっくり流れます。