ポートフォリオサイト リシェイプ

ポートフォリオサイトを作り直す

デザイン面で見直した方が良いという意見があり、思い切って作り直してみた。

ファーストビューにインパクトを

ウェブサイトにおいて、ファーストビューの役割は大きい。印象的なファーストビューを演出するため、大きな画像と大きな文字を一つ、というやや極端な方策を取った。これからWebの世界に羽ばたいていく自分になぞらえ、羽ばたく鳥に「翔」の文字を大きく配置した。ちょっと大きすぎるのではないか？と作りながら不安に感じたところもあったが、インパクトを重視しこのサイズにした。

デザインのポイント

デザイン面で意図的に取り入れたものは、上記のインパクトのある画像だけである。jQueryやcss3による派手な演出は一切取り入れていない。これは、どんな環境でも同じように閲覧できる点を意識したところによる。この考えの延長線上に「どんなデバイスでも見られるようにしたい」という思いがあり、レスポンシブデザインを取り入れた。

コンテンツの配置

大まかなコンテンツの並びは「Web業界を志した理由」「自己紹介」「スキル紹介」「熱意を伝える」といった順序になっている。デザイナーやプログラマーではなく、ディレクター志望なのでスキルを前面に押し出すような作りにはなっていない。また、Webだけではなくoffice系の作品を掲示したり、ディレクションについての考察文を掲載したりと、通常のWeb訓練生のポートフォリオサイトとは一風違ったコンテンツが特徴だ。

反省点

クリッカブルコンテンツ(色が赤い箇所)とそうでないコンテンツ(色が青い箇所)のデザインが似ており、その点でユーザビリティが低い。非クリッカブルエリアは明らかにクリックできなさそうなデザインにすべきであった。
また、賑やかな感じが出るように様々な種類の画像を使ったが、結果統一感が不足しているような印象も受ける。

感想

一応、ポートフォリオサイトが形になった。後は気が付いた点を徐々に修正していく予定だ。ポートフォリオサイトには正解の形というものがない。自分が何を訴求したいかと、訴求したい相手が何を求めているかを熟考し、それに見合ったコンテンツやデザインを考える必要がある。
実務ではクライアントの意向に沿うため、打ち合わせを重ね方向性を作っていく。その点でポートフォリオサイトでは、クライアントと事前に打ち合わせができない。何がニーズなのかを良く見極め、自分なりに形にするという行為の難しさを改めて感じた。
この経験はクライアントのニーズを読み取るスキル向上に役立つと考えられ、実務に活用していきたい。