Works
Sakamoto Design
2025
Website Development
Portfolio Site, Coding, Web Design
自分のポートフォリオサイトをNext.js(TypeScript)で、デザイン制作からコーディングまで全てを実装した事例をご紹介します。
I would like to introduce a case study of my personal portfolio website, which I designed and developed entirely by myself using Next.js (TypeScript).
自己PRや技術の学びとしてポートフォリオサイトをアップデートし続ける
ポートフォリオサイトのリニューアルをしました。コンテンツは以前のサイトのものを引き継ぎながら、デザインの全リニューアルと情報の整理整頓を行っています。
自分の中では、ポートフォリオサイトを自己PRや技術の学びのという位置づけをしており、そのどちらも実行しました。自分について伝える情報を、少なすぎず多すぎず掲載することを心がけ、ユーザーに没入感を覚えてもらえるようなデザインづくりを目指しました。
当ポートフォリオサイトはNext.jsを利用して制作しました。ルーティングはAppRouterで、記述言語はTypeScriptを採用しています。また、Next.jsといえばTailwind CSSとの組み合わせが特徴的ですが、今回はCSSフレームワークを用いずに制作を行いました。
WorksとPortfolioのデータはmicroCMSに入れ、WebサイトとmicroCMSを連携させています。
デザインからコーディングまで全てを一人で行い、コンテンツは既にあったので約2週間でリニューアルが完了しました。完璧にしてから公開というより、最低限満足できる状態にして公開、その後細かい部分やこうしたいと思った部分を更新していくという柔軟で素早い開発体制をとっています。
Continuously updating my portfolio site as a form of self-promotion and technical learning.
I’ve renewed my portfolio site. While carrying over the content from the previous version, I completely redesigned the layout and reorganized the information.
For me, the portfolio site serves both as a self-promotion tool and a way to showcase my technical learning — and this renewal reflects both purposes. I focused on presenting just the right amount of information about myself — not too much, not too little — and aimed to create an immersive design that draws users in.
The site is built with Next.js, using the App Router for routing and written in TypeScript. Although Next.js is often paired with Tailwind CSS, I deliberately chose not to use any CSS frameworks this time.
The data for Works and Portfolio is managed in microCMS, and the website is integrated with microCMS to fetch and display that content.
I handled everything from design to coding on my own. Since the content was already prepared, the renewal was completed in about two weeks. Rather than waiting until everything was perfect, I released the site once it reached a satisfactory minimum level, and I plan to continue improving and updating parts of it as new ideas come up — a flexible and fast-paced development approach.
デザインへの姿勢や価値観、人柄や雰囲気を感じられるデザインを目指しました
デザインの方向性としては、シンプルかつ遊び心を持たせるということに主軸を置きました。装飾を控えめにしながら、色のついたワンポイントで見た目を引き締め、ドット絵やちょっとしたイラスト、大きめのフォントを配置することによってデザインが寂しくならないようにしています。
フォントは角のないサンセリフ体をメインで使用し、トップページメインビジュアルのワンポイントでは角のあるセリフ体を使用しました。全体的な配色は、ブラック・ホワイト・グレーを多用、ワンポイントでイエローを採用しました。使用カラーは全て和色にあるものとなっています。
トップページのメインビジュアルには人によって捉え方の変わる抽象模様の画像を配置し、触れる水面のように波打ち画像自体が少し動くアニメーションを設定しています。その後ろに続く要素にもスライドやフェードインなどのアニメーションを設定しています。
I aimed to create a design that conveys my approach to design, my values, personality, and overall vibe.
In terms of design direction, I focused on keeping it simple yet playful. While keeping decorative elements minimal, I added subtle accents of color to give the visuals a crisp feel. To avoid a dull or empty look, I incorporated pixel art, small illustrations, and large typography.
For fonts, I mainly used rounded sans-serif typefaces, and for the main visual on the top page, I used a serif font with sharp edges as a visual accent. The overall color scheme centers around black, white, and gray, with yellow used as an accent color. All of the colors are based on traditional Japanese color names.
The main visual on the homepage features an abstract pattern that can be interpreted differently by each viewer. This image includes a subtle animation that causes it to ripple like the surface of water. Subsequent elements on the page also include animations such as slides and fade-ins.
「コード」をテーマにしたロゴ
ヘッダーにはロゴも表示しています。
ロゴはJANコードを横に潰したものを起用しました。
コードによってWebブラウザ上に表現されるWebサイト、会社員時代に馴染みの深かったJANコード。どちらもコードであり、情報を示したり表したりするものです。
Webサイトを制作する上でコードは必要不可欠であり、コーディングはWebサイト制作のシンボルともなり得ます。また、会社員時代に携わっていたパッケージデザインにも、商品の情報を読み取らせるためのJANコードが必要不可欠でした。
Webデザイナーとしてのシンボルの一つである「コード」と、今までお世話になってきた「JANコード」と、共通する「コード」をテーマにしてロゴを制作しました。
ただ表示するだけではありきたりだと思い、横に潰してコードをあらわす抽象模様に見えるようにデザインしています。ちなみにJANコードに著作権はありませんが、コード自体を発行するためには専門機関への申請と料金の支払いが必要なのでご注意くださいませ。
A code-themed logo
The header also displays a logo.
The logo is based on a horizontally compressed JAN code.
Websites are expressed on web browsers through code, and JAN codes were something I was very familiar with during my time as a company employee. Both are forms of "code"—they convey and represent information.
When creating websites, code is essential, and coding can be considered a symbol of web development. Similarly, in my past work with package design, the JAN code was indispensable for conveying product information.
With this in mind, I created a logo themed around "code"—a symbol of my work as a web designer—and the "JAN code," which supported me during my corporate years. These two types of code share the same purpose: communication of information.
I wanted to go beyond a simple display and instead designed the logo to look like an abstract pattern that represents code, by compressing the JAN code horizontally.
Please note that while JAN codes themselves are not protected by copyright, issuing actual JAN codes requires applying to a designated organization and paying a fee.
