独自ドメインを使いたい場合は月額980円～の有料プランをご検討ください。 「studio」の有料プランについて. 独自ドメインを取得したサービスを確認 サービスによって設定方法が違うので、まずは自分が独自ドメインを取得したサービスを確認しましょう。 基本無料のプランでは公開サイトに「studio」のリンク付きバナーが強制表示されるほか、独自ドメインの使用ができません。 STUDIOで作成したWebサイトを本格的に公開・運用したいときには、独自ドメイン（自分で取得した .comや .jpなど）やアクセス解析（どれだけサイトにユーザーが訪れているか計測すること）が必要になっていきます。その際は有料プランを利用しましょう。 この記事では、仮ではありますが、リンクや画像、テキストの設定はちゃんとやっていますよ。 STUDIOって何？って人も多いかと思いますが、カンタンに言えばコードを書かずに感覚的にWEBサイトを作成できる革新的なツール。さらにレスポンシブにも対応していて、 僕もコードへの理解は多少ありますが、本業でも自分で書くことはないんですよねー。細かい作業や英数字の羅列を見るのが苦痛なタイプです。 で、そんな「コードなんてよく分からんよー」とか「WEBサイトつくりたいけど、ガッツリやる気はないんだよなー」なんて人にもおすすめできるツールです。マージンとかパディングといった言葉も出てきますが、知らずに初めても触っているうちに慣れますね。今回は この記事の内容。WEBサイトへは下のリンクから飛べます。思ったよりカンタンいい感じにつくれましたが、テスト用。今のところ運用して使っていく予定はありません。 やはり特徴は、まだ操作に慣れてませんが、トラブルなく使えていて安心して使えましたよ。 レスポンシブにも完全対応しています。ただ完全自動ではなく、WEBサイトって、今はスマートフォンでの閲覧が大半ですよねー。このブログも約70%はモバイルからの流入。意味のあるWEBサイトをつくるなら、レスポンシブ対応は必須ですね。 今回はテンプレートを使用。Warholという、ポートフォリオや写真集に向いているスタイリッシュなテンプレートです。まだ数が少ないので、ここは今後に期待ですね。テンプレートからカスタムするのも手軽なので、難易度はそこまで高くないかと。 リンクや実際の表示のチェックには、プレビューを使用する必要がありますよね。STUDIOは画面右上のプレビューを押せば、すぐ画面を確認可能。 制作期間は10日。といってもスキマ時間でやっているのと、使う画像を探したりテキストの内容を考えている時間がほとんど。ところどころ使い方が分からなくて、ヘルプやチャットも少し使用しました。 ショートカットキーや操作方法は慣れ次第です。最初はどこに何があるのか分からんかった…。でもこれは、普段使っているAdobe XDやPhotoshopでも同じ。初めて使うツールなので、慣れるまでのハードルはありますね。 公式サイトには3種類のプランが表示されていますが…。執筆時点で使えるのは、Freeか$9/月のどちらかです。公式サイトの料金プランはコチラ。何が違うのかは、カンタンに説明していきますね。 僕のポートフォリオサイトにもありますが、左下にSTUDIOのバナーが。そこまで気にならないですが、有料プランだとここも非表示に設定可能。 無料のまま公開までいけますが、ドメインは「〜.studio.design」というサブドメインになります。独自ドメインを使用したい場合はアップグレードが必要ですね。 Googleアナリティクス、Googleタグマネージャー 、Googleサーチコンソールとの連携のことのようです。僕も最初よく分からなかったのですが、下記のサイトで記載がありました。詳しく説明が書かれておりテスト用サイトも公開されていますよ。ここはチャットで担当の方に聞いたところ、そのような機能はないようです。なので、このブログにもポートフォリオサイトも下記の一文を記載しています。※当サイトに存在する、文章や画像、動画等の著作物の情報を無断転載することを禁止します。また引用の範囲を超えるものについては、法的処置を行います。カンタンに言うと、引用でもなく許可なく使ったら訴える(お金も払ってもらうよ)ってこと。こんなことをいちいち書きたくもないですが、書いておかないといざという時に困ります。スクリーンショットで撮影される可能性もあるんですけどね…。ウォーターマーク表記など回避する手段はありますが、この機能はぜひ欲しいところ。 WEBデザインがよりハードルの低い行為になるツールですね。直感的にも使えてとっつきやすい印象。今後のアップデートで、もっと進化していくんじゃないでしょうか。 気になった人は、STUDIOの公式サイトに作成事例もありますので、参考に！WEB以外のデザイナーやフォトグラファーなど作品集ページにもおすすめです。自分が気に入ったWEBサイトがあれば、真似してつくってみるのもアリですね。 無料でも十分楽しめるので、一度試してみてはどうでしょう。 それではまた！【作品集サイト】に関連するおすすめ記事。 STUDIOも使いやすくてよかったのですが、今後のメンテも考えてRESUMEで正式に公開しました。WEBサイトも作品と考えるならSTUDIO、サイト制作の時間を短縮して他のことに時間を使うならRESUMEですね。僕はSNSでの実績を並べる程度なら、RESUMEで十分と判断してます。次の記事 ぱぴぺぺ大阪在住のデザイナー｜空間デザイングラフィックデザインがメイン｜生活を「いい感じ！」に整えるモノ系ブログ【モノコトポート】を運営中です｜｜黒いモノと白いモノが大好きで黄色いモノも好き｜iMac / MacBook / iPad Pro / GRIII / SIGMA fp｜デザイン相談やレビュー依頼はお問い合わせかTwitterDMにてお願いします。生活を「いい感じ！」に整えるモノブログ。 © 2020 ぱぴぺぺ All rights reserved. STUDIOでできないこと. デザインしたサイトがそのままローンチできる新しい国産Webデザインプラットフォーム「STUDIO」の概要や簡単な使い方をご紹介します。小型サイトならたった数時間でWebサイトの公開まで行き着けるでしょう。使い方は簡単なので、早速触ってみてはいかがでしょうか。 2020年1月の時点で、以下は未対応でした。 コードを書かずにWebサイトを作成できる、ちなみに、ブラウザは、に対応しているようです。参照：詳しくは、いくつかピックアップして解説してみます。ドラッグ・アンド・ドロップで各セクションやテキスト、画像等を配置した後、細かい余白やボーダー等を調整していきます。調整の項目がCSSライクで、GUIでCSSを書いているような感覚になりました。疑似クラスは、レスポンシブWebデザインに対応しいて、ブレークポイントごとにデザインを調整できます。（ブレークポイントは、SP・TB・PCの2箇所くらいあるみたい）また、モーダルやハンバーガーメニュー、各UIのHTMLタグをGUIで指定・変更できます。たとえば、見出しレベルをドラッグ・アンド・ドロップでUIパーツの中にUIパーツを入れると、HTMLが入れ子になりました。逆に、外に出すと兄弟要素になったりします。お問い合わせフォームのUIが用意されているので、ドラッグ・アンド・ドロップで配置し、配信先を設定するだけで使えます。楽。独自ドメインの設定は有料です。無料版ですと、また、無料版では左下に広告が表示されるようです。参照：2020年1月の時点で、以下は未対応でした。JavaScriptや細かいマイクロインタラクションが使えない点がネックですが、提供されてるモーダルやフォームの範囲内で十分なWebサイトであれば、特に問題なく使えるツールだと思います。マークアップの知識があるデザイナーさんと相性が良さそうです。逆に、HTML・CSSが書けます程度のマークアップエンジニアは、このままでは淘汰されてしまいそうですね。。がんばりましょう(^^) 「さくらのサブドメイン」を使っていたWordPressのサイトを、独自ドメインにしました。途中、いくつか難しい点がありましたので、変更の手順とあわせて紹介します。同じことで困っている方の参考になれば幸いです。さくらのサブドメインとはさくらの 独自ドメインの設定（有料） 独自ドメインの設定は有料です。無料版ですと、{subdomein}.studio.designになります。 また、無料版では左下に広告が表示されるようです。 参照：料金設定. studioで作成したサイトに独自ドメインを設定している場合、そのドメインでメールも使用する方法を解説します。 1. 独自ドメインの接続。 無料のまま公開までいけますが、ドメインは「〜.studio.design」というサブドメインになります。 独自ドメインを使用したい場合はアップグレードが必要ですね。 Appsの使用。 独自ドメインを使用する場合は、他のサイトでドメインを取得した後にstudio上で適用するようにしましょう。 公開 ここまできたら、いよいよサイトの公開です。