ポートフォリオ・制作実績講座[0]ゼロ Canvaを使って作成してみよう!

  • URLをコピーしました!
目次

ポートフォリオとは?

分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブな業種の採用には、必ずと言っていいほど求められるでしょう。履歴書や職務経歴書よりも重要視されますので、ポートフォリオを使ってどれだけアピールできるかが採用の最大のカギとなります。

では、採用する側が具体的にどのような部分をポートフォリオで見ているのかというと、作品自体の完成度、センスもさることながら、

  • アプリケーションは何を使用して作成しているのか
  • 制作時間にどのくらいかかるのか
  • ユーザビリティ、マーケティング目線の工夫などできるのか

等の部分です。

自分をアピールする資料ですから、相手(採用側)にわかりやすく【伝わるように作る】というのがポートフォリオサイトの基本です。「作るの何だかとても難しそう…」「自分にはそんなにアピールできる作品がない…」など、ここで諦めてしまう方もいることでしょう。

ポートフォリオサイトを作成するためには、コーディング力が必要です。デザインを得意とする方や、まだHTML/CSSの学習を初めていない方は「ノーコード」ポートフォリオサイト作成サービスを使ってみましょう。

ノーコードとは?

ソースコード(HTML/CSS/JavaScript)を記述せずに、Webサービスやアプリを使って作成することができるサービスのことです。ソースコードを記述しないので、HTML/CSSの学習がまだの方や、デザインのみ扱いたい方に向いています。料金が発生する場合もあるので、登録方法は確認してから利用しましょう。

STUDIO(スタジオ)

サイトを開くと右上に無料ではじめる→ボタンがあります。新規登録はfacebookGoogleのアカウントからのサインインも可能です。直感的なデザインエディターや、あっというまに公開できるホスティング機能などがついています。エディターに用意されている書体もおしゃれでクールです。

ジンドゥー(jimdo)

ジンドゥーのポートフォリオ作成です。プロダクトから「AI」「クリエイター」「独自ドメイン」が選択できます。

SNS(facebook/Instagram)との連携もバッチリ。画像の取得が可能です。

Canva

人気が急上昇してきている[Canva]は、オンライン上で無料で使えるグラフィックデザインツールです。グラフィックといえば、Illustratorが思い浮かびますが、Canvaは、 Wordのようなテンプレート機能を網羅した、初めての人でも簡単にチラシや名刺などが作れるWebツールです。そのテンプレート数は、驚きの80万点。無料版、PROがあります。

Canvaでは、ポートフォリオの紙媒体もWebサイトの両方が作成できます。

Canvaの中で、ポートフォリオのテンプレートを探して作成してみよう

ログイン後、 ポートフォリオ で検索します。9475点〜のテンプレートが検索されます。

テンプレートを使う場合は、サムネイルの1つをクリックすると、「オンラインポートフォリオ」や「プレゼンテーション」などのカテゴリーがこのテンプレートをカスタマイズの上にありますので、確認して、該当のテンプレートをカスタムして作成していきます。数多くのテンプレートの中から自分にあった作品を選んでカスタマイズできます。

Canvaの中で、ポートフォリオサイト新規に作成してみよう

何をデザインしますか?の下にあるWebサイトアイコンをクリックします。「オンラインでの存在を高める」の下にある「ポートフォリオ関連のウェブサイト」をクリックして作成してみましょう。

開いたページでは、今回はテンプレートは使わず、レイアウトを選択して素材や文字を組み込んでみましょう。レイアウトから、ヘッダー向けのパーツ、作品を並べやすいレイアウト、プロフィールを描きやすいパーツの3つを選んだ状態です。

右上のwebサイトを公開から、無料のドメインや、別途取得するドメインを指定すれば、公開となります(すごい!)

テンプレートを使って作ってみよう!

ポートフォリオを作るにあたって、紙版なのかWebサイトなのかを迷うこともあると思いますが、Webページ版での作成の方がソースコードの書き方等も同時にチェックできたりするので、一般的にはWebサイトで求められることが多いです。

ポートフォリオサイトの作り方[1]からは、掲載する内容を確認後、デザイン→コーディングといった手順での解説となりますが、こちらのページでは、下記のHTMLコードを自身でカスタマイズをしながら作成していく流れとなります。

そのため、HTML/CSSの詳しい解説はありません。「初めてHTMLコードを見ました!」という方には、少し難しくなっていますので、初めて見る方は、ホームページ基礎講座から進まれてください。

ポートフォリオ動画 (テンプレートを使っての作成)

上記の動画で使っているHTMLとCSSコードは下記からダウンロード可能です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次