ポートフォリオサイト

Design / GatsbyJS,PostCSS

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

デザインの軸を決める

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

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

「あるべき姿」を定義

軸が決まったら、中身の要素を決めます。国内、海外問わず様々なデザイナーさんのポートフォリオを30〜40ぐらい拝見し、シンプルに以下の構成にしました。

自己紹介
文字通り自分自身の事を綴っていくページとして作成。スキルセットもここに配置していく。
作品
サービスには、サービスデザインを配置。
ブランドには、コーポレートを含めたデザイン・VI系統を配置。
グラフィックには、DTPや企画書、バナー等を配置。
自主制作物には、自分自身で企画したデザイン、ビジネスを配置。

将来的には、自分自身でサービスを作っていきたいと考えている為、自主制作物の項目を設けました。

構成を決める

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

当初考えていた構成

構成が決まったら、UIパーツを考えていきます。それはこのポートフォリオサイトを見ていただければと思いますが、主に以下の要素に拘りました。

スマホ時のメニューは、押しやすい様に下に配置
スウィートスポットに、一番押して欲しいメニューを配置(画像:uxmovement)
ファーストビューに、自分がやっている事・できる事を配置
スキルの深掘りに、ランクを示す星を配置

何で作るかを決める

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

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

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

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

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

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

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

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

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

GatsbyJSはReact製の静的サイトジェネレーターで、データベースなしで、かつSPAでサイトを作る事ができます。これとnetlifyCMSを導入し、手軽にCMSを導入する事に成功しました。

netlifyCMSは、静的サイトジェネレーターにCMS機能をつける事ができる、Headless CMSと呼ばれるものの一つです。Githubのアカウントと連携し、編集した記事をMarkdownで書き出し、netlifyと連動し、自動的にMarkdownをデプロイしてくれるというものです。

これにより、静的サイトジェネレーターの弱点の一つであった、「パソコンがないとサイトを更新できない」という問題が解決され、誰でもデータベースを使わずに、ブログを作り更新する事が可能となります。

SPAのメリットを活かしてみる

SPAにすることはやりたい事を達成するための手段であって、それ自体が目的ではなかったのですが、折角SPAで作ったので、メリットを最大限活かしてみようと思いました。

下タブで滑らかな遷移を実現
PWAに対応させてネイティブアプリっぽくする

認証を導入する

ただのサイトを作るだけなら、SPAにしなくても問題ありません。なぜなら、SPAはサイトを作るのではなく、アプリケーションを作るのが目的だからです。

サイトとアプリケーションの定義は、主に以下の違いだと思っています。

サイト
条件分岐が発生しない、静的なペラもので構成されるもの
例)コーポレートサイト、PRサイト、ブログ、CMS・静的サイトジェネレーター製のページ
アプリケーション
条件分岐が発生する、動的に表示する内容が変わるもの
例)サービスサイト

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

ここで、サイトが一気にアプリケーション化しました。Firebaseの設定、ログイン前後での挙動の配置、認証の設定等全てが手探りでしたが、無事にアプリケーション化させる事に成功しました。

Firebase Authを使った認証の導入

制作を終えて

元々、自分自身で企画・制作・実装まで一貫して考えたサービスを作りたいと思っていた為、ポートフォリオサイト制作で習得したSPAと認証を使って、決済のWebサービスと連携して学習サイトを作ってみたいと考えています。

お問い合わせはこちら