制作プロセス

ポートフォリオサイト公開!作り方や制作過程も解説

ポートフォリオサイトのモックアップ画像

こんにちは!
fuyuna(@fumm_ii)です。

こちらの記事では、デザインからコーディングまで自分でした「ポートフォリオサイト」のご紹介と、その制作の流れや思考などについてまとめました。

これからポートフォリオを作ろうと思っている方の参考になるよう、できるだけ詳しく作り方をまとめたので、よければ参考にしてみてください。

https://twitter.com/fumm_ii/status/1148218137562636288
【その他のポートフォリオに関する記事】

ポートフォリオサイトのご紹介

まずはポートフォリオサイトのデザインをご紹介します。
URL:fuyuna.net/portfolio/

ポートフォリオのモックアップ
ポートフォリオのトップページデザイン

ポートフォリオ制作の流れ

ご紹介したポートフォリオサイトができるまでの過程や思考をご紹介します。

まず最初に、制作期間は1週間と自分の中で目安納期を決定し、おおまかなスケジュールを決めながら次の流れで進めていきました。

  1. ポートフォリオの制作目的を明確化
  2. 掲載する制作物をリストアップ
  3. ポートフォリオ・Webサイトの情報収集
  4. サイトマップ作成
  5. ラフイメージ作成(手書き)
  6. Xdでワイヤー・デザイン作成
  7. コーディング(PC版)
  8. コーディング(スマホ対応)
  9. サーバーアップ・公開
  10. ご意見・アドバイスをもとに都度改善

最初に設定した1週間の期限のうち、コーディングにかけた時間は2日。つまり前半の5日間は考えること、デザインすること、修正することに力を入れていました。

普段の仕事でも同じですが、制作時間よりも思考している時間の方が圧倒的に長いです。

以下、実際にポートフォリオができるまでの過程を解説していきます。

ポートフォリオ制作の目的を明確化

まずは何のためにポートフォリオを作るかという、「そもそも」の部分を明確化しました。

今回のポートフォリオ制作の目的は「自分のことを知らない人に知ってもらうこと」でしたが、これだけでは漠然としすぎです。

さらに「自分のどんなところを知ってほしいか」を考えました。

  • 自分のデザインのテイスト
  • デザイナーになるまでの経緯
  • これまでの仕事・作ったもの
  • 仕事に取り組む姿勢
  • 自分の強み
  • ブログで発信していること
  • ユーザー目線を忘れないこと
  • Webデザインの現状スキル
  • これからどうなりたいか
  • ↑のために実践していること

ざっくり省略して書くとこんな感じです。

ひとりの人間としての自分と、デザイナーとしての自分を知ってもらい、その上で一緒に仕事がしたいかどうか考えてもらいやすい構成にしようと思いました。

実際はさらに上記を深掘りし、具体的な内容を自分の中で固めていきました。

目的によってレイアウトや必要なページ構成、内容などが大きく変わってくるので、これからポートフォリオを作る人は最初の段階にじっくり考えましょう。

fuyuna
fuyuna
「早くポートフォリオを作らないと」と思う気持ちはわかりますが、一度立ち止まって自分と向き合う時間を作りましょう。

伝える優先順位を決める

ポートフォリオを作る目的を明確にしたら、次は何を優先して伝えたいかを決めます。

前述した内容を全部盛りすると、「で、何がいいたいの?」と伝えたいことが伝わりにくくなってしまうので、優先順位を整理する必要があります。

ただ「削る」のではなく、「こうすれば、これとこれが一緒に表現できるのでは?」とパズルのように組み合わせたりして内容をまとめられると効率が良いです。

例:見せ方の工夫で悩みを強みに変える

例えば「制作実績をたくさん見せたいけど、種類が多すぎて何がしたいのか伝わらない」という悩みがちな部分を強みに変えたのが、Worksページの見せ方です。

Worksページ|ポートフォリオの作り方

内容がごちゃごちゃしてしまうかもしれない、という悩みを強みに変えた工夫は以下。

  • 回遊しやすいメニューの設計
  • PCとスマホでメニューを変更
  • やりたいことを1番上に表示
  • 中身がわかりやすいサムネイル表示

こういった工夫をすることで、ユーザーが使いやすい設計を心がけていること、過去に制作したもの、これからやりたいことなどをまとめて表現しました。

デメリットをメリットに変える工夫をすること自体も、「問題解決に取り組む姿勢」として評価してもらえるかもしれません。

fuyuna
fuyuna
デザイナーは「問題解決のために思考して、それを効率的に表現する仕事」だと思うので、時間の制限はありますが、たくさん悩めば良いと思います。

参考サイトを見つける

ポートフォリオ制作の目的が決まったら、すでに世に出ているポートフォリオやWebサイトから、良いデザインやアイディアを学びます

「ポートフォリオ」「デザイン」「デザイナー」「グラフィックデザイナー」「Webデザイナー」などのワードを掛け合わせてググったり、pinterestで検索したりします。

また、自分が作るのはポートフォリオサイトですが、全体のビジュアルやボタン、メニュー、アニメーション、使いやすい機能などは一般のWebサイトも参考になります。

参考サイトの調べ方がわからない人は、以下に私がいつも利用している参考サイトを貼っておくので見てみてください。

【Webデザインのギャラリーサイト】

サイトマップ作成

ポートフォリオの中身を決めて、既存のポートフォリオサイトやWebサイトを見てインプットしたら、自分のサイトに必要なページも明らかになるので、次はサイトマップを作ります。

エクセルやパワーポイント、サイトマップ作成ツールなどを使って作る方法もありますが、個人的にはふせんを使う方法が気に入っています。

サイトマップの写真

ふせんを使えば順番の入れ替えがしやすいし、全体の構成が把握しやすいです。

自由にメモもできるのでオススメですが、ページ数が多いサイトでは作業効率があまり良くないことや、ふせんが剥がれてしまうリスクがあることもご理解ください。

私はいつも「これでよし!」となった後にスマホで写真を撮っていつでも確認できるようにしているので、もしもふせんが剥がれても特に問題ないです。

ラフイメージ作成(手書き)

サイトの構成が決まったら、手書きでラフを書きます。公開する写真はほんの一部で、実際には何パターンも書いてます。

トップページのラフイメージ
Worksページのラフイメージ

ラフイメージを見ると、A4ノートの中で「こうした方が良いかな?」「いやいや、こうじゃない?」と自問自答しているのがわかるかと思います。

最初の設計段階とラフイメージは、常に自分との対話が繰り広げられています。

手書きのラフは自由に書き込むことで思考が整理でき、時間を置いてから客観的に見ることができるので、個人的には必須の過程です。

【ラフスケッチ・メモ用に使っているノート】

ラフスケッチやメモ用に使っているノートは、リングがやわらかい方眼ドット、80枚のものを使ってます。切り取り線も入っているので、印刷・スキャンしたい時にも便利で気に入っています。

Xdでワイヤーフレーム・デザイン作成

しっかり内容が詰まってきたら、いよいよデザインです。

今回は複雑なデザイン・パーツを使う予定がなく、自分のサイトなので小さなデザインの変更はコーディング段階でもできると考え「Xd」でワイヤーフレーム・デザインを作りました。

デザイン段階では「お問い合わせフォーム」をページ下に設置する予定でしたが、時間の制限と私の力不足により実装しない方向に変更しています。

PCトップ、下層ページのデザインを作った後、私のサイトユーザーさんはスマホの使用率が高いため、スマホ対応のデザインも作りました。

コーディング・サーバーアップして完成

ここまできたら、あとはデザインに沿ってコーディングをして、サーバーにアップすれば完成です。

コーディングやサーバーに関しては特に解説できることが無いので、コーディングに使っているエディター、使用FTPソフト、愛用のレンタルサーバーをご紹介しておきます。

アクセス解析もやってみる価値あり

さらに余裕があれば、GoogleAnalytics(グーグルアナリティクス)などを使って「アクセス解析」にも取り組んでみましょう。

GoogleAnalyticsを使えば以下のようなことがわかるので、今後のサイトの運営に役立ちます。

  • 訪問者数はどのくらいか
  • どのページがよく見られているのか
  • ユーザーの使用端末はスマホかPCか
  • 期間内に何ページ見られたか

アクセス解析はサイト運営の参考になり、自己流の範囲でも勉強になるので、こちらのブログにもポートフォリオサイトにも設置しています。

ポートフォリオ公開1週間のアクセス結果

参考例としてポートフォリオを公開してから1週間の「アクセス数」「ページビュー数」をお見せすると、1週間で3,000人以上の方がサイトに訪れ、9,513ページを見ていただいたことがわかります。

ポートフォリオ公開1週間のアクセス結果
fuyuna
fuyuna
大変多くの方に見ていただき、心から喜んでおります。本当にありがとうございます。

まとめ

今回は、自分自身のポートフォリオサイトのご紹介と、その制作過程・思考などをご紹介しました。

制作過程をご紹介した理由は、こうして制作背景を知ってもらうことで何を意図してデザインしたか、どういう思いでポートフォリオサイトを作ったかを知っていただくためです。

また、これからポートフォリオを作りたいと考えている方の参考になれば幸いと思い、私自身の経験をまとめてみました。

自分なりに色々と考えて作ったポートフォリオは、就活だけでなくこれからも大切に育て、更新していきたいと思いますので、どうぞよろしくお願いいたします。

▼ポートフォリオサイトはこちら

ポートフォリオサイトはこちら
紙のポートフォリオ
【紙のポートフォリオ公開】制作過程や参考にした本などもご紹介ポートフォリオをデザイナー就活用に制作して公開しました。クリエイティブ業界の転職に必要なポートフォリオの作り方・制作過程を解説し、勉強になった本もご紹介している記事です。...
デザイン独学で確実に成長できる4つのコツ
デザインの独学で確実に成長できる4つのコツ【センスより大切なことがある】独学でデザイナーになる4つのコツをまとめました。デザインの基本を知り、とにかく作ってアウトプットすること。そして人に頼ること。これが実践できれば独学でもフリーランスのデザイナーになれます。センスは関係ない、頭と手を動かすだけです。...
ABOUT ME
fuyuna
理学療法士から独学でデザインを学んだデザイナー / 東京のデザイン会社勤務 / グラフィックとWebが中心 / 大人可愛いデザイン / 本とお出かけが好き