個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか?
持っていないという方、とてっも損してます。
もし持っていないというのであれば、すぐに作りましょう。
仕事が増えるチャンスが格段に広がるからです。
仕事の話はどこから来るか、わかりません。
いくら素晴らしいデザインであっても、外に向かって発信しないことには誰も見てくれませんからね。
オンラインポートフォリオがあれば、誰かがどこかで見てくれます。
そこからお声がかかることは多々あります。
かくいう私も、オンラインポートフォリオというわけではないですが、こちらのブログサイトでいくつかお声がけいただいています。
ありがたいことです。
「仕事がもっとほしい!」と思っているなら、オンラインポートフォリオが必要なんです!
グラフィックデザイナーさんの場合、WEBに関する知識がなく、「そのためにオンラインポートフォリオを開設できない!」という方も多くいらっしゃるのではないでしょうか。
しかも、デザイナーたるものですから、見栄えにもこだわりたいですよね。
しかし、忙しい仕事の合間を縫って、見よう見まねで、デザイン性の優れたオンラインポートフォリオを作るのは正直言ってハードルが高い……。
でも大丈夫です! 
そんな方にピッタリなオンラインポートフォリオの作成方法をご紹介します!
この記事をご覧いただければ、WEB制作の知識がなくても簡単に素早く素敵なポートフォリオがつくれますよ。
まだオンラインポートフォリオをもっていない、これからつくってみようという方のご参考になれば幸いです。

なぜグラフィックデザイナーがオンラインポートフォリオを持たなければならいのか

冒頭でもさらっと触れましたが、グラフィックデザイナーたるもの、オンラインポートフォリオを持つことは必須でしょう。
特に必要なのは、駆け出しのグラフィックデザイナーさんや、就職活動を始めようというデザイナーさんです。
もちろん、すでにフリーで活躍しているデザイナーさんもあったほうが絶対いい。
「いや、紙のポートフォリオ持っているから大丈夫!」という方もいらっしゃるでしょう。
でも本当に紙のポートフォリオだけで大丈夫ですか?

紙ベースのポートフォリオはとっても非効率的

私も紙ベースのポートフォリオを準備していますが、正直、非効率的だなあって思います。
その理由は2つあります。
1つ目。
まず印刷するなり、手作業するなどして、制作する必要がある。
しかも、手間暇がかかるため、数多く作ることができない。
多く作ろうとするとコストもかかる。
一度作ったら、簡単に修正することができない。
2つ目。
むしろこっちのほうが大きな問題とも言えるのですが、「人に会ったときにしか見せる機会がない」
これって就職活動などでは死活問題といってもいいですよね。
つまり書類審査をパスしない限り、自分の実力を見てもらえないんですから。
なんか悲しくないですか?
作品も見ないで、合否を判別してもらいたくない。
書類なんかより、デザインで判断してもらいたい!
紹介を通じて、初めてお仕事をするときも同じです。
時間をつくって交通費をかけて、わざわざ会いに行って初めてポートフォリオを見せたのに、先方からは「なんかイメージと違う」なんて言われたりして……。
そんな経験ないですか?
私、何度もあります。
「もうヤダ! 時間と金のムダ!!」って心底思いました。

採用する側も、仕事を依頼する側も、事前に作品を見ておきたいもの

このように、紙のポートフォリオはデザイナーにとって非効率的ですが、採用する側や仕事を依頼する側にとっても、紙ベースのポートフォリオは非効率的です。
わざわざ時間をつくって会って、その場でポートフォリオを見せられるよりも、事前にデザインを確認したいのは人の常でしょう。
前もってポートフォリオを見られていれば、「もっとこんな作品も見たいんだけど、今度会うときに持ってもってきてくれる?」なんて、一歩進んだ依頼をすることもできますし、いろんな意味で時間の節約になります。
普段の生活でもそうではないですか?
例えば、何らかの商品を購入する際には、メーカーのサイトを調べたり、口コミを調べてたりしますよね。
そのほうが断然「安心」だから。
採用する側・仕事を依頼する側も同じです。
だから、紙ベースのポートフォリオだけでなく、WEB上に公開されたオンラインポートフォリオが必要になってくるのです。

オンラインポートフォリオは24時間年中無休で働く営業マン

ECサイトや会社のコーポレートサイトは、「24時間年中無休で働く営業マン」となんて言われ方をします。
オンラインポートフォリオも同じ。
デザイナーに代わって仕事を取ってきてくれる頼りになる営業マンになるのです。
でも給料は必要ありません。
些少のコストがかかる場合もありますが、うまく行けば無料で働いてくれちゃいます。
仕事が増えるチャンスが格段に広がります。
いくら素晴らしいデザインがあっても、口コミだけでは限界があります。
外部に発信しないことには誰も見てくれません。
オンラインポートフォリオがあれば、誰かがどこかで見てくれます。
そこからお声がかかることは多々ある。
「仕事がもっとほしい!」と思っているなら、オンラインポートフォリオは必須なのです。
SNSと連動させていれば、もっとチャンスが広がりますよね。
これはもう、持っておくしかありません。
就職活動をしている新人デザイナーさんも同じです。
履歴書にオンラインポートフォリオのURLを貼っておけば、採用者側の目に触れる機会が格段に増えます。
作品を見てもらえれば、他のデザイナーよりずっと有利になります。

コストもかからないし、すぐに修正できる利点も

オンラインポートフォリオが優れている点はまだあります。
コストもほぼかからないし、気にあるところがあれば、すぐに修正もできるというところです。
紙ベースのポートフォリオではそうは行きませんが、オンラインならいつでも直すことができます。
すぐに最新の内容にアップデートできます。

オンラインポートフォリオに必要なもの

では、オンラインポートフォリオを作成するのに必要となるものをご紹介します。

レンタルサーバー

まずは必要となるがレンタルサーバーです。
オンラインポートフォリオに必要な容量は2GBもあれば十分でしょう。
ここにhtmlファイルやCSSファイル、画像などをアップしていきます。
無料で利用できるものから格安サーバーまでさまざまあります。

ドメイン

レンタルサーバーを借りれば、無料でドメインを利用できます。
ただその場合、不必要な文字列が必須(sample.powerful.jp)だったり、よくわからないトップレベルドメイン(.comの部分)だったりと、こちらの意図にそぐわないこともあります。
無料のドメインもいいですが、仕事の受注を目的とするならドメインを取得するがいいでしょう。
屋号やブランド名を使ったドメインって、説得力が増しますからね。

お問い合わせフォーム

メールアドレスもいいですが、お問い合わせフォームがあると、利用する側も利用しやすいもの。
お問い合わせフォームを設置する場合は、phpなどのプログラミングを利用して作成するか、もしくはWordPressなどを使ってお問い合わせフォームを簡単に設置できるプラグインを導入などの手があります。

SEO対策

広告費を掛けられるなら話は別ですが、自分でSEO対策を施す必要があるでしょう。
SEOを実施するにはそれなりの知識が必要になります。

ブログ

必須というわけではありませんが、よく多くのアクセスを得たいならブログを使って情報発信すると、さらに効果的です。
無料のブログサービスを利用したり、WordPressを利用してブログをサイト内に開設するなどの方法があります。

SNS

TwitterやFacebook、Instagramなどを活用して、オンラインポートフォリオを拡散したいものです。
積極的に利用しましょう。

敷居が高すぎるサイト制作

必要なものをサラッと書いてきましたが、WEB制作の知識がないと厳しいものばかりです。
ましてWordPressを使ったサイト制作となると、さらにハードルが高くなります。
「そんなものに時間をかけるよりも、手っ取り早く見栄えのよいオンラインポートフォリオを作成して、本来のデザイン業務に励みたい」という方へ。
そんな方にこそ、おすすめしたいツールがあります!
とっても手軽に、クールなオンラインポートフォリオを作成できるツールです。

知識ゼロでも大丈夫!てっとり早く見栄えのいいオンラインポートフォリオを作成する方法

WEB制作に関する知識がないという方でも大丈夫です。
てっとり速く見栄えのいいオンラインポートフォリオを作成できる方法があります。
ホームページ作成サービスのWixを活用することです。
Wixを利用すれば、レンタルサーバーを借りる必要はありません。
無料プランを選択すれば、お金も不要
です。
ドメインも無料で利用できます(ただし、独自のドメインを利用する場合は有料)。
お問い合わせフォームも、手早くサイトに実装できます。
ブログ機能も完備されているので、すぐにブログを始められます。
SEO対策についても、細かい設定が可能
です。
見栄えについても、クールな演出をつけられます。
さらに、ネットショップを開設できるので、ご自分の作品を売ることもできますよ。
WEB制作に関する知識がないけど、すぐにオンラインポートフォリオを作りたい人には最適なサービスです。

Wixを使ってオンラインポートフォリオを作成しよう

それでは早速、Wixを使ってオンラインポートフォリオを作成していきましょう。
Wixを利用するにはユーザー登録します。
まずはWixのサイトにいきます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

早速、新規登録しましょう。

無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方をご紹介

登録が完了したら、つくりたいサイトのテーマというか業種を設定します。
デザイナーのポートフォリオですから、左のメニューから「デザイン」>「ポートフォリオ」を選択。
選択が完了すると、画面が切り替わり、ハイクオリティーなテンプレートがずらりと並びます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

今回は「グラフィックデザイン」という無料のテンプレートを選んでみました。
カード型デザインで、見栄えもクール。
問い合わせフォームやブログも併設されています。
オンラインポートフォリオとしては必要十分な機能を備えていますね。
ちなみに、マウスオーバーすると「編集」と「表示」というボタンが出てきます。
表示押せば、サイトの雰囲気を確認できます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

Wixのテンプレートはスマホにも対応しています。
スマホの状態を確認したいときは、メニューバーの「スマホボタン」をクリックします。
スマホでの表示もクールでいい感じです。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

サイトのデザインが決まったらいよいよ編集の開始です。
編集を開始するには右上の「編集」ボタンをクリックします。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

サイトを編集する

「編集」ボタンを押すと編集画面に切り替わります。
操作方法は知らなくても、直感で操作できるからご安心を。
Wixをはじめて触る方でも、サクサク作業を進められますよ。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

テキストを編集する

編集したい要素をクリックすると、ツールが表示されます。
下の画像は、ロゴに使われているテキストを編集しているところ。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

画像を編集する

画像部分をクリックすれば、ツールが表示されます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

早速、変更してみましょう。
歯車マークをクリックすると、「ギャラリー設定」が表示されます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

「ギャラリーの画像を管理」という画面に切り替わるので、変更したい画像をクリックして「画像を変更」をクリック。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

ご自分の作品を登録したい場合は「マイイメージ」から画像をアップロードします。
今回はサンプルなので、「Wixフリー素材」から選んでみます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

画像が切り替わりました。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

とっても簡単でしょ?

ギャラリーのデザインを変更する

テンプレートではカード型デザインのギャラリーになっていますが、デザインを変更するのも簡単です。
左メニューから「+」プラスボタンをクリックします。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

ズラリとギャラリーのデザインが表示されます。
ここでは、サークル型のデザイン「グリット:ドット」が表示されます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

骨の折れる作業も、Wixならボタンひとつです。

コンタクトフォームも標準装備

PHPなどのプログラミング知識が必要になるコンタクフォームも標準装備。
何も悩む必要がありません。
コンタクトフォームなど、トップページ以外を確認したいときには、上部メニュー左にある「ページ」部分をクリックします。
するとテンプレートで構成されているコンテンツの一覧が表示されます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

コンタクトフォームを確認する場合は「Contact」をクリックします。
コンタクフォームが表示されます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

作品をより効果的に魅せる「プロギャラリー」

テンプレートだけでのデザイン・レイアウトでは不満という場合には、無料で利用できる「プロギャラリー」がオススメ。
デザイナーはもちろん、フォトグラファーからアーティストまで、さまざまな職種・ニーズに対応できる多機能ギャラリー。
解像度を調節して読込時間を短縮してくれる機能や、ピンぼけを修正するシャープ補正、画像を保護する右クリック防止、動画掲載も可能など、高機能なギャラリーを作成できます。
もちろん、レイアウトは自由に変更できるので、よりオリジナリティーあふれるポートフォリオを作成できます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

「プロギャラリー」は、メニュー「+」プラスボタンの「ギャラリー>関連アプリ>Wixプロギャラリー」で利用できます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

テンプレートだけでは満足できないという方は、最初からコチラの「プロギャラリー」を利用すると良いかもしれませんね。

編集が終わったら「保存」して「公開」するだけ

編集が終わったら、画面右上にある「保存」をクリックします。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

「プレビュー」をクリックして見栄えをチェックし、問題なければ「公開」をクリックすれば、オンラインポートフォリオの完成です!
ね、簡単でしょ。

オリジナルドメインを利用すればより効果的

無料でサイトを公開する場合、ドメインは「https://ユーザーアカウント名.wixsite.com/任意の文字」というドメインが割り当てられます。
しかし、これではWixを利用しているのが丸わかり。
できればオリジナルドメインを取得したいですよね。
その場合には、「プレミアム会員」登録すれば、オリジナルドメインを利用できます。
ドメインの取得料金も含まれているので(1年間)、手軽に利用できます。

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

まとめ

いかがでしたでしょうか。
オンラインポートフォリオをイチから自分でつくるには相当骨の折れる作業となりますし、業者に頼むにはかなりのコストもかかります。
グラフィックデザイナーならサイト制作に時間や労力をかけるよりも、作品自体に手間暇をかけたいですね。
便利なツールを利用すれば、いとも簡単にオンラインポートフォリをつくれちゃいます。
オンラインポートフォリオをまだ持っていないという方、これから作ってみたいという方のご参考になれば幸いです。

Wix

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 8

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適なツールをご紹介します。 このツールを使えば、スマホやタブレ

記事を読む

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl

記事を読む

WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」

WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code

記事を読む

CCSだけで見出しに自動で連番を記入する方法

当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。 こうしたとき、以前ま

記事を読む

CSSを丸裸にして見やすく統計的に整理してくれる「CSS STATS」

サイトのCSSを解析してくれるサービスってたくさんありますが、項目ごとに見やすくまとめてくれて、活用

記事を読む

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したい場合に大変便利なブックマークレットをご紹介。 このブックマ

記事を読む

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」

最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく

記事を読む

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider.com」

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」

イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利

記事を読む

CSSで表現されたスゴワザのテキストエフェクト&チュートリアル19

CSS3では、CSSでさまざまなテキストエフェクトを実現することが可能です。 今回は、CSSで表現

記事を読む

未知との遭遇!クリックするたび何かに役立つサイトを紹介する「Random Useful Websites」

未知との遭遇!クリックするたび何かに役立つサイトを紹介する「Random Useful Websites」

クリックするたび何かに役立つサイトを紹介してくれるサイトをご紹介。 このサイト、まったく自分の興味

記事を読む