WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!
WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!
雲仙普賢岳の天然水と大自然のごちそうをたっぷり食べてそだったおいしい愛でたまご。雲仙山麓の豊かな森と有明海に囲まれた養鶏場、松本ポートリーが自信をもってお届けします。
このデザインを共有する
このデザインを共有する
Close
Design Infomation
Industry
Format
Design
このデザインを共有する
このデザインを共有する
Close
Design Infomation
Industry
Format
Design
このサイトの下層ページはタイトル下の波形のシェイプがとても魅力的ですね!
下層のビジュアルエリアとコンテンツの繋ぎ目の役割があり、セクションが繰り返し表示されたページでも質素に感じさせない装飾としての役割もあります。
Figmaではシェイプをオートレイアウトで複数回リピートすることでこの波を簡単に再現できちゃいます!
早速作っていきましょう!
波形のベースとなるシェイプを作成しましょう。ガイド線を用意しておくと綺麗な波形が作りやすいです!
①~④と調整すれば完了ですが、繋げてみないことにはまだ不安ですよね。
ルールに従って基礎的な波形を作成するのであれば、作成したシェイプのアンカーポイントから伸びるベジェハンドルの位置を添付画像のように等間隔に置くようにしましょう。
完成したパーツはコンポーネントを作成して、下画像のようにオートレイアウトで複数並べてみましょう!
これでFigmaでの波形の作成は完了です!
シェイプを書き出してbackgroundでリピート読み込みすることでCSSでも再現が可能です!
デザデジ
CREATE - 株式会社WOSH design
CREATE - 株式会社gaz
デザデジ
デザデジ
CREATE - Wlt.design
商品のコンセプトに合った暖かいデザインですね 😊 個人的にはフッターのデザインが好きです🐓