wofa | 里山農業を、心うごく世界に | women farmers Japan

URL

https://wofa.jp

制作会社

ホームページ制作のYCOM

第一印象

・女性農業者のために優しい温かい環境を整えるというコンセプトに感動。
・下ではなく右に画面が流れていく構成が新しくて固定概念を覆しており、おしゃれ。
・余白が多く取られており、シンプルだが文字が写真に重ねてあることが多く退屈にならない。

ターゲット、目的

・働く30〜60代の女性農業者
・女性で農業は大変だと感じている10〜20代の女性
・都会に住んでおり、農業の機会がない小さな子供を持つ親
・商品のコンセプトやメニューを知ってもらい、商品を購入してもらうため。

使用フォント

メイン→ YakuHanJP_Noto
サブ→ Bellefair

日本語には約物半角専用フォントが使われている。

約物(やくもの)とは
言語の記述に使用する記述記号類の総称で、専らフォントなど組版を意識して使われる用語である。具体的には、句読点・疑問符・括弧・アクセントなどのこと。

Wikipedia

記号周りの隙間の調整がCSSで限界があるところを綺麗にしてくれるフォントとのこと。

先端に角に丸すぎず尖りすぎていないゴシック体で、コンセプトの「やわらかい」と成し遂げたいという強さの両立を表現してきると感じた。
タイトルと小見出しと本文の3段階のウェイトで、無意識に読む側が認識できるようになっている。

英語フォント・数字はBellefairを使用。細く繊細で高級感がある。視認性が高い。

配色

ベースカラー : 真っ白(#FFFFFF)
メインカラー : 淡く彩度の低いピンク(#F2ECEE)
アクセントカラー : グレーがかった水色(#9DBDC6)、すももっぽいピンク(#df5575)
フォントカラー : 青みがかった黒(#1F2D32)

ベースは真っ白で、清潔感と誠実さが伝わる。フォントや写真の色使いにより、真っ白が背景でも違和感がない。白で余白が多めなので写真や文字に目がいくようになっている。
メインカラーの淡いピンクが、年代を問わない女性を指すことを伝えている。
フォントカラーが黒というよりは濃いターコイズブルーだが、白背景に持ってくると黒に見える不思議。主に白ピンク水色で構成されているので、フォントに青を持ってきても馴染む。

サイト構成

①トップ
②コンセプト
③wofaについて
④wofaのメンバー
⑤ニュース
⑥コンタクト

トップページ構成
・mv
・wofaの意味
・発信地

メインビジュアルに山やお米など自然が伝わる写真を持ってきて、「wofa」ってどういう意味？という疑問を解決している。その後日本のどこから発信しているのかを伝え、トップを見ただけで5Wのうちwhatとwhereが理解できるようにしている。
オンラインストアのナビゲーションは左下が定位置で気になった時にいつでも飛べるようにしている。

デザインポイント

右から左に進んでいくページ。ただ真横に進んでいくのではなく、文字や写真がジグザグに配置されているので、楽しい印象と共に目線が誘導されるので見てほしい順番で見せられる。
セクションがはっきり分けられているのではなく、
スクロールするごとに、右上のバーが塗りつぶされるので、自分が今全体のどの位置にいるか一目で分かるようになっており、どこまであるんだろう、、と脱落されにくい。
画面左上と右下にタイトルとロゴが波打つ枠で常時動いており、退屈させない工夫。アクセントカラーのグレーっぽい水色で、空がずっと流れている様が思い浮かぶ。
農業といえばで思いつく緑や茶色・野菜のイラストが使われていないので、今っぽさを感じ農業とはご年配のお仕事というネガティブな印象を与えにくくなっている。

メインビジュアル

濃く深い霧がかった緑の山を俯瞰したビジュアルは、同じ画面幅でもアップの画像より余裕があり時間がゆっくり流れるイメージが湧きやすい。

ヘッダー、フッター

ヘッダーは、画面下にあることで伝えたいことの邪魔をすることがない。余白が多めに取られており存在感があるのでいつでも行きたいページに飛べる。分かりやすさと見せ方が共存している。
フッターのSNSのアイコンが◯で囲まれているとボタンと認識しやすく、ただ置いてあるより一緒に可愛らしさを表現できる。

ハンバーガーメニュー

3本ではなく2本線で軽さを出している。ゆらゆら出てくるメニューが画面をゆっくりと覆うので、ゆとりがある丁寧なイメージを壊さない。カーテンを引くように出てくるメニューは思わずもう一度見たくなる。

実装ポイント

トップイメージがflexで横並びになっている。

ホバーエフェクト

じわっと半透明になるエフェクト。背景が写真だとその世界に自分も馴染むような気持ちになる。大きな動きをつけてしまうと、イメージと異なるためやわらかくそっと開くようになっている。