気になったwebのデザイン
ツイッターで気ままに「気になるwebデザイン」というタイトルで投稿をしています。せっかく考察してる（適当に）のにそのまま埋もれてしまうのももったいないと思い、noteにまとめていくことにしました。
今もツイッターでは続けていくので、日々？アップデートしていきます。
【気になるwebデザイン】
— yuichiro｜アートディレクター・デザイナー (@yuichiroDesign) May 29, 2020
BRAUN。
FVはスクロールではなくコンテンツの扉絵が6枚スライドショー。
ブランドの特徴であるモノトーンを活かした構成だが、商品写真の質が高くウェット感もあるので冷たい印象にならない。黄色のアクセントカラーも効いている。https://t.co/cVW0ln0NH3#webデザイン pic.twitter.com/6KiGEdnnNT
【気になるwebデザイン】
— yuichiro｜アートディレクター・デザイナー (@yuichiroDesign) May 27, 2020
シューズブランド。
モノクロベースでホバー時やポイントで差し色に赤を使用しているのがかっこいい。
スタンダードなシューズに合わせてか、フォントはヘルベチカ。
見出しと本文で2.5倍ほどのジャンプ率なのでboldでも読みやすい。https://t.co/sgeCkpeQhU#webデザイン pic.twitter.com/oFkhd3ww5M
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 26, 2020
カリモク。
写真とフォントの構成でシンプルに見せているサイトデザイン。
本文も大きめのフォントサイズでブランドの堅実、重厚な印象が表現されているような感じ。
ホバー時の大胆な切り替えも参考になる。
フォントは游ゴシック。https://t.co/ImWCWhqjiJ#webデザイン pic.twitter.com/cS2iMRvrdh
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 25, 2020
Spotify design。
コンテンツがレコードを想起させるものだったり、インタラクションがポップでさすが音楽サービスのデザインという印象。
たくさんのサイズがあるがマージンの取り方やジャンプ率の調整でゴチャついていない。https://t.co/isC0OEbRnf#webデザイン pic.twitter.com/J598IhQLeD
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 22, 2020
Firefoxdesign
Firefoxの新しいBIのマニュアルページ。
ほぼ文言で構成されているため文字のジャンプ率にとても気を遣っているように感じる。
全体でFirefoxらしさがありさすがブランドページという感じ。https://t.co/fUZqxLQiem#webデザイン pic.twitter.com/bns8GSBf0L
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 20, 2020
アートフェス（2019）
オレンジがかった赤が特徴的。
フォントやイラストがポストモダン風？でフェスティバルの雰囲気がイメージしやすい。
一方で随所のアニメが単に懐古主義のフェスではないことを主張しているようでもある。https://t.co/BMUe1E8HMy#webデザイン pic.twitter.com/NoNE9QiqoY
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 19, 2020
クリエイティブエージェンシー&アーティストマネジメント。
MVを大胆に構成し、次のセクションではアート作品を小さめに構成、さらに次のセクションは2カラムにするなど、緩急の付け方が参考になる。https://t.co/xsjdN1SF3t#webデザイン pic.twitter.com/w6bu4LbtDX
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 18, 2020
フードロス問題へ取り組む企業。
2カラムを貫いて、1カラムのセクションも文言を大胆に左寄せにしているのが潔い。
FVの傷んだりんごがスクロールで正常なりんごへ変化する見せ方もうまい。
フォントはBasis Grotesque。https://t.co/o6gQyU7XT8#webデザイン pic.twitter.com/iVHoGAFgZM
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 15, 2020
投資サービス。
随所に挿入された3Dアニメーションが素敵。
最近はシネマ4Dで作られたようなアニメーションが多くなってきた。3Dだと没入感が得られ立体的にweb空間を見ることができるので訴求内容も入ってきやすいように感じる。https://t.co/tyuwOZf7k4#webデザイン pic.twitter.com/K2H8qkINW2
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 14, 2020
AIの説明サイト。
AIのイメージだといかにも先進的なデザインを想起するが、このサイトはフォントや色などアナログ感がありAIに人間的な雰囲気を与えユーザーに身近なものと感じてもらおうとしているのかなと感じる。https://t.co/HDGohJaA6F#webデザイン pic.twitter.com/lDhSgdKRMb
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 12, 2020
アメリカのブルワリー。
ホップを感じさせるグリーンとベージュの構成が素敵。
スクロール途中に波のモーションのセクション。入れ方が参考になる。
書体はarial narrow。スクリプト体のロゴマークとの差別化？
ビール🍺飲みたい。https://t.co/sH3GtfWjxZ#webデザイン pic.twitter.com/hM5YzkdgHO
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 11, 2020
メガネ＆香水。
世界観が統一されていて見ていて気持ちいサイト。
商品にホバーするとブルーのフィルターが全面に敷かれ、読むことに集中させる。
繊細なフォント使用時の商品画像と文言をキレイに切り替えるやり方は参考になる。https://t.co/9U2auSGN22#webデザイン pic.twitter.com/MIHqAtIkUo
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 8, 2020
ニュージーランドのアートスペース。
大胆な色使いとスペーシング、ボタンを排除したデザイン、画面切替のインタラクションなどはクリエイティブな印象を与えたいときの参考になりそう。
不親切というかっこよさもあるよね。https://t.co/9vFoAfq8fL#webデザイン pic.twitter.com/vzqTJnrkjt
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 7, 2020
デザインスタジオ。
画面切替時のインタラクションが参考になる。
また、ポップな作品が多いのに対し、セリフ体を使用しているのは作品とのギャップを作り、作品を見やすくするためだろうか。https://t.co/giksdPehiJ#webデザイン pic.twitter.com/EOJgIWmu3e
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) May 1, 2020
Sunshift。
紫外線を感じると色が変わりサングラスになる商品サイト。
光がコンセプトの写真の撮り方や白を基調にした構成が素敵。
商品のユニークさゆえに色物になる場合もあるがデザインでプレミアムな方向へ持っていけている。https://t.co/sr7r6vWk0f#webデザイン pic.twitter.com/E3hpZK5aIO
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 30, 2020
HAS。カルチャーマガジン。
メディアのデザインはスクロールを意識したデザイン（FVにコンテンツを出すなど）が多いが、ここは雑誌のように画面を贅沢に使用し雰囲気重視の作りになっている。
デザイナーは楽しかっただろうなぁ。https://t.co/eQdqDf76BD#webデザイン pic.twitter.com/II4lKRvh7R
【気になるwebサイト】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 28, 2020
デザインスタジオ。
一番上のレイヤーにノイズがかかっていて、フィルムを見ているようなかっこよさ。
リンクのフォントはデザインされていて、リンクが一つのコンテンツのようになっている。
とにかくかっこいいの一言。https://t.co/CcNtruPrUW#webデザイン pic.twitter.com/nXyG3F984A
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 27, 2020
ドラえもん50thアイテム。
ドラえもんカラーとイラストを使用しかわいく仕上がってる。
ただ大人をターゲットにしているので、かわいくし過ぎず、背の高いサンセリフ、斜体のゴシックやスクリプト体を使用し画面を引き締めている。https://t.co/Hlbe8DLGqs#webデザイン pic.twitter.com/7urkCr4hRL
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 24, 2020
オーストラリアの農地の有機物比率を高める組織ぽい。
FVのイラストがスクロールし地中に入ることでコンセプトを視覚表現している。
難しいテーマだがイラストを活用し理解の難易度を下げ、親しみも醸成しているところがいい。https://t.co/3GJbxnQJMZ#webデザイン pic.twitter.com/BSc3jX03bc
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 23, 2020
住信SBIネット銀行。
さすが業績が伸びている銀行といった感じで、サイトデザインも攻めている。
ネットリテラシーの高い若い世代をターゲットにしていそう。
SBIを使っていることがクールだという感覚を作りたいのかなと感じた。https://t.co/GUFLwAnP8Y#webデザイン pic.twitter.com/iEYcoFxtxn
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 21, 2020
子ども用お菓子。
ロゴがかわいい。動物のイラストをあしらいサイト内やパッケージなどでも活きている。
額縁レイアウトだが細いので写真の良さが立ち、写真も黒を抑えた暖かいトーンでイメージにぴったり。
素敵なサイトです。https://t.co/qCT9QwGj5p#webデザイン pic.twitter.com/BKhFiLEhwj
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 20, 2020
クリエイティブスタジオ HelloMonday。
KVのアニメーションがかわいい。
シンプルな構成だがホバー時や画面切替のインタラクションに凝っていてさりげない美学を感じる。
制作物の多様性もいいですね。https://t.co/x9iI9ZICtA#webデザイン pic.twitter.com/dtUgBkaVe6
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 17, 2020
コンバース。
コンバースらしいカルチャーを感じるデザイン。
イラストやフォントなどがカウンターカルチャー的な”らしさ”をうまく演出している。
詳細のイラストと実写のコラージュも良い感じ。https://t.co/qPBRkJZ4MY#webデザイン pic.twitter.com/L1eWSKLu8c
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 15, 2020
BANG & OLUFSEN。
プレミアムスピーカーのメーカーらしいミニマル、シンプルなデザイン。
フォントのウェイトは軽いもので統一されていて、強調表現はサイズの差のみ。
つい重いウェイトで表現したくなるが、参考になる。https://t.co/lw5dwJI4Tu#webデザイン pic.twitter.com/ORNXCvctjm
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 14, 2020
不揃い野菜マーケット。
形が悪く、通常店頭に並ばない野菜をオンラインで注文できるサイトと思う。
言葉が分からなくても写真とイラストで理解ができるのはデザインの力。
KVは一見写真のようで動画。
静物的な撮り方が上手い。https://t.co/omMw5FuexD#webデザイン pic.twitter.com/9XguUR6XvM
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 13, 2020
2024パリオリンピック公式ページ。
写真やグラフで過去のオリンピックを振り返る構成になっていて興味を喚起される。
使用しているフォント、彩度を抑えた色彩などデザインのこだわりもあってかっこいい。
東京サイトとの差が。。https://t.co/4EaB18o6P4#webデザイン pic.twitter.com/b6uH2M1WjA
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 10, 2020
岡山芸術交流。
フライヤーのようなTOPページに下層コンテンツが重なっていくようなデザイン。
webであって紙のような感覚になる。
色はアースカラーが多く、芸術のプレミティブな感覚を表しているように感んじる。https://t.co/3p9vGzUqbd#webデザイン pic.twitter.com/iz4SY3OAtC
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 9, 2020
MICA。
大胆な色使いと構成がユニークなサイト。
特に左のメニューバーの使い方は参考になる。
カラムのサイズやセクションの幅もカラムで異なっているところが面白い。
とてもポップ。https://t.co/rCjW1IYzRS#webデザイン pic.twitter.com/aARZ6TyvlU
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 8, 2020
人形道祖神。
イラストが特徴的で絵本や雑誌を読むような感覚で読める。
文字組みもwebデザインのルールに縛られず、どちらかというとエディトリアル的。
それでも道祖神というテーマに妙に合っていて納得感がある。https://t.co/vl9TfHE9B3#webデザイン pic.twitter.com/X0EQ2Rw3Dq
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 7, 2020
モバイルオーダーアプリのLP。
スマホの筐体を黒線だけで表現したり、導入企業例の見せ方など、ちょっとしたところに小技が効いている。
ドロップシャドウにビジュアルの色が反映されていたり。
全体的に見ていて気持ちのいいサイトhttps://t.co/GR4mPK9DDY#webデザイン pic.twitter.com/xJ1OpFGvA7
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 3, 2020
制作エージェンシー。
社名に由来してるのだと思うが、恐竜の影絵がサイトを横切っていて面白い。
背景ではなくコンテンツにも被るようにできているので本当の影のよう。
子ども向けの恐竜博などでも使えそうなギミックだ。https://t.co/QKUxzIjVoO#webデザイン pic.twitter.com/texlGFKlYR
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 2, 2020
ジャケット屋さん。
非常にミニマルなサイトで、スクロールが上下に行え始まりと終わりの概念がない。
初期のPCのUIのようなデザインだが、細かなところで洗練されている。https://t.co/AghIOoCObu#webデザイン pic.twitter.com/9kTHuszaNY
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) April 1, 2020
Fontworks
文字をもっと自由にというコンセプトのブランディングサイト。
動画をベースにした幾何図形のモーショングラフィックがキレイ。
赤と白飲みで構成されたシンプルなデザインだが、モーションを取り入れ飽きさせない。https://t.co/GpXCw89npb#webデザイン pic.twitter.com/Foq9cmYbce
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 31, 2020
THE。
ベーシックなアイテムを揃えるというショップコンセプトの通り、究極にシンプルでシステマチックなサイトデザイン。
TOPページになんの説明もないところはショップ名が全てを表現しているということだろうか。https://t.co/A0SWenpft3#webデザイン
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 30, 2020
ジェネレーターの紹介サイト（たぶん）
ドット絵風に構築されているデザイン。
斜めラインが滑らかなので実際はべジュかCSSで制作されているのかな？
上下のフェードアウトの処理などもこだわりがあって何度もスクロールしてしまうhttps://t.co/spmN0hEbwe#webデザイン pic.twitter.com/ItgBLipqXt
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 28, 2020
KVが文字のみでデザイン的なあしらいがないのが逆に面白い。
スクロールすると小さな人がアニメーションで動いているのが可愛くて何をしてるんだろうと見てしまう。
シンプルだがこだわりの詰まったデザインだと思う。https://t.co/3yDVHlTbFI#webデザイン pic.twitter.com/lNGyavDAwp
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 26, 2020
八海山のビール。
商品を中心に背景の画像がスクロールされるKVセクション、商品の詳細の記事風セクションと別れており、情緒的なイメージ訴求で興味をひき、記事で関心を高めるような構成。
商品のデザインやイラストも素敵。https://t.co/4e3Ck6fz9H#webデザイン pic.twitter.com/sUzMqtPhzh
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 25, 2020
空とぶネコ合同会社。
花札のようなトーンとイラストで独特の世界観。
イラストの細かいアニメがそれをより強調している。
どんな会社なんだろう？と興味がわきつい内容を読んでしまう。
提供サービスとギャップがないことを願うwhttps://t.co/5vzQgY35hZ#webデザイン pic.twitter.com/EehYm3sb4X
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 24, 2020
ネコ型の食パン。
商品の特徴であるネコの可愛さを全面に押したデザイン。
鉛筆テイストのgifアニメがアクセントになってサイトを生き生きとさせている。
ベースのホワイトは若干くすませることで柔らかいトーンを生んでいる。https://t.co/diIN6TWE77#webデザイン pic.twitter.com/yXK7DPjXbV
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 23, 2020
たぶんギャラリーのサイト。
まずロゴが面白い。言語の違いもあり、読めないが耐久性があり印象に残る。
マウスオンで色を大胆に変えたり、ズームアップしたり、形をリシェイプしたり、細かい表現が気持ちいい。https://t.co/ObjdVzKDwQ#webデザイン pic.twitter.com/vZpYQ0QgNV
【気になるwebサイト】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 17, 2020
スキンケアのサイト？
フォント名が分からなかったが、彫刻で彫ったようなクラシカルな雰囲気が特徴的。
またグリッドを描くことでアカデミックな印象が出て、商品が学術的に証明されているような信頼感あるデザインになっている。https://t.co/ZnVcKixvuh#webデザイン pic.twitter.com/iDklrRN2zd
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 16, 2020
たぶんスピーカーのサイト。
プロダクトがレトロでユニークなデザインで目を引く。そのデザインを中心に若干平体のかかったフォントやベージュのベースカラーが世界感を作っている。
所々に入る手書きの要素が今ぽさを演出している。https://t.co/2HWbxke89e#webデザイン pic.twitter.com/fIInBWDtdf
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 13, 2020
たぶんipadとかに貼るシートのページ。
行為がわかりやすいビジュアルを大きく使用することで、言葉がわからなくても伝えたいことが理解できる。
フォントサイズとのギャップがあるので幼稚にならない。
素敵に訴求しているデザインだと思う。#webデザイン pic.twitter.com/0pAB2TX21x
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 10, 2020
フォントワークス。
MVで複数書体を紹介。右カラムのタグが使用例で、マウスオンすると左カラムに書体を表示。タグのクリックで使用例の詳細ページへ。
全体に赤と白のみで構成されていて、CIのらしさを感じられるサイトだと思う。https://t.co/6GliIXCTx6#webデザイン pic.twitter.com/a8PS5xSkpH
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 8, 2020
災害時用キットのサイトぽい。
オレンジをベースに、ポップにデザインされている。線画のイラストが、主役のキットや導線の邪魔にならないものになっている。
災害用のものだが、不必要に危機感をあおらないデザインで好感が持てる。https://t.co/DF6hJCeEMQ#webデザイン pic.twitter.com/mPmDwbRPVH
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 7, 2020
目黒大学。
青をベースにイラストや写真で構成。青とオレンジ、黄色に絞っているのでポップだがうるさくない。
インフォグラフィックや細かいアニメがかわいくて、高校生は見入ってしまいそう。
バランスの取れたデザインだと思うhttps://t.co/la929d0lvI#webデザイン pic.twitter.com/u6Nh9iRdZR
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 5, 2020
（たぶん）海外のポートフォリオサイト
MVの３Dのオブジェクトがグリグリ動く。サイバー感あってかっこいい。
ポップアップでworkとaboutが出てくる。
スマホファーストなデザイン。 pic.twitter.com/ffeD55jCFd
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 4, 2020
ルクエ
写真の印象が強い。写真そのものはナチュラルトーンだが、使い方が大胆で、画面全体で主張してるのでインパクトがある。
MVの手書き文字もファーストビューから出る勢いで、写真同様に線は繊細だが力強い。
ギャップの使い方がうまいデザインだと思う。#webデザイン pic.twitter.com/IkxvSiJyvn
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 2, 2020
海外のmilesという会社のHP。
縦と横のスクロールのインタラクションがあり、動きが面白い。
そのほかにも細かいアニメーションで非常に凝っている。
文字組みや色のコントラストが強く、アグレッシブで映画のような印象を与えるデザインだと思う。https://t.co/4ZqliFr7jR pic.twitter.com/TLYW0VdSa9
【気になるwebデザイン_GIG inc】
— yuta｜アートディレクター・デザイナー (@yuta80510925) March 1, 2020
斜めの構成が組子のようなインタラクションで動くのが気持ちいい。
白黒のモノトーンの色使いでシンプルだが、インタラクションのおかげで質素には見えない。
ロゴのアイデンティティがサイトデザインにも良く活かされていると思う。#webデザイン pic.twitter.com/dp4Fg2mU82
【気になるwebデザイン】
— yuta｜アートディレクター・デザイナー (@yuta80510925) February 28, 2020
インタラクションや構図が独特。
モノトーンのレイヤーを何層も重ねているキービジュアルと画像のコントラストがかっこいい。
動きが参考になる。https://t.co/DCTOpUrT6p#webデザイン pic.twitter.com/3wLYk31dmk
この記事が気に入ったらサポートをしてみませんか？