ピクスクWebオンリー用にSTUDIOを使ってお品書きサイトをつくった話

困っていたこと

・pictSQUAREの水晶玉には1リンクしかつけられない
・しかし当日リンクを繋げたいものは1種類以上ある（とらのあな・BOOTH等の通販ページ、展示用のページ）
・できれば画像を載せたい（Privatterやプロフカードのようなテキストベースなサイトよりはリッチにしたい）
・とはいえ当日しか使わないページなのであまり時間をかけたくもない

参考にしたnote

Wixでピクスク用お品書きサイトを作ったレポ
こちらを見て「水晶玉からリンクさせるお品書きサイトをつくればいいのか！」と思い至りました。記事中のページはWixの有料プランを使っているとのことで、無料で同じようなことができないかな〜と思って探してみました。

STUDIOを使った

できたお品書きページはこちら。
https://suisei-order.studio.site/

所要時間は1時間程度です。めちゃくちゃシンプル。
※このページはWebオンリーのたびに使用しているページなので、適宜この記事内のものと内容が変わっていることをご容赦ください。

STUDIOとは？

https://studio.design/

「ノーコードでWebサイトを作成」とあるように、用意されているテンプレートを使って、いくらか編集するだけでサイトがつくれます。
直感的に編集できて、テンプレートもあるので、専門的な知識は不要です。

無料プランでも広告が目立たないところが好きです（広告はページの左下にあるSTUDIOマークだけ！かわいい）

やったことは本当にちょっとしたことではあるのですが、参考になれば…と思い残してみます！

やったこと

ログインし、チュートリアルを行ったあとページをつくっていきます。
チュートリアルは飛ばしてしまいたくなりますが、マージンのあけかたなどの説明が丁寧になされているので、軽くさらっておいたほうがよさそうに思いました（ページの編集方法をいくつか教えてくれます）

編集画面の「>」矢印をクリックして、

BOX > Text Blockを選択し、このレイアウトをもとにこんな感じでつくっていきました。

アイコンとサークル名・名前

本の内容

通販情報

すべて縦組みなので、このテキストレイアウトが重宝しました。
ボタンやフォントを好みに合わせて修正して完成。

ボタンの色の変え方

リンクボタンの色の変更がちょっとわかりづらかったので書いておきます。
ボタンを選択すると、上部のタブが「テキスト」になるので、「ボックス」を選択します。

「ボックス」を選択すると画面右上に塗りと枠線、シャドウを変更できる箇所があるので、ここで調整して完了です。

公開ボタンを押して、完了

編集完了後、右上の「公開」ボタンを押すとサイトが公開完了します。
Wixを以前使ったときに機能の多さに挫折してしまったので、STUDIOはちょっとした作業できれいなページがつくれてありがたかったです。

イベント楽しみ！素敵な日になりますように。

追記：もっと手軽にやりたい方へ

この記事を公開してすぐ、フォロワーさんから「Lit.Linkでつくってもよさそう」とコメントをいただいてたしかに〜！と思いました。
STUDIOはサイトをつくるサービスですが、Lit.Linkはさまざまなリンクをひとつにまとめるサービスなので、もっと手軽に通販ページや当日の無配ページをひとつにまとめておきたい！という方はこちらが便利かもしれません。

さらに追記：検索避けをしたい

同人用のページだと「検索避けをしたい」ということもあると思います（わたしもそうです…！）STUDIOは検索避け設定が簡単にできるようだったので、そちらも紹介しておきます。

やりかたは簡単で、「ページ設定」内の「Noindex」の部分にスイッチを入れるだけです。これを入れるだけでソース内に検索避けの記述がなされていることを確認しました。

詳しくはSTUDIO内のヘルプもご参照ください。
noindex：検索結果に表示させないページの設定