ポートフォリオサイトを作ってみた① 〜サイトの内容決めとフレームワークの作成〜

転職活動にあたって、自身のポートフォリオサイトを作る機会があったので、
備忘録として制作過程を記録していきます。

今回は、主にディレクションとデザインの過程になります。

サイトの目的と内容を決める

今回、サイトを作成する目的は
「転職活動の際に、採用担当や開発部署の方に現段階での自分のスキルを伝えること」
とします。

デザイナーやエンジニアの方のポートフォリオサイトをいくつか見た結果、
トップページには以下の内容を入れることにしました

・ このサイトについて
・ プロフィール
・ 制作物
・ スキルセット
・ お問い合わせ

ワイヤーフレームの作成

内容の構成が決まったら、大まかなレイアウトを決めていきます。
ワイヤーフレームと呼ばれるWebページの設計図を描いていきます。

個人的には、この作業はアナログで行うことが多いです。
B5の方眼紙にページ全体を囲う枠線を引き、その中で各要素をどう配置するかを描き込んでいきます。

デザインカンプの作成

作成したワイヤーフレームをもとに、デザインを起こしていきます。
デザインツールはアルバイト時代にも使っていた、Photoshopを利用します。

要素ごとにレイヤーグループを作成して、サイズや色を調整していきます。
(AdobeCCのフォトプランが安いので契約していますが、ゆくゆくはイラレも使えるようになりたい💭)

デザインができたので、次からは開発のフェーズに入ります。

早速コーディング...といきたいところですが
その前に、サイトの公開に必要なドメイン名の取得とレンタルサーバーの契約の２つを行います。

詳しくは次の記事で ▷