キャッチコピーを除いたロゴの画像
INTRODUCTIONの画像

はじめに

ポートフォリオをご覧いただきありがとうございます。 杉山 一聖(イッセイ)と申します。平成一年のクリスマスに生まれたことが、「一聖」という名前の由来です。自分の名刺代わりになるようなポートフォリオを目指しています。

ABOUTの画像

杉山一聖について

龍谷大学大学院理工学研究科電子情報学専攻修了後、京都のオーダーメイドのアルミ部品を製作する金属加工会社にて切削工程を設計するプログラマーを2年、現場にて1年を過ごす。その後、地元徳島に帰省し電気設計者として充填機の制御盤設計、タッチパネルのUI設計、機械の動作に関するプログラムに5年携わってきた。

一見デザインとは関係ないようだが「ものづくり」という点で共通しており、機能面と使いやすさにフォーカスしてきた。次は目に触れる側の「ものづくり」を行いたいと思い転職を決意。最終的にはプログラムもできる多角的な視点を持つデザイナーを目指すことに。その後、職業訓練に加えて独学でデザインを学びインハウスデザイナーとして地元徳島の化粧品メーカーに就職。2026年には働きながらデザイナーとしてスキルアップのため資格を6つ取得。

良いデザインは相手に考えさせずに伝えたいことを正確に伝えることができる思いやりの結晶だと思っています。UI/UXを意識したデザインだけでなく、3年後にはマーケティングの観点からデザインの提案ができる本質的なデザイン力のある人材になります。

SKILLの画像

できること

テクニカルスキル&資格

Illustrator

Photoshop

HTML5&CSS3

JavaScript

Figma/XD

WordPress

ITパスポート

Illustratorクリエイター
能力認定試験エキスパート

Photoshopクリエイター
能力認定試験エキスパート

Webクリエイター
能力認定試験エキスパート

色彩検定UC級

色彩検定2級

4つのアイコン
4つのアイコン
4つのアイコン
3つのアイコン
4つのアイコン
4つのアイコン

Illustratorを使って名刺やラベルデザインができます。Photoshopを使った基本的な画像補正や切り抜き、バナーデザインができます。両デザインソフトともにクリエイター能力認定試験エキスパートを取得しているため実務レベルは問題なく使えます。

HTML5&CSS3ですが、このサイトのコーディングに使っています。効率よく書けているかと聞かれるとまだまだですが、簡単なサイトデザインの実現ができるレベルだと思っています。

JavaScriptもこのサイトに使用しました。過去にjQueryのプラグインを用いてシンプルな動きの部分を実現することはありましたが、実装を想定したJavaScriptの学習は始めて1ヵ月程度のレベルです。より複雑な動きを実装できるように引き続き学習していきます。

Figmaを使ってワイヤーフレーム、デザインカンプの作成、プレゼン資料作成、プレゼンテーションを行うことができます。またローカルスタイル、コンポーネント化、オートレイアウトの機能を用い効率よくデザイン案の作成が可能です。XDに関しても前職で使用しており、問題なく使えます。

WordPressを使ってサイト制作ができます。PHPを用いた改造は現段階ではできません。

WORKSの画像

制作物一覧

制作実績のスマートフォン用のサムネイル画像 制作実績のパソコン用のサムネイル画像

制作実績

前職での制作物の一部、可能なものだけを抜粋して載せています。

バナー制作のスマートフォン用のサムネイル画像 バナー制作のパソコン用のサムネイル画像

バナー制作

決められたお題の中で制作したバナー作品を載せています。

サイト制作のスマートフォン用のサムネイル画像 サイト制作のパソコン用のサムネイル画像

サイト制作

HTML5&CSS3とJavaScriptを組み合わせた作った本サイトの説明になります。

名刺制作のスマートフォン用のサムネイル画像 名刺制作のパソコン用のサムネイル画像

名刺制作

デザインした名刺を載せています。印刷物は印刷して実寸で見て比較することを大事にしています。

よくあるデザイン表現のスマホ用のサムネイル画像 よくあるデザイン表現のパソコン用のサムネイル画像

よくあるデザイン表現

表現の引き出しを増やすためにデザインでよく使われる技法について学びました。

トレンドデザインの作り方のスマートフォン用のサムネイル画像 トレンドデザインの作り方のパソコン用のサムネイル画像

トレンドデザインの作り方

必要となればトレンドのデザインも上手く取り込めるように、作り方を学びました。

スライド資料作成のスマートフォン用のサムネイル画像 スライド資料作成のパソコン用のサムネイル画像

スライド資料

職業訓練で発表したプレゼン資料を載せています。Google Slides, Figmaを使って作成しました。

ランディングページ模写のスマートフォン用サムネイル画像 ランディングページ模写のパソコン用のサムネイル画像

バナー/LPトレース

模写することで制作の流れや構成の作り方の練習をしました。これから作品を増やしていきます。

カルーセル用の制作物の画像
カルーセル用の制作物の画像
カルーセル用の制作物の画像
カルーセル用の制作物の画像
カルーセル用の制作物の画像
カルーセル用の制作物の画像
カルーセル用の制作物の画像
カルーセル用の制作物の画像
カルーセル用の制作物の画像
トップに戻るボタン