私が選ぶGOOD WEB DESIGN2023
こんにちは！
株式会社FORKのkuritaです✨
皆様いかがお過ごしでしょうか？
クリスマスだ～と思ったらもうすぐお正月、2024年ももうすぐ！
…ということで今回は今年見てきたWEBデザインを振り返り、個人的に印象に残ったサイトを3選ご紹介していこうと思います！💻✨
01. HAKKO ANKO SAND - 発酵あんこサンド -
ジャンル：ブランドページ（お菓子）
フォント：あおとゴシック（本文）、stolzl（英文字）
カラー：#33A1DB / #C4A25C / #FFF
制作会社：ondo inc.
清涼感のある色遣いとさりげない装飾
お菓子と言ったら暖色系の色味や親しみやすいポップな雰囲気のものが多いと思いますが、このサイトではパッケージに使用している鮮やかなスカイブルーがメインなので一味違った雰囲気を感じます💙
また、白地に細い格子柄があしらわれていて、黄土色が金箔のようなアクセントとなっており、上品さを感じます。
水色と黄色で補色の関係にあったり、夏っぽい印象を受けるところから相性が良いのかもしれないですね！
パッケージの世界観でデザインが統一されているところも素敵です。
エレガントな商品写真
キービジュアルや"LINE UP"エリアに使用されている青いカーテンと、石膏のようなオブジェと商品がレイアウトされた写真がショーウィンドウに飾られているようで、サイトの上品な世界観にぐっと引き込まれるような魅力があるなと思いました。
個人的にはフッター付近に配置された商品写真の、影の落ち方や抹茶、小豆、イチゴのレイアウトが静物画のようで美しいなと感じました…
やはり画の強さはサイトの雰囲気に大きく影響しますね！
あんこサンドの矩形
メニューボタンや写真の枠の形、エリアの背景の矩形がロゴデザインに使われている矩形に統一されていて、デザインに安定感があると感じました！
また、キービジュアル下のエリアの挙動があんこサンドが開くような挙動で目にとまりやすく、こだわりを感じました🍪✨
02. バイオリン工房 Studio Mora Mora
ジャンル：ブランドページ（バイオリン工房）
フォント：A1ゴシック R JIS2004（本文）、sans-serif（一部英文字）
カラー：#333333 / #DAD3CA / #A49C7C
制作会社：クックドゥードゥードゥー
サイトのストーリー性
バイオリンを開いてからサイトが始まる感じがサイトのオープニング感があって良いなと思いました！丸眼鏡をかけた紳士が店主さんをモチーフにしているところも素敵だなと思いました👓✨
工房の紹介動画に使われているバイオリンのキャラクターもサイトの随所に登場していてかわいらしいです🎻ページトップへボタンのくつろいでいるバイオリンが個人的にお気に入りです😊
粒状イラスト
キービジュアルに使用されているイラストや背景や写真の質感がざらざらとしていて、アナログ感のある暖かみが伝わってきます。
WEBトレンドでもある粒状イラストはやはり印刷物のようなアナログ感・レトロな印象が醸し出されるなと感じました！
エリアの自然な切り替わり
グラデーションやバイオリンのような曲線のエリアの切り替わりが自然で、美しいです！
"工房について"ページのTOPがバイオリンを作っている様子になっていてページの内容を伝えつつエリアの境界線にもなっていて素敵です✨
03. 中華そば 七八
ジャンル：ブランドページ（ラーメン）
フォント：りょうゴシック PlusN（本文）、EditorialNew（英文字）
カラー：#F5F4F0 / #BA1C22 / #000000 / #E7D31B
制作会社：THREE inc.
モダンでカジュアルで中華！
ラーメン屋さんと言ったら、筆文字・赤黒・中華！というイメージですが、このラーメン屋さんは「女性が一人でも入りやすい」をコンセプトにしていることもあり、サイトデザインもモダンでカジュアルな印象を受けます🍜
ロゴの筆っぽい力強いタイポグラフィとセリフ体で縦長なスタイリッシュな印象を与える英文字フォントでバランスが取られていて、おしゃれだなと思いました。
また、ヘッダーやメニューエリアの枠が雷紋に統一されていたり、彩度の高い赤色が使われているところから中華っぽさを感じます🍥🍥
グリッドレイアウトで見やすい
サイト内の情報がグリッドに沿って整列しているので情報がシンプルで見やすいなと感じました。
特にメニューエリアは線引きされているので商品情報がそれぞれひとまとまりになっていてわかりやすいなと思いました！
ストレスなく読み進めることができるし、情報が整っているので、写真が自由配置されていると目立ちますし飽きにくいところも良いなと感じました📸
商品写真やタイポグラフィが大胆
キービジュアルの写真のファッション性や商品写真の切り抜き写真がちりばめられていたり、マーキーを使った見出しエリアやリンクボタンが配置されているところがインパクトあるなと思いました。
特に"COMMITMENT"エリア下の湯気の立ったラーメンと背景に流れるロゴの組み合わせがキャッチーだなと思いました！
商品写真のシズル感には食欲をそそられます…🤤
04.さいごに
いかがでしたでしょうか？
新米WEBデザイナーの私にとって魅力的だなと思うサイトをご紹介させていただきました🙇
フォントの種類や文字の大きさ、線の太さ、配色、写真、矩形、質感などなど…サイトの雰囲気を伝える手段は様々ですが、やはり一番は情報をユーザーにわかりやすく伝えるところに重きを置かなければいけいなところがむずかしいなと日々感じております。
私は活字に弱いのでグラフィック的な要素が多いサイトが好きなのだなとサイトを選びながら感じました😂
来年もたくさん素敵サイトに巡り合えることが楽しみです！私もそんなサイトをデザインできるよう精進していきます🔥
それでは皆様、良い年末年始をお過ごしください！
来年もどうぞよろしくお願いいたします🐉✨
👇この企画は株式会社FORKのデザイナーみんなで取り組んでおります✨
ぜひご覧ください👀
👇こちらのマガジンからは株式会社FORKのデザイナーみんなの投稿が閲覧できます✨あわせてご覧ください😊