Studioで作成されたデザイン性の高いサイト最新事例|2026年7月版
Studio
2026.07.30
Updated:2026.07.30
6月にStudio ShowcaseおよびStudio Expertsに掲載されたWebサイトの中から、編集部視点で厳選した5つのサイトをご紹介します。

Studio
2026.07.30
Updated:2026.07.30
6月にStudio ShowcaseおよびStudio Expertsに掲載されたWebサイトの中から、編集部視点で厳選した5つのサイトをご紹介します。

「Editor’s Pick」では、Studio ShowcaseおよびStudio Expertsに掲載されたWebサイトの中から、編集部が厳選した事例をご紹介しています。
この記事では、6月に公開・登録されたサイトの中から、デザイン性や表現力に優れた5つの事例をピックアップしました。
「人材育成」のサイトが、こんなに親しみやすくていい。
白背景に、太いゴシックで大きく「考えて、動く。」。
"考動"の2文字だけ色を変えることで、考える+動くという造語の成り立ちが、ひと目で伝わってきます。
スクロールすると、白とオレンジのセクションが交互に切り替わり、心地よいリズムが生まれます。
手描きのくねくねした線や、人々が学び合うフラットなイラストが、"学びの場"をやわらかく彩っていきます。
そして、オリジナルキャラクターの「SiOくん」が、セクションごとにひょっこり登場。オレンジの丸い体でページを飛び回り、案内役のようにサイト全体へ親しみを添えています。
株式会社ニッシリが社内外に向けてひらく、人材育成・組織づくりの取り組み「考動アカデミー」のサイト。 硬くなりがちな「学び」というテーマを、色とイラスト、そしてSiOくんの温度で、ぐっと近づけた一作です。
WebサイトURL:https://kodo-academy.nissili.co.jp/
Studio Experts:Hikigane inc.
「困ったとき」に開くサイトがやさしいと、それだけで安心する。
クリーム色の空の下に広がる、絵本のような小さな町。 家々の間で人々が働き、暮らすイラストとともに、「安心を暮らしに。」のコピーが静かに迎えてくれます。
スクロールすると、丘のようにゆるやかな曲線でセクションが切り替わり、ピンク・イエロー・クリームのやさしい配色が続きます。
ドローン点検やサーモグラフィといった専門的な診断技術も、フラットなイラストによって、ひと目でわかるやわらかさに置き換えられています。
施工事例のBefore / Afterや、「1分でわかる!簡単セルフチェック」など、"気になったら、すぐ相談できる"導線も、同じ世界観を保ったまま丁寧に整えられています。
愛知県豊田市で雨漏り診断・外壁塗装を手がける、株式会社KEEPsのサイト。
「どこに頼めばいいか分からない」という不安から始まる雨漏りというテーマを、絵本のような世界観で、暮らしに寄り添う安心感へと変えた一作です。
Webサイト URL:https://keeps.homes/
Studio Experts:株式会社WOSH design
開いた瞬間、ふっと日本の風景に引き込まれる。
映像で始まるファーストビューは、スクロールとともにゆっくりと白へ溶けていきます。
そして、地域・人・モノ・コトを結ぶ同心円のダイアグラムと、「日本の魅力を、個性ある挑戦へ。」の言葉が、静かに浮かび上がってきます。
映像からコンセプトへ。
この滑らかな転換は、Studioが4月に機能追加した「スクロールエフェクト」を活用して表現されています。
日本各地の文化や技術、暮らしに宿る価値を、テクノロジーとデザインの力で再構築するJ-CAT株式会社。
時代を超えて受け継がれる真価に光を当てる——その想いが、静謐なデザインの隅々にまで息づく一作です。
WebサイトURL:https://j-cat.co.jp/
Experts:株式会社アールイーデザイン
タイトルの文字がぱらぱらと解けて落ち、残った小さな円が広がっていく。
開いた瞬間、タイトルの文字がぱらぱらと解けて落ちていきます。
中心に残った小さな円は、スクロールとともにゆっくりと広がっていく。
その人の輪郭を知る「10の好き」と、軌跡や考え方を知る「インタビュー」。
ふたつの角度からひとりを少しずつ深く知っていく——このメディアの体験そのものが、そのまま動きになったようなファーストビューです。
インタビューページは、チャットの吹き出しが続く形式。合間に差し込まれる卓上の料理や日本酒の写真に、読み進めるうちに、いつのまにか自分もその席に座って一緒に飲んでいるような気分になってきます。
Studio Design Award 2024でグランプリを受賞した「旅と仕事と」。
その賞金から生まれた裏企画が、この「#Studioを肴に語る会」です。
Studioをきっかけに出会った10人に、お酒を飲みながらざっくばらんに話を聞く。その人をその人たらしめるものは何なのかを、じっくりと探っていく。
残り5人の物語も楽しみです。
WebサイトURL:https://www.itplus.co.jp/studio-sakana-kai
Experts:株式会社アイティプラス
「行ってみようかな」と思えるところまでを、デザインが引き受けている。
ファーストビューで切り替わるのは、診察室での対話風景や院内の様子。明るくやわらかなトーンの写真が、初めて訪れる人の緊張をそっとほどいていきます。
メインビジュアルの中には診療時間が収まり、ページの右下には「こんな症状ありませんか?」のボタン。症状から必要な診療内容へまっすぐたどり着ける導線が、最初の画面から用意されています。
眼科は、軽い症状の裏に重い疾患が隠れていることのある領域。
だからこそ「少しでも不安があれば気軽に相談してほしい」という考えが、サイトの隅々まで形になっています。
2026年春、福井市森田地区に開院した「もりおか眼科」。
CI/VI・院内サイン・名刺・Webサイトまでを一本で貫くトータルブランディングとして設計され、ロゴは「目」の漢字が開き、道がひらけていく形。
ブランドカラーは「パイオニアブルー」と名付けられています。
歯科検診が当たり前になったように、一生ものである目にも予防の意識を根づかせたい——受診をためらう最後のひと押しまでをデザインで支えた、静かに親切な一作です。
WebサイトURL:https://morioka-ganka.com
Experts:飛企画(株)
キャラクターとイラストで「学び」を近づけるサイト、絵本の世界観で「困りごと」を受けとめるサイト、映像からコンセプトへ静かに転換するサイト、吹き出しの中に読者を座らせるサイト、そして受診の一歩手前までを設計するサイト。
今月は、コーポレート、サービスサイト、オウンドメディア、クリニックと、器の異なる5サイトが並びました。
見比べてみると、どのサイトにも通っていたのは「距離を縮める」という一手でした。
人材育成、雨漏り、地域の価値、初対面の人、そして眼科。どれも、そのままでは少し身構えてしまうテーマです。 それを、色で、イラストで、キャラクターで、写真で、導線で——。
それぞれのやり方でやわらかくほどき、「もう少し近づいてみようかな」と思えるところまで連れていく。
デザインの役割は、格好よく見せることだけではありません。 最初の一歩を、ほんの少し軽くすること。今月の5サイトは、そのことを静かに教えてくれました。
Studioで公開したWebサイトは、プロジェクトダッシュボードから「Showcase」への掲載申請が可能です(※審査あり)。
>詳しくはこちら:Studioで作られたWebサイトを集めたギャラリーサイト「Showcase」への掲載 | Studio Help
>Webサイト制作をご検討中の方は、公式窓口よりお気軽にご相談ください。(無料):https://studio.design/ja/experts/contact-studioexperts
次世代のノーコードWeb制作プラットフォームを謳うノーコードツールです。デザインから、公開、CMSまで、すべてがここに。
無料ではじめる