構成編 未経験者OK ポートフォリオサイトのレイアウトと作り方を解説

図解:ポートフォリオサイトの作り方 効果的な魅せ方と伝え方

未経験で就職はもちろん、転職したい人やフリーランスを始める人に向けて書いています。

前回はクリエイティブな仕事に就きたい人向けに、「環境を準備(ワードプレスでポートフォリオサイトを作る)」すること、「載せるべき内容」のお話をしました。

画像:オリジナリティで差をつけろ! ポートフォリオサイトの始め方 準備編

準備編 未経験でも必須のポートフォリオサイトとは?サーバーも紹介します


画像:未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!

未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!

今回はその載せるべき内容を、実際にどんな構成でページ内にレイアウトするのか?
また、どの様に伝えればアピール出来るのか?を解説していきます。

僕のおすすめのレイアウトを紹介するよ。
作品のアピールのコツもね!

デザイナー系(グラフィック・ウェブ・ゲーム)、映像系、作家、フォトグラファー等が当てはまるでしょう。

解説の流れ、

  1. まずはレイアウトパターン紹介。
  2. 作品をどのようにアピールするべきかを解説。
  3. レンタルサーバーでWordPress(ワードプレス)を準備。

➂のレンタルサーバー契約・WordPress(ワードプレス)準備は難しい事は無く、おすすめの物があるのでそのまま手順通りに進めればOKです。別記事もあるので参考にして下さいね。

僕の経験では100%の割合で、ポートフォリオサイトを見ます。個人的にはウェブ業界なら紙のポートフォリオは不要だと思います。

ポートフォリオのレイアウトは?

1.トップページは一覧型

図解:ポートフォリオサイトのトップページレイアウト
トップページレイアウト

結論から言うと、シンプル イズ ベスト!
よくありがちなミスは、こだわりたいからと、奇抜なレイアウトにしてしまう事です。

それよりも掲載作品が見やすくなるレイアウト(構成)がおすすめ。こだわりは作品で表現しましょう。

2.鉄板! 作品をリスト形式で並べよう

図解:ポートフォリオサイトのレイアウト一覧パターン1
サムネイルのリストパターン1
図解:ポートフォリオサイトのレイアウト一覧パターン2
サムネイルのリストパターン2

「サムネイル+概要テキスト」のワンセットをリスト形式で並べるのが一番分かり易くおすすめです。

作品数が少ない時はパターン2の様に、1つ1つの作品を大きくするのもアリです。

作品のカテゴリー分けをして見出しにするか、「概要テキスト」の所にカテゴリー名を付けると凄く分かり易いですよ。

3.詳細ページの構成内容を考える

図解:ポートフォリオサイトのレイアウト詳細ページ1
作品詳細ページのレイアウトと掲載項目

カテゴリー

紙媒体(名刺、フライヤー)、ウェブ(バナー、ウェブサイト)、写真などカテゴリーやジャンルで分けてラベリングします。作品説明の所にでも必ず入れておきましょう。

コンセプトや工夫した点の説明

ここはかなり重要なのですが、初心者がありがちな典型的なダメな説明パターンがあります。
例えば、制作した物やどんなデザインをしたかの説明しか書いていないパターンです。

「爽やかな印象にしたいから青にしましたー。」は説明ではありません。 何故爽やかな印象にしようと考えたのか?また、一言で「青」だと乱暴ですよね。青は青でも色んな青があるはずです。

色の話に限らず、考え抜いたデザインには何故その様にしたのか必ず理由があります。それを書きましょう。

担当箇所

作品によっては、部分的にしか制作に携わっていないなんて事も。その場合は誤解を与えない様に、担当箇所を枠で囲むなどし、説明文でその旨を補足しておきましょう。

制作期間

いつ制作したのか?また、制作にどれくらいの時間が掛かったのかを書きましょう。
一覧には新しい物から載せていくのが良いです。

サイトURL

例えばウェブサイトならURLを記載しておきます。だだし、古いものだとリニューアルされて残っていない場合もあります。必ずサイトをキャプチャして、担当箇所を記載しておくのをお忘れなく。

SNSボタン設置

面接においてSNSは必須ではありませんが、フリーランスなら必須です。
「ポートフォリオサイト+SNS」でPRすれば立派な販促ツールです。

4.プロフィールとお問い合わせフォーム

図解:ポートフォリオサイトのレイアウト詳細ページ2
詳細ページのプロフィールとお問い合わせフォーム

名前と自己PR

就活目的であれば必要以上に個人情報は出せる人は出すって感じです。一般的な志望動機とデザインに対する想いの様なものを書けばOK。

個人活動するわけでは無いのであれば個人情報は出したくない人も居るはずなので。

フリーランスなら過去の実績と絡めて、得意なものを積極的にアピールしましょう。別ページにしても良いですね。

スキルや資格

作品詳細ページでもスキルは載せるべきですが、すべてのスキルや資格をまとめた一覧があると親切です。スキルの棚おろしにもなり、意外な自己発見に繋がりますよ。

どんな風に見せるのかもセンスが出せる部分です。テキストで箇条書きするよりも視覚化したほうが伝わりやすいかも知れませんよね。

よく見かけるアイデアは、

  1. ツールをアイコンで表示
  2. スキルレベルを星マークでランク付け
  3. 自分らしいモチーフに置き換える

いわゆるインフォグラフィックスってやつですよね。

作品をアピールする為にやった方が良い事

作品のスクリーンショットは必須

作品の画像が無くては始まりません。どの様なカテゴリーの作品でも必須です。
ウェブサイトであればPCとスマホで見え方が変わりますので、両方のスクリーンショットがあれば良いですね。

スクリーンショット(キャプチャ)ツール紹介

以下、おすすめスクリーンショットツールです。
(クロームの拡張機能:2021/01/16 動作確認済)

  1. Awesome Screenshot
  2. GoFullPage
  3. FireShot
画像:PCサイトのスクリーンショット(キャプチャ) おすすめツール3選

PCでサイト・ブログのスクリーンショット おすすめツール3選

ページ下部にスキルと資格をまとめておく

作品詳細ページで、使用したツールやスキルを書くのがおすすめですが、プロフィール部分にも使用できるツールや資格をまとめておくと見やすくて親切です。

クリエイティブ系の職種は資格よりも使用できるツールの方が重要かもしれません。

見てくれる人への配慮をする

正直な所、個性的過ぎるものは見辛いものが多いです。たとえ中身が良くても見てもらえません。それがウェブデザイナー志望なら尚更です。

ポートフォリオのベース部分は、作品の見やすさに注力しましょう。ここで大事なのは見てくれる人への配慮です。

言うまでもなく、見てくれる人とは採用担当者やクライアントの事です。

配慮のないダメなパターン

  1. 文字サイズがやたら小さい。
  2. カテゴリーなどで分類されていない。
  3. 作品の説明の仕方が間違っている。
①文字サイズがやたら小さい

文字が小さいと、何となくオシャレに見えますよね。グラフィックデザイナーにありがちです。
PCやスマホで表示するのと印刷物とでは可読性が違います。

本文だと小さくても14px~15px位でしょうか。大きすぎてもアレですが、小さ過ぎると読むのが大変です。リンクも押せません。

②カテゴリーなどで分類されていない

ポートフォリオの掲載内容はある程度決まっています。並べる作品がバラバラでは統一感がありません。見やすさの為にジャンルやカテゴリー毎にまとめて配置したほうが良いです。

カテゴリーで分けて、その中で最新の作品を上に持ってくるのがおすすめ。カテゴリー毎のアイコンを付けてラベリングすると完璧。

カテゴリ名を色分けするだけでもかなり違ってきますよ。

➂作品の説明の仕方が間違っている

詳細ページの所でも書きましたが、作品の説明の仕方を間違えている人が多いです。
作品の内容だけ説明しても伝わりません。

どんな理由や考えがあってそのデザインにしたのか?その思いや考えが説得力を生みます。
そして、その思いや考えをデザインに落とし込めているかを見たいんです。

レンタルサーバーでWordPress(ワードプレス)を準備

前回の準備編 未経験者もOK ポートフォリオサイトの始め方を解説でも書きましたが、ポートフォリオサイトを作るにはワードプレスが一般的で最適です。

サーバーはロリポップ、エックスサーバー、コノハウィングあたりだと簡単にワードプレスを始める機能があります。

難しければ有料テーマを購入しましょう。
紹介したお問い合わせフォームもプラグインを使えば簡単です。

ポートフォリオサイトはクリエイターの資産です。長く運用するだけの価値はあります。

画像:おすすめサーバー3社比較 目的とタイプで選べる

目的とタイプで選べるおすすめレンタルサーバー3社比較

図解:WordPressにおすすめテーマと新規追加する方法を解説!

WordPressのおすすめテーマと追加方法を丁寧に解説

知っておくと幸せになれるかも

ここではポートフォリオに載せる物を「作品」と呼んでいます。
完全に個人ワークの場合もあれば、クライアントへの制作物の場合もあるかと思います。

今時いないかもしれませんが、クライアントワークを「作品」と呼ぶ事に対して悪く捉える人もいます。
ここでは便宜上「作品」と書いていますが、面接の場合は呼び方も気にしたほうが良いかもしれませんね。

心証はものすごく大事です。制作に対する姿勢や考え方は、「人として」や「仕事」に対する考え方でもあります。

例えば、ネットでダウンロードしたフリー素材を「落ちている」とか「拾った」と表現する人は、著作権やライセンスに対して考えが緩い人だと伝わります。言うまでもなく、フリー素材は好意で配布されている物です。

このあたりのリテラシーが低い人はリスクの高い人です。一緒に仕事は出来ないですよね。

まとめ

面接の場合、制作の方が同席される事が多いです。採用されたら一緒に仕事をする人です。
なので、未熟でも学ぶ姿勢や謙虚さなど、作品以外の部分を見られる事も多いんです。

多少のスキル不足は努力次第で何とかなりますから。

では頑張って!

画像:おすすめサーバー3社比較 目的とタイプで選べる

目的とタイプで選べるおすすめレンタルサーバー3社比較

画像:ポートフォリオの作り方 実績以外のアピール法

未経験Webデザイナーで実績無し – ポートフォリオサイトは必要?

画像:未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!

未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!