はじめまして。 ご覧いただきありがとうございます。
飲食店で働く中で店内のPOPやメニュー表などの掲示物を自分でデザイン、印刷したことをきっかけにWebデザインに興味を持ち、
その後スクールでHTML・CSS、Photoshop、Illustrator、Figmaなどを学び、webデザインの基礎を身につけました。
このポートフォリオには学習中に制作した自主制作の作品を中心に掲載しています。
まだ経験は浅いですがどうぞよろしくお願いいたします。
★★★☆☆
バナーやSNS投稿用画像の制作、写真のレタッチ業務を想定し、以下のような操作が可能です。
画像合成とレタッチ
スマートオブジェクト、変形、切り抜き(範囲選択とレイヤーマスク、チャンネル操作)、修復ブラシ、色調補正、 ガウスぼかし、ブラシツール(流量、不透明度調整)、クリッピングマスク、覆い焼き・焼き込み、描画モード、複数レイヤー構成
レイアウト
タイポグラフィ調整(フォント、字間、行間、サイズ他)レイヤースタイル(ドロップシャドウ他)
★★★☆☆
ロゴ、アイコン、ピクトグラム、装飾モチーフなどのベクター素材の制作を中心に、以下のような操作が可能です。
図形作成
ペンツール、図形ツール、アンカーポイント操作、整列、パスファインダー(合体、型抜き)、 アピアランス(線と塗り、カラーパレット、グラデーション)、複数レイヤー構成
文字・入稿
トリムマーク作成、文字ツール、アウトライン化など
★★☆☆☆
illustratorと同じく主に図形作成に使用しています。コンポーネント、オートレイアウト、ワイヤーフレーム作成、デザインカンプ作成が課題です。
★★☆☆☆
タグの基本（!DOCTYPE html, head/body, html lang="ja", h1〜h6, p, img, a href,
class/id, ul/ol/li, dl/dt/dd, divなど）、
プロパティの基本(padding/margin, height/width, font-size, color, background, box-shadow, text-align,
font-familyなど)、
CSSセレクタなどの書き換えや調整が可能です。
レスポンシブ対応に伴うプロパティ(display, grid-template-columns, justify-content, z-index, flex-wrapなど)や,
フォーム設置(form action, method, typeなど)は勉強中です。
2026/02/17正式バリデーター(Nu Html Checker)でエラーチェック済み
自主制作
制作時間
原画4時間、バリエーション2種(紫、青のフレーム)で2時間、モックアップ2種で1時間40分
背景・ターゲット
美容、ファッション、雑貨、インテリア、ファブリック(生地)、食品パッケージなど。 店舗やメーカーの統一感のあるブランディング展開を想定した、再利用可能な装飾用のグラフィック素材を制作しました。
こだわり
楕円形のみで構成された図形の作画に挑戦しました。線の太さ、余白、配置のリズムによる全体の統一感を崩さないように、なおかつ単調にならないように意識して制作しました。 モックアップ作成の際にブレンドモードでは馴染まなかったため、ブラシで明暗を塗りました。
工程
原画とバリエーションはfigmaにて制作。フリー素材を下敷きとして改変しながら再構成し、画像トレース機能を使わずに図形とパス操作で作画しました。 各オブジェクトごとに分解し再配置する事でモジュール設計が成立するよう、途中経過のパーツを保存してあります。 バリエーション紫は原画をそのまま配置した結果、意図せず禍々しい印象になってしまったため、線を細く改変したバリエーション青を作成。 再配置の際にグループ化が複雑になると再編集に支障があるため、適時解除しました。モックアップ作成工程の一部にibispaintを使用。
アイコン含め自主制作
制作時間
作品3時間(ラフ5分、店舗検索20分、公式SNS5分、営業時間30分、メニュー35分、新着情報25分、お問い合わせ10分、全体調整やアピアランスなど45分)
モックアップ用画面テンプレート1時間、モックアップ30分
背景・ターゲット
店舗公式アカウントのナビゲーションUIとして制作。
工程
作品はillustrator、モックアップは主にfigmaと一部ibispaintにて制作。モックアップ用画面テンプレート内の電池やwi-fiアイコンも自作。スマートフォンはfigmaのプラグインにて生成。
自主制作
制作時間
切り抜き35分、画像の色調補正やレイヤースタイル38分、文字タイポグラフィーとレイヤースタイル1時間33分、 リサイズしたバリエーションの作成1時間
背景・ターゲット
想定案件：ネイルサロンのイベントweb告知用バナーと投稿画像の制作 支給素材：写真1点
トンマナ：目立つ、読みやすい、高級感抑え目で親しみやすい、女性的で清潔感を損なわない 担当工程：画像合成、テキスト配置、サイズ展開
制作会社でのデザインアシスタント業務を想定し、支給素材とトンマナ指定がある前提で、レイアウトの可読性重視でweb広告用バナーと投稿用画像を兼ねて制作。
工程
既存のラフ画を使用しphotoshopにて制作。使用画像はfireflyにて生成。
自主制作
制作時間
レイアウトラフ画43分、背景画像クリッピングマスク処理30分、文字レイアウト1時間44分、リサイズ版レイアウト1時間
背景・ターゲット
想定案件：展示会出展企業向けのweb告知用バナー制作 支給素材：写真2点 トンマナ：目立つ、親しみやすい、読みやすい 担当工程：画像合成、テキスト配置、サイズ展開
制作会社でのデザインアシスタント業務を想定し、支給素材とトンマナ指定がある前提で、レイアウトの可読性重視でweb広告用バナーと投稿用画像を兼ねて制作。
工程
photoshopにて制作。使用画像はUnsplashとpixabayより引用、商用利用可能。
自主制作
制作時間
1時間
工程
photoshopにて制作。自由変形ツールで輪郭を変形、修復ブラシで不要物の除去、 上にクリッピング用の新規レイヤーを作成し不透明度を下げ、ブラシツールで部分ごとにトーンを明るく暗く塗り、くすみや毛穴を飛ばしました。 塗りレイヤー作成にともなう肌の質感のマット加減の調整をふまえて、バリエーションを2つ用意しました。 使用画像はpexelsより引用、商用利用可能。
自主制作
制作時間
50分
工程
photoshopにて制作。自由変形ツールで輪郭を変形、修復ブラシで不要物の除去、
上にクリッピング用の新規レイヤーを作成し不透明度を下げ、ブラシツールで部分ごとにトーンを明るくし、くすみや毛穴を飛ばしました。
肌の質感をある程度残してあります。
使用画像はUnsplashより引用、商用利用可能。
アイコン含め自主制作
制作時間
ラフ10分、メニュー60分、アクセス10分、ご予約20分、全体調整やアピアランスなど40分
工程
illustratorにて制作。
自主制作
制作時間
晴れ13分、曇り5分、雨17分、強風40分、雷10分、雪25分
工程
illustratorにて制作。強風のアイコンの曲線に難航し、課題が残りました。
自主制作
制作時間
合計3時間
工程
illustratorにて制作。
自主制作
制作時間
合計4時間半
生成と高画質化17分、切り抜き2時間13分、背景レタッチ33分、レイヤー合成と色調補正覆い焼き焼きこみ等1時間半
工程
パブリックドメイン作品と生成AIを用いた画像を元にphotoshopにて作成。切り抜き、色調補正、レタッチ等の加工を行っています。
レースが透けている部分の切り抜きが難航し、課題が残りました。
使用画像は商用利用可能。 Jean Auguste Dominique Ingres
「Joséphine-Éléonore-Marie-Pauline de Galard de Brassac de Béarn (1825–1860) Princesse de Broglie
」1851-53,
Francesco Guardi「Fantastic Landscape」ca.1765
学校課題
制作時間
5時間×7日間+α
背景・工程
担当： ベクターデータ作成、印刷物レイアウト
Illustratorを使用してロゴやピクトグラムをベクターで作成し、
それらを用いて印刷用入稿データをレイアウトしました。
印刷工程を考慮しトリムマークや塗り足しを設けるなど、実務に近い手順を意識して制作しています。
入稿データ完成後の印刷イメージを想定したビジュアルモックの作成は、
架空のクライアントが視覚的に完成形をイメージしやすいよう工夫しています。
再生紙に印刷されることを前提としており、
ホームページの手作り感ある素朴な世界観に沿った色味・素材感になるよう配慮しました。
※印刷物の肉球スタンプ、テーマカラー設定およびWebサイトの画面設計は
他のメンバーが担当しています。
※入稿用データが透過になっており仕上がりイメージの色味がテーマカラーと異なるのは、
紙の色を想定しているためとなります。用紙が白となった場合でもphotoshopにて再生紙画像の描画モードを
乗算から通常に戻し、レイヤー順を下にすることで容易に差し替え可能です。
ホームページへのリンクはこちら
page
自主制作
制作時間
原画1時間、着色2時間
背景
アパレルのグラフィックプリント素材として制作。グッズなどに再利用可能。
工程
まずtayasui sketchesにてタブレットとスタイラスペンで1時間かけて単色版を制作。この段階で陰影や質感を表現しました。 次に影の追加やibispaintにて各レイヤーの彩色を行い、印刷媒体で紙や布の地色が白でない場合にも対応できるよう白の下地を作成。多色版に追加で約2時間。 各工程で増えたレイヤー構成を活かし、配色変更や質感調整が容易なデータ構造となっています。
自主制作
制作時間
合計2時間
工程
illustratorにて制作。既存の自主製作のデータを読み込みベクター化し、レイヤーごとに細部の微調整をし、塗り足し付きのデータが完成。 その後、印刷用のトリムマーク付きのデータを作成。
実際に送信の仕組みは実装していませんがフォームの設置は可能です