わたしのWeb作品集わたしのWeb作品集フリーランスのマークアップエンジニアを目指して勉強中です。
HTML/CSSコーディングを中心に、
実際のWebサイトを意識した制作を行っています。
画面上から下へ、新しい順に掲載しています。
MyPage では、
わたし自身の学びの中で生まれたWebツールをまとめています。
英語やTOEICの学習、日常の中で使えるような、
やさしくシンプルな設計を心がけました。
もしよろしければ、是非こちらも覗いてみてください。
Kindle MyPages では、
これまでの出版物を一覧できるだけでなく、
今後の展開や更新も随時お知らせしています。
読者と作品をつなぐ「やさしい窓口」として、
いつでも最新の情報に触れていただけます。
それぞれの紹介ブロックにあるリンクをクリックすると、
noteの紹介ページや作品をご覧いただけます。
要約：2024年4月、初めてHTMLとCSSに触れ、何もわからない中で生まれた作品「Sunana Restaurant」は、自分にとって「はじめて形になったもの」として特別な存在となりました。
未熟さを理由に公開をためらっていた時期もありましたが、「その時の自分の証を残したい」という気持ちが芽生え、勇気をもって公開する決断に至ります。
それから約1年後、より良い形を目指して「The Curry」プロジェクトを始動し、初めて既存コードの改善に挑戦。
とくにレスポンシブ対応では多くの試行錯誤がありましたが、その過程が確かな手応えと成長につながりました。
The Curryでは複数ページ化、画像のふんわり切替、Flexboxレイアウト、スマホ対応など、数々の機能を実装。
完璧を求めるよりも、「継続すること」に価値を見出し、日々を丁寧に積み重ねる姿勢が、今の自分のゴールだと語っています。
そして最後に、英語でWeb制作を学べるオンラインスクール「Kredo」も紹介し、このnote自体も自身のスパイスのひとつになるよう願いを込めています。
使用スキル：レスポンシブ対応、スライダー、タビング、フェードイン・フェードアウト、ファビコン設定、form使用、モーダル、アニメーション etc
要約：「Chocoholic-sample」は、チョコレートをテーマにしたポートフォリオ作品。
複数ページを構成するにあたり、共通部分はCSSで一元管理し、効率化と統一感を追求しました。各ページの特性に合わせて調整が必要となり、そこが今回の難しいチャレンジでもありました。
使用技術は、HTML（セマンティックタグ、フォーム、アクセシビリティ対応）、CSS（Flexbox・Grid・アニメーション）、JavaScript（DOM操作やイベント処理）など多岐に渡り、特にレスポンシブと演出にこだわりながら仕上げています。チョコ好きな本人らしく、写真選びも楽しく、制作中は終始幸せな気持ちでコーディングが進んだとのこと。
記事の終盤では、Webを学び始めた背景も綴られており、手術の経験や雇用の不安定さをきっかけに「定年後も自力で稼げる技術を」との思いから、マークアップエンジニアを目指したストーリーが語られています。
作品と生き方がじんわり重なる記事です。
使用スキル：レスポンシブ対応、スライダー、タビング、フェードイン・フェードアウト、ファビコン設定、form使用 etc
要約：「Cafe and Coffee-sample」は、初心者ながら複数ページで構成された意欲作。
サンプル画像を元にFigmaでプロトタイプを作成し、HTML・CSS・JavaScriptを駆使してコーディング。スライダーやタブ機能、ショートビデオの埋め込みなどにも挑戦し、自画自賛できるほどの力作に仕上がりました。
制作を振り返ると、技術力や知識がまだ足りないと感じる場面もありましたが、学びの楽しさがそれを上回る実感に。
「早く仕事がしたい」という想いも芽生え、次の作品への意欲がさらに高まっています。
記事の終盤では、これまでの人生経験からWebデザインの学びに踏み出した背景も紹介し、定年後も自力で稼げる技術を求めてマークアップエンジニアを目指すことを決意した経緯を綴りました。
使用スキル：レスポンシブ対応、スライダー、タビング、ファビコン設定 etc
要約：「Resume-Indirectly-sample」は、HTMLとCSSへの理解をさらに深めるために制作したポートフォリオ作品。
サンプル画像を元にFigmaでプロトタイプを作成してからコーディングに入り、アニメーションはあえて取り入れずに仕上げました。
また、JavaScriptの復習も兼ねてグラフ表示に挑戦しましたが、実装の難しさを実感する結果となりました。
記事の後半では、これまでの人生経験をふまえた自己紹介も含まれています。病気や雇用の不安定さを背景に「定年後も自力で働けるスキルを」との思いからWebデザインを学び始め、次第にHTMLとCSSでのコーディングが楽しくなり、マークアップエンジニアを目指す決意へと繋がった流れを綴りました。
学びの積み重ねと着実な一歩一歩が、画面の向こうにしっかりと映し出すように意識しました。
使用スキル：レスポンシブ対応。HTMLとCSSの理解を深めるために制作しました。
要約：HTMLの構造に少し慣れてきたタイミングで、「Sweets sample」という新しいポートフォリオ作品に挑戦。
今回は動きのある画面を目指して、「ボタンをクリックして画面が変化する仕組み」や「画像のスライド表示」にトライしました。
実装はまだ時間がかかる部分もあるものの、自分の成長を感じながらの楽しい挑戦となりました。
記事では作品の紹介に加えて、GitHubページの表示方法も丁寧に解説。さらに、マークアップエンジニアを志すようになった背景として、これまでの人生の転機や学びへの想いを綴りました。
技術習得と自分の未来のために進み続ける姿勢が、ほんのり甘いスイーツのような作品にやさしく染み込んでいる印象になりました。
使用スキル：レスポンシブ対応、スライダー、タビング etc
要約：「Flowerhop-sample」は、これまでの作品同様、HTMLとCSSを中心に構築されたポートフォリオで、今回は画面に動きを加えることなく仕上げています。
少しずつHTMLの構造やメディアクエリの使い方にも慣れてきたと感じる中で、自分の書いたコードによってページが形になっていく喜びを改めて実感。
作品の紹介に続いては、GitHubでの画面確認方法のリンク案内と、自身の経歴にも触れています。
病気や雇用に関する経験から「定年後にも稼げる力を持ちたい」と決意し、2024年からWebデザインの学びをスタート。今ではコーディングに楽しさを見出し、マークアップエンジニアを目指すようになりました。
小さな花のような一枚一枚が、これからの未来を丁寧に彩っていく…そんな優しい作品になりました。
使用スキル：レスポンシブ対応。HTMLとCSSの理解を深めるために制作しました。
要約：「Hotel-sample」は、サンプル画像を参考にFigmaでプロトタイプを作成し、それを元に忠実にコーディングを進めたポートフォリオ作品。
今回は画面遷移の実装をせず、デザイン再現とHTMLの構造理解に重きを置いて制作。HTMLに少しずつ慣れてきた実感があり、メディアクエリの扱いにも自信がついてきたことと、何より、自分の手で画面が形になっていくことが楽しくなってきました。
後半では、人生の転機からWebデザインの道を選んだ背景に触れました。
病気や雇用の不安定さを経て、「定年後も自力で働ける技術を身につけたい」という思いから勉強を始め、HTML＆CSSの楽しさに惹かれ、マークアップエンジニアを目指すようになったという決意を綴りました。学びの喜びと未来への意志がにじむ、決意表明のような仕上がりです。
使用スキル：レスポンシブ対応。HTMLとCSSの理解を深めるために制作しました。
要約：「Makeup-sample」は、Webデザインスクール修了後、理解が浅かった部分を深めるために取り組んだ学習作品です。
デザインの制作過程は省略し、サンプル画像を元にFigmaでプロトタイプをコピー作成。画面遷移の機能は付けず、なるべくシンプルなデザインを選び、HTML & CSSの構造理解に重きを置いて忠実にコーディングを行いました。
コードを書き進める中で、実際に画面が少しずつ完成していく過程が楽しく感じられるようになり、自分の成長への小さな手応えを感じました。
記事後半では、病気や雇用の不安定さをきっかけにWebの学びを始めた背景を振り返りながら、「定年後も自力で収入を得る力をつけたい」という思いのもと、マークアップエンジニアを目指す過程について触れました。
使用スキル：レスポンシブ対応。HTMLとCSSの理解を深めるために制作しました。
要約：「Your Movies」は、Webデザインのオンラインスクール最終課題として制作した、完全オリジナルのポートフォリオ作品です。まだ理解が追いついていない部分もあるなか、Wireframe→Mock-up→Prototypeという設計フローを経て、学んだ知識を総動員してコーディングに挑戦。
当時はまだ、コーディングの楽しさを実感できていませんでしたが、この経験をきっかけに少しずつその魅力に気づいていきます。
制作後にはGitHubへの公開方法も紹介しながら、ポートフォリオとして丁寧に発信。
さらに、病気や雇用の不安定さから「自力で稼げる技術を身につけたい」とWeb学習を始め、HTML & CSSへの興味が広がったことでマークアップエンジニアの道を選んだという背景についても触れました。
使用スキル：レスポンシブ対応、スライダー、タビング etc
Name: Chill
メールで問い合わせる