株式会社ベルパーク 採用サイト
CREATE - Grow Group株式会社
業界
クリエイティブ制作
229飲食・食品・飲料
173エンタメ・趣味・娯楽
161製品・工業・素材
95IT・システム
88事業・組織
85不動産・建築・施設
78ファッション・アクセサリー
76ポータルサイト・メディア・マガジンWEB
64教育・学校
51暮らし商品・サービス
42医療・ヘルスケア・健康
39行政・NPO・団体・協会
35Web・クラウドサービス
34美容
31旅行・ホテル・観光
30就職・人材サービス
28広告・マーケティング
27インテリア・雑貨
23インフラ
23金融・保険・会計・法律
23車・バイク他
22CSR・サスティナビリティ
18アート
16ウェディング
15その他
5形式
デザイン
下層ページ
雲仙普賢岳の天然水と大自然のごちそうをたっぷり食べてそだったおいしい愛でたまご。雲仙山麓の豊かな森と有明海に囲まれた養鶏場、松本ポートリーが自信をもってお届けします。
このデザインを共有する
このデザインを共有する
Close
Design Infomation
Industry
Format
Design
本ページは、本サイト掲載日時点で公開されているサイトより、画面キャプチャ画像を引用し掲載しています。
掲載取下げ依頼、または修正依頼はコチラよりご連絡ください。
このデザインを共有する
このデザインを共有する
Close
Design Infomation
Industry
Format
Design
ここをもっと詳しく :
このサイトの下層ページはタイトル下の波形のシェイプがとても魅力的ですね!
下層のビジュアルエリアとコンテンツの繋ぎ目の役割があり、セクションが繰り返し表示されたページでも質素に感じさせない装飾としての役割もあります。
Figmaではシェイプをオートレイアウトで複数回リピートすることでこの波を簡単に再現できちゃいます!
早速作っていきましょう!
波形のベースとなるシェイプを作成しましょう。ガイド線を用意しておくと綺麗な波形が作りやすいです!
①~④と調整すれば完了ですが、繋げてみないことにはまだ不安ですよね。


ルールに従って基礎的な波形を作成するのであれば、作成したシェイプのアンカーポイントから伸びるベジェハンドルの位置を添付画像のように等間隔に置くようにしましょう。

完成したパーツはコンポーネントを作成して、下画像のようにオートレイアウトで複数並べてみましょう!

これでFigmaでの波形の作成は完了です!
シェイプを書き出してbackgroundでリピート読み込みすることでCSSでも再現が可能です!
CREATE - Grow Group株式会社
CREATE - 株式会社スピッカート
CREATE - 株式会社WOSH design
CREATE - 株式会社gaz
CREATE - 面白法人カヤック
商品のコンセプトに合った暖かいデザインですね 😊 個人的にはフッターのデザインが好きです🐓