「スグ食べ」ランディングページ
クレジット
デザイナー
HTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale=1, user-scalable=yes">
<meta name="description" content="こだわり農家の朝どりオーガニック野菜をご自宅で。">
<meta property="og:title" content="スグ食べ"/>
<meta property="og:site_name" content="スグ食べ">
<meta property="og:type" content="website">
<meta property="og:locale" content="ja-JP">
<meta property="og:description" content="こだわり農家の朝どりオーガニック野菜をご自宅で。"/>
<meta name="twitter:card" content="summary" />
<title>スグ食べ</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/index.css">
</head>
<body>
<header class="header">
<div class="header-content-wrapper">
<h1>スグ食べ</h1>
<div class="header-logo"> <img src="assets/images/logo.png" alt="スグ食べ"> </div>
<div id="nav-drawer">
<input id="nav-input" class="none" type="checkbox">
<label id="nav-open" for="nav-input"><span>
</span></label>
<label id="nav-close" class="none" for="nav-input"></label>
<div id="open-button" class="open-button"><span></span></div>
<nav id="nav-content" class="header_navigation">
<ul>
<li><a class="nav-drawer__link-top" href="#about">about</a></li>
<li><a href="#service">service</a></li>
<li><a href="#news">news</a></li>
<li><a href="#corporate">corporate</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main class="main">
<div class="catch-content-wrapper">
<section class="section-top">
<div class="section-top__image">
<h2>
<span class="section-top__underline">こだわり農家の<br>
朝どりオーガニック野菜を<br>
ご自宅で。</span>
</h2>
</div>
</section>
<section class="section-read">
<div class="section-read__image-message">
<h3>
<span class="section-read__underline">「スグ食べ」は、<br>
厳選したオーガニック農家さんの<br>
穫れたて野菜を販売しています。</span>
</h3>
<p>食材から選べるのはもちろん、生産者からも選べます。生産方法や生産地、それぞれ異なるこだわりで、お気に入りの農家さんを見つけてください。最短で24時間以内に届く新鮮なオーガニック野菜宅配サービスです。</p>
</div>
<img src="assets/images/read.jpg" alt="farm"> </section>
</div>
<section class="section-try1">
<div class="section-try1__frame">
<div class="section-try1__samples">
<div class="section-try1__title"> <img src="assets/images/mark.png" alt="一回限り！">
<div class="section-try1__title-wrapper"><div class="section-try1__subtitle"> 自信があるから、ぜひ食べてもらいたい</div>
<h2><span class="section-try1__underline"> 少量お試しセット</span></h2></div>
</div>
<div class="section-try1__sample01"> <img src="assets/images/sample01.png" alt="【くちぶえ農園】旬 ＊ お試し野菜セット">
<p>￥1,280（税込 / 送料別）<br><span class="section-try1__farm">
生産者：長野県 飯田市 くちぶえ農園</span></p>
</div>
<div class="section-try1__sample02"> <img src="assets/images/sample02.png" alt="【ベジックス】旬 ＊ お試し野菜セット" >
<p>￥1,280（税込 / 送料別）<br><span class="section-try1__farm">
生産者：千葉県松戸市 ベジックス</span></p>
</div>
</div>
<div class="button__content-wrapper01">
<div class="button01"><a href="">お試しセットを注文 ＞</a> </div>
</div>
</div>
</section>
<section class="section-reason">
<h2>スグ食べが選ばれる<span>3つ</span>の理由</h2>
<ul>
<li> <img class="section-reason__cabbage" src="assets/images/reason1.jpg" alt="cabbage"> <img class="section-reason__01" src="assets/images/01.png" alt="01">
<div class="section-reason__discription01">
<h3>本当の意味での産地直送</h3>
<p>「なるべく収穫したばかりの状態で、野菜を味わって欲しい。」
スグ食べでは、既存の産地直送サービスのように箱詰め用の倉庫を介すことはありません。農家が収穫したその日に、お客様の元へ直送で野菜をお送りします。</p>
</div>
</li>
<li><img class="section-reason__calotte" src="assets/images/reason2.jpg" alt="calotte"> <img class="section-reason__02" src="assets/images/02_.png" alt="02">
<div class="section-reason__discription02">
<h3>安心安全な無農薬野菜</h3>
<p>出品している生産者は、有機栽培もしくは自然栽培の農家のみ。全ての商品が無農薬・無化学肥料など、安全にこだわって生産された「オーガニック農作物」です。そのため、どの商品も安心してお買い求めいただけます。</p>
</div>
</li>
<li> <img class="section-reason__vegetables" src="assets/images/reason3.jpg" alt="vegetables"> <img class="section-reason__03" src="assets/images/03.png" alt="03">
<div class="section-reason__discription03">
<h3>たくさんの旬な野菜との出会い </h3>
<p>年間数十種の野菜を作る生産者から、今が旬の多様な野菜が届きます。食べチョク では生産者ごとに商品が異なります。中には年間100種類もの多品種生産をしている生産者も。旬な野菜はもちろん、珍しい野菜とも出会えます。</p>
</div>
</li>
</ul>
<div class="button__content-wrapper02">
<div class="button02"> <a href="">お試しセットを注文 ＞</a> </div>
</div>
</section>
<section class="section-question">
<h2>よくある質問</h2>
<ul>
<li>
<h3>Q1</h3>
<div class="section-question__content">
<h4>
<span class="section-question__underlineQ">Q.産地直送のサービスって
よく見るけど何が違うの？</span>
</h4>
<h4>
<span class="section-question__underlineA">A.鮮度が抜群に違います。</span>
</h4>
<p>通常の産直サービスは、一度倉庫などに野菜を集め、そこで箱詰め作業をして配送しています。この仕組みでは、お客様が商品を受け取る時には収穫してから3,4日が経過しています。スグ食べでは、箱詰め作業を農家さんにお願いすることにより、最短で収穫当日に商品を受け取ることができます。</p>
</div>
</li>
<li>
<h3>Q2</h3>
<div class="section-question__content">
<h4>
<span class="section-question__underlineQ">Q.どんな農家さんが
登録してるの？</span>
</h4>
<h4>
<span class="section-question__underlineA">A.無農薬にこだわる、
オーガニック農家さんのみが
登録しています。</span>
</h4>
<p>有機栽培や自然栽培などの環境に配慮した農法で生産するには、通常以上に費用も手間もかかります。そんな中でも、「安心な野菜を食べて欲しい」という強い思いを持って、こだわって野菜を作っている農家さんがいます。 そういった、厳選されたオーガニック農家さんのみが登録しているため、安心してお買い物を楽しんでいただけます。</p>
</div>
</li>
</ul>
</section>
<section class="section-farmer">
<div class="section-farmer__title">
<div class="section-farmer__lead-text">こんな農家さんが登録しています</div>
<h2>
<span class="section-farmer__underline">私たちの野菜、こんなにおいしいんです。</span>
</h2>
</div>
<div class="section-farmer__farmer01">
<div class="section-farmer__img01"></div>
<div class="section-farmer__discription01">
<h3>安心安全なお野菜を、ご堪能ください</h3>
<div class="section-farmer__name">ひだまり農場 （岡山県）
山田洋一</div>
<p>「ひだまり農場」では栽培期間中に農薬・化学肥料を一切使用せず、年間約100種類の野菜と米、卵を生産しています。堆肥・肥料もすべて手作りし、有機質のものを使用しています。</p>
</div>
</div>
<div class="section-farmer__farmer02"><div class="section-farmer__img02"></div>
<div class="section-farmer__discription02">
<h3>旬なお野菜を存分に楽しんでください</h3>
<div class="section-farmer__name">爽緑農園 太田紘一</div>
<p>「爽緑農園」では農薬や除草剤は一切使用せず、一つ一つのお野菜を丁寧に栽培しています。お日様の光をたくさん浴びて育ったお野菜は、葉や皮まで余すことなく食べることができます。</p>
</div>
</div>
</section>
<section class="section-voice">
<div class="section-voice__flame">
<div class="section-voice__content-wrapper">
<div class="section-voice__title">
<div class="section-voice__lead-text">おかげさまで感謝のお声をいただいています</div>
<h2>食べてわかった、この違い</h2>
</div>
<ul class="section-voice__discription">
<li> <div class="section-voice__img01"></div>
<h3><span class="section-voice__underline1">香りまでおいしい、新鮮さ</span></h3>
<div class="section-voice__name">神奈川県A様</div>
<p>箱を開けた途端に広がった野菜の香り。スーパーで買った野菜とはどうしてこんなに違いがあるのかとびっくりするほど豊かな大地の香りです。葉っぱまでシャキシャキのにんじんは特に子供がお気に入り。ゆでただけでも、野菜の甘みが優しく広がり、本来の味がたのしめます。</p>
</li>
<li> <div class="section-voice__img02"></div>
<h3><span class="section-voice__underline2">安心できる品質に大満足</span></h3>
<div class="section-voice__name">千葉県O様</div>
<p>無農薬・無化学肥料にこだわった生産者さんから送られてくるため、とても安心して毎日食卓に出せるのがうれしいです。小さな子供や働き盛りの夫など、健康に気を遣って食から体づくりをしたい我が家には、もう手放せない野菜となっています。</p>
</li>
</ul>
</div>
</div>
</section>
<section class="section-try2">
<div class="section-try2__frame">
<div class="section-try2__samples">
<div class="section-try2__title"> <img src="assets/images/mark.png" alt="一回限り！">
<div class="section-try2__title-wrapper"><div class="section-try2__subtitle"> 自信があるから、ぜひ食べてもらいたい</div>
<h2><span class="section-try2__underline"> 少量お試しセット</span></h2></div>
</div>
<div class="section-try2__sample01"> <img src="assets/images/sample01.png" alt="【くちぶえ農園】旬 ＊ お試し野菜セット">
<p>￥1,280（税込 / 送料別）<br><span class="section-try2__farm">
生産者：長野県 飯田市 くちぶえ農園</span></p>
</div>
<div class="section-try2__sample02"> <img src="assets/images/sample02.png" alt="【ベジックス】旬 ＊ お試し野菜セット" >
<p>￥1,280（税込 / 送料別）<br><span class="section-try2__farm">
生産者：千葉県松戸市 ベジックス</span></p>
</div>
</div>
<div class="button__content-wrapper03">
<div class="button03"><a href="">お試しセットを注文 ＞</a> </div>
</div>
</div>
</section>
</main>
<footer><small class="footer__copyright">copyright©️sugutabe inc.</small></footer>
</body>
</html>制作過程
もっとみる
CSS
もっとみる
fori.io/
fori.io/