ポートフォリオサイトをつくるためにやったこと
こんにちは！CODE BASE 5期(1月〜3月)のこなです〜。
CODE BASEを卒業してフロントエンドの勉強をつづけてきたのですが、興味のある会社があったので話を聞きに行ったら、
" 今まで描いたイラストやデザイン、GitHubのコード、これまでの活動など集約されたものがみたい！ "
といわれポートフォリオサイトをつくることにしたので、
まだ制作途中ですが公開しました！
https://konamiota.com/
※この記事はCODEBASE okinawa Advent Calendar 2019 の6日目の記事に当たります。
どうやってつくったか？
入社したらやるであろうワークフローを経験してみたかったことと、三井住友銀行さんのnoteに感銘を受けたので、よくあるデザインのフローにそってポートフォリオサイトをつくることにしました。
作成の順序
ペルソナ設定
↓
カスタマージャーニーマップの作成
↓
モックアップの作成( Figma )
↓
実装 ( Nuxt.js )
ペルソナ設定
普段の業務ではしっかりと設定すべきだと思うのですが、今回はポートフォリオサイトなのでペルソナは
・私に興味がある方 ・応募先企業の方 ・CODE BASEの生徒さん
と設定しました。（安易）
カスタマージャーニーマップの作成
こちらの記事を参考にカスタマージャーニーマップをつくっていき、ペルソナのタッチポイント行動から思考を考えてそこで見えてきた課題などをインサイトに書き出しました。
ざっと書き出したので字が汚いのはご愛敬。
なるべくペルソナにとって無駄な動きをさせないようにしたいな〜と思ったので、サイトをみた時に何がどこにあるかひと目でわかるようにすることと、どのページにいてもすぐにページ遷移できるようにヘッダーとサイドバーを両端に設置することでデザイン性を保ちながらボタンも認識しやすくなるのではないかと考えました。
モックアップの作成
ポートフォリオサイトをつくろうと決めた後すぐにStartup Lab Lagoonさんでbuckmoon Ink.のCDO山口さんからデザインツール『Figma』の使い方を教えてもらえるということで講座に参加しました。
Figmaはチームでの共同開発に優れていて、同じ画面で別の作業を同時に行えるのでハンズオンでも何を作るか決めて作業を分担した後すぐにデザインモックが出来上がって従来のデザインツールよりもかなり効率的だと思いました。
「UI/UXデザインツール『Figma』を使ったUIデザイン講座」
— Startup Lab Lagoon (@Lagoonkoza) December 8, 2019
無事終了しましたー🙌
ほとんどの参加者が、初心者にも関わらずモックツールの作成に成功しましたー💁♂️💁♂️💁♂️
来年度も、デザイン講座を
定期開催していく予定です！
ご興味のある方はお気軽ご参加下さい😍#LagoonKoza#figma@dhash_okinawa pic.twitter.com/HWU6ewpUMK
ちなみに沖縄タコライスのアプリ想定してLagoon広報担当の久貝さんと一緒につくったのですが、さすがライターさん、文章を考える早さと画像の配置などが秀逸でした。
そしてその後つくったモックアップがこちら、
今回のデザインのイメージはエモくシンプルにしようと考えていたので極力色を使わないようにして画面設計もシンプルに
TOP
- ABOUT
- CREATIVE (今まで作ったサイトやデザインなど)
- ACTIVITY (今までの活動など)
- CONTACT
として、画面遷移図も簡単につくりました。
FigmaはCSSも書いてくれて、コーディングに落とし込む時には全て使えるわけではなかったのですが、colorやheight, widthなどは参考になりました！
デザインの思想は、この記事に影響受けてるかも。
実装
今回はせっかくなので勉強中のVue.jsのフレームワーク、Nuxt.jsとNetlifyでサイト公開することにしました。
NuxtはSPA(Single Page Application)でつくって、CSSはVuetifyを元に構築しました。Nuxtはstyleにscopedが使えるのがめちゃくちゃいいですね。
技術のことは追々別で記事を書こうと思います。
NetlifyはGitHubと連携後、リポジトリを選んで、デプロイ時のコマンドを登録するだけで静的サイトを公開してくれます。
公開後もgithub にpushするだけで自動更新してくれるので、めちゃくちゃ簡単・便利、Netlify最高！！！！！！
まとめ
工程を分けたこととモックアップを作ったおかげで余計な雑念なくコーディングに落とし込むだけで、すぐ実装に取り掛かれて、全てにおいて思考し意味づけをできたので楽しかったです！
あとCODE BASE卒業後になんやかんやいろんなことをやっていたので、やっとプログラミングに集中できて気分が乗ってきたのでこのままポートフォリオサイトをどんどん改良していこうと思います〜！
p.s.
借りていたMacbook proがお亡くなりになり、元々持っていたメモリ4GBの MacBook Airで作業をし大変しんどい思いをしました....今までありがとうな...
おしまい
この記事が気に入ったらサポートをしてみませんか？