ポートフォリオサイトとは？
ポートフォリオサイトとは、自身のスキルや作品をアピールする為の自己ブランディングサイトの事です。
就職・転職・案件獲得・年収アップ・報酬アップという目的を達成する為の武器として作成します。
- デザイナー希望なら「自身が作ったデザイン集」を掲載する。
- プログラマー希望なら「自身が作ったプログラム集」を掲載する。
まずは、自身が何を目指しているのか明確にしよう。
自身が何を目指しているのかを明確にし、そのスキルを最大限アピールできるようにしましょう。
- 経営者
- プロデューサー
- ディレクター
- プランナー
- デザイナー(2D・3D)
- アニメーター
- プログラマー
- マークアップエンジニア
- ライター
- サウンドクリエイター
- デバッガー
- 他…
デザイナーを目指しているのにプログラミングスキルをアピールしたり、プログラマーを目指しているのにデザインスキルをアピールするのはお門違い。
採用担当者が求めている物を理解しよう。
ポートフォリオサイトは、他者に見せる為に作るサイトです。
自分一人で見る分には何を作っても構いませんが、他者に見せる場合は「見る人が何を求めているのか」を理解しサイトを構築しましょう。
それは、ビジネスにおいても「自分よがりのサイトではなく相手が求めている物」を理解し提供する事が大事です。
利用者が何を求めて「自分のサイトに来ているのか」を考えて構築しましょう。
「ゲームが一つもないゲームサイト」や「漫画が一つもない漫画サイト」など、利用者は求めていません。
マークアップエンジニアを目指しているのにゲームを作って掲載するとか、
採用担当者が見たいのは、ゲームプログラミング能力ではなくあなたのコーディング能力です！
なので、ゲームを１から作るよりも模写デザイン集や模写コーディング集を載せた方が採用率が上がります。
悪い例
マークアップエンジニアを目指しているのに、ポートフォリオサイトのメインページにワードプレスを使ってしまう。
採用担当者は「あなたが１から書いたコード」を見たいと考えています。
一番最初に見るとしたら、あなたのポートフォリオサイトの最初に出てくるページのソースコードでしょう。
ワードプレスを使われてしまうと採点が困難になってしまいます。
採用担当者が、あなたのポートフォリオサイトの隅々まで見てくれると思わないでください。
IT系の採用担当者は、本当に忙しいのです。
出来れば、詳細まで確認せずトップページのソースコードのみ見て採用を決めたいくらいです。
トップページのデザインやソースコードを見て良さげなら更に詳細まで見ていきますが、トップページで幻滅されてしまうと詳細まで見ずにページを閉じてしまうでしょう。
メインページにワードプレスは使わずに、ブログなどサブコンテンツに使うなど工夫しましょう。
採用担当者の思考をちゃんと理解し、想像する以上の物を表現出来たら強いです。
ポートフォリオサイトの価値について
以前、とあるベンチャー系の会社に面接に行った時に「あなたのポートフォリオサイトを売るとしたらいくらで売りますか？」と聞かれた事があります。
「私のポートフォリオサイトを他者が買っても無価値に等しい」と当時の私は考えてしまったので、正直凄く安い金額を答えてしまいました。
面接が終わって、後々冷静に考えると凄く秀逸な質問であるという事に気づきました。
ビジネスにおいて、商品の価格決定はとても大事な事です。
商品の価格が、制作に掛かった人件費よりも安ければ赤字になってしまいますし…
あなたが作ったポートフォリオサイトに10円の価値しかないとしたら、あなた自身が10円の価値しかない物しか作れない人という事にもなります。
ウェブサイトは、作り方次第で０円～数億円になる代物です。
ポートフォリオサイトを作る時に、そのポートフォリオサイトにどのくらいの価値を付加したいか仕様作成の段階で考えてポートフォリオサイトを構築するようにしましょう。
サイトの価格の決め方は色々ありますが、
最低金額は人件費の２～３倍くらいの金額が妥当ですが、商品の価格というのは人件費で決まる物ではありません。
例えば、１日で作った物でも数億円の値段を付ける事も出来ます。
自己ブランディングと共にサイトブランディングについて今一度考えてみましょう。
製作期間について
ポートフォリオサイトの制作期間は、自分自身で決める物です。
１日でも良いですし１年でも良いです。
時間を掛ければ掛けるほど、クオリティが上がってくるかも知れません。
ですが、１年という時間を年収に直すと最低でも300万円という金額になります。
さぞ、サイトのクオリティも上がった事でしょう？
ですが、ポートフォリオサイトにそれだけの時間とコストを掛ける価値がありますか？
実際の現場では、もっと短時間でサイトを構築する事が求められます。
ポートフォリオサイトを作る為に勉強する事は良い事ですが、スキル習得期間とポートフォリオサイト制作期間は分けて考えましょう。
例えば、スキル習得に１年の時間を掛けてサイト制作期間を１カ月にして１カ月で１千万くらいの価値のあるサイトを作れるようになると何処の会社からも引っ張りだこになります。
ポートフォリオサイト制作手順
- サイト仕様(素案)～作成
- サイト仕様～作成
- ワイヤーフレーム～作成
- スケジューリング
- デザイン資料～収集
- デザインカンプ～作成
- コーディング
- プログラミング
ポートフォリオサイトの仕様(素案)を考えよう。
ここでは、大まかなポートフォリオサイトの仕様について考えてたいと思います。
サイト名を決めよう。
好きなサイト名を設定する。
とりあえず、サイトの仕様がある程度出来るまでは未定でも構わない。
サイトイメージ
インターネットの仕組みを体現化し表してみたい。
宇宙・惑星
店舗・美術館・博物館・ゲームセンターなどなど
そして、この宇宙で出来る事を実際に色々表現してみる。
現代社会における課題(ストレスとリラクゼーション等)
そして経済と消費等についても投げかけて行きたい。
サイト構造
企画力をアピールしたいから、動的に目を惹くようなサイトにしたい。
デザインは、自分で描く予定。別にデザイナーを目指しているわけではないんだけど…
知り合いのデザイナーに頼んで、デザインを書いてもらうのも一つの手でもある。
プロデューサーを目指すなら自分で描くよりも他人に描かせた方がプロデューサーらしくて良いよね。
面接で聞かれた時に「自分で描いた。」という場合はデザイン力のアピールにもなる。
「他人に描かせた。」という場合は、ディレクション力のアピールになる。
プランナーやディレクター目指しているんだから、本当は自分で描かずに他人に描かせた方が良いんだけど…
「自分で描きたい」という思いがあるんですよ…
一応、描いてくれる人は確保してあるんだけど保留している。でも自分で描きたいんだよね。
過去の作品が、ごちゃごちゃある。
それらを綺麗に整理して公開したい。
１から作るのが一番簡単ですがワードプレスを理解する為にもワードプレスをCMSとして使おうと考えていた時期もありました。
その場合はマークアップエンジニアの面接では使いづらくなるので、ワードプレスはCMSとして使わずにブログページ等のサブコンテンツページでちょろっと使うような形にしようと考えています。
ウェブポートフォリオの内容
- プロフィール
- スキル
- 実績
- 過去の作品
- 連絡先
過去の作品
- サムネイル
- 作品名
- 作成日
まぁ、こんなとこかな。
エントランス
宇宙と惑星をイメージし、宇宙船で惑星に入星するイメージ
未来感も出したいし、ビンテージ感も出したい。
未来とビンテージの融合
ホーム
惑星に着陸したスペースシャトル
植物を基調に、自然と文明の調和を表現
- 美術館：自身が制作したロゴやイラストを展示する。
- ゲームセンター：自身が制作したゲームやプログラムを展示する。
- ショップ：オープン未定
- ログインフォーム(ログインすると自身のアバターやプロフィールを登録できる。)
- 広場：チャットや掲示板のようなコミュニティースペース
- 大学・学問・研究所(自身が考えるプランを掲載)
- 創造主のプロフィール(ステータス・スキル等)
視覚的表現
静的2D
使用ソフト：フォトショ・イラレ・クリスタ
あー、絵描くのめんどくせぇ…
全部文字だけで良いじゃん…
まぁ、駄目ですよね。
絵だけじゃなく、写真も使っていきたいな。
(写真の切り抜き・加工技術のアピール)
想像力は無限大じゃー！ぼけー！
やるっきゃないっしょ。
でも、絵描くの時間掛かるんだよね。
時間掛かる仕事嫌い…
どっちかというとプログラミングの方が好きだわぁ。
絵を描くのは嫌いじゃないんだよ？アナログでね。
コンピューターグラフィックスが手間なだけ…
とりあえず、ポートフォリオサイト案はこんな感じ
エントランスページの宇宙と惑星そしてスペースシャトルを描くとするか…
サイズいくつだっけなぁ…
1920×1080～1366×768が画面サイズで、そこからタブバーとかスクロールバーの大きさを引いたくらいでファーストビューが横幅1000pxくらいと…
フルスクリーン表示にしたいから、適当に作って後で合わせよう。
ディスプレイサイズによって変わる事なので、ごにょごにょっとやるさ。
- 未来的
- ビンテージ感
- キラキラ系
- マット
- 光と影
- 色彩
- 遠近感
- 見やすさ・使いやすさ
- 美術的
- 実用的
- ラフ画像
- 完成画像
- 写真加工
- 白黒
- カラフル
- ビビット
- モダン
- アールヌーボー調
- アールデコ調
- メリハリ
2Dアニメーション
現代、アニメーションを使ったウェブ表現は普通のように出てくる。
アニメーションによる表現も実装させたいところだが、とりあえず静止画で作って後で追加でアニメーションを付加したい。
- 表示する
- 拡大縮小(遠近感)
- ぼかす・シャープ
- 点滅系(点滅・フェイドイン・フェイドアウト)
- 移動系(動く・流れる・落ちる・浮かぶ・バウンド・撃つ・飛ぶ・パララックス・ぶつかる・弾ける・歩く・誘導系マウスや物体・物理エンジン)
- 回転する。
3D・3Dアニメーション
3Dは、魅力的なコンテンツである。
だが、しかし制作に時間が掛かる。
既存のサービスに付加価値として付与するのは、悪くないが…
新規サービスでスピードを重視する環境では、3Dで作るよりも2Dでサクッと作って公開すべきである。
webGL等
音響表現
音による表現
フリー音源を利用
システム
マークアップエンジニアを目指している人は、メインページにワードプレスを使うべきではない。
採用担当者が見たいのは、あなたのコーディング能力です。
ワードプレスを使う事によって、採点の機会が失われます。
自分で１から作るのも大事だが、フレームワークのような既存の物を利用できるかどうかという事もクライアントは求めている。
自己ブランディングサイトなんだけど、PHPとDB使ってシステマチックにしたいと思っていたんだけど、ぶっちゃけプログラマーの面接に行くわけじゃないんだから正直そこまでする必要性が皆無…時間も余計に掛かるしね。
時間短縮できるならいいんだけど？時間短縮できるなら…時間短縮できるなら…時間短縮できるなら…
時間短縮できるなら？
HTMLだけで過去の作品をまとめて掲載した場合とPHPとDB使って過去の作品を掲載した場合…
PHP+DBだと、DBに一つ一つ登録していく手間が掛かる。
HTMLだと、一つ一つ画像指定変えたりする手間が掛かる。
作品名に関しては、PHPでやる場合もHTMLでやる場合も手作業で入力していかなければいけないのは変わらない。
サーバーサイド
第一段階では、時間優先で不使用にする。(静的サイト)
第二段階は、アニメーション表現を実装する。
第三段階で、徐々にサーバーサイドを実装出来たら好ましい。
PHP+DBにするメリットは、
- HTMLファイル数が劇的に減る事
- 画像指定を手入力から選択式に変える事が出来るけど、これってわざわざ選択するよりも手入力の方が早かったりするよね。
- メニューやその他デザインを改良した時に、全てのページを編集する必要が無くなる。これはデカいな。
- PHP+DBが扱えるという事をアピールできる。これは別にプログラマー目指してるわけじゃないから要らないんだよね。
一番大きいメリットとしては、全体ページの改修がしやすくなる事か、一つ変えるだけで全てが変わるからね。
長期運用を考えるならPHP+DBにした方が良さげ。
ポイ捨てサイトなら、どちらでもいい。
今までのサイトは、ポイ捨てする事が多かったけど長期運用も考えてPHP+DBにしたいって気持ちもあるので、とりあえずPHP+DBにするかなぁ？
html5で追加された要素一覧
https://web-manabu.com/html-css48/#main