WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!

業界

  • クリエイティブ制作

    200

  • 飲食・食品・飲料

    148

  • エンタメ・趣味・娯楽

    146

  • 製品・工業・素材

    77

  • IT・システム

    70

  • 不動産・建築・施設

    67

  • ファッション・アクセサリー

    65

  • 事業・組織

    57

  • ポータルサイト･メディア･マガジンWEB

    55

  • 教育・学校

    49

  • 医療・ヘルスケア・健康

    33

  • 行政・NPO・団体・協会

    31

  • 暮らし商品・サービス

    29

  • 旅行・ホテル・観光

    28

  • 美容

    28

  • 就職・人材サービス

    23

  • 広告・マーケティング

    20

  • 車・バイク他

    20

  • 金融・保険・会計・法律

    18

  • CSR・サスティナビリティ

    16

  • インテリア・雑貨

    16

  • Web・クラウドサービス

    14

  • アート

    13

  • インフラ

    13

  • ウェディング

    13

  • その他

    3

形式

  • コーポレートサイト

    303

  • 特設サイト

    202

  • 商品・製品紹介

    200

  • 店舗・施設紹介

    121

  • 企画・プロモーション

    118

  • サービス紹介

    69

  • 採用サイト

    67

  • LP (ランディングページ)

    64

  • EC・Webサービス

    59

  • メディア・ポータル

    59

  • ポートフォリオ

    39

  • キャンペーン

    12

  • ギャラリーサイト

    1

デザイン

  • 写真が特徴的なサイト

    377

  • イラストが特徴的なサイト

    301

  • アニメーションが特徴的なサイト

    244

  • レイアウトが特徴的なサイト

    236

  • テキストが特徴的なサイト

    130

  • 多言語対応

    88

  • 動画が特徴的なサイト

    70

  • スマホ特化・モバイルファースト

    60

パーツ

  • スライダー

    323

  • スクロール追従

    298

  • リピートアニメーション

    274

  • ハンバーガーメニュー

    199

  • 動画

    172

  • ローディング

    62

  • モーダル

    60

  • 検索エリア

    43

下層ページ

  • Aboutページ

    499

  • 投稿一覧(記事/商品など)

    438

  • 投稿詳細(記事/商品など)

    386

  • サービス紹介

    320

  • お問い合わせ

    175

  • 採用サイト

    104

  • よくある質問

    82

  • プライバシーポリシー

    61

  • CSR

    33

  • 料金表

    33

  • 規約/法律に基づく表記

    23

  • メニュー

    12

  • カート

    8

  • ローディング

    2

  • ログイン

    1

  • 決済画面

    1

カラー

  • ホワイト・白

    239

  • ブルー・青

    228

  • ブラック・黒・グレー

    209

  • グリーン・緑

    143

  • カラフル・多色

    135

  • イエロー・黄色

    99

  • レッド・赤

    91

  • オレンジ・橙色

    70

  • ブラウン・茶色

    67

  • ピンク・桃色・桜色

    55

  • パープル・紫

    36

  • ベージュ・白茶

    21
2026.01.12

浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)

https://pegasus-clinic.com/

【駅徒歩5分】浜松市の美容外科・美容皮膚科ならペガサスクリニックにお任せ下さい。二重、たるみ、クマ取り、シミ治療に特化。累計5万人以上の若返りをサポートした経験豊富な専門医が丁寧なカウンセリングと施術であなたの美をサポートします。

このデザインを共有する

このデザインを共有する

Close

Design Infomation

Industry

美容

Page

投稿一覧(記事/商品など) Aboutページ サービス紹介

Color

パープル・紫

Format

店舗・施設紹介
美しい かわいい
投稿者の画像

繊細なラインや広い余白が洗練された雰囲気にぼかしを活かした透明感も凄く綺麗で、美容外科らしい上品さと清潔感がストレートに伝わってくる美しいデザイン✨
浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)のPCサイズの画像
浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)のモバイルサイズの画像

本ページは、本サイト掲載日時点で公開されているサイトより、画面キャプチャ画像を引用し掲載しています。
掲載取下げ依頼、または修正依頼はコチラよりご連絡ください。

このデザインを共有する

このデザインを共有する

Close

Design Infomation

Industry

美容

Page

投稿一覧(記事/商品など) Aboutページ サービス紹介

Color

パープル・紫

Format

店舗・施設紹介
美しい かわいい

下層デザイン

  • Aboutページ

    浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)のPCサイズのAboutページ画像
    浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)のモバイルサイズのAboutページ画像

  • サービス紹介

    浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)のPCサイズのサービス紹介画像
    浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)のモバイルサイズのサービス紹介画像

  • 投稿一覧(記事/商品など)

    浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)のPCサイズの投稿一覧(記事/商品など)画像
    浜松駅前の美容外科・皮膚科ならPEGASUS CLINIC(ペガサスクリニック)のモバイルサイズの投稿一覧(記事/商品など)画像

このデザインを作ってみよう! How to create a design

このデザインを作ってみよう!

ここをもっと詳しく :

投稿者の画像

このサイトのファーストビューにある、円形配置テキストの回転アニメーションを取り入れたスクロールダウンはとても魅力的ですね！

静止画になりがちな画面に「動き」のアクセントを加えつつ、ユーザーの視線を自然と下へ誘導できます。

このデザインの作り方

投稿者の画像

一見難しそうな『円形配置』も、Figmaではプラグインを使って簡単に再現できちゃいます！

早速作っていきましょう!

1. 円形配置テキストの作成

まずはプラグイン「To Path」を使い、正円のパスに文字列を沿わせます。
あらかじめ用意した正円のパスとループさせたいテキストを同時に選択し、プラグインを実行することで、パスの曲線に沿った綺麗なテキスト配置が完了します。

配置後に綺麗に仕上げるコツは、

・ プラグイン上のVertical Alignで円の軌道に対する文字の浮き具合を微調整すること
・ テキストが短い場合は文字数を増やして円を一周埋めたりすること

で、「文字同士の余白」が均等になるように調整するのが綺麗に見せるポイントです。

2. 回転アニメーション（ループ）の実装

次に、作成したパーツをコンポーネント化して回転アニメーションを実装します。
コンポーネントの「バリアント」を使い、360度の回転を4分割してコネクションを繋ぎます。
各バリアントに90度ずつの角度変化を与え、プロトタイプで順に繋ぎ、ループさせます。

設定のポイントは、遅延（After delay）を最小の1msに、速度（Easing）を一定の「線形」にすることです。
この組み合わせにより、コマ飛びのない滑らかで均一な回転が実現します。

最後に、プレビュー画面でずっと回転し続けているかどうか確認しておきましょう！

投稿者の画像

これでFigmaでの円形配置テキストの回転アニメーションの作成は完了です!
SVGで書き出して、CSSのanimationを使えば、実際のサイトでも再現が可能です!

同系統のサイトデザイン