見出し画像

〜私が選ぶ GOOD WEB DESIGN2023〜Norishio編

00 はじめに

みなさん、どうもこんにちは。
株式会社FORKの、webデザイナーのNorishioです。

さて去年に引き続き今年もフォークのデザイナーたちが一同サイトレビューをする季節が来ました…!w(´∀`*)ウフフ

みなさんどんなサイトを紹介するのか大変気になりますね・・・!
私は独断と偏見で気になったサイトを選びます・・・(-ω-)/
ホログラム使いたいなとか、漫画調にしてみるかなどキャッチ絵も遊びましたw

▼気になるサイトレビューのマガジンはこちら📖
(ココから去年のGood Web Designも見れますよ)


では
2023年に見たWEBサイトのなかで、特に印象に残ったサイト
【私が選ぶ Good Web Design 2023】として3つご紹介します。



01 物語が感じられて素敵

🍰架空のパティスリー『 しろいし洋菓子店』🍰

ジャンル
お菓子の商品ページ

タイプ
アンティーク/不思議/物語/アニメーション/レスポンシブ/パララックス

主に使用されている色とフォント

<色>

<フォント>
英数字:rfceqabro-display・日本語:貂明朝

選んだ理由

選んだ理由はやっぱり演出と世界観です!
綺麗な青地に「IMMERSIVE PATISSERIE SHIROISHI」と文字が浮かび上がり、青い幕が上がりあたかも舞台装置のように木々やしろいし洋菓子店が入っているマンション・インディゴがふわりと姿を現します。
スクロールするとペンを持つ手が画面を塗り替えていく演出とともにコンセプトが一行ずつ浮かび上がっていく、その横にはおいしそうなお菓子を作っている動画。背景には洋菓子店の内装にお菓子が並んだ様子が見えており・・・それはまるで不思議な魔法のような心が躍る演出。
スクロールするとカメラが近づいたり遠ざかったり、文字やお菓子が現れたりう~ん魔法だ・・・!w文字に合わせてお菓子は浮いてついてきたり・・・、うん、やっぱりぜったい魔法だ!wマウスを当ててホバーさせたときの動きも面白いです。+マークは回転するし、詳しく見るの文字は踊りだす。

商品ごとにマンションの階の住民が愛するお菓子で、「403号室 水平線の先まで持っていきたいパウンドケーキ」などと一風変わった名称がついています。うん、おしゃれw商品ごとに住民とのストーリーがあり、ストーリーを楽しみながら味わって食べるのも楽しそうだなと思います。作り込まれているなぁ・・・。

細かいところだとオンラインショップのボタンは絶えずテキストが横に自動スクロールするアニメーションが採用されており、スクロール時の画面遷移に埋もれないように工夫されていたり・・・またwebサイトをよく見る方にはちょっと懐かしい演出にもなっているのが面白いです。お菓子が暖色なので、背景の寒色である綺麗な青と双方際立つのが魅力的ですね。
ついでにあのBAKEのサイトなんだなってところも面白いですよね。

・・・正直言うと
架空のマンション名が使われている青のカラーを示すインディゴになっているのですが・・・、個人的にはクサカベの油絵の具のインディゴはこんな明るくなかったなとか難癖付けたくなる気持ちがあります。私の中ではこのカラーはウルトラマリンあたりの方が近いんじゃないかと思わないこともないです(´ー`)青に詳しい方にぜひ判定いただきたいですね。
ハイ、〆は本当どうでもいい話でした!w


02 SP流用型に切り替わるデザイン

🌈ルクア大阪8周年 話をしよう🌈

ジャンル
8周年記念サイト

タイプ
シンプル/SP流用型/キュート

主に使用されている色とフォント
<色>

<フォント>
日本語:MVなど一部画像文字・ZEN角ゴシックNew
英数字:inter・Hi Melody(フッター部分などの英字に使われている。元々は韓国語がベース)

選んだ理由

ぶっちゃけて言うと・・・イラストを描いている、イラストレーター兼漫画家ウィスット・ポンニミットさん(愛称タムくん)の絵が好きっていうところが正直一番目に来ます(←)彼の漫画のキャラクター、マムアンちゃんがカラフルな色でページ内に描かれていて温かい雰囲気があります。

『↓ココからwebサイトを制作したCINRAさんのページから抜粋』
キャンペーンビジュアルは、「話をすること」のコンセプトからイメージを膨らませ、「心を開いて人や自分自身と本音で話せたときに、自分の新しい扉が開かれ、心が輝いていく」というメッセージを込めて制作しました。全体のカラーリングは、春へ向けた前向きな気持ちや、一人ひとりの異なる個性をイメージし、さまざまな明るい色を用いています。

▼イベントの様子も掲載されていて、グッズなどもかわいいです・・・。(いいなぁ)
https://www.cinra.co.jp/work/lucua8th

最初は画面全体にKVが広がっているのですが・・・
スクロールしていくうちに心の扉部分にクローズアップした背景に切り替わり、コンテンツ部分はSP流用型に切り替わります。PC版はKVを画面いっぱいに見せられるし、コンセプトとも合致した挙動になっているのがなっているのが面白いです。

フッターのメニュー部分が虹の雲になっていて、モチーフとして左右の背景心の扉の虹とつながりがあって見えるのがいいなと思います。あと雲や手書き文字もそうですが・・・この部分があることで中央への目線の誘導も兼ねているように見えます。

手描きの画像文字やHi Melody(フッター部分などの英字)のくずれた手描きっぽいフォントでやわらかい雰囲気がよく出ていて絵と良くなじんでいます。雲などがふわふわ動いているのも空気感があっていいなぁ・・・(´ー`)
一番下のコンテンツの切り替え部分も雲の形になっていて可愛いです。


03 Studioで作られた、ぶどうづくしのサイト

🍇小川ぶどう園🍇

ジャンル
ぶどう園のサイト

タイプ
シンプル/落ち着きのある/やわらかい・丸み/粒状感のあるグラデーション/レスポンシブ

主に使用されている色とフォント
<色>

<フォント>
リュウミン

選んだ理由

ぶどうの丸が要所要所モチーフで散りばめられていて、写真や背景にぶどうの丸がありーの、コンテンツの切り替えもブドウの丸になっていたり・・・メニューを開いたときもブドウの丸になっていたりとぶどうづくしなのですが・・・色づかいや粒子のテクスチャー、レイアウトでくどくない自然な感じになっています。やさしいぶどうカラーが魅力的です。

レイアウトの間合いかぶどうが落ちていく、収穫されているように見えるのも面白いなと思います。そう考えると背景の白い角丸の四角のあしらいは収穫するケースのように見えてきて、デザインがかみ合っているのが気持ちよく感じます。(違っていたらすみませんw)

品種紹介で蔓が伸びて、ブドウが垂れ下がるアニメーションもステキです。最後くるくるってなるところが余韻があっていいなと。個人的にはそのあとずっとぶどうだけゆらゆら揺れていてほしいなっていう気持ちですw
落ち着いているけど、遊び心やおしゃれさが出ていていいなぁ…。

サイトを制作されたデザイナーさんは名古屋でフリーランスをされているそうです。こちらのサイトもステキ・・・!(*'▽')


04 まとめ


いかがでしたでしょうか。
前回に引き続き完全なる好みのサイト紹介でしたw皆さんのご存じのお好きなサイト、好きになってしまったサイトなどございましたでしょうか。もう年末、ご自身のGood Web Design 2023をぜひ選んでみてくださいね・・・!👓
・・・正直言うとおぱんちゅうさぎのサイトも面白かったのでやや悩んだのですが、去年のけたくまと被るなと思って回避しましたw

ここまでお読みいただきありがとうございました!m(_ _)m
次回の記事の予定ですが…
1月に更新予定です。動画関連の記事をまた書くかなと思います。

では、またお会いしましょう・・・!(・ω・)ノ


🍴FORKの公式アカウント🍴

▶インスタはこちら          ▶マガジンはこちら

👚🍸SUZURIも販売中です🍸👚

フォロー・スキ・いいね大歓迎です(*´з`)ノ
ほかのサイトレビューもマガジンでチェックしとく?📢


この記事が参加している募集

このデザインが好き

この記事が気に入ったらサポートをしてみませんか?