ここのWebサイトの制作過程を紹介します

制作のキッカケ

新卒採用の企業説明会やポートフォリオ講座などを受けて、自分のポートフォリオにはいろいろな要素が足りないことに気づき、改めて作り直すことにしました。

苦労したところ

周りのポートフォリオなどを見ると、参考になる部分と参考にしすぎてはいけない部分の判断に悩みました。例えば、僕はマンガ学部の学生ですが、デジタルデザイン学部の学生のポートフォリオなどを見るとユーザー分析やフィードバックなどがしっかりしている作品があり、参考にして作ると、どうしても下位互換なポートフォリオになってしまいます。プロのような作品であることを強みにできない分、自分が独学してきたストーリーを伝えることができればいいのではないかと思いました。

作業工程

1.プロフィールを追加する

 短い自己紹介だけのプロフィールだったので、今までの経緯を簡単にまとめた文章を追加しました。主に「マンガ家を」と「webデザイナー」の二つの軸がありましたので、その二つにまとめた文章にしました。

2.作品一覧をギャラリー表示する

 トップページの作品一覧を3カラムにして、マウスカーソルを置くと、細かい詳細が出てくるようにアニメーションを作りました。一番苦労したのは、画像を暗くする演出です。普通にCSSで作ると、一つの画像の上にマウスカーソルを置くと、全ての画像が暗くなってしまうことです。たくさん調べて、jQueryの引数を利用して、マウスカーソルと重なった画像のみ暗くする演出をしました。

3.新しいページ(固定ページ)を作る

 リニューアル前は、制作期間、ツール、感想一言だけで構成されていたのを、制作過程を順番に載せることにしました。主に画像やリード文を使って、全体のワークフローが伝わりやすくするようにしました。

4.本番サイトにアップ

Localというアプリを使って、wordpressをデスクトップにダウンロードして、編集していたのを、ロリポップのFTPにアップロードします。