【作り直し】WEBデザイナー・ポートフォリオサイト制作日記 #2

元・WEBデザイナーのなみたです。
ブランクのあるWEBデザイナー職への復帰を目指してのポートフォリオサイト制作その２です。

ポートフォリオサイトについて、ほぼ完成まで到達しました。
就活で使うので、デザインやサイトの紹介は難しいのですが、今日はワイヤフレームを紹介させて頂こうかなと思います。

また、サイトを職業訓練の先生（現役プログラマー）にチェックしてもらって、反省点があったため、#1で書いていた構造とはガラッと変えたのでその部分を書いていきたいと思います。

職業訓練の先生にチェックを受けて

ポートフォリオサイトの形を作った時に、先生に一度見てもらいましたところ、ご指摘受けて、下記を直すことにしました。

結論【全て１ページにまとめる】

私が、以前「作品ごとに詳細ページを作り、詳しく説明を書こう」「プロフィールも詳細ページを作る」と書いていたのですが、ページ移動は採用担当者には負担だという話になりました。
そのため、ポートフォリオサイトは、トップの１ページのみになるように構成を変えました。

WORKS（作品一覧）の見せ方を修正

①作品一覧を、２列×2行など平坦に並べていた
⇒アピールしたい作品を１つ大きく載せてから、残りを平坦に並べる

②作品一覧から、作品ごとに「詳細」ページへ飛ばす
⇒採用担当者の負担を減らすため、一覧にそのまま詳細やこだわりを記載。情報量が多いものは、アコーディオン表示か、モーダルウィンドウで、あくまでページ移動しないまま見られるようにする。

実際のワイヤーフレーム

WORKS（作品一覧）の工夫

先生にチェックを受けたとおり、特にアピールしたい作品をまず一番上に大きく載せています。（１列、２列、2列…と続きます）
アピール作品に関しては、こだわりの説明が長くなるので、「こだわりポイント」ボタンを用意して、モーダルウィンドウで説明を見られるようにしています。

余談

ワイヤーではわからないところなんですが、最初は作品を目立たせるために、ポートフォリオサイトは非常にシンプルなデザインで作っていました。
ただこちらも先生に「もっとデザインをつけたら？」とアドバイス頂いたので、少しポップなフォントに変えてみたり、明るい色を入れたり、背景を設定したりしました。
デザインをつけたことで、ポートフォリオに個性が出せて良かったです。

また、「イラストにしようかな～～」と悩んでいた顔写真なのですが、結局頑張って写真にすることにしました。
ただ、外で撮るのがどうしてもうまくいかず、結局は部屋の綺麗な壁のところで、写真を撮りました……ｗ（補正はフォトショ頼り）