N. Designs

Interactive Portfolio

ABOUT

Name

岡本おかもと　祐樹　ゆうき

フリーランスのWebデザイナーとして「N.Designs」の屋号で活動しています。

HTML/CSSをベースに、JavaScriptやVue.jsを用いたインタラクティブなUI設計・実装まで対応し、
見た目だけでなく「使いやすさ」「操作感」「体験」を重視したWeb制作を行っています。

また、Viteを用いたモダンな開発環境をはじめ、別PCでの自宅サーバー（Nginx / Apache / Node.js / PHP）の構築・運用、
Gitによるバージョン管理や開発フローを含め、制作環境そのものも自分で整えながら開発を行っています。

さらに、自宅サーバー上にローカルLLM（AI）環境を構築し、
外部にデータを送信しない安全な検証環境で開発・検証を行うことで、
セキュリティや機密性にも配慮した制作体制を整えています。

新しい技術も積極的に取り入れていますが、単に新しさを追うのではなく、
安定して安全に動作することを前提とした技術選定と実装を重視しています。

一つひとつの制作に対して、構造設計・操作性・保守性・拡張性まで含めて丁寧に作り込み、
長く運用できる品質を意識したWebサイト制作を行っています。

Work

インタラクティブぬりえアプリ

Web上で動作するデジタルぬりえアプリを制作。単なる描画機能ではなく、操作感やUIの挙動まで含めて、触っていて心地よい体験になるよう設計しています。

デモ版ではシンプルな構成に絞っていますが、実際の納品物ではズーム操作、拡張パレット、Undo / Redo なども実装し、より実用的な体験へ発展させています。仕様を並べるのではなく、使いやすさと体験価値が自然に伝わるよう組み立てた実績です。

デモを見る

WordPressカスタマイズ

WordPressにおいて、カテゴリ単位でのパスワード保護機能をカスタマイズ実装。地方自治体の部署ごとに分けられた連絡や記事表示を行う用途のご依頼に対応し、閲覧制御と運用性を両立した構成を構築しました。

管理画面から各カテゴリのパスワードを管理できるようにし、運用負荷を抑えながら基本的なセキュリティにも配慮した構成で実装しています。既存構造を維持しつつ、要件に応じた機能追加・調整にも対応した実績です。

本案件は性質上、詳細や実画面の掲載は控え、概要のみのご紹介としています。

SKILL

HTML5

HTML4の頃から独学で少し触る機会があり、独学での知識と長く触らない時期があったため職業訓練校で基礎から学び直しました。訓練校在学中になにか資格として持っておいたほうが良いかと思いWebクリエイター能力認定試験スタンダードを取得

CSS3

HTML5と同じく独学で少し触っていたもののレスポンシブデザインなどの進化したデザインを学ぶため職業訓練校で基礎から学び直し基本的な内容から様々アニメーションまで習得しています。

JavaScript

こちらも職業訓練校で基礎から学んだものですが、自分自身で一番興味があり強みでもあるスキルです。今もなおこんなこともできるのかという発見も多く制作意欲のわく言語です。

Vue.js

JavaScriptの学習からVue.jsでのフレームワークを知り、chatGPTに尋ねながら習得中です。

Photoshop

基本的な操作とレタッチ、加工などひと通りの操作はできます。美しい写真に興味が強く、もっと磨いていきたいスキルです。

Illustrator

基本的な操作に加え、SVGアニメーションなどで使用するSVGファイルのパスの加工などロゴデザインやテキストデザイン以外にも活用しています。

WordPress

こちらも過去に独学で学んでいたものを職業訓練校にて基礎的なことを学び直し、基本的な操作、デザインは可能です。

chatGPT

独学の際に重宝しています。やりたいことをきちんと言語化して尋ねることで適切な返答を得ることができ、知らない技術や思いつかないアイデアのヒントを日々得ています。APIの活用等にも挑戦していきたいです。

php

今のところサーバーサイドの言語で唯一少しはできる言語です。データベースの構築やAPIの作成などの基本的なことはできます。

Stable Diffusion

自宅PCにインストールし商用可能なモデルでバナーやサイトに使用できる画像の生成をしています。chatGPTを活用してプロンプトを生成するなど色々な方法を独学で身につけています。

python

まだほとんど触れることができていませんが、今後習得していきたい言語です。

Node.js

サーバーサイドの言語として習得したい言語です。近々自宅の余っているPCでNode.jsの学習用にサーバーを建てる予定です。

CONTACT

このお問い合わせフォームは、見た目だけを整えた簡易フォームではなく、
実案件への組み込みも想定して設計・実装した制作物です。

Structure

入力項目、確認画面、送信処理までを一連の体験として整理し、管理者向け通知メールと送信者向け自動返信メールまで含めて運用しやすい構成にしています。

Security

フロント側の入力チェックに加えて、サーバサイドでも必須項目検証、形式チェック、文字数制御、HTMLタグ除去、Honeypot、CSRF対策を行う前提で構成しています。

FORM ARCHITECTURE

問い合わせフォームは単独ページとして設計し、
既存サイトの共通パーツと組み合わせることで、
自然に統一されたUIとして組み込める構成にしています。

お問い合わせはコチラ

expand_less