blog

ブログ

  1. top
  2. blog

【2023年】参考にさせてもらったWEBサイト50選

スタッフブログ

    こちらも
    読みます?
    ほう!

    WEBサイトを制作する中で、世の中の様々なサイトをチェックして参考にしたり、影響されたり、時には嫉妬したり少し真似(オマージュ)をさせてもらったり、、、なんかしております。

    そしてこの年末の忙しい時期に、制作メンバーにそういった2023年に出会った秀逸なWEBサイトを、コメント付きで提出してもらいました!みんなごめん!!

    ということで、集めたWEBサイトを「参考にさせてもらったWEBサイト50選」と題してまとめさせていただきました。
    それではどうぞ!!

    ※クレジットはSANKOU!さんを主に参考にさせてもらいました。(間違ってたら教えてください…)

     

     

    1.きこえるいわて

    https://iwatetown-sdgs.jp/

    さわさわ、ざっぶーん、わぁわぁなどのまるで聞こえてくるような擬態語・擬音語。
    トップの映像も音がないけど、まるで聞こえてくるような映像ばかり。
    実際には聞こえないのに文字や絵で聞こえてくる感じがして面白い。
    過度な装飾はないのに、それぞれのパーツにメリハリがあり飽きさせないデザイン。

    ■クレジット■
    Shhh inc.様
    Good rings様

     

     

    2.文化商店

    https://bunka-shoten.com/

    少し渋めのカルチャー体験ができるイベントを、「まねきねこ」と「文化商店」というキャッチーで親しみやすいコンセプトアートで再表現することで、サイトを通して今の若者にも興味を持ってもらえるようなイベントに昇華されている印象を持ちました!
    インスタやXでの投稿内容やアカウントにもサイトと同じビジュアル・トーンを使用することで、より「行ってみたい!」と思えたので、ブランディングの面でも素晴らしいなと思いました。

    ■クレジット■
    FRACTA様

     

     

    3.ドミセ | おドろき専門店

    https://www.ppihgroup.com/domise/

    とにかく文字をつかったギミックが多彩でユニーク。
    棚×文字×モーションで様々角度から攻めた表現をしている。
    ギチギチ感や文字の主張がドンキ感をしっかり出しつつ、遊び心もあってちゃんと「ドミセ」に興味を持たせて行ってみたいと思わせるのがすごい。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    4.供花村ホームページ

    https://dcam.disney.co.jp/disneyplus_jp/gannibal/kugemura/index.html

    映画のプロモーション用のWEBサイトで、何も知らずに訪れたら腰を抜かしそう。
    制作側からするとすごく楽しそうなお仕事。こういうのやってみたい。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    5.いわき靴下ラボ アンド ファクトリー

    https://www.iwaki-socks.jp/

    横スクロールのお手本のようなサイトでシンプルなデザインながら思わず見入ってしまう。
    パララックス等も用いて全体的に動きがここちよい。こういうモーショングラフィックス、、、大好物です。
    うちのエンジニアにこれやりたいって言ったら嫌がられそう。

    ■クレジット■
    FRACTA様
    Dot-Line-Form様

     

     

    6.中華そば 七八

    https://shichi-hachi.theday-inc.jp/

    デザインが異次元にうまいのと、何よりラーメンが美味そうに見える!食べたい!
    ファーストビューからフッターまで「見てる人を飽きさせないぞ」というデザイナーさんの気持ちが伝わるサイト。

    ■クレジット■
    THREE Inc.様
    松山拓未様

     

     

    7.YELLOW参考サイト

    https://yellows.buzz/

    サイトの内容である、「障害者雇用」という砕けた表現が難しい内容を手書きフォントやクラフト感あふれるあしらいで、人間らしさあふれるデザインになっており、なんてやさしくて頼もしいサイトなんだ!と感じました。
    デザイン性が高い(グラフィックとしてもそのまま使用できそう)なサイトなのですが、コーディングの演出もデザインに合わせた細やかな動きがプラスされたことにより、「Webサイト」として完成しているサイトだなと思いました。

    ■クレジット■
    spicato inc.様

     

     

    8.彩り豊かな御所を描く ごせのね

    https://gosenone.com/

    デザインからコーディングまですべて丁寧に組み立ててあり、その中の写真や映像の魅力を引き出しているため奈良県御所市に行ってみたくなりました。まちの課題を掲載することで、しっかりと現実と向き合う姿勢が表現されているのも印象的。

    ■クレジット■
    imato様
    ADRIATIC様

     

     

    9.cocochi design

    https://cocochi.design/

    モンブランのとある案件でもとても参考にさせてもらったサイト。
    グラフィックデザイナーさんのポートフォリオサイトなのですが、ローディングのモーショングラフィックから始まり、サイト内の探索、実績の閲覧まで、「迷わない・見やすい・選びやすい」が揃っていて、ポートフォリオサイトして、とても機能性の高いサイトになっていると感じました。

    ■クレジット■
    神岡真拓様
    イノウマサヒロ様
    加藤大雅様
    高木康平様
    河村恵彦様

     

     

    10.岡埜屋酒店

    https://okanoyasaketen.com/

    一瞬でお店の方々の人柄が伝わってくる素敵すぎるサイトで、近くに住んでいたら間違いなく立ち寄りたいと思わせてくれるサイト。
    店主の人柄にフューチャーして企画から写真のディレクションまでおこなわれたたディレクターさんの勝利です。

    ■クレジット■
    Re:design様

     

     

    11.株式会社コンピュータ技研

    WEBサイトはこちら

    ソフトウェア会社という業種とはかけ離れたお笑いコンビという切り口でクリエイティブを構成していて、このコントラストの高さが強烈で効果的。
    一歩間違えばスベってしまうような難しい題材だけどサイト構成が上手いのでスルスル読めてしまう。
    この企画はクライアントからなのか制作側なのか分かりませんが、とても嫉妬したサイトです。

    ■クレジット■
    アコーダー株式会社様

     

     

    12.INADANI SEES – 農と森のインキュベーション

    https://inadani-sees.jp/

    少し妖しげなロゴに最初はギョッとしましたが、すぐに可愛く思えてくるのが不思議なバランス。
    WEBデザインもシンプルな構成ながら素敵なイラストに導かれて隅々まで見てしまう、なんていいサイト、、、。

    ■クレジット■
    株式会社やまとわ様
    デザインスタジオ・エル様

     

     

    13.くりもと眼科

    WEBサイトはこちら

    ページ遷移のまばたきアニメーションが良い。
    病院のサイトはよく笑顔で患者さんを診ている写真がファーストビューになりがちだけど、ここは先生がサイト訪問者(=患者)を診察している図というのが面白い。写真のアートディレクションに拍手!!!
    こんなオシャレなアイデアを浮かぶディレクターになりたい。

    ■クレジット■
    y2 inc.様

     

     

    14.ない株式会社

    WEBサイトはこちら

    コンセプトを体現した遊びがあるサイトで面白い。
    特設サイトではなくコーポレートサイトでこの企画をやっちゃうあたりに「我々はこういった面白い仕事をやっちゃう会社だよ」と差別化やブランディングの意図が読み取れて面白いし振り切り具合に嫉妬しちゃいました。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    15.GO!PEACE! | フェリシモ

    https://www.felissimo.co.jp/gopeace/

    クライアントから「こういう感じがいい」と見せられたサイトで「このクオリティ超えるのは…」と言い訳をして逃げたかったサイト。
    テーマとカラーのリンク・そして最後にそのカラーが集まり合いピースで終わるギミックが、コンセプトととマッチしていて素敵すぎます。

    ■クレジット■
    MEFILAS様

     

     

    16.ドラゴンボール | フェリシモ

    https://www.felissimo.co.jp/dragonball/dragonball_cha.html

    ドラゴンボールの世界観が上手く反映されているのと、初期のドラゴンボールのシティポップなテイストをうまく活かしてありとても今っぽい雰囲気になってる。PCで見ると右側のメニューがそのまま商品の紹介も兼ねていて抜け目がない&ブルマが可愛い。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    17.社会福祉法人 共働学舎

    https://kyoudougakusya.org/

    特徴的な手書きフォントをうまく生かしたサイト。
    シンプルなデザインなのに素敵過ぎる写真や、細かいアイデアが光るレイアウトによって優しさがにじみ出ている。この絶妙なバランス感覚は素晴らしすぎます。

    ■クレジット■
    しなやかデザイン様

     

     

    18.大阪市のタクシー【株式会社未来都】

    https://milight-taxi.co.jp/

    モーニングで新連載が始まりそうなファーストビューが良い!
    癖の強いフォントや色の組み合わせだけど上手く成立させている。
    ライティングも一貫して大阪弁のノリなので文章、デザイン、イラストと一体感がある。

    ■クレジット■
    One Groove様
    中村杏子様

     

     

    19.名古屋テレビ 【メ~テレ】採用サイト

    https://www.nagoyatv.com/saiyo/

    「なんだコレ?」と興味をそそるデザインもさることながら、それを成立させる細かいコーディングセンスが光るサイト。おそらくデザイナー側ではなくエンジニア側が考えて実装してそうな細かいアイデアがたくさんつまっているお手本のようなサイト。

    ■クレジット■
    株式会社セルインタラクティブ様
    5ive Inc.様

     

     

    20.STUDY IN SHIZUOKA

    https://studyinshizuoka.jp/

    静岡への留学を促進するためのサイトなのですが、イラストからフォント、色使いなど、サイトの全体的に「優しく親切な」印象があり、日本へ留学を考えている外国人の方に「安心してもらいたい・知ってもらいたい」というデザイン的なメッセージを感じ取れる優しいサイトだと感じました。
    また、英語バージョンのサイトに切り替えた後もサイトの印象が変わらなく、見やすいので、構成の時から細やかな配慮をしながら考えられたサイトなのではと思い、更に感動!

    ■クレジット■
    EVOWORX様

     

     

    21.Kyoto Dig Home Project

    https://akiya.city.kyoto.lg.jp/dighome

    脱力感のあるイラストが多く散りばめられているけど、デザインやレイアウトのうまさでコンテンツは邪魔せず、唯一無二な世界観を作り上げている。
    かなり固いクライアントなのでは?と思われるので、この企画やデザインを通したディレクターさんはさぞかしすごい方だと感じた。尊敬。

    ■クレジット■
    Nue inc様
    bank to様

     

     

    22.ZIZO

    https://www.zizo.ne.jp/

    zizoさんの勢いや総合的な企画力までも感じさせてくれるコーポレートサイト。
    こういったサイトを見ていると、自社サイトをリニューアルしたくなります。
    特に採用ページが個人的には好みで、私も入社したくなりました。

    ■クレジット■
    ZIZO様

     

     

    23.あなたのとなりの明電舎 | 明電舎

    https://www.meidensha.co.jp/knowledge/takingaction/anatanotonari/

    一見派手で個性的なデザインが主役と思いきや、文章が主役のサイトだと感じました。
    「電気よ、動詞になれ。」といったキャッチーなフレーズが効いていて、物語のようにスクロールに合わせてコンテンツが展開していくので楽しい。この独特な世界観も好きです。

    ■クレジット■
    YOMIKO ADVERTISING INC.様
    SHIFTBRAIN Inc.様
    CHO-P様
    ANDMADE Inc.様
    ぱいせん様

     

     

    24.株式会社HA-RU

    https://ha-ru2017.co.jp/

    ファーストビューの「とりあえずダクト持たせてみっか!」というノリの良さと、それに応えてくれるクライアントさんとの関係性が想像できて好きです。
    ダクトを持たせているところ以外はしっかり真面目にデザインすることにより、写真が際立ちそれがサイトの個性となっています。素敵です。

    ■クレジット■
    Will Style Inc.様

     

     

    25.砧書体制作所

    https://www.moji-sekkei.jp/

    書体ごとの特徴をアニメーションに落とし込んだ作りになっていて、ひたすらにスクロールしたくなるサイト。
    書体の魅力とこわだりがページにぎゅっとつまっていて、ついつい時間を潰してしまう。

    ■クレジット■
    NEW様

     

     

    26.関西編集保安協会 | 編集者を、西から生む。

    https://khhk.info/

    スクロールに合わせて赤入れされていくウェブサイト。
    静的なビフォーアフターはたまにある表現だけど、リアルタイムで変わっていくのは始めてみました。
    実装が大変そうだけど面白い。そして「やられた!私もこれやりたい!」と、どこかで真似したくなるサイト。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    27.信州大学農学部 受験生向けサイト パカパーン!

    https://www.shinshu-u.ac.jp/faculty/agriculture/pakapaan/

    大学の学部のサイトですよね!?ここまで攻めていいの??笑 とビックリさせられたサイト。
    ファーストビューは90年代のウェブサイトのようなテイストだったりトンマナの違うイラストを使い分けて混沌とした世界観ながらも、それをデザインとして成立させるデザイナーさんの腕の良さや、この企画を通したディレクターさんの執念が伝わるサイト。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    28.コクヨのヨコク | KOKUYO

    https://brand.kokuyo.co.jp/

    アナログゲームのような世界観がかわいい!
    テーブルの上から見ているような画角とノートの上に広がる世界っていうところもコクヨっぽくて良い。
    3D空間を駆使したwebサイトは個人的に「すごいだけで見づらいな」ってものが多い印象なんですが、これは見やすくていいな~と感じ、ここに至るまでチューニングしちゃってるエンジニアさんには狂気を感じました。やだやだ…
    おまけに音も気持ちが良い!素敵です。

    ■クレジット■
    mount inc.様
    TWOTONE様
    Ground inc.様

     

     

    29.AZABU DEI 麻布大学DEI推進センター

    https://dei.azabu-u.ac.jp/

    とにかくファーストビューで出てくるキャラクターが可愛いくて気になり、この子たちがサイトでどう使われていくのか隅々まで見ちゃいました。
    しかも今流行りのSTUDIOで作られてるんですね。こんな素敵なサイトが作れるのであれば僕らもSTUDIOに手をつけたほうがいいのかしら、、、と頭を悩ませてくれるサイトです。

    ■クレジット■
    NEWTOWN様

     

     

    30.newpeaceinc

    https://newpeace.jp/

    色使いや演出がとても派手に感じるサイトですが、表示演出や各コンテンツのサイズのバランスが良く、ひとつひとつのコンテンツに集中して見れる、なんとも絶妙なバランス感をもったサイトです。
    またサイトを作った後に更新するコンテンツであろう、ブログやイベントのバナーもデザイン性が高く、通年でクリエイティブな活動をしていることがビリビリと伝わってくるコーポレートサイトになっているなと感じました。色々真似したい…

    ■クレジット■
    Goodpatch Inc.様
    STUDIO DETAILS Inc.様

     

     

    31.都湯-ZEZE-

    https://miyakoyu.jp/

    Webと紙媒体の良いとこどりのようなサイトで、特にストーリーページは雑誌の特集を読んでいるかのよう。
    旅館でもホテルでもない「銭湯」という人懐っこしイメージをしっかりとデザインに落とし込んでるのも素敵&バランス感覚が最高。

    ■クレジット■
    yuu様

     

     

    32.【公式】uniam – 獣医師・栄養士監修ねこ専用のフレッシュフード

    https://uniam.jp/

    プロジェクトの詳細は分かりませんが、ハイレベルなブランディングによって成立しているサイトだと感じました。この世界観、写真、言葉、イラスト、WEBデザイン、どれをとっても隙がなく遊び心もあり感服いたしました。ねこを飼っていなくても見ていて楽しいサイトです。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    33.タグチグループ 新卒採用サイト

    WEBサイトはこちら

    漫画風デザインは他にもありますが、アナログ漫画に振り切って色を最小限に、細かな装飾に原稿用紙やインクを使っていたりで、漫画風デザインとしてのこだわりがつまっていて個人的に大好きです。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    34.渋谷区公式サイト | 渋谷区ポータル

    https://www.city.shibuya.tokyo.jp/

    官公庁系のサイトの中でも圧倒的に使いやすいデザイン。トップのカラフルなアイコンやフォントづかいが、全体的にシンプルなこのサイトのデザインの質を上げているように感じました。すべての官公庁系サイトはこれでいいのでは?とさえ感じます。

    ■クレジット■
    株式会社 博報堂アイ・スタジオ様
    YO inc.様

     

     

    35.アプリファクトリーはるni株式会社

    https://haru-ni.net/

    ゲームとWEBサイトが融合したようなサイトでとてもワクワクします。
    サイト探索してて純粋に楽しい。遊び心もあって、楽しいゲームを作ってくれそう。

    ■クレジット■
    アプリファクトリーはるni株式会社様
    Lucky Brothers & co.様
    hydekick様

     

     

    36.五感拡張型クリエイティブ制作室「TATELab.」

    https://tate-lab.com/

    「ふかく、たてにもぐろう」というメインテキストから縦に長いサイトだろうと思っていたが、想像の倍は縦に長かった。また演出も派手さはないのに次が気になってどんどんとスクロールしてしまう。
    スクロールというWeb独自の動きを「深く潜る」というコンセプトに仕立てて、とてもマッチしていた。
    イラストが少しあやしく怖いのがくせになりそうです。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    37.浮月楼

    WEBサイトはこちら

    けして派手ではないが一つ一つの丁寧な作り込みや細かいアイデアが積み重なることで、料亭の品格や歴史をまさに表現しているようなお手本なサイト。ヘッダーからフッター、そして下層ページの隅々まで隙がない丁寧なつくりで、まさに教科書にしたいサイト。

    ■クレジット■
    QUOITWORKS Inc.様

     

     

    38.御岳山【公式】サイト | ただの山、じゃない。御岳山

    https://tadanoyamajanai.jp/

    力強いグラフィック、かわいいキャラクター、エモーショナルな文章、山のサイトっていうのが、まずすごい。ドメインもいい。そのままパンフレットや絵本になるのでは?(なってる?)と思わせるグラフィック感全開な思い切った構成も素敵。地域に愛されている山なんだろうな〜〜。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    39.リンゴアメ専門店 林檎堂

    https://ringo-dou.com/

    パッと見のデザインや写真のクオリティもさることながら、隅々まで見ると恐ろしくなるほどの作り込みやこだわり。個人的には「シナモンシュガー」が気になり、めちゃくちゃ食べたくなりました。写真が美味しそうすぎます!

    ■クレジット■
    GLIDE ARTS STUDIO様

     

     

    40.【公式】BLANC HONEY | ふきとり美容で肌磨き

    https://www.blanchoney.jp/

    要素をぼかしたり、背景のビジュアルを透かしたりで、商品のフレッシュなイメージを上手くサイトに落とし込んでいる。数種類のキービジュアルの作り込みや表現が勉強になります。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    41.株式会社Morght

    https://morght.com/

    サイトの雰囲気と画像のエフェクトがとてもマッチしていて、ショートフィルムを見ているかのような感覚。
    各タイトルの手描き文字やロゴなどテイストが全然違うのにバランスが崩れていないのがすごい。

    ■クレジット■
    SHIFTBRAIN Inc.様
    ingraft Inc.様

     

     

    42.ALOOP CLINIC & LAB

    https://aloop.clinic/

    ページ全体のアニメーションのタイミングから動き・明度まで調整してあり、とても滑らかで心地良いWebサイト。

    ■クレジット■
    NEWS様
    reynato.tokyo様

     

     

    43.別府駅ゆのまち内科・胃と腸クリニック

    https://yunomachi.clinic/

    別府らしさを体現したロゴマークも素敵で、そのロゴマークの世界観をサイト全体に反映している。
    それとファーストビューがグラフィックデザインのようなバランスで構築されていて、それがクリニックとして他とは一線を画す個性となっている。真似したいバランス感覚。

    ■クレジット■
    あしたの医療デザイン研究室(CONDENSE Inc.)

     

     

    44.仙台で暮らす、湖山で働く。

    https://www.koyama-sendai.org/

    仙台へ移住してくるイメージを車窓のようなファーストビューで表現していてとても良い。
    タイトル・本文・リンクなども「読み物」として分かりやすくデザインされていて、Webサイトとしてもとても見やすい。

    ■クレジット■
    不明でしたm(_ _)m もしよければ誰か教えてくださいませ。

     

     

    45.ドライバーの仕事探しなら『GOジョブ』

    https://gojob.go.goinc.jp/

    タクシーGOのイメージをグッと上げるようなサイト。
    分かりやすさとキャッチーさのバランスが素晴らしく、興味がなくても隅々まで見てしまいました。
    知りませんでしたが、色んな職種があるんですね。これは問い合わせが増えそうだし広告効果も高そうなサイト!

    ■クレジット■
    necco inc.様
    株式会社リビルド様

     

     

    46.幸保工務店

    https://www.yukiyasu.co.jp/

    ファーストビューの左側にある「幸せをのぞき見しているような窓」のスライドショーが素敵。
    レイアウトもレスポンシブのお手本のような構成で、目を飽きさせないデザインのリズムが参考になる。

    ■クレジット■
    株式会社フルスケール様

     

     

    47.2023秋冬限定ヘアアイロン | SALONIA公式サイト

    https://salonia.jp/limited/autumn2023/

    SP特化でありながらファーストビューはPCサイトのようなリッチさがあるお手本のようなサイト。これは真似したい。また音楽を奏でているかのような五線譜の背景が素敵。

    ■クレジット■
    株式会社エムハンド様

     

     

    48.ブースター

    https://boo-ster.co.jp/

    サイト全体に躍動感を出してくれるファーストビュー動画と、細部まで丁寧なデザインが好印象。
    コーディングも同様な丁寧さで、触っていてとても心地が良く素敵。

    ■クレジット■
    株式会社プロモートウェブ様

     

     

    49.大学バスケの新時代、World University Basketball Series

    WEBサイトはこちら

    かっこいい!バスケのダイナミックさが体現されているサイト。
    スラムダンクの映画と同時期のこのサイトにはしびれました。

    ■クレジット■
    ARUTEGA Inc.様
    Wataru Kojima様

     

     

    50.HAKKO ANKO SAND

    https://hakko-anko-sand.com/

    ネットショップ限定で展開している製菓のサイトで、綺麗で美味しそうな写真はもちろんですが、青を基調とした色使いから、商品の形に合ったシェイプ、すべてが「お取り寄せ菓子」のプレミアム感をきちんと演出するために、満点の役割を果たしているサイトだと思いました!

    ■クレジット■
    ondo inc.様

     

     

    以上、それぞれ短めのコメントでしたが、ダダ〜〜!っと紹介させていただきました。
    来年も素敵なWEBサイトに出会うんだろうな〜!皆さん良いお年を✨