Studioでポートフォリオを作る方法とは？無料で作成する手順を解説

この記事ではノーコードStudioを使ったポートフォリオの作り方を解説していきます。

ノーコードStudioとは

Studioは、コーディングができなくても簡単におしゃれなウェブサイトを制作することのできるノーコードツールです。

あっという間にサイトが出来上がるため、デザイナーや事業を行う方に絶大な人気を誇っています。

Studioの特徴

Studioには以下のような特徴があります。

• コーディングが不要なのにオシャレなサイトが制作できる
• 国産ツールだから操作を覚えやすい
• 250種類以上のテンプレートがある

Studioでのポートフォリオ制作方法

Studioを使ってポートフォリオを作る方法は大きく2種類あります。

1．テンプレートをもとに画像とテキストを差し替える

メリット：30分程度で完成する、デザイン性が高いテンプレートが多い
デメリット：カスタマイズしづらい

2．1からサイトを構築する

メリット：オリジナルのポートフォリオを作ることができる　
デメリット：テンプレート使う場合に比べて時間がかかる、デザインを自分で考える必要がある

テンプレートをもとにポートフォリオを制作したい方は無料テンプレートを使うのがおすすめです。
無料テンプレートはこちら

将来的にStudio制作の仕事を獲得していきたいという方は1からサイトを構築するといいでしょう。

Studioの初期設定

ますはStudioの初期設定を行います。

アカウントの登録方法

Studioにサインアップするには、公式サイトにアクセスし、メールアドレスとパスワードを入力するだけです。

登録は非常にシンプルで簡単です。

登録が完了したら、ダッシュボードにアクセスし、プロジェクトの作成を開始することができます。

Studioに登録する

プロジェクトの作成

新規プロジェクトを作成するには、ダッシュボードの「新規プロジェクト」ボタンをクリックします。

プロジェクト名とテンプレートを選択し、プロジェクトを作成します。

テンプレートは、様々なデザインのウェブサイトが用意されているので、自分のポートフォリオに合ったものを選択することができます。

テンプレート集はこちら

基本的なツールの使い方

Studioは、ドラッグ&ドロップ機能やテンプレートの利用など、直感的な操作でウェブサイトを作成することができます。

ドラッグ&ドロップ機能を使用すると、簡単に要素を配置したり、サイズを変更したりすることができます。

テンプレートを使用すると、デザインの基礎を簡単に構築することができます。

Studioは、初心者でも簡単にウェブサイトを作成できるよう、様々なツールを提供しています。

Studioでのデザイン作業

デザインの作成

Studioでは、豊富なデザイン要素とカスタマイズ機能を使用して、自分だけのオリジナルデザインを作成することができます。

今回はテンプレートをベースにポートフォリオを作成するので、主に色やテキストの変更になるでしょう。

レスポンシブ設定

Studioでは5つ基準に対してレスポンシブ設定を行うことができます。

初心者が躓くポイントであるため、テンプレートを使用する場合はなるべくレイアウトを変更せずにポートフォリオを作成するのがおすすめです。

追加機能の活用

Studioでは、フォームの追加やアニメーションの設定など、ウェブサイトをより魅力的に仕上げるための追加機能があります。

テンプレートによってはアニメーション等が実装されていないものもあるためお好みで追加すると良いでしょう。

Studioでのサイト公開

サイトのプレビューとテスト

ウェブサイトを公開する前に、プレビュー機能を使用して、デザインや機能が正常に動作するか確認します。

プレビュー機能を使用すると、公開前のウェブサイトを実際に確認することができます。

ドメインの設定

独自ドメインを設定することで、プロフェッショナルなウェブサイトを公開することができます。

Studioでは、簡単に独自ドメインを設定することができます。

ポートフォリオの場合は独自ドメインを設定していない方も多いため、お好みで選ぶと良いでしょう。

ドメイン設定の方法

Googleツールの設定

有料プランでサイト運用を行う場合は、Googleサーチコンソール、Googleタグマネージャー、Googleアナリティクス等のツールをStudioと連携させると良いでしょう。

特に，検索結果に自分のサイトを表示したいと考えている人は，Googleサーチコンソールを使用してindex申請を行うようにしましょう。

ポートフォリオの作り方は動画で学ぼう

ポートフォリオ制作について学習する際は動画で学ぶと良いでしょう。

脱初心者のポイント

これまでに100名以上のStudio学習者のサポートを行ってきましたが、初心者はボックスの理解とレスポンシブ対応さえ理解できれば，Studioの操作については自走可能になるという印象です。

STUDIOのエディターを自由自在に使いこなせるようになるためにはボックスへの理解が必要。レスポンシブ対応とpx、auto、%、vhの使い分けができるようになれば自走できる印象。このフェーズは手を動かして操作に慣れるのが大事💪

— まつ@ノーコード開発とAIの人 (@nocode0101) June 26, 2024

参考動画

ここではStudioの操作方法を学ぶ際に役立つ参考動画をご紹介します。

1．Studio公式の動画

まずはStudio公式がYoutubeに投稿している動画です。

ポートフォリオサイトを1から作る動画のため、この記事を見ている皆さんにピッタリの動画でしょう。

2．その他の動画

続いては私がYoutubeに投稿している動画シリーズです。

4つのシリーズでStudioの概要から操作方法までまるっと学ぶことができます。

まとめ

今回はStudioを使ったポートフォリオの作り方について解説しました。

ノクステックでは、ノーコード専門にサイト制作・アプリ開発を行っておりますので、ご興味ありましたらお気軽にご相談ください。