【webデザイン】2024年上半期に出会った、ポートフォリオがおいしい！webサイト55選。
こんにちばんは！
デザインチームマネージャー（リーダー）のカネコです。
前回の記事でwebディレクター出身であるとお伝えしたのですが、webに興味を持ったときから欠かせないのがwebデザインのトレンドのキャッチアップです（Macromedia時代のFlash全盛期からやってます）。
webデザインのキャッチアップについては、世の中にはwebデザインギャラリーサイトがたくさんあり、日々更新されているためギャラリーサイトに足を運べばリアルタイムで“いま”を知ることができます。大変ありがたいです。
過去にもnoteでメンバーが紹介してくれています。
今回、個人的に2024年上半期中にブックマークしたサイトを紹介します。
ギャラリーサイトで紹介されたものも多く、サイトそのもののデザインが素晴らしかったり好奇心をそそる動き・斬新な表現が盛り込まれたりしています。ただ、そのままのサイト紹介だとギャラリーサイト見ればいいじゃんとなってしまうので、そこからさらに以下の条件で絞り込まれています。
サイトのデザインが私好み
デザインスタジオやクリエイティブエージェンシーなどの制作会社
良質のクライアントワークを紹介している
特に3つめ、良質のクライアントワークを紹介していることがポイントです。紹介した制作会社も、ブランディング特化、デジタルプロダクト開発、アートディレクション、UI/UXデザインと多種多様ですが、掲載されている仕事は（主に）デジタルデザインの最前線を感じることができ、デザイナー、ディレクターだけではなく、フロントエンドエンジニアやマーケター、プロダクトマネージャーなど様々な職種の専門家にインスピレーションを与えてくれると思います。
「このサイト◯◯◯で紹介されてたから知ってる」という方も、WORKS（PROJECTやSHOWCASEなどと表記されることも多い）まではじっくり見てないよーという方も少なくないんじゃないでしょうか。
トップページだけ見て去ってしまうのではもったいない！見応えたっぷりでのWORKSもチェックして、ぜひ見ごたえたっぷりの仕事にも目を通して、おなかいっぱいになりましょう！
ということで今回はできるだけWORKSページへのリンクにさせてもらっています。前置き長くなりましたがそれではどうぞ↓
1-10
1 - Widelab
2 - Phenomenon
3 - Maxime Heckel
4 - Press Play On Tape
5 - BENNET & CLIVE
6 - The Sand Studio
7 - STUDIOKAY
8 - Whywhytellmewhy™
9 - EST+6
10 - Antonie Enault Studio
11-20
11 - Fjaka
12 - MadeByShape
13 - Doze
14 - ilovecreatives Studio
15 - Jake Dow-Smith Studio
16 - Humaaan
17 - Significa
18 - Norgram
19 - guglieri
20 - République Studio
21-30
21 - Good Habit
22 - Zero Studios
23 - Paprika
24 - Geex Arts
25 - makemepulse
26 - Local Studio
27 - Alejandro Mejias
28 - House of 207
29 - Ask Phill
30 - Anna Erdelen
31-40
31 - Matthieu O'Jeanson
32 - HalloBasis
33 - Everything Will Be Fine
34 - Say Social
35 - Match Studio
36 - Emma
37 - Buttermax
38 - BASEMENT
LABORATORYというコンテンツもぜひ見て触って欲しい
39 - YARD
40 - Noomo Agency
41-50
41 - Konpo
42 - Numéro10
43 - Fernando Puente
44 - Datalands
45 - Patrick David Creative Studio
46 - Six Socks Studio
47 - RAYRAYLAB
48 - Liqium
49 - Haus
50 - Kenta Toshikura
51-55
51 - Sanni Sahil
52 - Outlanders Design Studio
53 - Bruno
54 - 28k
55 - Dave Holloway
素敵なのにリンクカードが表示されない！なのでラストに掲載。
おまけその1（ギャラリーサイト）
どうでしたか？お腹を満たすことはできましたか？
冒頭でお伝えした通り、世の中にはギャラリーサイトも増えていき、それぞれが独自の視点でのチョイスになっていて面白いですね。
その中から、現時点であまり紹介されてなさそうなギャラリーサイトをおまけで載せておきます。
HOBERSTAT.ES
マウスインタラクションに焦点をあてたwebデザインギャラリーサイト
Check WebTech
サイトに使われている技術がわかる新しい切り口！日本です。
Mindsparkle Mag.
webサイトだけではなく、グラフィックデザインも紹介されています
リンクカードが表示されないー。。。
おまけその2（今回の表紙画像）
最初は前回の記事の見出し画像をベースにつくろうと準備していたのですが（今後のことも考慮すると考えるのもラクだしw）、公開までに少し時間があったのでちょろっと雰囲気変えてみました。
before
after（最終の一歩手前）
この「55」、いまさらですが初めてBlenderをつかってチュートリアルをみながら作ってみました。動画観てもらえばわかると思いますがほぼチュートリアルそのままです。
※「55」以外はFigmaです
細かいディテール表現などはもっと鍛錬が必要だと思うし、デザイン制作の現場では闇雲に使えるわけではないですが、使うことができるツールを増やすこともですが、表現の引き出しを増やすのにめちゃくちゃいいのではないかと感じました。
ぶっちゃけ、3D？なんか面倒くさそう。で食わず嫌いだったのですが楽しいです。いま食べたくても食べられないハンバーガーつくりに着手したところです。
おわりに
今回、上半期ということで6月半ばまでのブックマークをピックアップしました。なぜ55サイトかというと、これ以上増やすとみんなが見るのが疲れそうなのと、大谷選手が55-55達成に近づいて盛り上がってるのでなんか縁起の良さそうな数字というところです。
※オオタニサーン54-59で着地でしたね
実は、現在わたしたちのチームでwebサイト制作業務はあまり無いので、webサイトのパトロールは半分は趣味で続けている日課といってもいいかもしれませんが、やっぱり斬新な表現やハイクオリティなアートワークを見るとワクワクします（同時に嫉妬しますが）。
7月以降のブックマークもすでに同じくらいのペースで溜まっているので、今年の終わりか来年の年明けくらいにはまた紹介させてもらうかもしれません（♡の反応次第ということにしましょう）。