このサイトはJavaScriptがオンになっていないと正常に表示されません。
WEBオンリー用のお品書きページを「STUDIO」を使って用意したお話 - すずおりデザイン

WEBオンリー用のお品書きページを「STUDIO」を使って用意したお話

WEBオンリーにサークル参加する時、展示作品や自家通販サイトなどへのリンクが必要だと思いますが、皆さんはどのように準備していますか?今回は私が実際にWEBオンリーに参加した際に作成した「STUDIO」というサービスを使ったお品書きページの作り方を解説していきますね。

自分好みのお品書きページが作れる!

以前とあるWEBオンリーにサークル参加した際に、ノーコードでWebページが作れるサービス「STUDIO」を使って、お品書き用の専用ページを作成しました。よくサークル参加されている方が使っている「プロフカード」や「lit.link」といったリンクサービスやプロフ作成サービスを使っても良かったのですが、なにかの機会があれば「STUDIO」を使ってみたいなあと思っていたので、今回使ってみることにしました。

とはいえ作り出したのがWEBオンリー開催の前日。一度も触ったことがないのにちゃんと完成するのか?と、少し不安もありましたが……意外となんとかなりました。

実際に作ったページはこちら

ページ内では展示作品へのリンク以外にも、WEBオンリーの謝辞や、ちょっとしたイラストなんかも掲載しました。よく見かけるリンクサービスよりもなんだか立派な感じに見えますね。

ちなみにWEBオンリー当日になってみると、ここまでガチガチにページを用意してきた人が私以外には見当たらなかったのでちょっと気合い入れすぎたかな、と少し恥ずかしくもなりましたが……でも短時間で、コーディングをする必要もなく、ここまで綺麗なページが作れる「STUDIO」ってすごい便利だ!と思ったので、どうやって作っていったのかをお話していこうと思います。

STUDIOは簡単にWEBサイトが作れるサービス

「STUDIO」は先ほど軽く説明した通り、ノーコード(HTML/CSSなどのコードを書くようなプログラミングの必要がない)でWebページが作成できるサービスで、誰でも無料で利用することができます。作りたい要素を画面上にドラッグアンドドロップして作成していくので、直感的な操作でページのデザインを作れます。完成したらすぐにページを公開することができます。

出典:STUDIO

なお、無料プランの場合はページ左下にSTUDIOのバナーが固定表示されるのですが、コンテンツを邪魔しない綺麗なデザインなので固定表示されても全然気にならないです。WEBオンリー用に使うなら無料プランの利用で十分ではないかと思います。

作り方を6つのステップに分けて解説します

では実際にお品書きページを作っていく手順を説明していきます。もっと効率よく作れるのだと思いますが、あくまで私の場合の作成手順であること、私自身もSTUDIOは初心者であること、をご理解いただけると幸いです。なお、今回の説明はPCでの操作方法になります。

STEP1【作りたいページのラフを考えよう】

STEP2【デザインの土台を作ろう】

STEP3【画像やテキストを入れていこう】

STEP4【デザインを整えて仕上げていこう】

STEP5【レスポンシブ対応にしよう】

STEP6【公開準備と設定を行おう】