koke portfolio

kokeportfolio

kokeportfolioの画像です。
制作期間
2週間
使用技術
HTML Sass EJS gulp jQuery
使用ソフト
XD

flow

作品概要

就活のためにも自分の作品をまとめて紹介するポートフォリオが必要になるのでこのkokeportfolioを制作しました。gulpとEJSを使ってコーディングしました。

制作の過程・思考

ポートフォリオは実際に話す代わりに自分について伝えるのが重要な役目だと考えています。なのでまず私自身がどんな人間なんだろうと振り返ってみるところから始めました。振り返ってみて、私は派手で明るい人間ではなく、どちらかというと静かに地味にコツコツやる人間だと考えたので、ポートフォリオも派手に明るくというよりは余分な装飾や情報を絞って、色も少なく背景の黒と文字色の白で統一しました。

今まで通りHTML、CSSを使ってコーディングして、WordPressを導入するというだけではあまり勉強にはならないのかなと考えたので何かしら他の技術を使って制作していこうと考えました。そこでちょうどSassのコンパイルのためにgulpの環境を整えていたので、そのままgulpで扱えるEJSを使って制作しました。静的サイトジェネレターを使って制作するということも考えましたが、まだ扱えるところまでJavaScriptをマスター仕切れてないなと感じていたので、環境を整えれば今までのHTMLと同じように書いていけるEJSを利用しました。Sassと一緒に使っているので、今後ポートフォリオの改善の時のメンテナンス性も上がると考えています。

デザイン面では全体的にシンプルな分、細かいところを拘りました。トップのナビゲーションは大体のWebサイトでヘッダーに横並びになっているばかりで、同じようにしてしまっては面白味もないですし、たくさんの学生のポートフォリオをみている制作会社さんの印象も薄くなってしまうと考えたのでトップに大きく縦に並べてみました。作品制作へのリンクも他のポートフォリオサイトを見ているとブログの記事みたいなcardで見せていることが多いので、トップのナビゲーションの部分と同じような理由で見せ方を工夫しました。制作作品のリンクボタンなどを最近のUIのトレンドでもあるニューモフィズムを使っています。アクセシビリティの面では、よくないところが多いというのは理解していますが、見てもらえる対象が一般の人たちではなく、クリエイティブな職業の人たちなのでその辺りは気にする必要性がないと考えました。それになかなかニューモフィズムは使う機会も少ないので、ある程度自分で好きなようにできるポートフォリオで使ってみたいという思いもありました。