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