ポートフォリオサイトを作ろう。

何年も前からポートフォリオサイトを作ろうと考えているのですが、他の事に寄り道してしまい全然進んでいません。

いくら時間があろうが別の事をしたら、その分時間がそこに使われてしまい本当にやりたい事は進みません。

私は、マルチタスクが苦手な生き物です。

なので、ポートフォリオサイトを作ろうと思ったらそこに注力し他の事に寄り道しない事が一番早くポートフォリオサイトを作る近道と言えるでしょう。

寄り道リスト

  • 娯楽全般(ゲーム・動画鑑賞・漫画・小説)
  • スキルアップ(イラスト・3DCG・プログラミング)
  • 仕事

スキルアップは重要ですがそのせいでポートフォリオサイトを作るのが厳かになってしまっているのならば、いっそのことスキルアップを辞め現状スキルのみでポートフォリオサイトを作った方が良い。

ポートフォリオサイトを作っている途中でスキルが足りなくなったら寄り道せずリアルタイムでスキルを上げると良い。

ポートフォリオサイト作成手順

  1. 仕様作成
  2. ワイヤーフレーム作成
  3. デザインカンプ作成
  4. コーディング
  5. js実装
  6. サーバーサイド実装
  7. アニメーション実装・動画実装

段階分けしてクオリティを上げよう。

いきなりハイクオリティの物を作ろうとしても作業量が多すぎて、途中で投げ出してしまう事がある。

なので、段階分けして制作しよう。

第一段階

文字+デザイン

第二段階

JS実装

第三段階

サーバーサイド実装

第四段階

アニメーション実装

第五段階

動画実装

サイトの種類

Lv.1 文字のみのサイト(コーディングのみ)

Lv.2 文字+デザイン

Lv.3 文字+デザイン+JS

Lv.4 文字+デザイン+JS+サーバーサイドプログラム

Lv.5 文字+デザイン+JS+サーバーサイドプログラム+ウェブアニメーション+動画実装

まず始めは、Lv.2の文字+デザインだけのサイトを作ろう。

ポートフォリオサイト仕様

目的

自身のスキルアピール及び案件獲得の為

ポートフォリオサイトとしてのみ利用し、余計な機能は追加しない。

ウェブの可能性の探求・遊べるポートフォリオサイト・癒し・驚き

運用

継続して作品を投稿し続けやすいような仕組みにする。

新規に制作した作品や実験プログラム置き場として利用

集客(新規利用者の獲得)

集客はしない。

リピート率(継続利用者数アップ)

継続して閲覧される事を目的としない。

収益化

収益化を目的としない。

サイトテーマ・サイトイメージ案

  • 癒しと驚き
  • 植物を装飾し、癒しを表現する。
  • LAB(研究所)のようなイメージも良き
  • 工場のようなイメージも良き
  • 美術館のようなイメージも良き
  • 深海のイメージ
  • 空と海と街
  • ワクワク感(旅・冒険)
  • 木製アトリエ風

エントランスイメージ

両サイドに葉っぱ

奥に建物

トップページイメージ

建物の内部(科学工場風)

三角フラスコとビーカーで科学の実験風

筆と絵具で芸術風

サイト名案

  • テクノポリス
  • ナチュラリティ
  • お命頂戴!
  • 天下無双!
  • 切腹!
  • 昇風
  • Anabatic Flow

コンテンツ

  • プロフィール
  • 信念
  • スキルチャート
  • 実務経験
  • 個人制作
  • 問い合わせフォーム

エントランスページ

普通のサイトではエントランスページは省くのだが、ポートフォリオサイトではエントランスページを設けたい。

後々、ウェブアニメーション等でゴージャスにしたい。

プロフィールページ

名前:山田 太郎

生年月日:2100年12月32日

出身地:神奈川県

所在地:神奈川県

最終学歴:マサチューセッツ工科大学

信念

何もせず、勝手に多額のお金が毎月入ってくるような仕組みを構築したい!

スキルチャート
  • 医師免許
  • 航空機操縦免許
  • 弁護士免許

実務経験

2000年3月 航空自衛隊 最新鋭戦闘機のパイロット

個人制作ページ

自身の作品を投稿

  • 企画・論文(プランニング)
  • デザイン
  • イラスト
  • プログラム

日付・作品名・作品種類・制作日数・使用ツール

問い合わせフォームページ

送信されたら自身のメールアドレスにメールが届く 又はサーバーに保存される。

名前・連絡先・タイトル・内容

ワイヤーフレーム作成

ワイヤーフレーム作成にはFigmaを利用する。

https://www.figma.com/

Figmaで適当に作った。

デザインカンプ作成

ワイヤーフレームを元にデザインカンプを作成する。

デザインカンプはどのツールで作れば良いか?

デザイン系のツールは色々ある。

  • フォトショップ
  • イラストレーター
  • ファイヤーワークス
  • Gimp

一つのツールで全て出来れば良いのにと、いつも思う。

それぞれのツールの強みを把握して、最適な利用をしていこう。

フォトショップ

写真の加工や切り抜きが得意

イラストレーター

ベジェ曲線を利用したイラストの描画が得意

印刷物はフォトショよりイラレの方が得意?

インデザインとかもあるけど、なんか色々あって…

本当に1つのツールで全て出来たら良いのに

そこは大人の事情があるのでしょうね。

ウェブデザインのカンプは、フォトショで作って素材はイラレで作る感じ?

正直、フォトショだけで済ませたい。

フォトショでも簡単なイラストは描けるけど、ベジェ曲線を使ったイラストはイラストレーターの方が得意なのかな?

デザインカンプのサイズ

ディスプレイによってなんやかんや変わるんやけど、

キャンパスサイズを1920 x 1024にしといて

ファーストビューのサイズを1100 x 1024にしとく?

ディスプレイによって変わるから、後で調整しよう。

コメントを残す