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

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

ポートフォリオとは?

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

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

  • アプリケーションツールは何を使用して作成しているのか
    バナーなどを作成する際には、必ずPhotoshopまたはIllustratorを使用したかどうかを明記しましょう。
  • 制作時間にどのくらいかかるのか
    バナー作成の練習を重ねるごとに、制作時間は短くなっていくものです。初回は8時間かかりましたが、2回目では4時間、3回目では2時間で作成することができました。練習の成果が現れ、効率的に作業が進むようになったのです。その時間を明記しましょう。
  • 自分よがりになっていないか
    ポートフォリオは、自身のスキルや制作実績をアピールするためのウェブサイトです。自己アピールの場ではないため、趣味や最近の傾向などは掲載しません。また、派手なローディングや横スライドなどの動きは、アピールする相手によっては控えるべきです。動きの強いサイトの方が目を引くかもしれませんが、相手にとっては迷惑になる可能性もあるため注意が必要です。
  • ユーザビリティ、マーケティング目線の工夫などできるのか
    LPなどを作成する際には、掲載される場合を考慮してください。作成したLPのコンセプトや、ユーザー目線をどのように考えて作成したかを記述しましょう。また、クライアント様のためにどのようなマーケティング目線が確保できているかも記載しましょう。

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

まずはバナーを作成

バナーやファースビューのキービジュアルの画像は、ポートフォリオに適しています。また、ブログなどに掲載されているアイキャッチ・サムネイルなども掲載することで、見栄えが良くなります。

時間はかかりますが、さらにランディングページ(LP)を作成し、HTML/CSS/JavaScriptを使用してコーディングすることも、より良いアピールにつながります。

また、副業案件においても、多くの場合「ロゴ」の作成が求められます。その際には、パターンを作成し、名刺などに配置するモックアップや、Figmaを使用してプロトタイプを作成することもおすすめです。

あわせて読みたい
Photoshopでアイキャッチ画像の作成。中央を意識した6分割バナー -応用- 中央に正方形を意識した分割バナーの作成  今回は、Photoshopを使って知っておくと超便利「よくある分割バナー」の作成方法の応用を行います。 まずは出来上がりを確認...

作成したバナーやLPを掲載するためのポートフォリオサイト

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

ノーコードとは?

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

STUDIO(スタジオ)

スタジオは、プログラミングの知識がなくてもウェブサイトやモバイルサイトを開発できるプラットフォームです。一般的には、グラフィカルなユーザーインターフェースやドラッグ&ドロップの機能があり、コーディングが不要な状態で構築できます。代表的な機能には、

  1. フォームビルダー:ユーザーがデータ入力を行うためのフォームを作成できます。
  2. ワークフロービルダー:異なるアクションや処理を組み合わせてワークフローを設計できます。
  3. データベース:データの保存と管理を行うためのデータベースを提供します。
  4. レポート&ダッシュボード:データを視覚化し、分析するためのレポートやダッシュボードを作成できます。

スタジオには、HTML/CSSを直接編集する機能はついていません。

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

Wix(ウィックス)

Wix(ウィックス)は、ユーザーが簡単にウェブサイトを作成し、カスタマイズすることができるクラウドベースのウェブサイトビルダーです。

  1. ドラッグ&ドロップビルダー Wixは、直感的なドラッグ&ドロップのビルダーがあるので、テキストや画像、動画などの要素を簡単に配置できます。
  2. 豊富なテンプレート  Wixには、さまざまな業界やニーズに合わせたプロフェッショナルなテンプレートが豊富に用意されています。
  3. カスタマイズ可能なデザイン Wixは、カスタマイズ可能なデザインオプションを提供しており、色やフォント、レイアウトなどを自由に変更できます。また、HTMLやCSSの編集も可能です。
  4. アプリマーケット Wixアプリマーケットには、さまざまな追加機能やツールが提供されています。例えば、フォームビルダー、ギャラリー、ブログ、SEOツールなどがあります。
  5. モバイル最適化 Wixは、自動的にモバイル最適化されたウェブサイトを生成し、モバイルデバイスからの閲覧にも最適化されています。

wixを開くと画面中央に無料ではじめるボタンがあります。新規登録は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をコピーしました!
目次