![見出し画像](https://assets.st-note.com/production/uploads/images/127098594/rectangle_large_type_2_776c4478e99f17d0a27f7f5ade290d24.png?width=1200)
私が選ぶ Good Web Design 2023
WBC優勝、阪神タイガース日本一と、野球好き虎党の私にとってはなかなかいい年だった2023。占い的には「魔六殺」という人生に6回訪れる運気の悪い年のはずなのですが、比較的調子が良く残り数日で何か起きるのかとビクビクしています。
そんな今年もたくさんの素敵なサイトとの出会いがありました。最新の技術や圧巻のアニメーションを使ったサイトも多くありましたが、ちょっとした工夫やアイデアでコンセプトを伝えるようなサイトが個人的なスキポイントかもしれません。
そんな自分の今年のお気に入りサイトを3つご紹介します↓↓↓
【遊び心とわくわく感】
うなぎパイファクトリー 公式サイト
![](https://assets.st-note.com/img/1703664777277-5Nxbxol9cK.png?width=1200)
https://www.unagipai-factory.jp/
ジャンル:お菓子工場の紹介サイト
タイプ:ポップ
フォント:和文:Noto Sans JP / 英文:Kanit
#ムービーが素敵 #遊び心いっぱい #ブランディング力
![](https://assets.st-note.com/img/1703822195903-0sH6G7Nyud.png?width=1200)
私の出身地である静岡県。焼津市の生まれですが、浜松市の「うなぎパイ」も小さいことからモリモリ食べて育ちました。そんなうなぎパイファクトリーサイトのご紹介。(「工場」ではなく「ファクトリー」て言うと急にワクワク感増しますよね)
まるでピングーのアニメのように少ずつ動くKVのムービー。サイトを開いた瞬間からきゅんとくるものがあります。「動画を飛ばす」のボタンを押すKVもよくありますが、こちらのサイトはポインターが初めから「Skip Movie」になっているところに気遣いを感じます。
特に好きポイントはうなぎパイが足跡になってるシーン!発想がポップで素敵!商品への愛を感じました。写真とテキストが交互に配置されるデザインはwebではよく見かけますが、そこに線が加わると自然と視線の流れができるのが良いですね。
![](https://assets.st-note.com/img/1703756805226-Zbec5JipJh.png?width=1200)
![](https://assets.st-note.com/img/1703754675091-kN4jWIaL2E.png?width=1200)
電球のイラストがアニメーションで出てくるアイデア!
【線で紡がれる物語】GO!PEACE! | フェリシモ
![](https://assets.st-note.com/img/1703755447004-tIy8YAK5uu.jpg?width=1200)
ジャンル:ソーシャルグッドな取り組みを紹介する特設サイト
サイトタイプ:ポップ
フォント:A1 Gothic
#線の力 #サステナブルなサイト #スクロールが気持ちいい
![](https://assets.st-note.com/img/1703822213157-I4YA8VGTKt.png?width=1200)
上記のうなぎパイも線を活かしたサイトでしたが、もう一つ線の動きが素敵でご紹介したいのがこちら。
「お買い物を通じて世界で起きている様々な課題と向き合い、より良い未来を作ろう」という趣旨のサイトで、ソーシャルグッドな取り組みや商品を紹介しています。
SDGsや社会問題の話題はなかなかとっつきにくいものですが、カラフルな流体シェイプやポップなイラストを利用し、楽しく親しみやすく紹介しています。線を追いながら絵本を読むかのようにどんどんスクロールしたくなってしまうサイトです。
見どころはページ最下部の「GO→」を押した後のアニメーション。ぐるぐるぐるっと流体シェイプが周りだし……TOPに戻ります!!循環!!!
サステナブルを意識した作りになっていて感動しました。
![](https://assets.st-note.com/img/1703755576878-Yv7rKzhl7c.png?width=1200)
![](https://assets.st-note.com/img/1703755522042-IYBIsNwO0z.png?width=1200)
サイトを作成されたのは「MEFILAS」さんという会社さんのようで、どのサイトも読み手の心に伝わる素敵なサイトをたくさん作っておられました↓↓↓
【ならではの発想】くりもと眼科
![](https://assets.st-note.com/img/1703756004034-mpN2dIQ9y4.png?width=1200)
ジャンル:眼科のHP
サイトタイプ:シンプル
フォント:筑紫ゴシック
#眼科ならでは #驚きの仕掛け #信頼できるクリニック
![](https://assets.st-note.com/img/1703822227638-U6rfUTJ88s.png?width=1200)
個人的に2023は初診で病院を探す機会が多かったのですが、欲しい情報がきちんと載ってる病院サイトはまだまだ少なく…。やはり行く側としては「院内の様子」「先生の顔(雰囲気)」はわかると嬉しいものです。
なので病院なのにちゃんとこだわったサイトを作っているのを見ると嬉しくなってしまいます。その中の1つが「くりもと眼科」さん。なんと言ってもサイト表示やページ遷移の時に瞬きをするようなアニメーションがついているのが眼科ならではの発想で素敵!
目のイラストと「eye」の文字を模したであろうロゴも素敵です^^黒一色の線で仕上げた洗練されたロゴで、他の医院との差別化された今っぽさを感じました。
さらにこのロゴには秘密が…
なんとメニューを触れると目が動くのです!!!(下図)
これに気づいたときは嬉しかったです(笑) 「ロゴは改変せずにそのまま使うもの」という固定概念がありましたが、それを破ってちょっと遊び心を加える柔軟さも大事にしたいなと思いました。
こんな茶目っ気もあるサイトをHPにしている、このお医者様はきっと話しやすくいい人なんだろうな…とサイトから想像してしまいますね。行きたいです。
![](https://assets.st-note.com/img/1703756550568-8iZNG8PxVo.png?width=1200)
![](https://assets.st-note.com/img/1703756571812-8zPXB5Bor9.png?width=1200)
![](https://assets.st-note.com/img/1703756637615-ufUEkBstk9.png)
いかがでしょうか。
素敵なサイトを見ているとデザインのモチベーションが上がりますね^^
いつか「このサイトが良かった!」と知らない人からも言われるようなサイトをデザインできるようになりたいです。
ちなみに今年のネタ部門の優勝は餃子の王将かなと思います🥟🥟🥟
一見イケてるサイトに見えるのがまた良いですがだいぶカオスでした。
(音再生できるのが個人的にツボ)
弊社デザイナーメンバーは他にも思い思いのベストオブ2023サイトを挙げているので、下記マガジンもよろしければご覧ください↓↓↓
それでは良いお年を!