248.
この記事では、以前のまとめ記事でも紹介していたSTUDIOで、WEBサイトをつくってみましたー！という記事。
仮ではありますが、リンクや画像、テキストの設定はちゃんとやっていますよ。
STUDIOって何？って人も多いかと思いますが、カンタンに言えばコードを書かずに感覚的にWEBサイトを作成できる革新的なツール。
さらにレスポンシブにも対応していて、ブラウザ上で全部できちゃいます(執筆時はChromeのみ)。
僕もコードへの理解は多少ありますが、本業でも自分で書くことはないんですよねー。
細かい作業や英数字の羅列を見るのが苦痛なタイプです。
で、そんな「コードなんてよく分からんよー」とか「WEBサイトつくりたいけど、ガッツリやる気はないんだよなー」なんて人にもおすすめできるツールです。
マージンとかパディングといった言葉も出てきますが、知らずに初めても触っているうちに慣れますね。
今回は僕のポートフォリオサイト(作品集)というイメージで1つ作成してみたので、参考にしてみてください。
この記事の内容。
STUDIOを使って10日ぐらいで作成。
248.
つくったサイトはコチラ。
WEBサイトへは下のリンクから飛べます。
思ったよりカンタンいい感じにつくれましたが、テスト用。
今のところ運用して使っていく予定はありません。
やはり特徴は、コードを書かずに感覚的に画面を見て作成できるのが嬉しいところ。
まだ操作に慣れてませんが、トラブルなく使えていて安心して使えましたよ。
レスポンシブにも対応。
レスポンシブにも完全対応しています。
ただ完全自動ではなく、画像やボックスなどの設定は必要。
WEBサイトって、今はスマートフォンでの閲覧が大半ですよねー。
このブログも約70%はモバイルからの流入。
意味のあるWEBサイトをつくるなら、レスポンシブ対応は必須ですね。
STUDIOを使って気づいたこと。
248.
テンプレートが便利。
今回はテンプレートを使用。
Warholという、ポートフォリオや写真集に向いているスタイリッシュなテンプレートです。
まだ数が少ないので、ここは今後に期待ですね。
テンプレートからカスタムするのも手軽なので、難易度はそこまで高くないかと。
プレビューがサクサクできる。
リンクや実際の表示のチェックには、プレビューを使用する必要がありますよね。
STUDIOは画面右上のプレビューを押せば、すぐ画面を確認可能。
作業後半の細かい部分となると、少しいじってプレビューを見る必要があるので、サクサク動いてくれるのは嬉しいですね。
操作は慣れが必要。
制作期間は10日。
といってもスキマ時間でやっているのと、使う画像を探したりテキストの内容を考えている時間がほとんど。
ところどころ使い方が分からなくて、ヘルプやチャットも少し使用しました。
入れ込むコンテンツが決まっている人は、テンプレートを使えば1〜2日でもできちゃいますね。
ショートカットキーや操作方法は慣れ次第です。
最初はどこに何があるのか分からんかった…。
でもこれは、普段使っているAdobe XDやPhotoshopでも同じ。
初めて使うツールなので、慣れるまでのハードルはありますね。
STUDIOの料金プランについて。
248.
基本無料、ただし制限はあり。
公式サイトには3種類のプランが表示されていますが…。
執筆時点で使えるのは、Freeか$9/月のどちらかです。
公式サイトの料金プランはコチラ。
参考 STUDIO 料金プランSTUDIO
何が違うのかは、カンタンに説明していきますね。
STUDIOバナーの非表示。
僕のポートフォリオサイトにもありますが、左下にSTUDIOのバナーが。
そこまで気にならないですが、有料プランだとここも非表示に設定可能。
独自ドメインの接続。
無料のまま公開までいけますが、ドメインは「〜.studio.design」というサブドメインになります。
独自ドメインを使用したい場合はアップグレードが必要ですね。
Appsの使用。
Googleアナリティクス、Googleタグマネージャー 、Googleサーチコンソールとの連携のことのようです。
僕も最初よく分からなかったのですが、下記のサイトで記載がありました。
詳しく説明が書かれておりテスト用サイトも公開されていますよ。
参考 STUDIOを使ってみた！コードいらずでサイトをデザインできるツール音楽制作・WEBの相談は Befriend Music へ！
STUDIOに今後欲しい機能。
248.
画像の保存禁止。
ここはチャットで担当の方に聞いたところ、そのような機能はないようです。
作品集や写真集をつくるにあたって、気になるのは盗用や無断転載じゃないでしょうか。
なので、このブログにもポートフォリオサイトも下記の一文を記載しています。
※当サイトに存在する、文章や画像、動画等の著作物の情報を無断転載することを禁止します。また引用の範囲を超えるものについては、法的処置を行います。
カンタンに言うと、引用でもなく許可なく使ったら訴える(お金も払ってもらうよ)ってこと。
こんなことをいちいち書きたくもないですが、書いておかないといざという時に困ります。
スクリーンショットで撮影される可能性もあるんですけどね…。
ウォーターマーク表記など回避する手段はありますが、この機能はぜひ欲しいところ。
この記事のまとめ。
248.
WEBデザインがよりハードルの低い行為になるツールですね。
直感的にも使えてとっつきやすい印象。
今後のアップデートで、もっと進化していくんじゃないでしょうか。
気になった人は、STUDIOの公式サイトに作成事例もありますので、参考に！
WEB以外のデザイナーやフォトグラファーなど作品集ページにもおすすめです。
自分が気に入ったWEBサイトがあれば、真似してつくってみるのもアリですね。
参考 STUDIO 作成事例STUDIO
コードを書かずブラウザ上でWEB制作ができる、STUDIO。
無料でも十分楽しめるので、一度試してみてはどうでしょう。
この記事にはアフィリエイト広告を使用しています！
【作品集サイト】に関連するおすすめ記事。
RESUMEで本番作品集サイトを公開しました。
STUDIOも使いやすくてよかったのですが、今後のメンテも考えてRESUMEで正式に公開しました。
WEBサイトも作品と考えるならSTUDIO、サイト制作の時間を短縮して他のことに時間を使うならRESUMEですね。
僕はSNSでの実績を並べる程度なら、RESUMEで十分と判断してます。
非公開: 【RESUME 作品集】作品集サイトを公開しました！デザイナー/クリエイターにおすすめです。
