🎉

徒然なるままな、サイトレビュー＃1

2021/02/11に公開

CSS

初めてのサイトレビューです！

感じたことを徒然なるままに記述します。
Zennだとサイトレビューがなかったのでやってみました。
最初は、サイト分析でやろうと思っていたが、分析というほどのものでもなかったのでレビューにしました。

https://gochisoy.com/

サイトの種類は、baigie様の記事を参考に自己判断しています。

概要

大豆でつくられた食品のサービスサイト

使用フォント

游ゴシック体
Sans-selif
DIN Next

このサイトの目的は？

who?

健康思考のつよい女性（母親）。
さらに、ビジュアルにもこだわりがある人。

What?

専門知識のある人が、厳選した食材（大豆）を使って作っている。
すこし高級感のある大豆製品を食べて欲しい。

Why?

ファーストビューで製品と開発に携わってます感のある女性がスライドショーで、出てくる。
おそらく開発が女性だけでしているわけではないのと、下の方に男性が写っているので、この大事なファーストインプレッションの部分で女性だけにするのは、ターゲットを意識しているのでは、と考えました。
さらに、ロゴも全面に押し出し、ブランド意識を高くすることでビジュアルにもこだわりがあるのを、伝えようとしているのでは、と思いました。

ここが好き

豊富なアニメーション

至る所に、アニメーションがあり飽きずに最後までわくわくしながらサイトを見ることができる。

食欲をそそる色使い

この淡い色がなぜか私の食欲をそそりました。
グレーと大豆カラーの組み合わせがたまりません。
夜中に見ると危険。
ちなみにカラーコードは、
グレー： #e6e6e6
大豆： #d5ba73

コーディング目線

ここ好きポイントでもあげた、豊富なアニメーションでホバー、スクロールアニメーションが変化時間が遅すぎず早すぎず心地よい。
下の方のピックアップ商品の部分が、スマホ画面だとスライドショーに変化するようになっている。
imgをここではfigureで囲み、画面サイズに合わせて画像サイズを変更している。
上記の部分の記述内容で、少し気になったのが、articleタグでarticleタグを囲って内部のあしらいのある見出しをheaderタグを利用して記述している部分。
何か意図があるのか？
articleにarticleが入れ子になるのが、少し気持ち悪いのと、headerってページのヘッダー以外にも使うものなのだろうか？
と思い調べたら、MDNで説明がありました。

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p>
  </header>
  <p>We live on a planet that's blue and green, with so many things still unseen.</p>
  <p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p>
</article>

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

普通にOKっぽいが、使い方的に<article>の子要素に見出しタグがあったほうがいいみたいなので、親の<article>は<div>でもいいのでは、と思いました。

まとめ

こだわり抜いた大豆製品を移動販売する会社のサービスサイト。
女性に向けての淡い色使いや、かわいいロゴ、健康思考を推している。
かわいいアニメーションも使いサイト全体を明るくし、製品への好感度を上げ購入意欲を刺激するようなサイト。