悩む人
Carrdの使い方を教えてください。
Carrdの使い方を教えてください。ポートフォリオを作りたいけど、カンタンに作れないかな?「Carrd」を使ったポートフォリオの使い方や作り方を実例も踏まえて教えてほしいです。営業先でポートフォリオを有効に使いたいです。
こんなお悩みを解決します。
✔︎本記事の内容
- Carrdとは何か?
- ポートフォリオに「Carrd」がオススメな3つの理由
- ポートフォリオに最適な「Carrd」の使い方
- フリーランスの営業にポートフォリオが必須なワケ
この記事を書いてる僕は、フロントエンドエンジニア歴2年ほど。駆け出しフリーランスのとき、Carrdで作ったポートフォリオで案件をゲットしました。
駆け出しフリーランスは、ポートフォリオが必須。
Carrdを使うと、サクッと10分で作れますよ。
『Carrd』とは何か?
「Carrd」とは、NoCode（ノーコード）で作れるWEB制作サイトです。
要は、プログラミングができなくても、誰でもカンタンにWEBサイトやアプリを作れる技術のこと。
サクッと、10分で作ってみました。
ノーコード楽しい。
直感的に操作でき、もはや名刺は不要になるレベルかと。
ポートフォリオに『Carrd』がオススメな3つの理由
理由は、下記のとおり。
- 理由①：ノーコードで作成できる
- 理由②：名刺の代わりになる
- 理由③：タダで作れる
理由①：ノーコードで作成できる
プログラミング知識は、一切いりません。
レゴブロック感覚で、サクッと作れます。
- 自分でゼロからカスタマイズする
- テンプレートからカスタマイズする
上記のとおり。
安心なことに、レスポンシブ対応もされてまして、スマホやタブレットでも形が崩れない仕様です。
作り方は、後半で解説します。
理由②：名刺の代わりになる
ポートフォリオ=作品集なのですが
名刺の代わりに使ってもOKかと。
フリーランスだと営業するときに「名刺」が必要だったりしますよね?コレがまたダルい...
カンタンなポートフォリオを持ってれば
リンク1つで、自己紹介することができます。
アポ段階で、取引先にCarrdで作ったポートフォリオをリンクで渡しておけば、無駄な名刺交換をしなくて済みますね。詳しくは、フリーランスに名刺は不要をご覧あれ。
名刺を作るデメリット
- お金がかかる
- デザインがダサい
- 名刺マナーがダルい
名刺500枚とか、そんなに要りませーん。
僕はデザインを少しミスって、完全に「紙切れ」になった過去があります。これは僕のミスですが、ミスってなくても「やっぱ、名刺っていらないな…」と思います。
名刺の渡し方とか、机の上に置いておくとか…
もはや、ダルい。
デジタルなポートフォリオで交換すれば
必要なときにスマホでみればいいわけですので。
理由③：タダで作れる
なんとゼロ円！
3ページまで無料で作れます
Pro版は、有料
年間19$で、利用できます。
7日間の無料体験もできますよ。
- 独自ドメイン：SSL化つき
- 高品質な画像
- クレジット表記の削除：「Made With Carrd」
- フォームの設置
- 背景にビデオを設置
- プロテンプレート：Proテンプレートを使える
- スライドショー：スライド画像を背景に使える
- サードパーティウィジット：StripeやPayPalを埋め込める
- その他：Googleアナリティクスなどを設置できる
ポートフォリオに最適なCarrdの使い方
Carrdでポートフォリオを作っていきましょう。
テンプレートから選ぶべし
Carrdでテンプレートを作る手順①
テンプレートが用意されてるので
そちらをぜひ活用していきましょう。
テンプレートなんていらないゼって方は、自分好みにカスタマイズしてもOKかと。
「Choose a Starting Point」より
テンプレートサイトに飛べます。
カテゴリ別に選択できるので
「Profile」「Landing」「Portfolio」がベストかと。
Carrdでテンプレートを作る手順②
お好きなテンプレートを選びましょう。
デモサイトを見ると完成形をイメージできます。
Carrdでテンプレートを作る手順③
なお、「Pro」版は有料です。
ポートフォリオ編集
実際に、デモサイトを作ってみます。
イメージとしては
マトリョーシカを想像すると作りやすいです。
Background（背景）→Page（大枠）→Container（コンテナー）→画像やテキスト、アイコンなど
HTMLやCSSを触った人は、楽チンかと。
基本的に、大枠の中に小物をブチ込みます。
1.Background
Carrdの背景編集
スタイルは、下記の5つ。
- カラー
- グラデーション
- 画像
- 動画
- スライドショー（有料）
お好みのモノを。
画像は、テンプレが用意されてます。
他にも、背景の設定が変更できますので
自分でカスタマイズしてみましょう。
2.Page
CarrdのPage編集
コンテンツの大枠です。
わかりやすいよう、Pageの背景を変えてみました。この中に、「Container」が入ります。その中に、テキストや画像を入れていくイメージです。
自分好みにカスタマイズしましょう。
3.Container
CarrdのContainer編集
Containerは、箱をイメージしましょう。
この中に、画像やテキストをまとめられます。
スタイルを追加しい場合は
右上の「+マーク」から、コンテンツを選択します。
CarrdのContainer編集（スマホ）
スマホ画面にも切り替えられます。
スマホも詳細に設定できるので
カスタマイズしてみてください。
画像テキストなど
Carrdのテキスト・画像編集
- 名前：実名
- 顔写真：アイコンはNG
- 肩書き：スキル
- SNSアイコン：ツイッター、メアドなど
- サイトURL：ブログサイトなど
最低限、上記を入れ込めばOK。
名刺が完成しましたね。
ポートフォリオの発行
ポートフォリオの発行
ポートフォリオが完成したら
画面右上のプラダウンから「Publish」を選択。
- サイトタイトル：適当
- サイトの説明：適当
- ドメイン：無料版は、Carrdのドメイン
上記を入力したら、「Publish」しましょう。
以上で完成！お疲れ様でした〜。
後から編集も可能なので、「名刺ミスって、人生オワタ」にならなくて済みます。
フリーランスの営業にポートフォリオが必須なワケ
ズバリ、案件獲得に必須だから。
大切なのは、発注者の視点
発注者の立場で考えることが大切です。
- 発注者は、仕事を手伝ってもらいたい
- WEBサイトなどで、募集をかける
- それをみた応募者は、面接しにいく
こういった流れかと。
そこで持ってくモノは何ですか?...履歴書ですよね?なぜ履歴書を持ってくんですか?それは、あなたがどういう人でどういったスキルがあるかを確認するためですよね?
つまり、履歴書=ポートフォリオになります。
ポートフォリオがないと、不採用になるかと。
ポートフォリオ=スキル証明
ポートフォリオの役割は、スキル証明。
スキル証明のない人が「できます!仕事ください」なんていっても、説得力ないですよね?
事実、面接でポートフォリオを持ってこない「やる気のない人」が一定数います。そういう人は受からないので、ポートフォリオを持参して初めてバッターボックスに立てます。
特にフリーランスは「即戦力」なので
スキルのない人間を雇うのは、意味がないかと。
とはいえ、オリジナリティは不要
必死こいて、ポートフォリオを作る必要はない。
すでに存在するテンプレをいじればいいから。
発注者が見るのは、下記のとおり。
- シンプルなデザイン→ぱっと見の見やすさ、サイトの軽さ
- レスポンシブ設計→必須
- 経歴→シンプルな自己紹介
- スキル→成果物をまとめる
- 付加価値（ブログ・SEO・動画編集スキル、提案力など）
あなたが「どんだけ時間をかけた」とか「ここはこんなコードを使ってイケイケ感を出してます」とか正直どうでもいいです。
サクッと、Carrdでポートフォリオを作ろう
ポートフォリオに、オリジナリティは不要。
自分で一からコードを書くのもいいですが
ノーコードツールがあるのでそれを使えばいいかと。
とはいえ、「コードはどれくらいかけるの?」って聞かれた場合に備て、ゼロから作ったポートフォリオも作ればいいと思います。初手でノーコードポートフォリオを提示しつつ、聞かれたら「はい、ありますよ」みたいな感じ。
もちろん、デザインにこる必要はないです。
実に、スマートですね。
というわけで、今回は以上です。
合わせて、質問の仕方も究めておきましょう。
