はじめまして。 ご覧いただきありがとうございます。
飲食店で働く中で店内のPOPやメニュー表などの掲示物を自分でデザイン、印刷したことをきっかけにWebデザインに興味を持ちました。
現在はスクールでHTML・CSS、Photoshop、Illustrator、Figmaなどを学び基礎を身につけている段階です。このポートフォリオには学習中に制作した課題や自主制作の作品を掲載しています。
まだ経験は浅いですがどうぞよろしくお願いいたします。
★★★☆☆
ibispaintにて6年ほど画像素材や印刷データを作っていました。
切り抜き、レタッチ、テキスト挿入、画像合成、色調補正、複数レイヤー構成、クリッピングマスク、
選択範囲、変形、ぼかし、色調整、透過PNG書き出しなど。
Photoshopでバナーの制作や画像の素材化が可能で、
レイヤーマスクや変形などibispaintとの機能の違いを勉強中です。
★★★☆☆
ペンツール、図形ツール、線と塗り、整列、アンカーポイント操作、
カラーパレットの使用、アピアランス、トリムマーク作成、アウトライン化など。
アイコン、ロゴ、ピクトグラム、印刷物などの制作経験があります。
★★☆☆☆
タグの基本（h1〜h6, p, img, a, ul/ol/li,span,divなど）、
class/id、CSSセレクタ、文字色・背景色指定、フォント指定、padding/margin、ボックスモデル、Flexboxなど。
このポートフォリオサイトは授業で配布された基本的なテンプレートをベースにVisual Studio Codeにて加筆修正しながらコーディングしました。
土台となったテンプレートはこちら
page
分からない事はその都度調べて構造や装飾の意味を理解しながら制作しています。
基本的なタグをまだ全ては暗記できておらず操作がまだ不慣れですが、レスポンシブ対応をひとまずのゴールとして着実に身につけていく姿勢で取り組んでいます。
2025/07/27正式バリデーター(Nu Html Checker)でエラーチェック済み
★☆☆☆☆
ワイヤーフレームの作成が可能です。
スクリーンショット画像はこちら
photo
プライベートや業務で作成した作品の一覧です
【制作時間】 chatgpt使用ネタ出し1.5時間、ラフスケッチ10分、Photoshop微修正とIllustrator清書5時間
【背景】
S…Source (本) 情報源、素材、資料、リテラシーの象徴
A…Align (四角と破線)見やすく整列、設計、価値観の統一
H…Handcraft (手)手作り、アナログ要素、aiとの差別化、一点物
O…Output (四角と矢印)仕上げる、作品の完成、成果物として出力、外部化、届ける
「素材を 手作業で 整えて 仕上げる」というロゴなどの画像素材ができるまでの一連の工程や要素を私の名前に因んで可視化しています。
ホームページへのリンクはこちら
page
【制作時間】5時間×7日間+α
【背景】担当： ベクターデータ作成、印刷物レイアウト
Illustratorを使用してロゴやピクトグラムをベクターで作成し、
それらを用いて印刷用入稿データをレイアウトしました。
印刷工程を考慮しトリムマークや塗り足しを設けるなど、実務に近い手順を意識して制作しています。
入稿データ完成後の印刷イメージを想定したビジュアルモックの作成は、
架空のクライアントが視覚的に完成形をイメージしやすいよう工夫しています。
再生紙に印刷されることを前提としており、
ホームページの手作り感ある素朴な世界観に沿った色味・素材感になるよう配慮しました。
※印刷物の肉球スタンプ、テーマカラー設定およびWebサイトの画面設計は
他のメンバーが担当しています。
※入稿用データが透過になっており仕上がりイメージの色味がテーマカラーと異なるのは、
紙の色を想定しているためとなります。用紙が白となった場合でもphotoshopにて再生紙画像の描画モードを
乗算から通常に戻し、レイヤー順を下にすることで容易に差し替え可能です。
【制作時間】1時間+2時間
【背景】まずtayasui sketchesにてタブレットとスタイラスペンで1時間かけて単色版を制作。この段階で陰影や質感を表現しました。
次に影の追加やibispaintにて各レイヤーの彩色を行い、印刷媒体で紙や布の地色が白でない場合にも対応できるよう白の下地を作成。多色版に追加で約2時間。
各工程で増えたレイヤー構成を活かし、配色変更や質感調整が容易なデータ構造となっています。
【制作時間】3時間
【背景】Linerity Curveにて制作。晴れ20分、曇り10分、雨15分、強風20分、雷20分、雪20分。
【制作時間】2時間
【背景】Linerity CurveにてLINEリッチのUIの素材として使用する設定で制作。
ショッピング、店舗検索、お気に入り、お問い合わせ、公式HP。
【制作時間】ibispaint下書き1.5時間+Illustrator仕上げと試行錯誤4時間の合計5.5時間
【背景】操作の練習のためコンセプト未設定で勢いを重視して制作。グリッドスナップを途中から活用しずれを修正。
fが窮屈な事とfとoの接続や矢印の処理には試行錯誤があり、意図とバランスの両立に課題が残りました。
ibispaintにて制作。装飾が多いため載せる内容が少ない名刺を想定しています。 ロゴマークがデザインの一部となっているのがこだわりです。
ibispaintにて制作。instagramのストーリー更新など、何らかの投稿時テンプレート用の添え物としての画像です。
ibispaintにて制作。美術館のホームページからパブリックドメインを複数拝借しコラージュしました。 元データの素材化と同時進行で、AIの生成した絵画風の似顔絵を本人画像に似せるためレタッチを施し、その後絵画と馴染ませました。 顔をお見せできないのが残念ですが、いずれ差し替えた物を掲載予定です。
実際に送信の仕組みは実装していませんがフォームの設置は可能です