はじめまして。 ご覧いただきありがとうございます。
飲食店で働く中で店内のPOPやメニュー表などの掲示物を自分でデザイン、印刷したことをきっかけにWebデザインに興味を持ち、
その後スクールでHTML・CSS、Photoshop、Illustrator、Figmaなどを学び、webデザインの基礎を身につけました。
このポートフォリオには学習中に制作した自主制作の作品を中心に掲載しています。
まだ経験は浅いですがどうぞよろしくお願いいたします。
★★★☆☆
バナーやSNS投稿用画像の制作、写真のレタッチ業務を想定し、以下のような操作が可能です。
画像合成とレタッチ
スマートオブジェクト、変形、切り抜き(範囲選択とレイヤーマスク、チャンネル操作)、修復ブラシ、色調補正、 ガウスぼかし、ブラシツール(流量、不透明度調整)、クリッピングマスク、覆い焼き・焼き込み、描画モード、複数レイヤー構成
レイアウト
タイポグラフィ調整(フォント、字間、行間、サイズ他)レイヤースタイル(ドロップシャドウ他)
★★★☆☆
ロゴ、アイコン、ピクトグラム、装飾モチーフなどのベクター素材の制作を中心に、以下のような操作が可能です。
図形作成
ペンツール、図形ツール、アンカーポイント操作、整列、パスファインダー(合体、型抜き)、 アピアランス(線と塗り、カラーパレット、グラデーション)、複数レイヤー構成
文字・入稿
トリムマーク作成、文字ツール、アウトライン化など
★★☆☆☆
タグの基本（h1〜h6, p, img, a, ul/ol/li,span,divなど）、
class/id、CSSセレクタ、文字色・背景色指定、フォント指定、padding/margin、ボックスモデル、Flexboxなど。
このポートフォリオサイトは授業で配布された基本的なテンプレートをベースにVisual Studio Codeにて加筆修正しながらコーディングしました。
土台となったテンプレートはこちら
page
分からない事はその都度調べて構造や装飾の意味を理解しながら制作しています。
基本的なタグをまだ全ては暗記できておらず操作がまだ不慣れですが、レスポンシブ対応をひとまずのゴールとして着実に身につけていく姿勢で取り組んでいます。
2026/01/16正式バリデーター(Nu Html Checker)でエラーチェック済み
★☆☆☆☆
ワイヤーフレームの作成が可能です。
スクリーンショット画像はこちら
photo
自主制作
【制作時間】合計4時間
切り抜き35分、画像の色調補正やレイヤースタイル38分、文字タイポグラフィーとレイヤースタイル1時間33分、
リサイズしたバリエーションの作成1時間
【制作条件】想定案件：ネイルサロンのイベントweb告知用バナーと投稿画像の制作 支給素材：写真1点
トンマナ：目立つ、読みやすい、高級感抑え目で親しみやすい、女性的で清潔感を損なわない 担当工程：画像合成、テキスト配置、サイズ展開
【背景】既存のラフ画を使用しphotoshopにて制作。
制作会社でのデザインアシスタント業務を想定し、支給素材とトンマナ指定がある前提で、レイアウトの可読性重視でweb広告用バナーと投稿用画像を兼ねて制作。
【使用画像】fireflyにて生成
自主制作
【制作時間】合計4時間
レイアウトラフ画43分、背景画像クリッピングマスク処理30分、文字レイアウト1時間44分、リサイズ版レイアウト1時間
【制作条件】想定案件：展示会出展企業向けのweb告知用バナー制作 支給素材：写真2点 トンマナ：目立つ、親しみやすい、読みやすい 担当工程：画像合成、テキスト配置、サイズ展開
【背景】photoshopにて制作。
制作会社でのデザインアシスタント業務を想定し、支給素材とトンマナ指定がある前提で、レイアウトの可読性重視でweb広告用バナーと投稿用画像を兼ねて制作。
【使用画像】Unsplashとpixabayより引用 商用利用可能
自主制作
【制作時間】合計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 商用利用可能
アイコン含め自主制作
【制作時間】合計3時間
ラフ5分、店舗検索20分、公式SNS5分、営業時間30分、メニュー35分、新着情報25分、お問い合わせ10分、全体調整やアピアランスなど45分
【背景】illustratorにて制作。
アイコン含め自主制作
【制作時間】合計2時間半
ラフ10分、メニュー60分、アクセス10分、ご予約20分、全体調整やアピアランスなど40分
【背景】illustratorにて制作。
自主制作
【制作時間】合計2時間
晴れ13分、曇り5分、雨17分、強風40分、雷10分、雪25分
【背景】illustratorにて制作。
強風のアイコンの曲線に難航し、課題が残りました。
自主制作
【制作時間】合計3時間
【背景】illustratorにて制作。
自主制作
【制作時間】合計1時間
【背景】photoshopにて制作。自由変形ツールで輪郭を変形、修復ブラシで不要物の除去、
上にクリッピング用の新規レイヤーを作成し不透明度を下げ、ブラシツールで部分ごとにトーンを明るく暗く塗り、くすみや毛穴を飛ばしました。
塗りレイヤー作成にともなう肌の質感のマット加減の調整をふまえて、バリエーションを2つ用意しました。
【使用画像】pexelsより引用 商用利用可能
自主制作
【制作時間】合計50分
【背景】photoshopにて制作。自由変形ツールで輪郭を変形、修復ブラシで不要物の除去、
上にクリッピング用の新規レイヤーを作成し不透明度を下げ、ブラシツールで部分ごとにトーンを明るくし、くすみや毛穴を飛ばしました。
肌の質感をある程度残してあります。
【使用画像】Unsplashより引用 商用利用可能
学校課題
【制作時間】5時間×7日間+α
【背景】担当： ベクターデータ作成、印刷物レイアウト
Illustratorを使用してロゴやピクトグラムをベクターで作成し、
それらを用いて印刷用入稿データをレイアウトしました。
印刷工程を考慮しトリムマークや塗り足しを設けるなど、実務に近い手順を意識して制作しています。
入稿データ完成後の印刷イメージを想定したビジュアルモックの作成は、
架空のクライアントが視覚的に完成形をイメージしやすいよう工夫しています。
再生紙に印刷されることを前提としており、
ホームページの手作り感ある素朴な世界観に沿った色味・素材感になるよう配慮しました。
※印刷物の肉球スタンプ、テーマカラー設定およびWebサイトの画面設計は
他のメンバーが担当しています。
※入稿用データが透過になっており仕上がりイメージの色味がテーマカラーと異なるのは、
紙の色を想定しているためとなります。用紙が白となった場合でもphotoshopにて再生紙画像の描画モードを
乗算から通常に戻し、レイヤー順を下にすることで容易に差し替え可能です。
ホームページへのリンクはこちら
page
自主制作
【制作時間】1時間+2時間
【背景】まずtayasui sketchesにてタブレットとスタイラスペンで1時間かけて単色版を制作。この段階で陰影や質感を表現しました。
次に影の追加やibispaintにて各レイヤーの彩色を行い、印刷媒体で紙や布の地色が白でない場合にも対応できるよう白の下地を作成。多色版に追加で約2時間。
各工程で増えたレイヤー構成を活かし、配色変更や質感調整が容易なデータ構造となっています。
自主制作
【制作時間】合計2時間
【背景】illustratorにて制作。既存の自主製作のデータを読み込みベクター化し、レイヤーごとに細部の微調整をし、塗り足し付きのデータが完成。
その後、印刷用のトリムマーク付きのデータを作成。
実際に送信の仕組みは実装していませんがフォームの設置は可能です