どうも、仙台のWeb制作フリーランスとして活動しているキクチウェブのキクチです。
本日も毎度お馴染みのノーコードツールSTUDIOについて解説してまいります。
この記事を通じて
「STUDIOってどの程度のサイトが作れるの？」
「ノーコードサイトってクオリティどうなの？」
そんな疑問を解消できます。
STUDIOでは公式でサイト事例集（Showcase）を公開しています。
こちらを見ていただくだけでも、STUDIOの可能性を大いに感じることができます。
その中でも選りすぐりの高品質のサイトをご紹介していきたいと思います。
「イベント」
「ブログ・メディア」
「ポートフォリオ」
「コーポレート・サービス」
「店舗・商品」
これらのカテゴリーに分かれているので、それぞれご紹介していきます。
STUDIO Showcaseは度々観察していて、個人的に良いなぁと思うサイトを発見し次第、こちらの記事は追記して更新していく予定です。
では早速、見ていきましょう。
イベント
イベントサイトでノーコードツールSTUDIOによって制作された高品質のサイトをご紹介します。
TSUKUBA LIVE! MELT
筑波大学のハンドボールとバスケットボールのチケット販売サイトになります。
販売等の決済のシステムは外部サイトですがその前段階のサイトということになります。
サイトを開いた時のメインビジュアルつまりファーストビューでは動画を使用しており、文字が出てくる演出があるのですが、自分がこういった演出が好きなので選出しました。
自分がバスケ好きなのもあります（笑）
サイト全体のカラーとして水色と白を基調にしていて青春感も伝わってきます。
単にチームカラーなのかも知れませんが、どちらにせよ清々しい青春感があります。
自分が特に好きなポイントがあって
それがチケットを選ぶページになります。
説明するよりも見てもらった方が早いと思うのでリンクを貼っておきます。
このリンクのALLの部分で実際のチケットを触っているようなアニメーションがあります。
マウスカーソルが乗った時、このように動きます。
自分的には結構好みなホバーアニメーションです。
選手紹介ページもとてもみやすく整理されており好印象です。
ちなみにTSUKUBA LIVE! MELTのサイトを制作したのがこちら
ブログ・メディア
STUDIOではCMS機能によって、ブログサイトを制作することが可能です。
無料プランでもCMS機能は使用可能ですが、独自ドメインでサイトを公開したい場合は有料プランに変更する必要があります。
ブログ・メディアサイトでノーコードツールSTUDIOによって制作された高品質のサイトをご紹介します。
ほやほや｜愛知県瀬戸市のまち歩きエッセイ
愛知県瀬戸市の観光案内サイトですが、とても見やすくて魅力が伝わってきます。
まずメインビジュアルで、おそらく瀬戸市の事業者さんだと思うのですが顔が見えるので人柄や雰囲気が伝わります。
新着記事一覧もとても見やすいです。
サムネイル等全体的に角丸になっていて柔らかい印象があります。
個人的には「もっとみたい」ボタンのイラストのゆるい感じとかが結構好きです。
画像がカタカタと動くアニメーションもとても可愛らしいです。
STUDIOで使えるアニメーションは通常、登場時のアニメーションとマウスカーソルが乗った時のホバーアニメーションだけですが、こちらのサイトでは常に動いています。
おそらくCSSを書いて常に動くアニメーションを実現しています。
こちらの記事で常に動くアニメーションについて解説しているのでよろしければご覧ください。
サイト全体を通して瀬戸市を身近に感じられる温かみのあるサイトに仕上がっています。
地元密着型のサイト制作の時はぜひ参考にしたいサイトの一つです。
ポートフォリオ
自分の実績や過去の成果物などを載せて自分をアピールするポートフォリオサイトですが、ノーコードツールSTUDIOで構築されており、魅力が十分に伝わるポートフォリオサイトをご紹介します。
zuk-zuk
フリーランスデザイナーさんのポートフォリオサイトになります。
「シンプルで余計なことは一切していない」というのが個人的な印象です。
STUDIOでは簡単にアニメーションを実装できるので、やりすぎなサイトもたまに見受けられますが
こちらのサイトはとてもシンプルで余計なことを一切していません。
サイトのカラーもモノクロで統一感があります。
そしてキャラクターがカワイイです。
キャッチコピーもこだわりが詰まっているのが分かります。
ただパッと見だとフリーランスデザイナーというのが分かりにくいのかなぁなんて思ったところもありました。
的外れなことを言っていたらすいません🙇
余白を贅沢に上手に使っている感じも個人的には好みです。
私は余白があると埋めなければという気持ちがあって、かえって読みにくくなったという経験があります。
その経験からも余白を操れる人は尊敬しています。
この方も記事で書いていますが、STUDIOを使うことでノーコードでのサイト制作が可能になります。
以前まではWordPressでコーダーさんに頼んでいたところをデザインツール感覚でサイト制作ができます。
この方の記事も貼っておきます。
コーポレート・サービス
コーポレート・サービスサイトでノーコードツールSTUDIOによって制作された高品質のサイトをご紹介します。
株式会社クボキ
株式会社クボキさんのコーポレートサイトはデザインだけでなく、色々な面にこだわって作られているのが伝わってきます。
サイトの背景には設計図用の方眼紙のようなデザインが当たっており、事業内容である建築事業との関連性がありながらおしゃれに仕上がっています。
会社の代表がサイトのメインビジュアルで大きく顔が載っているのもとても好印象です。
コーポレートサイトは取引先が見る側面もありますが、就職を考えている人が見る可能性も高いです。
会社の雰囲気が良いとか人間関係が良いとかテキストベースで伝えるよりも
代表の笑顔がファーストビューで表示される方が人柄がより伝わって効果が高いと感じます。
マウスカーソルが当たった時のホバーアニメーションにもこだわりが見えます。
株式会社クボキさんでは、採用に力を入れているらしく別途採用サイトもあります。
こちらについてもこだわって制作されているのが伝わっていきます。
画面表示時、つまり登場時のアニメーションでも工夫が図られていますし、マウスカーソルが乗ったホバーアニメーションでも工夫されています。
株式会社クボキさんのサイトは特に若者の採用に苦戦している会社にとっては参考になるのではないかと思います。
どこの会社で働こうか考えている若者は十中八九会社名で検索してコーポレートサイトを見ます。
その時にこだわったサイトであれば魅力も伝わって、反応率も変わってくることでしょう。
ちなみに株式会社クボキさんのサイトを制作した会社さんはこちら
店舗・商品
店舗・商品サイトでノーコードツールSTUDIOによって制作された高品質のサイトをご紹介します。
HAKONATURE
こちらのサイトは、アウトドア拠点の運営やツアー、イベントについて発信しています。
ファーストビューでは画像がフェードによって切り替わるカルーセルになっています。
家族で自然を楽しむ感じが画面いっぱいに伝わってきます。
ちなみにSTUDIOでフェードによる切り替えのカルーセルを作成するには一工夫いります。
こちらのサイトを制作した制作会社であるRe:designさんがカルーセルをフェードで切り替える記事を書いてくださっているので実装の際には参考になると思います。
HAKONATUREさんのサイトはデザイン性が高いのはもちろんのこと、とても見やすいです。
サイトクオリティの高さに脱帽です。
各記事の詳細ページを見ると、記事に入る前におすすめポイントやライター情報などが紹介されます。
おそらくCMS機能で画面表示していますが、とても見やすくて勉強になります。
分かりやすい画面表示を考えて、CMSを整形する大事さが分かります。
記事の下部にある所要時間の項目もとても分かりやすいです。
記事によってここの部分の表示を出し分けていると思うので、ぜひこの実装方法が知りたいです。
HAKONATUREさんのサイトで感動したのが英語版を用意しているところです。
英語版のサイトはシングルページで構成されており、とてもシンプルです。
海外のお客様がターゲットに入る場合は、英語ページももちろん必要になるのでその際は参考にさせていただきたいと思います。
ちなみにHAKONATUREさんのサイトを制作した会社さんはこちら
こちらの制作会社さんが制作したサイトで面白いサイトもあったので載せておきます。
まとめ
完全なる独断と偏見になりますが、ノーコードツールSTUDIOで作ったサイト傑作選を紹介させていただきました。
どのサイトも高品質で、参考になる点が多く、個人的にとても勉強になりました。
「STUDIOはノーコードツールだからやれることが限られそう」と一見思いますが、確かにその面もあるにはありますが、今回紹介したようなサイトを作ることも可能です。
今回紹介した制作会社さんを利用するも良し、自分で作ってみるも良し、私に発注するも良し、なんでも良いのですがこの記事がSTUDIOを使用するきっかけになってくれたら嬉しいです。
念の為説明しておくと、STUDIOでも現状できないことはあります。
STUDIOを使用する前に分かっておくと、後で後悔することがないのでSTUDIOでできないことをまとめた記事を貼っておきます。
最後までご覧いただきありがとうございました。
以上、仙台のWeb制作フリーランスのキクチでした。ではでは。
