ポートフォリオWebサイト

ポートフォリオWebサイト
Webサイト

制作範囲: 企画/webデザイン/コーディング

URL: https://fukase.info

Trial and Error

制作中の深瀬鮎美のあたまの中身と試行錯誤をみる

Last

制作にあたっての目標

転職を目指すため、自己PRを実現できるクオリティのポートフォリオを作成する。

制作範囲

企画・ワイヤーフレーム/サイトデザイン/コーディング

制作期間

企画 : 1日　ワイヤーフレーム : 3日　デザイン : 10日　
コーディング : 1ヶ月(HTML : 2日)　これから : Wordpress化する！

ワイヤーフレーム

使用ツール

Illustrator/Photoshop/Figma/WebStorm

デザインカンプ

工夫点とこだわり

まず、「未経験から転職を目指すポートフォリオ」をテーマに、どんな要素が必要なのか、ワイヤーフレームを作成する中で、 ①作品自体はもちろん、作成時の思考プロセスなどをきちんと伝える。②採用担当の方が時間の無い中でみている中で、どのくらい目にとまって、どのくらい見てもらえるのだろう。という2つの点から、①思考プロセスを、きちんとした文章では無く、あえて取り留めの無い考えのまま魅せる。 ②現状、ポートフォリオサイトの何%まで閲覧済みかを表示させる仕組み。を思いつきました。参考として、多数のポートフォリオやその他のwebサイトを見たところ、自分ではこれらは見つけられなかったため、問題解決のためのデザインを自分なりに達成できたのではないかと思います。制作プロセスをのせる際、未経験だからこそ起きた、あちこちに揺れる思考の流れを、ありのまま思いつきの羅列を追加することで、自分なりの工夫や成長を実際にみてもらえると考えました。そして、もう一つの閲覧%の仕組みは、自分の体験でも「これは後どのくらいあるのだろう」と考えることが、動画を視聴しているときにあり、そのときには、バーや残り時間を見ることで解決でき、「もう⚪︎割はみたから残りもみてしまおう」と思ったことから
もしかしたらそれが無いよりも多くのページを閲覧してもらえるのではないか、と考えました。

目的

転職活動に使用できるクオリティのポートフォリオを作成する。
未経験なので、きちんとしている / 仕事ができそう / 信用できそうという印象を持ってもらえるようなデザインにする。
問題解決を実現するデザイン、というテーマからはずれないように常に意識する練習をする。
自分のできることを、できる限り伝わるようにアピールする。(デザイン/Javascriptで時刻を取得する/ダークモードの切り替え/など)
Figmaをたくさん使って慣れる。

sp版デザインカンプ

デザイン

今回の「問題」である、未経験からwebデザイナーへの転職を実現するために、レイアウト力やレスポンシブデザインができることなどを、一目で見てもらえ、信頼して仕事を任せてもらえるような、雰囲気を作るべく、シンプルだけど見せ場のあるデザインを心がけました。また、ポイントとなる部分にはグラデーションカラーを使い、シンプルなデザインで動きが全く無いように見えて落ち着きすぎるのを防ぎ、また、色合いからは自身の性格を感じ取ってもらえるようにしました。(灰色がかった淡い緑からはおだやかで、落ち着きのある印象を受け、黄色みのある白からは、光が差すような明るい気持ちを感じられるかと思います。)
フォントは美しくシンプルなfuturaに似たものとhelveticaに似たものを選び、文字間をゆったりとり、大声ではないけれど、きちんと明確に聞こえて美しい声、という印象になるようにしました。
UIデザインの面では、ボタンや押せる部分はごく細い線で囲い、hover時に拡大するアニメーションを使い、クリックできるかどうかが、分かりやすいように心がけました。

今回気がついたこと・得たこと

・Figmaを使いこなせるよう、今回はデザインカンプまでをFigmaで作成。paddingの統一やフォントや行間の統一が容易になり、便利さを実感できました。
・ナビゲーションを固定にしているので、デザイン時には入れていた、topへ戻るボタンは不要ではないか、と思いました。
・ナビゲーション以外の固定部分の扱い方。
・前回よりも行き当たりばったりでは無く、計画されたコーディングをデザイン時から意識できました。次回はより効率よく進められるのではないかと思います。