ここ数年、HTML・CSSをまったく書かずにWBEサイトが作れる、いわゆる「ノーコード」のツールが話題となっています。

本サイトでも、人気のノーコードWEBサイト作成ツール「STUDIO」について、こちらの記事（URL: https://implist.dev/entries/2485da56d234cd9ab5a30b40cceff6a3）で概要をご紹介しました。

今回はそのSTUDIOを使って、ポートフォリオサイトを作ってみたいと思います。ブロックごとのテンプレートを駆使して、ほぼドラッグ＆ドロップだけで作れます。

完成形はこちらのURLから御覧ください！➔URL（https://preview.studio.site/live/1Va6k8GzW7/1）

新規プロジェクトの作成

STUDIOにログインすると、自動的に「プロジェクト一覧」のページに移動します。あなたが作成中・公開中のWEBサイト一覧にここからアクセスできます。新しくWEBサイトを作る場合は、右上の「新規作成」をクリックします。

ここから、サイト全体のテンプレートやフレームを選ぶこともできますが、今は「空白」（一番最初の選択肢）を選択します。

クリックで選択すると、プロジェクト名の入力を求められるので、任意の名前（お手本では「implist_ポートフォリオ」となっています）を付けます。

「空白」を選択すると、エディタ画面に真っ白なキャンバスが現れます。

ファーストビューの作成

準備ができたら、こちらのページトップとなる部分を作っていきましょう。

ヘッダーの設置

STUDIOエディタの左側にご注目。まず、下図の「①クリックで展開」と示した部分をクリックしてメニューを展開します。次に「追加」タブの「テンプレート」をクリックしてこれを展開します。さらに、その中の「Header」をクリックすると、ヘッダーテンプレートのイメージが表示されます。

なお、選べるヘッダーテンプレートは白系・黒系の２つです。

STUDIOの各テンプレートは豊富とはいえませんが、汎用性が高いので、アレンジすれば様々な場面で使えます。

Headerイメージをクリックで選択すると、選択したヘッダーが自動的に白紙のページに挿入されます。デフォルトの文字をダブルクリックすると、文字の編集ができます。

※文字を編集するためにダブルクリックすると、その親要素のBOXが選択されることがあります。このときは、さらに同じ場所をダブルクリックしていくと、選択されている個所がどんどん内側の子要素に移っていきます。

トップイメージの設置

ヘッダーの設置と同じ要領で、画面左側から「テンプレート」➔「Cover」と順に展開していきます。

お手本では、こちらのCoverパターンを選択しました。

Coverが挿入されたら、画像部分をダブルクリックしてみましょう。画面左に様々な写真サンプルが表示されます。

STUDIOでは、提携する素材サイトから、ハイクオリティな画像を無料で入手することができます（種類も豊富で選び放題です）。この中の好きな画像と差し替えることができます。

また、カメラのアイコンが表示されている窓に、検索ワードを入れることで（スクリーンショットでは、”web design” と入力されています）、イメージ画像を絞り込むことができます。

なお、画面左端の「アップロード」を選択すると、自分の手持ちの画像をアップロードしたり、過去にアップロードした画像を選択することができます。

ABOUT項目の編集

これまでと同じ要領で、メニューからテンプレートを展開します。今度は「テンプレート」➔「Column Section」を選択します。

アイコンが３つ並ぶブロックを選択し、ドラッグ＆ドロップで、前のブロックの下に配置します。

※ブロックを挿入しようとすると、オレンジ色のガイド線が現れます。この線の下に次のブロックが配置されます（トップ画像のブロックの下に、ガイド線がきていないときは、選択＆ドラッグした状態でマウスを動かしてみてください。ガイド線が正しい位置に移動したら、ドロップします）。

既に説明したとおり、テンプレートの文字をダブルクリックすることで、文字を編集することができます。

アイコンの差し替え

差し替えたいアイコンをダブルクリックします。

※まず選択したアイコンの親要素が選択されますので、続けてダブルクリックします。何度か繰り返すと、徐々に選択されている項目が、内側の子要素に移っていきます。

画像の差し替えのときと同じ要領で、クリックしてアイコンを差し替えることができます。虫眼鏡アイコンの窓から、アイコンを検索することもできます（検索ワード日本語不可）。

これらのアイコンも、提携サイトから無料で入手することができます。

WORKSの編集

以下のパートを作ります。

いよいよ制作物の紹介ブロックです。このブロックは、テンプレートの展開➔「テンプレート」➔「Column Section」から見つけることができます。

テンプレートブロックを挿入したら、余分な文字ブロックは選択➔削除（キーボードからdelete）します。そして、文字の編集を行いましょう。

さらに、画像部分をダブルクリックし、「アップロード」から自分の作品の画像をアップロードし、それを選択して差し替えましょう。（「トップイメージの設定」で説明しています ➔内部リンクできればする）

ギャラリーの編集

バナーや作品イメージなどの画像を複数置く場合は、「ギャラリー」タイプのブロックがおすすめです。

こちらは、テンプレート展開➔「テンプレート」➔「Gallery」から選択できます。画像配置のパターンは5パターンから選べます。

しかしながら、「Gallery」ブロックのテンプレートには、デフォルトで小タイトルが入っていません。

そこで、前後のブロックのちょうど中間に、小見出しとなる文字を挿入します。

画面左の「T」がテキストアイコンです。これを選択肢、ドラッグ＆ドロップします。ドロップする前に、オレンジ色のガイド線が、上下のブロックのちょうど真ん中に来ていることを確認しましょう。

文字のスタイル設定

デフォルトの文字は少し小さいですね。そこで、スタイルを変更して、文字サイズや太さを調整していきましょう。

スタイルを変えたい文字を選択し、画面上部のテキストタブを開きます。すると、文字サイズやフォント、太さなど文字に関するスタイルが設定できるようになっています。

ここでは、フォントを「Roboto」、サイズは36、太さ400として、その他の見出しと揃えておきましょう。

CONTACTフォームの追加

STUDIOでは、このようなオーソドックスなコンタクトフォームも用意されています。

ただし、こちらもデフォルトではタイトルがついていないので、先ほどと同じ要領で（「Gallery」のブロック参照）文字ボックスを挿入して、CONTACTと入力しましょう。

では、肝心のフォームの設置です。

これまでと同様、画面左端のボタンからメニューを展開し、「追加」タブの「ボックス」から「Form」を選択します。

Formは３種類から選べます（Form１が最もオーソドックスで使いやすいです）。

フッターの設置

最後にフッターを設置します。もう慣れてきましたか？

メニューを展開し、「テンプレート」➔「Footer」からフッターのテンプレートを呼び出します。フッターは２種類から選べます。

フッターの文字を編集して、完成です。

各ブロックを他のテンプレートに変えるなどして、自分好みのサイトになるよう、いろいろ試してみてください！

今回で、とりあえずカタチをつくることができました。次回は、各見出しにタグ付けするなどSEOも意識して、STUDIOをより一層使いこなしていきましょう！