ポートフォリオサイトを1から作りました。

2018年の始め辺りからWebデザインを本格的に勉強し始め、今はWebデザイナーとして働かせていただいています。

転職の際には「ポートフォリオは必須」と色んな人に言われ、また色んなサイトにそう書かれていました。その時は焦りながらもポートフォリオに掲載できる作品を作り、ワードプレステーマを使ってなんとかポートフォリオサイトを作りました。

しかし、自分のポートフォリオサイトにテンプレートテーマを使っていることに少し違和感が。

自分のポートフォリオサイトは1から自分で仕上げたい。

そんな思いから今回、1から自身のポートフォリオサイトを作りました。

Yuto Fujita – Web design / Photograph

セルフブランディングの為に、サイト名はそのまま自分のフルネームを使用しています。

レスポンシブデザインで、PCでは3カラム表示、SPでは1カラム表示になります。

横幅が599px以上になると3カラムでタイル状に敷き詰められていきます。

作品の画像をクリックすると、画面推移せずにモーダルウインドが表示されるようにしてあります。1つの作品にそれほど書く情報がなかったので、今の段階ではモーダル表示になっているのですが、今後作品次第で新たにページを作成して良いかもと考え中です。

まず始めに、どういった目的でどういった構成のサイトを作るのか、改めて書き出してみることに。

主にXDでラフに作りあげていった結果、最終的には以下のような設計資料に仕上がりました。

かなりざっくりとした資料ではありますが、今まで何も考えずにコーディングから入ったりしていたので、企画の段階から考えること自体今まで全くなく、今回の経験は良い勉強になりました。

ワイヤーフレームの構成からカンプ、そして実装に入った段階で、構成を少し変えました。

理由としては、今回のサイト制作の目的はあくまでポートフォリオ(作品集紹介)なので、作品に一番注目してもらいたい。その為、フッターにプロフィールセクションは置かずに、ナビゲーション内にリンクを格納しました。作品数が増えてきたら無限スクロールを実装しようと考えています。

サイト自体のデザインに関しては、全体的にシンプルなデザインなので、PC表示時にタイル状に敷き詰められていくことで、少し遊び心が加わり、個人的にも好みなサイトデザインに仕上がりました。

CMSに関しては、全体のページ数自体少ないので導入はしていません。今後知識を付けつつ、勉強がてらワードプレスに組み込もうかなと考えています。

「まずは、作ってみる」という勢いで、今回1から自分のポートフォリオサイトを作ってみましたが、改めてWebデザインってめちゃくちゃ楽しいなと感じました。

自分のスキルがまだまだなところは山ほどありますが、これからスキルアップにつれてより良いポートフォリオサイトへと仕上げていきたいです。

ということで、1から作った僕(YUTO)のポートフォリオサイト、是非覗いてみて下さい。