AMAZON在庫処分セール!

【STUDIO 作品集】STUDIOでWEBサイトをデザイン!初心者でもコード不要で気軽に使えます。

ぱぴぺぺポートフォリオ_アイキャッチ

ぱぴぺぺ

こんにちは、ぱぴぺぺ(@papipepe_mono)です!

 

今日は以前のまとめ記事でも紹介していたSTUDIOで、WEBサイトをつくってみましたー!という記事。

仮ではありますが、リンクや画像、テキストの設定はちゃんとやっていますよ。

 

STUDIOって何?って人も多いかと思いますが、カンタンに言えばコードを書かずに感覚的にWEBサイトを作成できる革新的なツール。

さらにレスポンシブにも対応していて、ブラウザ上で全部できちゃいます(執筆時はChromeのみ)。

 

僕もコードへの理解は多少ありますが、本業でも自分で書くことはないんですよねー。

細かい作業や英数字の羅列を見るのが苦痛なタイプです。

 

で、そんな「コードなんてよく分からんよー」とか「WEBサイトつくりたいけど、ガッツリやる気はないんだよなー」なんて人にもおすすめできるツールです。

マージンとかパディングといった言葉も出てきますが、知らずに初めても触っているうちに慣れますね。

今回は僕のポートフォリオサイト(作品集)というイメージで1つ作成してみたので、参考にしてみてください。

 

STUDIOを使って10日ぐらいで作成。

ぱぴぺぺ

実際に僕の仮サイトをつくったよ!

つくったサイトはコチラ。

ぱぴぺぺポートフォリオ

WEBサイトへは下のリンクから飛べます。

ぱぴぺぺのポートフォリオサイト(仮)

思ったよりカンタンいい感じにつくれましたが、テスト用。

今のところ運用して使っていく予定はありません。

 

やはり特徴は、コードを書かずに感覚的に画面を見て作成できるのが嬉しいところ。

まだ操作に慣れてませんが、トラブルなく使えていて安心して使えましたよ。

 

レスポンシブにも対応。

レスポンシブにも完全対応しています。

ただ完全自動ではなく、画像やボックスなどの設定は必要。

WEBサイトって、今はスマートフォンでの閲覧が大半ですよねー。

このブログも約70%はモバイルからの流入。

意味のあるWEBサイトをつくるなら、レスポンシブ対応は必須ですね。

 

STUDIOを使って気づいたこと。

ぱぴぺぺ

動作も軽くて使いやすい!

テンプレートが便利。

今回はテンプレートを使用。

Warholという、ポートフォリオや写真集に向いているスタイリッシュなテンプレートです。

まだ数が少ないので、ここは今後に期待ですね。

テンプレートからカスタムするのも手軽なので、難易度はそこまで高くないかと。

 

プレビューがサクサクできる。

リンクや実際の表示のチェックには、プレビューを使用する必要がありますよね。

STUDIOは画面右上のプレビューを押せば、すぐ画面を確認可能。

作業後半の細かい部分となると、少しいじってプレビューを見る必要があるので、サクサク動いてくれるのは嬉しいですね。

 

操作は慣れが必要。

制作期間は10日。

といってもスキマ時間でやっているのと、使う画像を探したりテキストの内容を考えている時間がほとんど。

ところどころ使い方が分からなくて、ヘルプやチャットも少し使用しました。

入れ込むコンテンツが決まっている人は、テンプレートを使えば1〜2日でもできちゃいますね。

 

ショートカットキーや操作方法は慣れ次第です。

最初はどこに何があるのか分からんかった…。

でもこれは、普段使っているAdobe XDやPhotoshopでも同じ。

初めて使うツールなので、慣れるまでのハードルはありますね。

 

STUDIOの料金プランについて。

ぱぴぺぺ

無料プランでも十分使える!

基本無料、ただし制限はあり。

公式サイトには3種類のプランが表示されていますが…。

執筆時点で使えるのは、Freeか$9/月のどちらかです。

公式サイトの料金プランはコチラ。
参考 STUDIO 料金プランSTUDIO

何が違うのかは、カンタンに説明していきますね。

 

STUDIOバナーの非表示。

僕のポートフォリオサイトにもありますが、左下にSTUDIOのバナーが。

そこまで気にならないですが、有料プランだとここも非表示に設定可能。

 

独自ドメインの接続。

無料のまま公開までいけますが、ドメインは「〜.studio.design」というサブドメインになります。

独自ドメインを使用したい場合はアップグレードが必要ですね。

 

Appsの使用。

Googleアナリティクス、Googleタグマネージャー 、Googleサーチコンソールとの連携のことのようです。

僕も最初よく分からなかったのですが、下記のサイトで記載がありました。

詳しく説明が書かれておりテスト用サイトも公開されていますよ。
参考 STUDIOを使ってみた!コードいらずでサイトをデザインできるツール音楽制作・WEBの相談は Befriend Music へ!

STUDIOに今後欲しい機能。

ぱぴぺぺ

コピー防止は欲しいところ!

画像の保存禁止。

ここはチャットで担当の方に聞いたところ、そのような機能はないようです。

作品集や写真集をつくるにあたって、気になるのは盗用や無断転載じゃないでしょうか。

なので、このブログにもポートフォリオサイトも下記の一文を記載しています。

※当サイトに存在する、文章や画像、動画等の著作物の情報を無断転載することを禁止します。また引用の範囲を超えるものについては、法的処置を行います。

カンタンに言うと、引用でもなく許可なく使ったら訴える(お金も払ってもらうよ)ってこと。

こんなことをいちいち書きたくもないですが、書いておかないといざという時に困ります。

スクリーンショットで撮影される可能性もあるんですけどね…。

ウォーターマーク表記など回避する手段はありますが、この機能はぜひ欲しいところ。

 

今日のまとめ。

ぱぴぺぺ

今後も期待のツール!WEBデザインが身近になりますね。

WEBデザインがよりハードルの低い行為になるツールですね。

直感的にも使えてとっつきやすい印象。

今後のアップデートで、もっと進化していくんじゃないでしょうか。

 

気になった人は、STUDIOの公式サイトに作成事例もありますので、参考に!

WEB以外のデザイナーやフォトグラファーなど作品集ページにもおすすめです。

自分が気に入ったWEBサイトがあれば、真似してつくってみるのもアリですね。

参考 STUDIO 作成事例STUDIO

 

コードを書かずブラウザ上でWEB制作ができる、STUDIO。

無料でも十分楽しめるので、一度試してみてはどうでしょう。

 

それではまた!

【作品集サイト】に関連するおすすめ記事。

 

RESUMEで本番作品集サイトを公開しました。

作品集サイトRESUME_アイキャッチ

STUDIOも使いやすくてよかったのですが、今後のメンテも考えてRESUMEで正式に公開しました。

WEBサイトも作品と考えるならSTUDIO、サイト制作の時間を短縮して他のことに時間を使うならRESUMEですね。

僕はSNSでの実績を並べる程度なら、RESUMEで十分と判断してます。

作品集サイトRESUME_アイキャッチ【RESUME 作品集】作品集サイトを公開しました!デザイナー/クリエイターにおすすめです。