この度、C3 Design.のホームページ制作プラン（STUDIO構築）の特設ページをリニューアルしました！
リーズナブルでスピーディに構築でき、デザイン性も高いSTUDIOでのホームページ制作。
最近ではSTUDIOプランをご依頼をいただく事も多くなりました。
リニューアルまでの道のり（たったの3日）と、デザインのポイントについても解説していきます。
[ もくじ ]
ノーコードツール「STUDIO」ってなに？
「STUDIO」なら、従来のホームページ制作方法の場合に必要となる「コードを書く」という作業をしなくても、直感的に操作してホームページ制作が出来ます。（一般的にノーコードツールと呼ばれています）
現在、ユーザー数は15万人を超えており、有名企業、官公庁まで幅広い層のWebサイトに活用されています。（2021年8月時点）
デザインの柔軟性が高く、コードを書く手間が削減できるのでスピーディーな制作が可能になります。
また、手間を削減できた分制作コストも削減できるので、リーズナブルな費用も魅力的なんです。
※我々Web制作者は、ホームページ制作にかかった時間（工数）を考慮して、お見積りを出していますので、工数が少ない＝その分お安くできるというわけです。
以前、STUDIOについての記事を書いていますので、STUDIOの詳細や各プランについてはこちらをご覧ください。
進化し続けるSTUDIOの機能たち
私が「STUDIOってすごい！」と思っているのが、定期的な改善と機能追加です。
リニューアル前のサイトでは実装できなかったことができるようになったりと、常にユーザーが使いやすいように改善されているので、どんどん使いやすく便利に、かゆいところに手が届くように進化しています。
今回のリニューアルにも一部、新しい機能を実装しています。
作る度に新しい発見があり、「こんなことができるようになっている！」と驚いています。
今回のデザインのポイントと解説
普段お客様のホームページを制作させていただく際には、STUDIO制作に限らず「見やすさ」「お客様らしさ」を意識して制作するようにしています。（もちろんそれ以外にも配慮するポイントはたくさんあります）
そうすると、当然「自分が」好きなデザインで作るのではなく、「お客様が」伝えたいことを正確に伝えられる、「お客様のホームページを見る人」が快適に利用できるホームページを作ることになります。
しかし！今回のリニューアルでは、自分のサイトなので思い切って、デザインに関してはわりと自分の好みで制作してみました。また実装できるかチャレンジしてみた部分もあります。
制作期間はわずか3日！！
といっても、空いた時間にちょこちょこ制作していたので実質1日程度でしょうか…。
リニューアルなので主な構成、テキストはそのままです。
デザインテーマは「シンプル＆清潔感あふれるフルスクリーン」
最近ではフルスクリーンのホームページを制作する事も多いですが、今回はファーストビュー（ユーザーがWebページにアクセスした時に最初に表示される部分）もインパクトのあるものにしたかったので、背景デザインはスッキリと、テキストを際立たせてみました。
今回は白ベースに優しい色合いのグラデーションを取り入れ、スッキリとした清潔感のあるデザインに。アニメーションや個性的なフォント遊びも取り入れています。
Webフォントで世界観を創り出す
STUDIOにはWebフォント（※）が豊富に用意されているので、今回はふんだんに使用しました。
※あらかじめWebサーバ上に置かれていたり、インターネット上で配布されているフォントデータを読み込んで利用するフォントのことです。
ページ左上に表示されているフォントもWebフォントです。（C3 Design.をバーコードにして装飾として使用してみました。）
ページスクロール時も追従してくる、左に縦に表示されているフォントもWebフォントです。
手書き風なフォントが素敵！と思い、アクセントに取り入れてみました。
一般的にWebフォントというと読み込みが遅いとか重いという印象がありますが、体感としてはそれほどでもないように思います。最近のWebフォントはかなり早くなったと感じています。
フォント選びはサイトの世界観やブランディングにも影響を与えるので、せっかくSTUDIOでホームページを制作するなら、効果的なフォントを使用してみてはいかがでしょうか？
ボタンがちょっとおしゃれ
今回は、ボタンにも少し小技を使っています。
普通のボタンだと退屈なので、今回はアニメーションを取り入れました。
ボタンにカーソルを合わせると、背景色が左から右にシュッと伸びます。
技術的な事を言うと、初めに見えている黒い背景の上に、レイヤーを重ねて、アクション（マウスホバー）が起きた時に動作させるというやり方です。前はできなかったような…
ボタンを押すだけでも少し気分が上がりますね。
こんなこともSTUDIOなら簡単に実装出来ます。
その他アニメーション
ボタン以外にもアニメーションを使用しています。（上の画像は動きませんので実サイトをご確認ください）
スクロールの度に時間差で重なりが表示されるようにしたり、横からニュッと出てきたり。
こちらは前から実装できていた機能かと思います。
このように、STUDIOならアニメーションの実装がわりと楽にできるので、動きのある楽しいデザインのホームページ制作にも向いていると思います。
背景にグラフィックを使用
普段は背景に写真を使う機会が多いのですが、今回は洗練されたシュッとしたイメージを考えていたので今時カラーのグラデーションを使ったグラフィックを使用しました。
筆でシャッと書いたようなラインが、背景の白に映えたデザインになりました。
清潔感もありますよね。（シャッとかシュッとか…笑）
ページ下部（フッター）のC3 Design.の横の人はWebアイコンを使用しています。
「Go！」的な感じをイメージしています。（ちょっとかわいいな…と思ったので入れてみました）
STUDIOサイトの料金プラン
※2022年5月時点、STUDIOは新プランに変更になっております。
こちらの記事を書いた時からプランや料金など、一部変更になっておりますので、詳細はSTUDIO公式サイトをご確認ください。
さて、STUDIOを利用するには以下の3つの料金プランがあり、こちら制作費用以外に必要となります。
無料のプランもあります。
- FREEプラン ￥0
- BASICプラン ￥980/月
- PROプラン ￥2,480/月
基本的には無料でも十分使えますが、プランをアップグレードすることで、様々な機能が使えたりします。
今回リニューアルしたこちらのサイトは無料のFREEプランを利用していますが、実際にC3 Design.へご依頼いただくお客様はBASICプランを選ばれる方が多いです。
どのプランにするか選ぶ際の基準を記載しておきます。
FREEプランがおすすめな方
「とりあえずアクセスできるホームページがあればよい」という方はこちらで充分かもしれません。
例えば私のように、メインのサイト（https://c3-d.jp/）があり、そこからのアクセスをメインで考えている方や、SNSで集客ができていて、プロフィールページから飛べる先のホームページが欲しい方、特にアクセス解析の必要がない場合、広告メインで広告からのリンク先にホームページが欲しい方などにはぴったりです。
※FREEプランでは独自ドメインが使えず、左下に小さく「STUDIO」の広告バナーが表示されます。
BASICプランがおすすめな方
- あなただけのオリジナルなドメインを利用したい場合（独自ドメイン）
- 「STUDIO」広告バナーを非表示にしたい方
- アクセス解析を導入したい方（※）
- Instagramのフィードを埋め込みたい方など
※ページ訪問者数の計測やユーザー層の解析ができ、リアルタイムにホームページの状況を分析できるので反響を確認したり今後のホームページ運用にとデータを活用できます。
PROプランがおすすめな方
上記のBASICプランに追加して
- STUDIOでブログを書きたい方
にはおススメですが、長期的にSTUDIOのPROプランを利用する場合は、長い目で見るとWordPress制作の方がお安くなる場合がありますので、ランニングコストと比較して検討されるのをおすすめしています。
個人的には商用利用されるのでしたら、BASICプランがおすすめですが、お客様の目的によっても異なりますので検討中の方はぜひご相談いただければと思います！
まとめ
今回はC3 Design.のSTUDIOプラン特設ページのリニューアルについて、C3 Design.のホームページ制作の裏側「デザイン解説」をお届けしました。
普段あまりこのようにデザイン解説を細かく紹介する機会がないのですが、今回は自社サイトという事もあり紹介させていただきました。
C3 Design.は岡山県岡山市を拠点に活動しておりますが、全国どこにお住いのお客様でも対応可能です！
やりとりはオンライン（zoom、LINE、メール、お電話、その他チャットツールなど）で、お客様のご要望に合わせた連絡の取りやすい方法でコミュニケーションをしっかりとらせていただきますので、ご安心ください。
相談は無料です！お気軽にご相談お待ちしております！