carrd.coトップページ

Carrd.coを使い、5分でポートフォリオサイトを作ってみた

 この記事では、ノーコードツールの一つであるCarrd.coを用いて、ポートフォリオサイトを作成してみました。マナブさんのブログで、5分でポートフォリオサイトを作れると書かれていましたが、実際に5分で作れました。Carrd.coはポートフォリオサイトだけでなく、LPも作れるので、次回はLPを作成しようと思います。
ギルドプロジェクト

カワリニ編集部のイシダです。先日こんなサイトを見つけました。

 

【履歴書なしの就活】駆け出しのWebデザイナーなら、Carrd.coでポートフォリオサイトを作ろう

 

有名ブロガーのマナブさんが書いた記事です。

 

それによると、Carrd.coというノーコードツールでポートフォリオサイトを作れるということ。つまり、自分の実績を紹介するサイトを作れるんです。

 

そこでこの記事では、Carrd.coで簡単なポートフォリオサイトを作成します。

 

この記事を読めば、Carrd.coの基本的な使い方が分かります。日本語でCarrd.coの使い方を解説した記事は、自分が調べた限りほとんどなかったので、ぜひ役立ててください。

 

ユーザー登録する

まずはユーザー登録します。トップページ のLog Inボタンをクリックします。

トップ画面

まだユーザー登録していない場合、左下に小さく書いてある”Sign up!”をクリックします。

ログイン画面

ここで、ユーザー名、メールアドレス、パスワードを登録しましょう。

 

登録してログインしようとすると、メールアドレスを認証されます。その時は、”Send Verification Email”ボタンを押して、認証メールを送れば大丈夫です。

 

新規サイト作成

マイページの右上に、New Siteボタンがあります。これを押しましょう。

 

 

すると、Starting Pointのページに遷移します。ここからテンプレートを選べます。

スターティングポイント

プロフィールサイト、LPなど様々なテンプレートがあります。右上に”Pro”と書かれているテンプレートは、有料プランに入らないと使えません。

 

使いたいテンプレートにカーソルを合わせると、”Select”ボタンと”Demo”ボタンが現れます。

 

このテンプレートを編集したいと思ったら、”Select”ボタンを押します。また、”Demo”ボタンを押すと完成イメージを閲覧できます。

 

テンプレートを編集する

名前と説明書き

タイトル 編集

テンプレートには、名前(Jane D.)と説明書き(Professor Image Capturer)が書かれています。

 

例えば、テンプレートの名前にカーソルを合わせて右クリックすると、画面左にSite Titleと出てきます。

 

ここで名前を編集します。画面左にあるハケのアイコンをクリックすると、文字の色などを編集できます。

サイト名、説明

同じ要領で、説明書きも編集します。説明書きは、文字を赤に変えてみました。

 

いずれにしても、画面左一番下にある、”Done”ボタンをクリックすると編集が完了します。

 

トップ画像を挿入

名前と説明書きを編集したら、次はトップ画像を挿入します。

トップ画像

赤枠の部分をクリックすると、画面左から画像をアップできます。

 

Carrdのライブラリから選ぶこともできますが、今回は自分のデスクトップからアップロードします。

 

アップロードしたら、画面左一番下にある、”Done”ボタンをクリックすると編集が完了します。

画像貼付後

 

 

SNSボタンを編集

SNSボタンを編集します。テンプレートでは、4種類のSNSアイコンが並んでいます。それらの外枠を右クリックします。

SNSアイコン

アイコンをクリックすると、各SNSのアカウントを記入できます。また、ゴミ箱アイコンをクリックすると、アイコンを削除できます。

 

今回は、Unsplashを削除しました。

 

公開する

右上にある、💾アイコンを押すとURL設定など公開に必要な設定を行うことができます。

サイト名、説明

画面左にPublish画面が現れますので、サイト名やサイト概要を書いていきます。

 

ここで、今までと画面の見え方が違うことに気づいたでしょうか。

 

実はCarrdは、レスポンシブ対応しているので、パソコン画面とスマホ画面で見え方が変わります。

 

右上のスマホorパソコンアイコンによって、どちらの画面での見え方か切り替えることができます。

パソコン    スマホ

   【パソコン画面での見え方】          【スマホ画面での見え方】

 

さらに、URLを入力します。無料コースでは、ドメインの後ろにcarrd.coとつきますが、有料プランなら独自ドメインも使えます。

URL設定

必要事項を入力したら、Publishボタンを押して完成です!

 

と、言いたいところでしたが、背景画像を設定しないのか?と怒られました(汗)

背景画像を設定

ライブラリから背景画像を設定してから、改めて公開しましょう。

公開設定中

↑処理中の画面はこんな感じです。

 

さあ、処理が完了しましたよ!

完了

View Siteでみられるサイトが、こちらです。

イシダプロフィール サイト

 

 

【まとめ】本当に、5分でポートフォリオサイトを作れた!

マナブさんのブログでは、5分で作れると書かれていましたが、本当でしたね!!テンプレートに当てはめるだけで、とても簡単に作れました。

 

ただ、ノーコードの宿命として、テンプレートに飽き足らず自由自在にカスタマイズしたい場合はやや不自由だろうと感じました。

 

また、独自ドメインなど、有料プランじゃないと使えない機能も少なくないので、そこも注意は必要でしょう。

 

とはいえ、簡単なページを1、2枚作る程度であれば、普通に選択肢としてアリと感じました。

 

ポートフォリオサイトだけでなくLPなども作れるので、次回はLPなどにも挑戦したいですね。

 

業務効率化をあなたの「カワリニ」

ギルドプロジェクトでは、業務効率化サービス「カワリニ」を提供しています。

この記事で紹介したCarrd.co以外にも、様々なツールを用いてあなたの会社の業務効率化をお手伝いします。

まずは下記LPから、無料でご相談ください。

カワリニ

「業務効率化って簡単に言うけど、なかなか実現できない。」そんな状況にいるのなら、お気軽にご相談ください。あなたの代わりに、業務効率化を担当します。