LOGzeudon

名古屋で働いているWebデザイナーのブログです

自分のポートフォリオサイトをBento風にリデザインしてみた

STUDIOで制作〜公開中のポートフォリオサイトをリニューアルしました。
ろくじゅうどデザイン

きっかけは、海外で流行りつつある、プロフィールサイト作成サービス「Bento」を見たこと。Bentoは招待制で、利用にはInvite Codeが必要です。こちらから既に公開されているサイトを閲覧できます。

bento.me

サービス自体は、ブロックを組み合わせて自分のページをつくる...というシンプルな仕組みです。ユーザーがその中で工夫し、それぞれユニークで魅力的な紹介ページに仕上げています。

「自分の場合はどうするだろう」と、STUDIOの練習も兼ねて今回ポートフォリオのデザインに取り入れてみました。

実装内容

PCでの表示

私の場合、主に仕事用のアカウント(本名・屋号)と、趣味用のアカウント(rokuzeudon)とがあり、それぞれ分けてレイアウトしました。

タブレットサイズでの表示

モバイルサイズでの表示

Bentoの場合、ブロックが画面幅に応じて伸縮するのですが、STUDIOでは縦横比を維持した拡大縮小が通常できません。そのためだけにハック的な実装をするのは億劫だったので、モバイルサイズではブロックが横長になるよう調整しています。

STUDIO上ですから、「仕組み」にとらわれず、要素を自由に追加できます。登壇や寄稿といった、過去の活動の「ピックアップリスト」を下部に配置しました。

ちなみに、以前ポートフォリオはこんなデザインでした。

余談

Bentoを眺めていると、さらにREAD.CVというサービスも見つけました。
※CVとは、英文履歴書のこと

これらのサービスを眺めていると、様々な職種・立場の人が自分の実績をどのようにまとめ、発信しているか学べます。魅力的なポートフォリオサイトを実装し独自ドメインで公開している方も多かったです。自分のサイトにも、学びを随時取り入れていきたいですね。