ふーしゃのWeb制作ブログ

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

【定期振り返り】12月

【定期振り返り-12月】

中旬より資格試験の勉強時間がひとまずカットされ、コーディングに時間をフル導入できるようになった12月は特に充実した月になった予感です!

色彩検定1級2次を受験

1級2次の受験でした〜!
感触としては、う〜む...という感じ^^;
もう1年かな、というつもりでいますが、結果待ちです。
合否がわかってから、受験記としてまとめる予定でいますー!

コーディング模写12月1つめ: Iamacatデザイン更新

10月に取り組んだnote(https://note.mu/chizumi_/n/n43e918e99656)、デザイン変更に気付いて新しく作ってみました。内容は別記事にまとめています。

fuchsia-84.hatenablog.com

コーディング模写12月2つめ: Shiroコーディングに挑戦

Webコーディング模写でネットサーフィン/エゴサしたところ、「Shiroコーディング」なるコーディング課題を発見。
白いお花を扱うお花屋さんのLPをコーディングする内容でした。まず、デザインをみて完全に一目惚れ。
しかも、note記事にコーディング解説までついている。

...神様か。

自分が見つけたのはnote記事でしたが、note著者のひらともや(Twitter: @hiratomoya)さん・カンプデザインのakane(Twitter: @omsss22)さんに連絡をとることができたので、早速@を飛ばしました。お返事いただけた上、ポートフォリオ掲載許可をいただけました... (うれしすぎて泣いた)

内容は別記事にまとめ、ポートフォリオに掲載しました!

fuchsia-84.hatenablog.com

コーディング模写12月3つめ: Dearly Be Loved(元サイト: Name of love)

9月、Webデザイン模写向けのこちらの書籍

に掲載ページのコーディング模写に取り組みました。

fuchsia-84.hatenablog.com

ポートフォリオ/ブログ/Twitterへの掲載に際し、著作権等々への疑問があったので以下の対応をさせていただきました。

【出版社へ問い合わせ】
書籍掲載のWebサイトについて、模写内容で自分のポートフォリオに掲載可能かをメールにて問い合わせ。
なんと、ありがたくも当日中に回答がきました...!

  • 模写/練習用であることを明記
  • 元Webページurlを明記
  • 画像を著作権等フリーのものに差し替え

以上の対応で問題ないとのこと。
迅速かつ丁寧なご対応、ありがとうございました...!

【画像差し替え】
フリーの画像素材をさがしレイアウト等々を整えました。 元サイトが「Name of love(訳:愛の名の元に)」、ブライズメイド向けドレスショップの海外サイトだったので、愛をテーマに「Dearly Be Loved(訳:最愛の人)」と題して作成させていただきました。

画像をさがすにあたってとっても便利だったのがPixabay
これからたくさんお世話になりそうです。

こうして完成したものがこちら。
(最初に取り組んだ模写ページなので公開できて感慨深い...)
github
公開ページ
12月-3 模写サイト

XDから書き出したSVGを、CSSで操作する

上記サイトのブランドロゴがsvgファイルで実装されていたため、模写にあたって新たに作成することになりました。

PhotoShopやIllustlatorを使用する情報の方が多かったですが、現状あまり触れていないのでXDを使いたい、

XDで作成 - 書き出し - CSSで操作 の流れを知りたい...!

結果、できました!手順は別記事に書く予定です。

作業部屋いどう

実は自分の部屋がない状態で、ちょっと場所があるところに折りたたみ式の机をもってきて1年間やっていました...w
が!家族が使わなくなったディスプレイと部屋が空いて、作業環境が一新されました。
ディスプレイが特にありがたい... 画面分割も、サイトも画面上で大きく見られることに感動。
快適さとありがたみを感じながら、もっとがんばらねばと引き締まる思いです。がんばろう。

ポートフォリオ/HP について

ポートフォリオのコンテンツが増えてきました。
現在Salon.ioでつくったポートフォリオHugoで自作のHPの2つを公開していますが、HP側の方は画像の読み込みが大変遅くなっているので改変が必要そう...
まだ完全オリジナルの自作したサイトがないというところから、オリジナル最初の作品を自身のポートフォリオ自体にしてしまうかどうかも検討。 とはいえ現時点では仮想LPをデザイン〜コーディングを何個かつくってからにしたいということと、 Salon.ioの機能より快適なものを自作できると思えないので、もう少し関連するものを調べてからやってみたいと思いますー

今後

【年内】

  • 画像差し替え対象ブログ記事の修正
  • Webコーディング/デザイン模写

【次月】

  • オリジナルのサイト制作デザイン/ワイヤフレーム・カンプ作成
  • Webコーディング/デザイン模写
  • 色彩検定1級の受験記まとめ