ポートフォリオサイトを制作するには、まず仕様を作成しましょう。
仕様を作成せずに、適当に作るとサイトの方向性がおかしくなったり設計効率が悪くなります。
仕様作成する為のツールを用意しよう。
下記のツールのどれでも良いので１つ用意する。
- メモ帳
- エディタ
- エクセル
- ワード
- パワーポイント
誰かに見せるわけじゃなければ、なんでも良いので今回はブログ(ワードプレス)に直書きしていきます。
自身が目指している職種を明確にしよう。
まず、自身が目指している未来像を想像し自分が何に成りたいのかを明確にしましょう。
私が目指している職種は、経営者・プロデューサー・プランナーです。
プロデューサー・プランナーとしての才能をアピールできるようなポートフォリオサイトにしたいと考えています。
デザイナーならデザイン力や製作時間をアピールしましょう。
プログラマーならプログラミング力や製作時間をアピールしましょう。
ポートフォリオサイトの目的
就職・転職・案件獲得を有利にする為の武器として作成する。
IT業界未経験の方は、まずは採用される事を目的に作りましょう。
実務経験者は、年収や報酬を増加させる事を目的に作りましょう。
ターゲットユーザー
企業の採用担当者・案件依頼者
ターゲットデバイス
パソコン・スマホ
画面サイズ
パソコン
フルウィンドウ
1920px×1080px
min-width:1000px
スマホ
375px×667px
詳細は、また追々
サイト名を決めよう。
ウェブサイトを作る時、まずはサイト名を決めようと考えると思いますが仕様が詰まってないとサイト名を決める事が難しいので、とりあえず未定としサイトイメージやデザインイメージが纏まってから決めましょう。
サイト名：未定
- アトリエ AKIHIRO（仮）
- AKIHIRO ミュージアム（仮）
サイトに表示するコンテンツを考えよう。
- プロフィール(名前・生年月日・年齢・学歴・職歴・資格)
- スキルチャート
- 実務経験
- 個人制作
- ブログ
- 問い合わせフォーム
- スローガンだったり、投げかけたい事
- プロデュース・プランニング・デザイン・プログラミング
サイトイメージを想像しよう。
ポートフォリオサイトをどういう感じにしたいか想像し記そう。
- 森の静かなアトリエ風
- モード系
- オンラインゲーム風
サイトクオリティ
商業レベル以上の物
実務経験があって、プロデューサー・アートディレクター・クリエイティブディレクター等の上位職を目指すなら入りたい会社の社員全員の度肝を抜く物ようなレベルの物を作らないとナメられるので、ガチで度肝抜くレベルの物を作る。
エントランスページを設けるか？
美術館のように中に入る前にエントランスページを設けたいと考えているのですが、通常のサイトですとエントランスページを設けずに最初に見るページ=トップページという構造が普通です。
エントランスページを設けるかどうするかは、検討中…
エントランスページ
横幅：最大
縦幅：最大
背景を設定する。
中央にロゴを表示する。
ロゴの下にENTERボタンを表示する。
それだけでは、エントランスページがある意味が無いので遠近法やアニメーションやパララックス効果を活用して表現したい。
ENTERボタンを押すと、画面がフェイドアウトし裏から遷移先のページが表示されるようにする。
ホーム画面のファーストビュー
エントランスページを設ける場合は、ファーストビューをフルウィンドウで表現してしまうとエントランスページの価値が薄れるのでエントランスページを設けた場合はフルウィンドウで表示しない。
メインメニューの表示位置について
メニューの表示位置は、画面上部に表示する場合とロゴの下部に表示する場合がある。
画面上部に表示する場合は、メインメニューというよりサブメニュー的な役割になる事が多いかな？
なので、メインメニューはロゴの下部辺りに設けたい。
メニューの仕組みについて
通常のサイトではメニューをクリックすると別ページに遷移する仕組みだと思いますが、メニューにマウスオーバーすると遷移先のページの一部を先行表示しクリックすると通常ページ遷移するのではなくpjaxで現ページにフェイドインするようにしたい。
サイトのデザインを考えよう。
デザインコンセプト
- 近未来的
- 自然
- 工場
- 研究所
色々とデザイン候補はあるがデザインに関しては、またデザインカンプを作る時までに決定しておきます。
コンテンツについて
本当は、データベースに作品を一つづつ登録して表示するような仕組みにしたいが作品数が多い事やコードや色々な観点から今回はデータベースを活用せずに利用する。
プロフィールページ
名前：山田 太郎
生年月日：1900年1月1日
年齢：122歳 (php又はjsで生年月日から自動的に挿入されるようにする。)
学歴：ずらずらっと表形式で表示
資格：ずらずらっと表形式で表示
職歴
ずらずらっと表形式で表示
スキルチャート
表形式でずらずらっと表示
個人制作
ずらずらっと表示
クリックすると詳細ページに飛ぶようにする。
個人制作詳細ページ
詳細ページのサイドに、他の個人制作へのリンクを表示する。
詳細ページには作品を表示し、その上部にパンくずリストを表示する。
下部には、
- 作品タイトル
- 制作期間
- 使用ツール
- こだわった所
などを記載する。
その下部にコメントを掛ける欄をPHPで作っても良い。
ブログページ
ワードプレスを使用し表示する。
カスタムテーマを作り、自身のサイトとデザインを合わせる。
問い合わせフォーム
PHPとJSで製作する。
名前(必須)：
メールアドレス(必須)：
件名(必須)：
問い合わせ内容(必須)：
[送信ボタン]
スローガンだったり、投げかけたい事
- これからの世界経済やウェブサービスの在り方について
- ウェブサービスの可能性について
- ユーザーエクスペリエンス(視覚・聴覚・触覚・味覚・嗅覚)
- ストーリー・シナリオ
視覚
- 静止画
- 動画
- サイト挙動
聴覚
- 音楽
- SE(サウンドエフェクト・効果音)
全く同じコンテンツでも、サイトの表現方法によって様々なスキルをアピールする事が出来ます。
仕様作成の段階では、実際に制作経験が無い事でも記載して大丈夫です。
実際に制作する時に、調べながら正しく実装が出来れば良いです。
とりあえず、軽くこんな感じです。