【2024年最新版】Studioで作られたサイト事例12選！

ノーコードWeb制作ツール「Studio」は、簡単な操作でデザイン性の高いWebサイトを制作できるクラウド上のサービスです。
そんなStudioですが、
「ノーコードでどこまでデザイン出来るの？」
「実際どの程度のクオリティのサイトが作れるの？」
と気になっている方も多いのではないでしょうか？

この記事では、Studioというサービスについてと、実際にStudioで作られたサイトの事例を紹介していきます。クオリティの高い様々なサイトを紹介させていただくので、まだStudioを利用したことのない方でもどんなサイトが作れるかイメージ出来る内容となっています。
ぜひ最後までご覧ください。

ちなみに、今ご覧いただいているこちらのサイトも、すべてStudioで実装・運用されています！

Studioとは？

StudioはWebサイトを制作できる日本初のノーコードツールであり、完全オリジナルデザインで自由度の高いサイト制作が可能です。テンプレートから選択してカスタムしていく方法とゼロから自由に作り上げる方法を選択できるため数多くの企業で導入されています。

Studioのメリット・デメリット、どのようなことが出来るのかについてはこちらのブログでさらに詳しく解説しているので、ぜひご覧ください。

注目のノーコードツール【STUDIO】でできること、できないこと 

Studioで作られた「LP（ランディングページ）」の制作事例

株式会社ビッグマウンテン : ネット完結の良さをキャッチーに表現したサービスサイト

https://bigmountain0628.com/ (制作 : 株式会社ノックデザイン)

ビッグマウンテン様のネット完結型お部屋探しのサービスサイトです。ブルーベースの全体的に鮮やかな配色のサイトデザインと、所々に配置されたコミカルに動くキャラクターやイラストに親しみやすさを感じるデザインになっています。
ビッグマウンテン様の強みである「ネット完結の手軽さ」を前面に出しキャッチーなキャラクターと共に訴求することで、オンラインのみの取引でも、お客様が安心してお問い合わせできる雰囲気を目指したサイトになっています。

株式会社せせらぎ :  「リアルな声」で職場の雰囲気が伝わる採用サイト

https://recruit.seseragicare.com/ (制作 : 株式会社ノックデザイン)

介護施設を運営されているせせらぎ様の採用サイトです。明るいオレンジがアクセントになったデザインや実際に働かれている方々の表情がわかる写真から「楽しい職場」であることが伝わりますね。
それだけでなく「女性のライフステージに合わせて活躍できる楽しい職場」という打ち出しの元、働く環境や福利厚生、具体的な働き方などのコンテンツを入れることで、応募を考えている方の悩みを解消できるサイト設計になっています。

映画『徒花 -ADAHANA-』 :  アニメーションが印象的な世界観伝わる映画の公式サイト

https://adabana-movie.jp/

映画の公式サイトです。読み進める度に、滲んだ文字や写真がゆっくりと現れてくるアニメーションがとても印象的なサイトです。このアニメーションやサイト全体のトーンが、より映画の世界観を引き立たせる魅力的なデザインのサイトになっています。

パ・リーグ球団 仕事図鑑2024 : 楽しく学べる採用特設サイト

https://onground.doda.jp/shigotozukan2024

パ・リーグ球団の採用向け特設サイトです。イラストとシンプルなグリットの構成が多く使われており、情報量が多くても分かりやすいサイトになっています。
それに加え、コンテンツごとに背景色が切り替わったりアニメーションの動きが楽しく、最後まで読み進めたくなる工夫を感じるデザインです。

My genius : 大胆なオブジェクトからコンセプト伝わる特設サイト

https://mygenius.jp/

アートイベントの特設サイトです。大胆にあしらわれたオブジェクトの切り替わりが楽しいサイトになっています。カラフルでポップな配色とランダムに配置されたオブジェクトからイベントの面白さやアートの自由さが感じられるデザインです。

Studioで作成された「ブログサイト」の制作事例

ほやほや : 写真やあしらいから魅力が伝わる案内サイト

https://hoyahoya-seto.com/

愛知県瀬戸市の観光案内サイトです。目を引くアニメーションや表情のわかる写真で人柄や雰囲気が伝わってきます。ところどころにあしらわれている手書きのイラストも、なんだかほっこりと親しみを感じますね。
構成自体も見やすくまとめられていて、行ったみたいなと思わせられるサイトです。

Mobile-first Design : レイアウトからサイト内容が伝わるギャラリーサイト

https://mf-design-gallery.studio.site/

スマホファーストのサイトをまとめているギャラリーサイトです。
このサイト自体もスマホファーストのレイアウトになっており、視覚的にもどういったサイトか分かりやすいですね。すっきりシンプルなデザインと、ギャラリー部分のなめらかなアニメーションで全体的に見やすく使いやすいサイトになっています。

観石（みいし） : 思わず読み進めたくなるブログサイト

https://miishi-observite.studio.site/

鉱物についてまとめられているブログサイトです。ファーストビューからフッターに辿り着くまで細かくアニメーションが施されており、こだわりが感じられるサイトです。動きが面白いので、思わず読み進めたくなってしまいます。
フォントやオブジェクトもバランスよくまとまっていて、個人的にとても好きなサイトです。

Studioで作成された「コーポレートサイト」の制作事例

株式会社ステッド : 親しみを感じるイラストが印象的なコーポレートサイト

https://www.stead.co.jp/ (制作 : 株式会社ノックデザイン)

DX支援や業務システム開発をサポートするIT企業、ステッド様のコーポレートサイトです。ステッド様のポリシーである「お客様に寄り添った二人三脚のDX支援」を打ち出すためにイラストや人をメインとしたスタッフの普段働いている様子の写真を多く使用し、やわらかい雰囲気や人当たりの良さが伝わる構成のサイトになっています。

株式会社ファミット : 現場にある物をモチーフに落とし込み、「らしさ」の伝わるコーポレートサイト

https://www.famit.info/ (制作 : 株式会社ノックデザイン)

住宅設備機器・配管資材の卸売業をされているファミット様のコーポレートサイトです。
実際の現場を見たときに印象的だった「資材を置いている棚」をデザインに落とし込みサイト全体に起用することで、ファミット様らしさを表現したデザインになっています。
お客様にもメーカーの方にも期待に応える企業であることを想起させ、集客強化につなげることを目指し信頼感や親しみやすさが伝わるようメインビジュアルには動画を採用、写真も仕事をしている様子や顔のわかる写真を多く使っています。

有限会社長谷川興業 : 業界のイメージアップを図り採用に繋げるコーポレートサイト

https://ponpuya.com/ (制作 : 株式会社ノックデザイン)

日本全国でコンクリートの打設工事や生コンの販売・手配を手掛ける長谷川興業様のコーポレートサイトです。ヒアリング時に採用活動に課題を抱えているとのことだったので、「コンクリートポンプ業界を日本一かっこよく」というスローガンと共に、従業員のインタビュー記事など様々なコンテンツを拡充した構成に。そうすることで、業界全体のイメージアップと共に、応募者の増加を目指せるサイト構成にしております。

森の企画室 : 細かく散りばめられたアニメーションが印象的なコーポレートサイト

https://kikaku.yamatowa.co.jp/

クリエイティブチームのコーポレートサイトです。スクロールするごとに現れるほっこりと優しいタッチのイラストやアニメーション、柔らかい緑や黄色の配色などサイト全体を通して「自然」に関わる事業をしてるのがとてもわかりやすく伝わるデザインですね。
コンテンツのボリュームがありますが、細かい部分までこだわった動きのあるデザインで楽しく読み進められるサイトです。

まとめ

いかがでしたか？
「ノーコードだから出来ることが限られそう」というイメージがあるかもしれませんが、ここまでにご紹介したサイト事例をご覧いただくと、Studioでも十分にデザイン性や機能性にこだわったクオリティの高いサイトを制作できることがご確認いただけると思います。

Studioを活用することで、

• デザイナーがデザインから実装まで全て対応できるので、制作コストを抑えることが可能

• 直感的な操作ができるため、制作後の運用もしやすくなる

など様々なメリットがあるので、ぜひ導入を検討してみてください。

ノックデザインでは、ヒアリングに加えて、詳細な分析を行い、「いつ」「どこで」「誰に」「何を」「なぜ」「どのように」を明確にし、成果に繋がるホームページを制作することが可能です。
Studio公式の認定制作パートナーにも任命されており、Studioを使ったWeb制作に自信を持っておりますので、Web制作のご依頼であればぜひ弊社にお任せください。

Studioのサービスページはこちら

※このブログに掲載させていただいているサイトの掲載取り消しをご希望の場合はご一報ください。迅速に対応いたします。