浮き上がるボタン
ホバーで、少し浮いて影が広がる。基本の、押したくなるボタン。
ホバー
Components
コンポーネントを探す
ボタン・タブ・リンク・カードなどの、小さな部品の見本です。実際に触って、動きを確かめられます(ホバー・クリック・スワイプ)。気に入った部品は、お申し込みの際にID(BTN-001 など)をお知らせください。部品は、どのプランでも選べます。
ここでご覧いただくのは見本です。実際のサイトに入る部品は、デザインに合わせてご相談のうえ決まります。デザイン全体はデザインを探すから。
種類
動き
塗りが広がるボタン
枠線だけのボタン。ホバーで、左から色が広がる。
ホバー
線が伸びるテキストボタン
文字だけのボタン。ホバーで、下線が伸びる。控えめで上品。
ホバー
矢印が動くボタン
ホバーで、矢印が右へ動く。次のページへ誘導したいときに。
ホバー
光が走るボタン
グラデーションのボタン。ホバーで、光がさっと走る。目立たせたい主役に。
ホバー
ネオンのボタン
ダーク背景向け。ふちが光り、ホバーでさらに強く光る。バーやライブ向き。
ホバー
立体の押せるボタン
厚みのあるボタン。クリックすると、ぎゅっと沈む。かわいい雰囲気に。
ホバークリック
波紋のボタン
クリックした位置から、波紋が広がる。押した手ごたえが伝わる。
クリック
広がるアイコンボタン
丸いアイコンボタン。ホバーで、横に広がって文字が出る。
ホバー
色が入れ替わるボタン
斜めに2色に分かれたボタン。ホバーで、色がすべるように入れ替わる。
ホバー
文字が切り替わるボタン
ホバーで、文字が上へ切り替わる。短いラベル向き。
ホバー
枠が走るボタン
ホバーで、枠線が四辺に沿って走る。きっちりした印象に。
ホバー
いいねボタン
クリックで、ハートが色づいてはねる。お気に入りの切り替えに。
クリック
送信中が分かるボタン
クリックで、くるくる回って、完了に変わる。フォーム送信の安心感に。
クリック
マグネットボタン
マウスを近づけると、ボタンがすこし吸い寄せられる。遊び心のある演出に。
ホバー
広がるメニューボタン
クリックで、小さなボタンが扇のように広がる。SNSや連絡手段をまとめたいときに。
クリック
旬の素材を使った、日替わりのメニューです。
小さな家族経営のお店です。ゆっくりお過ごしください。
駅から歩いて5分。駐輪場もあります。
下線がすべるタブ
選んだタブの下で、線がすべるように動く。基本のタブ。矢印キーでも切り替えできる。
クリック
旬の素材を使った、日替わりのメニューです。
小さな家族経営のお店です。ゆっくりお過ごしください。
駅から歩いて5分。駐輪場もあります。
ピル型のタブ
丸い背景がすべって動く。切り替えの手ごたえが分かりやすい。
クリック
旬の素材を使った、日替わりのメニューです。
小さな家族経営のお店です。ゆっくりお過ごしください。
駅から歩いて5分。駐輪場もあります。
縦のタブ
左に項目、右に内容。項目が多いときや、PCの画面に向いている(スマホでは横並び)。
クリック
旬の素材を使った、日替わりのメニューです。(左へスワイプ)
小さな家族経営のお店です。ゆっくりお過ごしください。
駅から歩いて5分。駐輪場もあります。
スワイプで切り替わるタブ
内容を左右にスワイプして切り替えられる。スマホで使いやすい。
クリックスワイプ
予約はできますか?
お電話・フォームから承ります。
子ども連れでも大丈夫ですか?
はい。キッズチェアもご用意しています。
支払い方法は?
現金・カードが使えます。
シンプルなアコーディオン
よくある質問に。+が×に回って、開閉する。余計な装飾のない基本形。
クリック
お電話・フォームから承ります。
はい。キッズチェアもご用意しています。
現金・カードが使えます。
カード型のアコーディオン
ひとつずつ枠で囲んだ、やわらかく開くアコーディオン。開いた項目は枠が色づく。
クリック
お電話・フォームから承ります。
はい。キッズチェアもご用意しています。
現金・カードが使えます。
ひとつだけ開くアコーディオン
ひとつ開くと、ほかが自動で閉じる。ページが長くなりにくい。
クリック
ハンバーガーメニュー
スマホ向け。三本線が×に変わり、メニューが下に開く。
クリック
下線が広がるナビ
ホバーで、下線が中央から広がる。PC向けの、すっきりしたナビ。
ホバー
ドロップダウンのナビ
項目にマウスを重ねる(またはクリックする)と、メニューが開く。項目が多い店・団体向け。
ホバークリック
こむぎ堂メニュー ・ アクセス
(この枠の中を、下へスクロールしてみてください)
焼きたてのパンを、毎朝お届けします。
国産小麦と天然酵母を使っています。
季節のデニッシュも、お楽しみください。
ご来店を、お待ちしています。
日曜日は、午前中で売り切れることがあります。
縮むヘッダー
スクロールすると、ヘッダーが小さく縮んで、影がつく。常に画面の上に残る。
スクロール
下部タブバー
スマホの画面の下に並べる、アイコン付きのタブバー。選んだ項目が色づく。
クリック
左から伸びる下線のリンク
ホバーで、下線が左から伸びる。文章の中のリンクに。
ホバー
中央から広がる下線のリンク
ホバーで、下線が中央から広がる。落ち着いた印象。
ホバー
矢印が動くリンク
ホバーで、矢印が右へ動く。続きを読ませたいときに。
ホバー
マーカーのリンク
ホバーで、蛍光ペンを引いたように色が広がる。重要な言葉を目立たせる。
ホバー
文字が切り替わるリンク
ホバーで、文字が上へ切り替わる。短い言葉のリンク向き。
ホバー
外部リンクのリンク
ホバーで、↗が動く。外部サイトへ移ることが伝わる。
ホバー
焼きたての香りで、一日がはじまる。
1行ずつ現れる見出し
スクロールして画面に入ると、見出しが1行ずつ下から現れる。
スクロール
焼きたてのパン
タイプライター
文字が1文字ずつ打ち出され、言葉が入れ替わる。キャッチコピーに。
自動
Welcome
流れるグラデーション文字
文字の色が、グラデーションでゆっくり流れる。ロゴ・見出しの強調に。
自動
いらっしゃいませ
波打つ文字
マウスを重ねると、1文字ずつ跳ねる。遊び心のある見出しに。
ホバー
天然酵母のパン
ほのかな酸味ともちもち食感。
浮き上がるカード
ホバーで、カードがふわっと浮いて、影が広がる。商品・メニュー一覧の基本形。
ホバー
クロワッサン
バターをたっぷり使っています。
ズームするカード
ホバーで、写真がゆっくり拡大する。写真を主役にしたいときに。
ホバー
季節のブーケ
その日のおすすめを、手のひらサイズに。
傾くカード
マウスの動きに合わせて、カードが立体的に傾く。印象に残したいカードに。
ホバー
裏返るカード
ホバー(スマホではタップ)で、カードが裏返って説明が出る。
ホバークリック
サンゴ礁の生態
季節ごとの変化を調べています。
説明がせり上がるカード
ホバーで、写真の下から説明がせり上がる。写真を大きく見せたいときに。
ホバー
ライトボックスのギャラリー
写真をクリックすると、画面いっぱいに拡大する。Escキーや背景のクリックで閉じる。
クリック
マソンリーのギャラリー
縦横の違う写真を、すき間なく並べる。ホバーで、色が濃くなって名前が出る。
ホバー
広がるギャラリー
ホバー(スマホではタップ)した写真が、ぐっと広がる。数枚の写真を、印象的に見せる。
ホバークリック
スワイプできるカルーセル
指で左右にスワイプして進む。矢印とドットでも操作できる。両端の写真が少し見える。
スワイプクリック
焼きたての朝
季節のお花
海のいのち
フェードのスライダー
写真が、ふわっと切り替わりながら自動で進む。ホバー中は止まる。トップの顔に。
自動クリック
BEFOREAFTERビフォー・アフター
つまみをドラッグ(またはスワイプ)して、2枚の写真を見比べる。リフォームや変化を見せたいときに。
スワイプ