ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。

2021-01-01から1年間の記事一覧

【ウェブデザイン技能検定 3級】受験記 - 合格しました!

背景 Web制作関連の資格をいろいろな試験を受けているけど、国家資格ってあるのかな?と思い調べてみたところ「ウェブデザイン技能検定」がみつかりました。 公式サイトへ 受験資格について、3級・2級・1級と"誰でも受けられる"から"実務経験○年以上まで"と制…

【Webコーディング】オリジナルWebデザイン : 農家の新鮮野菜通販HP

背景 2021年12月、ワイヤーフレームからオリジナルWebデザインをつくる課題に挑戦しました。 fuchsia-84.hatenablog.com 今回はこちらのコーディング作業のまとめになります。 成果物 実際のwebページへ ※Chrome・Safari対応、レスポンシブ対応(2021/12/20) …

【Webコーディング】オリジナルWebデザイン : 農家の新鮮野菜通販HP - 2 SP版コーディング内容のまとめ

背景 お題からワイヤーフレームとデザインカンプを制作するWeb配布課題に取り組みました。(有料noteです) Webデザインカンプを1から作るための説明書|こばやす|Webデザイナー|note 今回はSP版コーディングについてのまとめです。 制作したデザインカンプ…

【Webコーディング】オリジナルWebデザイン : 農家の新鮮野菜通販HP - 1 PC版コーディング

背景 お題からワイヤーフレームとデザインカンプを制作するWeb配布課題に取り組みました。(有料noteです) Webデザインカンプを1から作るための説明書|こばやす|Webデザイナー|note 制作したデザインカンプについてはこちら↓ fuchsia-84.hatenablog.com 今…

【Webデザイン】オリジナルWebデザイン : 農家の新鮮野菜通販HP

背景 お題からワイヤーフレームとデザインカンプを制作するWeb配布課題に取り組みました。(有料noteです) Webデザインカンプを1から作るための説明書|こばやす|Webデザイナー|note 成果物 それぞれブログ記事にまとめています。 PC版デザインカンプ(Figma…

【Webデザイン】オリジナルWebデザイン : 農家の新鮮野菜通販HP - 2 SP版デザインカンプ

背景 お題からワイヤーフレームとデザインカンプを制作するWeb配布課題に取り組んでいます。(有料noteです) 今回はSP版デザインカンプ制作について記事にまとめます! 前回: fuchsia-84.hatenablog.com 課題元: Webデザインカンプを1から作るための説明書|…

【Webデザイン】オリジナルWebデザイン : 農家の新鮮野菜通販HP - 1 PC版デザインカンプ

背景 お題からワイヤーフレームとデザインカンプを制作するWeb配布課題に取り組みました。(有料noteです) Webデザインカンプを1から作るための説明書|こばやす|Webデザイナー|note 成果物 ワイヤーフレーム デザインカンプ 制作スケジュールと工数 12/7 …

【Webコーディング】オリジナルWebデザイン : 親しみのわく下町の美容室HP

背景 2021年6月、ワイヤーフレームからオリジナルWebデザインをつくる課題に挑戦しました。 fuchsia-84.hatenablog.com 課題元: 【美容室編】Webデザイン実践課題配布!(ポートフォリオ掲載OK) | PENGIN BLOG 今回はこちらのコーディング作業のまとめにな…

【Webコーディング】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 2 SP版コーディング内容のまとめ

背景 2021年6月に取り組んだWebデザイン制作課題のコーディングを進めています。 fuchsia-84.hatenablog.com fuchsia-84.hatenablog.com 課題元: 【美容室編】Webデザイン実践課題配布!(ポートフォリオ掲載OK) | PENGIN BLOG 今回は、こちらのSP版コーデ…

【Webコーディング】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 1 PC版コーディング内容のまとめ

背景 2021年6月、Webデザインの制作課題に取り組みました。 fuchsia-84.hatenablog.com 課題元: 【美容室編】Webデザイン実践課題配布!(ポートフォリオ掲載OK) | PENGIN BLOG 今回は、こちらのPC版コーディングを終えたので記事にまとめていきます! 成果…

【Webコーディング】Google Map PlatformでGoogle Mapをカスタムしてみた【HTML/CSS】【JavaScript】

背景 Google Mapが埋め込まれたWebサイトはたくさんありますが、 Google Map Platformでカスタマイズができるということで試してみました。 ググって出てきた記事内容とは画面レイアウトが変わっていたり必要な情報が異なっていたりしたため、備忘録がてら記…

【Web制作】自作Webサイトを多言語対応してみた【Webコーディング】

背景 先日コーディングした水族館の仮想HPで、多言語切替が未実装だったので今回取り組んでみます。 fuchsia-84.hatenablog.com 現状まとめ(言語切替機能実装前) 日本語版のみ作成(スタイル・スクリプト適用済) ヘッダーに言語切替メニュー Github Pagesで公…

【Web制作】ポートフォリオサイトにOGPつけてみた

背景 OGPとは SNS等でURL共有した際に出てくるこれ! 画像や説明文などと一緒に表示され、クリックすると該当ページに飛べます。 以前 #架空サイトPJ で制作した水族館の仮想HPデザインのコーディングです。 PC版を記事にまとめました!【Webコーディング】…

【Webコーディング】オリジナルWebデザイン : 水族館の仮想HP

背景 2020年夏頃、ワイヤーフレームからオリジナルWebデザインをつくる課題に挑戦しました。 fuchsia-84.hatenablog.com 今回はこちらのコーディング作業のまとめになります。 成果物 実際のwebページへ ※Chrome・Safari対応、レスポンシブ対応(2021/8/30) ※…

【Webコーディング】オリジナルWebデザイン : 水族館の仮想HP - 2 SP版コーディング内容のまとめ

背景 先日PC版コーディングを終えたページのSP版コーディングについてです! fuchsia-84.hatenablog.com 成果物 実際のWebページをみる(GitHub Pages) ※Chrome/Safari対応、レスポンシブ済 2021/8/30現在 #架空サイトPJ レスポンシブ対応完了しましたキャプ…

【Webコーディング】オリジナルWebデザイン : 水族館の仮想HP - 1 PC版コーディング内容のまとめ

背景 2020年7月、Webデザインの制作課題に取り組みました。 fuchsia-84.hatenablog.com 今回は、こちらのPC版コーディングを終えたので記事にまとめていきます! 成果物 実際のWebページ(Github Pages) ※Chrome/Safari対応、PCのみ対応 (2021/8/26現在) 下に…

オリジナルのギャラリーポートフォリオをつくってみた【Webデザイン】【Webコーディング】【JavaScript/jQury】

記事にするのが遅くなりましたが、今年リニューアルしたポートフォリオの制作についてまとめてみました! 背景 筆者のこれまでのポートフォリオはこんな履歴でした↓ HugoテーマをNetlifyデプロイ(2019/1) Hugoテーマ使用のポートフォリオ できたこと : はじ…

【HTML5プロフェッショナル認定試験 レベル1】受験記 - 合格しました!

背景 コロナ禍で自粛を極める中、Web制作関連で新たに資格を取得しようと思い、主にjavascriptに関わるもので調べ、受験しました。 html5exam.jp 受験の準備 勉強期間 2ヶ月ほど 教材 大きく2つ使用しました。 まず、書籍から。 HTML5プロフェッショナル認定…

【Webデザイン】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 2 SP版デザインカンプ

背景 公開されているワイヤーフレームからカンプ制作する課題です。 【ポートフォリオ掲載OK!】実践的なWeb制作課題を配布します | PENGIN BLOG 前記事のPC版カンプをもとに、SP版カンプも制作しました。 成果物 画像 SP版デザインカンプ 制作スケジュール…

【Webデザイン】オリジナルWebデザイン : 親しみのわく下町の美容室HP - 1 PC版デザインカンプ

背景 公開されているワイヤーフレームからカンプ制作する課題です。 【ポートフォリオ掲載OK!】実践的なWeb制作課題を配布します | PENGIN BLOG PC版のデザインカンプから先に作成しました。 理由としてはワイヤーフレーム上にお客様側から掲載要望に上がっ…

【Webデザイン】オリジナルWebデザイン : 親しみのわく下町の美容室HP

背景 実務に近い形のワイヤーフレームからwebデザインカンプを制作する課題ページを見つけたので、取り組んでみることにしました。 課題ページ↓ 【ポートフォリオ掲載OK!】実践的なWeb制作課題を配布します | PENGIN BLOG 成果物 PC版デザインカンプ(プロト…

色彩検定1級受験記【合格しました!】

昨年度、1次合格も2次試験で不合格となった色彩検定1級。 今年再挑戦してみました! 結果は見事、合格!! 受験記として、まとめておきます。 1次試験(今回は免除) 1次試験に合格すると、その後2年間(つまり2回分)の受験で1次試験が免除されます。 申込段階…