ポートフォリオサイト

Design / GatsbyJS,PostCSS

私個人のポートフォリオサイトです。「自分自身を知ってもらう」事を軸として定めたデザインにしています。実装環境にも拘りつつ制作を行いました。

デザインの軸を決める

ただ闇雲に作っても方向性を見失うと思うので、クリエイティブを作る際は「自分なりの軸」を決める事にしています。その軸とは、「クリエイティブのあるべき姿」であると思っているので、まずポートフォリオサイトの「あるべき姿」を決めました。

ポートフォリオサイトは、デザイナーにとって「名刺」の様なものですので、「見ている人に、自分がどんな人間(デザイナー)か、知ってもらう」事を軸と定めました。この軸は現在でも変わっていないので、何か変更を加える時は、この軸を基準に考えています。

「あるべき姿」を定義

構成を決める

軸と入れる要素を固めたので、次は構成を固めていきました。当初はシンプルを意識してデザインしていたので、構成と繊維も比較的シンプルな構成にしました。

当初考えていた構成

スマホ時のメニューは、押しやすい様に下に配置

スウィートスポットに、一番押して欲しいメニューを配置(画像:uxmovement)

ファーストビューに、自分がやっている事・できる事を配置

スキルの深掘りに、ランクを示す星を配置

何で作るかを決める

ある程度の構成も出来て、FigmaでUIパーツの作成も出来た段階で、「何で作るか」の技術選定をする事にしました。


Go言語性の静的サイトジェネレーターである、「HUGO」で当初は作成しました。
複雑な設定やデータベース無しで記事が書ける更新性の高さ、動作の軽量さ、多言語対応まで含めた柔軟性の高さが、この技術を選んだ理由です。


Node.js製のCSSフレームワークである、PostCSSを使ってCSSを作成しています。プラグインによる柔軟性の高さ、トランスパイルの速さなどに惹かれて選びました。


ホスティングサービスは、netlifyを採用しました。GitのRepositoryを自動的に監視して、Deploy、公開までワンストップで行ってくれ、かつ独自ドメインのSSH対応、フォームの設置もサポートしてくれているのが、このサービスを選んだ理由です。

アプリケーション化させる

無事にHUGOでサイトを作成し、公開することが出来ました。しかし、限定的に公開したいものがある場合、認証を導入できないという欠点がありました。

Basic認証を使えばサイトに認証を導入できますが、iOSHIGのAuthenticationにのっとり、可能な限り認証せずにサイトを公開させたいと思いました。

そこで、一度作ったHUGOを全て捨てて、GatsbyJSでリプレースする事にいたしました。

このガイドラインにのっとり、出来るだけ認証を遅らせたかった

GatsbyJSはReact製の静的サイトジェネレーターで、データベースなしで、かつSPAでサイトを作る事ができます。


無事にGatsbyJSでSPA化させたら、次はFirebase Authを使って、ポートフォリオサイトに認証を導入していきました。

Firebase Authを使った認証の導入