こんにちは。滋賀県でWeb制作をしているベストアンサーの澤渡（さわたり）です。
前回はコードを書かずにレスポンシブWebサイトが作れる「STUDIO」というツールを紹介させていただきました。
コーディングの知識がなくても、自由にデザインして一からwebサイトが作れてしまうなんて、画期的ですよね。
でも「実際作るとなると難しそう、、」と思われている方もいるかもしれません。
そこで、今回は実際にSTUDIOを使ってWebサイトを作っていく様子を、スクショを混じえてご紹介していきたいと思います。
こんな簡単に作れてしまうんだ！というのをイメージしていただければと思います！
▼今回作成したサイト（プレビュー）
https://preview.studio.site/live/65qm5E50qV/about
今回は、フォトグラファーさんのポートフォリオサイトという想定で作っていきたいと思います。
まず「新規プロジェクトを作成」ボタンを押すと、テンプレートの選択画面が表示されます。
すでにデザインされているテンプレートを編集していきながら作っていくこともできますし、全くの白紙から自由にデザインしていくこともできます。
今回は、「The BASIC ポートフォリオ」というワイヤーフレーム※調のテンプレートを使っていきたいと思います。
※サイトの骨組み。各要素の順番や配置を確認するためのもので、色や画像やあしらいなどのデザイン要素が作り込まれる前の段階。
プロジェクトに名前をつけます。
仮に「portfolio_test」としました。
「作成」ボタンを押すと、プロジェクトが作成されます。
プロジェクトが作成されると、編集画面に移ります。
任意の箇所をクリックしていくと編集が可能です。
例えば、文字を変えたい場合、こんな感じでクリックしていくと、直感的に編集ができちゃいます。
もちろん文字だけでなく、フォントや色や各要素の大きさ、余白なども全て調整していけます。
細かい調整はのちほどするとして、まずは、サイトに掲載する作品を追加していきましょう。
すでにダミーでグレーの画像が配置されているので、それらの画像や文章を差し替える形ではめていきます。
今回使っているテンプレートでは「CMS」という記事が投稿できる機能を使って、1作品＝1記事（1ページ）で実装されているので、こちらのボタンから、CMSの編集画面へ移ります。
※CMS機能を使って投稿できる記事数は、料金プランによって変わります
既にダミーで投稿されている記事が一覧で表示されてます。
いずれかの記事をクリックして、記事の編集画面に移動してみましょう。
こちらが個別記事の編集画面です。画面左部分で記事のタイトルや本文が編集できます。ブログを書いていく要領で、テキストや画像を配置していきましょう。
右側にある「Cover」というのがTOPページなどに表示される、作品のサムネイルになります。クリックして、自分の作品に差し替えてみましょう。
こんな感じです。
9件登録されている記事すべてのCoverを差し替えてみました。
今、TOPページはこんな感じになっています。
画像が入るだけで、かなりサイトらしくなってきましたね。
はじめのテンプレートが美しく作られているので、すでに十分サイトとして成り立つクオリティになっているかと思います。
ちなみに、スマホ対応もばっちりです。
次に、プロフィールページを編集していきます。
画面左下のページアイコンをクリックし、「プロフィール /about」ページへ移動します。
以下のようにして、名前や紹介文を自分用に差し替えていきます。
これで、プロフィールページも完成しました。
スマホ版もできています！
サイトの調整が完了したら、公開作業を行います。
通常webサーバーにアクセスして設定していかないといけませんが、STUDIOならワンクリックで簡単に公開できます。
画面右上の「公開」ボタンをクリックすると、URLを設定するポップアップが表示されるので、お好きな文字列を入力して、公開ボタンを押すだけです！
無料プランでは、○○○○○○.studio.siteという形式のURLになりますが、有料プランにすればお好きな独自ドメインを設定することも可能です。
いかがだったでしょうか。今回はSTUDIOのテンプレートを利用して、簡単なポートフォリオサイトを作成してみました。本当に簡単にサイトが作れてしまうのがご確認いただけたかと思います。
こちらで紹介した以外にも、色やテキストや画像を追加していき、お好みのデザインにアレンジしていくことも可能です。
クリエイターにとって、お仕事獲得のためにポートフォリオサイトは鉄板のツール。まだ持っていない人はプログラミングの知識がなくても作れてしまうので、この機会にぜひSTUDIOで自分のサイトを作ってみてはいかがでしょうか？
タグで検索
